css总结（一）

来源：互联网发布：上海动悦网络靠谱吗编辑：程序博客网时间：2024/05/20 06:30

1、构造CSS规则
 CSS主要由3个基本部分组成：对象、属性、值。

 对象，指定了对哪些网页元素进行设置，也称作：选择器。
 HTML的标签样式是通过不同的CSS选择器进行控制的。
 选择器有三大种类：基本选择器、复合选择器、特殊选择器。

 --基本选择器：标签选择器、id选择器、类选择器。
 一个HTML页面由很多不同的标签组成，标签选择器是不可少的，
 h1,p,div {
 color : red;
 font-size : 25px;
 }
 标签选择器的名称 声明 声明
 tagName {属性：值; 属性：值}

 - 类选择器
 .className {属性：值;属性 : 值;}

 类选择器的名称可以有用户自己定义，属性和值都跟标签选择器一样。
 .myred {
 color : red;
 font-size : 20px;
 }
 .myblue {
 color : blue;
 font-size : 21px;
 }
 .mygreen {
 color : green;
 font-size : 22px;
 }

 类选择器的使用：
 class选择器
 class选择器

 如果某个标签使用特殊的，有别于其他的样式，可以使用类选择器。

 - ID选择器
 #idName {属性 : 值; 属性 : 值;}
 ID 选择器只能在html 页面中使用一次，针对性更强
 在html 的标签中只需利用ID 属性，就可以直接调用CSS 中的ID 选择器
 <style>
#bold{
 font-weight:bold;
 }
 #green{
 font-size:30px;
 color:#009900;
 }
</style>

<body>
 ID 选择器1
 ID 选择器2
 ID 选择器3
 ID 选择器4
</body>

应该养成良好的编写习惯，一个id 只能赋予一个html 标签。

-- 复合选择器
复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器，它包括交集选择器、并集选择器和后
代选择器。

- 交集复合选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标签选
择器，第二个必须是类选择器或者ID 选择器。这两个选择器之间不能有空格，必须连续书写。
这种方式构成的选择器，将选中同时满足前后二者定义的元素，也就是前者说定义的标签类型，并且指定了后者
的类别或者id 的元素，因此被称为交集选择器。
 p{...}
 .special{...}
 p.special{...} // 这就是交集复合选择器

 这里就使用了交集选择器
 - 与交集选择器一样，还有一种并集选择器，或者称为集体声明。它的结果是同时选中各个基本选择器所选择的范
围。任何形式的选择器（包括标签选择器、类选择器、ID 选择器）都可以作为并集选择器的一部分。
并集选择器是多个选择器通过逗号连接而成的。在声明各种CSS 选择器时，如果某些选择器的风格是完全相同
的，或者部分相同，就可以利用并集选择器同时声明风格相同的CSS 选择器。
 h1,h2,h3,h4,p,div{...} // 并集选择器

 - 在CSS 选择器中，还可以通过嵌套的方式对特殊位置的HTML 标签进行声明，例如当与之间包含
标签时，就可以使用后代选择器进行相应的控制。后代选择器的写法就是把外层的标签写在前面，
内层的标签写在后面，之间用空格分隔，当标签发生嵌套时，内层的标签就成为外层标签的后代。
 p span{...}
 span{...}