精通CSS：掌握网页设计的艺术

css

层叠样式表

网页实际上是一个多层结构，通过css可以分别为网页的每一层来设置样式，而最终我们看到的只是网页的最上边一层。

总之一句话，css是用来设置网页中元素的样式。

1.内联式或行内样式

在标签中通过style属性来设置元素的样式。

问题：使用行内样式只能对一个标签生效。

如果希望影响到多个元素必须在每个元素中都复制一遍，并且，当样式表发生变化时，需要我们对每一个标签进行修改。注：（开发是决不能使用）

2.内部样式

将样式写在head中style标签里

然后通过css选择器来选中元素并为其设置样式。

可以同时对多个标签设置样式，并且修改时只修改一处即可。

内部样式可方便的对样式进行复用。

问题：只能在一个网页中引用，没有跨网页使用的特点。

3.外部样式

把样式写在外部css文件中，使用link标签在head中引用外部css文件。

意味着只要想使用样式就可以引用

使得样式可以在不同网页中进行复用

将样式表写在外部的css文件中，可以使用浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

css的基本语法

选择器+声明块

选择器，通过选择器可以选中页面中的指定元素

声明块，来指定要为元素设置的样式

声明块是由一个个声明组成的，声明是一个名值结构。一个样式名对应一个样式值。 以 ： 连接 ；结尾

选择器

元素选择器：作用根据标签名选定的元素

语法：标签名｛｝

id选择器：作用根据id属性名选中一个元素

语法：#id属性名｛｝

类选择器：根据class属性选择一组元素

语法：.class属性名｛｝

通配选择器：选中页面中所有元素

语法*{}

交集选择器：选中同时符合多个条件的元素

语法：选择器1选择器2选择器3｛｝

交集选择器中如果有元素选择器，必须以元素选择器开头。

并集选择器：同时选择多个选择器对应的元素

语法：选择器1，选择器2，选择器3｛｝

关系选择器

1-后代选择器：选中指定元素中的指定后代元素。

语法：祖先 空格 后代｛｝

2-子元素选择器：选中指定父元素的子元素

语法：父元素>子元素｛｝

3-兄弟选择器：选择下一个兄弟

语法：兄+弟｛｝

选择下边所有的弟

语法：兄～弟｛｝

属性选择器

[属性名]选择含有指定属性的元素

[属性名=属性值]选择指定属性和属性值的元素