1.CSS样式由选择符（又称选择器，指明网页中要应用样式规则的元素）和声明组成，而声明又由属性和属性值组成。
2.在CSS样式表中可以使用/*……*/来进行注释说明。
3.插入CSS样式表的三种方式：
（1） 内联式：将CSS代码直接写在现有的HTML标签中。
如：<p style="color：red；font-size：12px">内容</p>。 样式代码要写在style的双引号之间。
（2）嵌入式：将CSS样式代码写在<style type="text/css"></style>标签之间。
（3）外部式：使用<link>标签将CSS样式文件链接到HTML文件内。
如： <link href="base.css" rel="stylesheet" type="text/css"/>。 rel="stylesheet"指使用的是外部样式表。
三种样式的优先级：内联式>嵌入式>外部式。（就近原则）
4.标签选择器：标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。
5.类选择器。语法：.类选择器名称{CSS样式代码；}。其中类选择器名称可以任意起名，但不要起中文。
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>
第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/
6.ID选择器。与类选择器类似，但有一些差别：为标签设置id="ID名称"，而不是class="类名称"。ID选择符的前面是“#”
7.类和ID选择器的区别：
相同点：可以应用于任何元素。
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
3.子选择器：即大于符号（>），用于选择指定标签元素的第一代子元素。如：.food>li { border:1px solid red ; }。
4.包含（后代）选择器：包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如：.first span { color : red ; }
包含选择器与子选择器的区别：子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。 总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
5.通用选择器：通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素。
如：*{ color : red }
6.伪类和伪元素选择符：一组CSS预定好的类和对象，不需要进行id和class属性的声明，能自动被支持CSS的浏览器所识别。
（1）伪类的基本格式：选择符：伪类{ 属性：值 }
伪类 用途
:link 超链接未被访问时
:hover 对象（一般为超链接）在鼠标划过时
:active 对象（一般为超链接）被鼠标单击时
:visited 超链接被访问后
:focus 对象成为输入焦点时
:first-child 对象的第一个子对象
:first 页面的第一页
（2）伪元素的基本格式：选择符.类：伪元素{ 属性：值 }
伪元素 用法
:after 设置某个对象之后的内容
:first-letter 对象内容的第一个字母
:first-line 对象内第一行
:before 设置某个对象之前的内容
7.特殊性：有时候我们为同一个元素设置了不同的CSS样式代码，此时浏览器会根据权值的大小来判断使用哪种CSS样式。
权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值为100。
例如：
8.层叠：在HTML文件中对于一个元素可以有多个CSS样式存在并且这多个CSS样式具有相同的权重值，此时浏览器会根据这些样式表的先后顺序来决定，处于最后的CSS样式表将被应用。
9.重要性：在一些特殊情况下我们需要为某些样式设置就有坐高权值。此时可以使用！Important来解决。
当网页制作者不设置CSS样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式。此时样式的优先级：用户自己设置的样式>网页制作者的样式>浏览器默认的样式，但！important是个例外，权值高于用户自己的设置。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
