CSS样式:
一、CSS样式的分类:
1、内部样式表:把代码统一写在当前页面的固定位置
 写在<head>与</head>之间
例如:<style type="text/css">
   写内部样式
</style>

2、外部样式表:把CSS样式代码放在一个单独的 CSS文件中 
 连接外部的样式表<link  href="内部路径或者外部路径" rel="stylesheet" />
3、行间样式表:把CSS样式代码写在标记行内,作为标记的一个属性
例如:<span class="font-size:12px;" >CSS样式</span>
4、CSS代码的组成部分:
由选择器、属性和属性值三部分组成:
语法:
选择器{
    属性:属性值;
    属性:属性值;
    ……
}
二、CSS选择器的类型:
1、标记选择器:
同一个XHTML标记,当CSS属性相同时,用标记选择器
(当对同一种标记的所有对象进行相同样式设置时,用标记选择器)
语法:
标记名称{
   属性:属性值;
   ……
}
p{
   font-size:12px;
}
h2{
    font-size:20px;
}
 
………………
常用的CSS属性:
字号:   font-size:字号;
文字颜色:  color:颜色值;

**********css的常用文本属性
属性                           描述                       可用值
color                用于设置文字的颜色                 颜色值
font-size            用于设置文字的尺寸                 字号大小
font-family          用于设置文字名称,可以使用多个名   字体名称
                     称使用逗号分隔,浏览器按照选后顺
                     序依次使用可用文字
font-style           用于设置文字倾斜样式               normal(正常)/italic(斜体)
font-weight          用于设置文字的加粗样式             normal/bold(粗体)
text-decoration      用于设置文本的修饰线               none(无)/underline(下划线)
2.类选择器
同一XHTML标记,当CSS属性完全相同时,用标记选择器;当CSS属性不同时,用类选择器
当某一个或某几个对象的样式和其他对象的样式不一样时,用类选择器
语法:
.类名称{
     属性:属性值;
     …………
}
注意一:类名称是我们自已起名,但最好起一个有意义的名称;并且类名称是由英文字母、数字、
下划线组成,必须以字母开头.
注意二:类必须应用才能生效:
注意三:不要忘记写点(这对初学者谨记)
应用类
给哪一个标记应用类,就在该标记中加上一个class=“类名称”的属性
<标记    class="类名称" ………………>
 
**********CSS样式之段落样式属性:
含义 属性
行高(行间距) line-height
首行缩进 text-indent
段落对齐方式 text-align:left/right/center
字符间距 letter-spacing
3.ID选择器
ID选择器的用法和类选择器的使用情况相同:
也就是说,使用类选择器的情况下,也可以用ID选择器,
但是这也有优先级别的,看看先应用哪一个(一般使用一个选择器就可以)
在页面中,每一个标记都可以一个name名称和id名称
在同一个页面中,ID名称只能是唯一的,不能重名
name名称和id名称都是标记的属性,所以,写法如下:
<标记    id="id名称"   name="name名称"  …………>
注意一:ID名称也是我们自记起名,同样只能以英文字母开头,由字母、数字、下划线组成.
ID选择器的语法:
#id名称{
    属性:属性值;
    …………
}
注意二:ID选择器在同一页面中,只能应用一次
4.群组选择器
当多个选择器CSS属性相同时,用群组选择器
语法:
选择器1,选择器2,选择器3{
   属性:属性值;
    ………………
}
例如:
body,h1,h2,p
{margin:5px;
padding:5px;
}
 
5.通配选择器
当页面中所有标记有相同样式时,用通配选择器
语法:
*{
    属性:属性值;
     …………
}
 
#############span 标记:        <span>内容</span>
     span标记是不会产生任何结构上的改变,只是为了单纯的应用样式,页添加的标记。
6. 包含选择器
当需要对某一对象中的子对象进行样式设置时,用包含选择器
语法:  父对象选择器  子对象选择器{
                                   属性:属性值;
                                       …………
                                 }
例如:
#d{ font:14px;}
#d   a
{font:12px;}
7.标记指定性选择器
 语法:标记#id名称{                标记#类名称{
                   属性:属性值;                    属性:属性值;
                    …………                  ......
                       }                         }
            指定性更强,增强代码的可读性.
8.伪类.伪对象        (对链接样式进行设置)
a:link{
       属性:属性值;     (正常显示的链接文本的状态)
         …………                 
         }
a:hover{                                          
        属性:属性值;     (鼠标指针放在链接文本之上的状态)
         …………                 
         }
a:active{                                          
        属性:属性值;     (鼠标指针按下链接文本但是没有松开的状态)
         …………                 
         }
a:visited{                                          
        属性:属性值;     (访问后的链接文本的状态样式)
         …………                 
         }
