本文详细介绍了CSS样式表的三种类型：内联样式、内部样式和外部样式，强调了样式表的作用和不同用法。内容涵盖CSS语法、选择器、块元素和内联元素的概念及其区别，以及常用选择器的使用，如元素选择器、ID选择器、类选择器等。此外，还讨论了样式的继承、选择器的优先级以及伪类选择器的应用。通过本文，读者可以全面了解CSS的基础知识并掌握其在网页设计中的应用。
目录
CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS样式表的组成：
1.样式表
2.规则
3.选择器+声明块
4.声明
5.css属性+css属性值组成的键值对
浏览器读取编译css的顺序是从右往左
CSS样式表
内联样式表
<p style="color:red;font-size:40px"></p>可以将CSS样式编写到元素的style属性当中。将样式直接编写到style属性中，这种样式我称为内联样式。内联样式只对当前的元素中的内容起作用，所以内联样式不方便复用。内联样式属于结构与表现耦合，不方便后期维护，不推荐使用。
内部样式表
<style type="text/css">
p{
color:red;
font-size=40px;
}
</style>也可以将CSS样式编写到head中的style标签里。将样式表编写的style标签中，然后通过CSS选择器选中指定元素。可以同时为这些元素一起设置样式，这样可以使样式进一步复用。将样式表编写到style标签中，也可以使表现和结构进一步分离，它也是推荐的使用方式。
外部样式表
<link rel="stylesheet" type="text/css" href="style.css" />还可以将样式表编写到外部的CSS文件中，然后通过link标签来将外部的CSS文件引入到当前页面中，这样外部文件中的CSS样式表将会应用到当前页面中。
将CSS样式统一编写到外部的样式表中，完全使结构和表分离，可以使样式表可以在不同的页面中使用。最大限度地使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存，加快用户访问的速度，提高了用户体验。所以在开发中，该方式是最推荐的方式。
CSS语法
注释
/*注释*/CSS的注释，必须编写在style标签中，或者是CSS文件中。
选择器
通过选择器可以选中页面中指定元素，并且将声明块中的样式应用到选择器对应的元素上。
声明块
声明块紧跟在选择器的后边，使用一对{ }括起来。声明块实际上就是一组一组的名值对结构。这一组的名值对称为声明。
在一个声明块中可以写多个声明，多个声明之间使用;隔开，声明的样式名和样式值之间使用:来连接。
块元素和内联元素
块元素
<div></div>div就是一个块元素。所谓的块元素就是独占一行的元素，无论他的内容有多少。
同时p、h1、h2、h3等都是块元素。div标签没有任何语义，就是一个纯粹的块元素。并且不会为它里面的元素设置任何的默认样式。
div元素主要用来对页面进行布局。
内联元素
<span></span>span是一个内联元素（行内元素）。所谓的行内元素，指的是只占自身大小的元素，不会占用一整行。
同时a、img、iframe等都是内联元素。span标签没有任何语义，span标签专门来选中文字，然后为文字来设置样式。
作用
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式。一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素（a元素可以包含任意元素，但是除了它本身；p元素不可以包含任何块元素）。
常用的选择器
元素选择器
作用：通过元素选择器可以选择页面中的所有指定元素。
语法：标签名{ }
id选择器
作用：通过元素的id属性值选中唯一的一个元素。
语法：#id属性值{ }
类选择器
作用：通过元素的class属性值选中一组元素。
语法：.class属性值{ }
（class属性和id属性类似，只不过class属性可以重复。拥有相同class属性值的元素，我们说他们是一组元素。可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开）
选择器分组（并集选择器）
作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器n{ }
通配选择器
作用：可以用来选中页面中的所有元素。
语法：*{ }
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器n{ }
（对于id选择器来说，不建议使用复合选择器）
后代元素选择器
作用：选中指定元素的指定后代元素。
语法：祖先元素 后代元素{ }
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
（IE6及以下的浏览器不支持子元素选择器）
其他子元素选择器
:first-child 可以选中第一个子元素
/*选中body里的p标签*/
body > p:first-child{
background-color:yellow;
}:last-child 可以选中最后一个子元素
p:last-child{
background-color:yellow;
}:nth-child(数字) 可以选中任意位置的子元素
p:nth-child(1){
background-color:yellow;
}
（even表示偶数位置的子元素；odd表示奇数位置的子元素）
:first-of-type
:last-of-type
:nth-of-type
这些与child选择器非常类似。只不过child是在所有子元素中排列，而type是在当前类型的子元素中排列。
兄弟元素选择器
一、作用：可以选中一个元素后紧接着的指定兄弟元素。
语法：前一个 + 后一个 { }
二、作用：可以选中一个元素后边所有的指定兄弟元素。
语法：前一个 ~ 后一个 { }
子元素
元素之间的关系
父元素：直接包含子元素的元素。
子元素：直接被父元素包含的元素。
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素。
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素。
兄弟元素：拥有相同父元素的元素叫兄弟元素。
伪类选择器
伪类专门用来表示元素的一种特殊的状态。
比如：访问过的链接，普通的超链接，获取焦点的文本框。
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。
有四个伪类可以根据访问者与该链接的交互方式，将链接设置成4种不同的状态。
正常链接----a:link
访问过的链接----a:visited（只能定义字体颜色；浏览器通过历史记录来判断链接是否访问过）
鼠标滑过的链接----a:hover
正在点击的链接----a:active
:hover和:active也可以给其他元素设置（IE6中，不支持对超链接以外的元素设置）
否定伪类
作用：可以从已选中的元素中剔除出某些元素
语法：:not(选择器)
p:not(.hello){
background-color:yellow;
}其他伪类
获取焦点----:focus
input:focus{
background-color: yellow; /*文本框获取焦点以后，修改背景颜色为黄色*/
}选中的元素----::selection（该伪类在火狐浏览器中要使用::-moz-selection）
伪元素
使用伪元素来表示元素中的一些特殊位置
首字母----:first-letter
首行----:first-line
指定元素前----:before
指定元素后----:after
（一般before或after都需要结合content样式一起使用，通过content可以向before或after的位置添加一些内容）
属性选择器
title属性，这个属性可以给任何标签指定。当鼠标移入到元素上时，元素的title属性的值将会作为提示文字显示。
属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素。
常用语法：[属性名] 选取含有指定属性的元素
p[title]{
background-color: yellow;
}[属性名=“属性值”] 选取含有指定属性值的元素
p[title="hello"]{
background-color: yellow;
}[属性名^=“属性值"] 选取属性值以指定内容开头的元素
p[title^="ab"]{
background-color: yellow;
}[属性名$="属性值“] 选取属性值以指定内容结尾的元素
p[title$="c"]{
background-color: yellow;
}[属性名*=”属性值“] 选取属性值以包含指定内容的元素
p[title*="b"]{
background-color: yellow;
}样式的继承
在CSS中，祖先元素上的样式也会被后代元素所继承。
利用继承可以将一些基本在样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
但是，并不是所有的样式都会被子元素所继承，比如：背景相关的样式、边框相关的样式、定位相关的样式都不会被继承。
选择器的优先级
当使用不同的选择器，选中同一个元素并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级决定。
优先级高的优先显示。
优先级规则：
内联样式，优先级 1000
id选择器，优先级 100
类和伪类， 优先级 10
元素选择器，优先级 1
通配*， 优先级 0
继承的样式， 没有优先级
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较。
但是注意，选择器优先级计算不会超过它的最大的数量级（并集选择器中的优先级是单独计算），如果选择器的优先级一样则使用最后的样式。
可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，将会优先于所有的的样式显示甚至超过内联样式，但是在开发中，尽量避免使用。
伪类的顺序
涉及a的伪类一共有四个，而这四个选择器的优先级是一样的。
该四个伪类的顺序：
:link
:visited
:hover
:active
733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