把a:visited放在a:hover之前,才会显示下划线状态(a:hover)
**********css样式属性之边框属性
1.四周边框都相同:border:线条粗细(px)    线条样式   线条颜色;
  线条样式:solid(实线)  / dashed(虚线) / dotte(点状线)
2.四周边框不相同:
    上边框:border-top :  线条粗细   线条样式   线条颜色 ;
    右边框:border-right :线条粗细   线条样式   线条颜色 ;          
    下边框:border-bottom:线条粗细   线条样式   线条颜色 ;          
    左边框:border-left  :线条粗细   线条样式   线条颜色 ;
          
**********CSS属性之padding(边框)属性:
padding控制的是内容和边框之间的距离
1、四周padding都相同:
padding:值;
2、四周padding不相同:
padding-top:值;             上边距
padding-right:值;           右边距
padding-bottom:值;          下边距
padding-left:值;            左边距
3、padding的缩写:
(1)四周都相同:
padding:值;
(2)四周不相同:
padding:值1(上 top)   值2(右 right)   值3(下 bottom)  值4(左 left);
(3)上下相同,左右相同
padding:值1(上、下)  值2(左、右);
**********CSS属性之margin属性:
margin控制的是对象边框与对象边框之间的距离
1、四周margin都相同:
margin:值;
2、四周margin不相同:
margin-top:值;
margin-right:值;
margin-bottom:值;
margin-left:值;
3、margin属性的缩写:
1、四周都一样:
margin:值;
2、上下相同,左右相同:
margin:值1  值2;
3、四周都不相同:
margin:值1  值2  值3  值4;
 注意:一个对象所占空间的位置由以下几个部分组成:
高度:  对象内容高度+上、下padding+上下border+上下margin
宽度:  对象内容宽度+左右padding+左右border+左右margin
 
**********CSS属性之背景属性:
1、背景颜色:
background-color:颜色值;
注意:背景是加在对象边框之内的.(也就是说padding区域可以添加背景,margin区域没有背景)
2、背景图像:
background-p_w_picpath:url(图片路径);
3、设置背景图像的平铺方式:
background-repeat:repeat / repeat-x (水平平铺) / repeat-y(垂直平铺) / no-repeat;
4、设置背景图像的位置:
background-position:水平位置  垂直位置;
水平方向:left   right   center           垂直方向: top    bottom   middle
5、把背景图象固定到屏幕的位置:
background-p_w_upload:fixed;
6.背景的缩写:
  background: blue url(bg7,jpg) no-repeat   fixed 5px   10px ;
**********CSS属性之float属性:
 float属性用于设置对象的浮动方式,使对象尽量靠其父对象的左边或右边对齐.
  float:left / right ;
  当对象浮动后,它不再支撑父对象的高度和宽度.
##########div标记:  <div>内容</div>      DIV称为区域.块
在CSS+DIV排版中,DIV的作用和表格作用一样,是进行定位排版.
 一般把一块完整的对象放在一个DIV中,DIV也是一个块对象.
**********CSS样式之:list-style-type
设置项目符号的列表项的图标为无
list-style-type:none;
**********CSS样式属性之:宽度和高度:
width:值;
height:值;
**********CSS样式属性之:display属性
display属性:设置对象的显示方式:
把行间元素设置为块对象显示:  display:block;
 
**********CSS属性之clear属性:
清除浮动方式的影响:
clear:left/right/both;
 
{一、一列版式:
1、一列固定列宽
2、一列自适应列宽
3、一列居中 :
margin:0px auto      二、两列:   三、三列:}
**********CSS属性之clear属性:
清除浮动方式的影响:
clear:left/right/both;
四、外部样式表:
(1)外表样式表就是把CSS样式单独的写在一个CSS样式文件中
(2)在当前页面链接外部CSS样式文件:
在<head>与</head>之间写:
<link href="CSS文件路径" rel="stylesheet" type="text/css" />
**********CSS属性之position属性:
position属性也是对象定位的一种方法:
(1)position:absolute;   对象的绝对定位
position属性一般情况结合top、bottom、left、right几个属性一起使用;
对象的绝对定位指的是对象相对页面的绝对定位;
(2)对象的相对定位:
position:relative;
对象的相对定位是相对于对象自身位置的改变
**********CSS属性之Z-index属性
z-index属性用来设置当两个对象叠加时的叠加次序
在默认情况下,每一个对象都有一个z-index值,默认值为0;
当两个对象叠加时,z-index值越大,次序越在上面;如果z-index的值相等,那么后面的对象在前面对象的上面
**********CSS属性之overflow属性:
设置当内容超出对象的边界时,如何显示内容的方式
overflow:visible;    设置当对象的内容超出对象边界,让内容可见显示(对象被支撑宽度或高度)
overflow:hidden;      设置超出对象边界的内容为隐藏不显示,对象的宽度和高度不被支撑
overflow:scroll;      当内容超出对象的边界时,以出现滚动条的方式显示内容