CSS是必须以HTML文档标签为基础，如果没有HTML的标签就更谈不上CSS了。现在CSS最新的版本是CSS3.0，但是版本的兼容性不是特别好，包括IE8对CSS3支持的也不是特别好，但是到了IE9开始，CSS3就支持的相对好一点了。所以我们要使用CSS2.1的标准去开发CSS3.0的样式表单。
下面我们先打开一个普通的网页
这样我们就大致了解了HTML和CSS的关系：
CSS中只有一种注释/* */。
引入CSS的方式：
1 所有的标签都有一个默认的样式，我们称之为浏览器样式，或者默认样式。
2行内样式：
行内样式是通过在标签中设置style属性来达到实现控制标签的样式的效果。
例如：<h1 style="color: red; font-size: 12px;">CSS</h1>
CSS字体就会在浏览器中显示为红色，12像素的大小。
即style属性中可以设置多条的CSS样式。
3内嵌（嵌入，内部）样式：
在head标签中添加一个style标签，标签中有一个type属性，默认值就是text/css，可以省略。
<style type="text/css">
p {
}
ul{
}
</style>。
color：前景色
background-color：背景色
4外部样式，外联样式。（link）（最常见）
通过link标签把CSS文件引入到HTML页面中来。
<link rel="stylesheet> href="CSS/main.css">
rel是relation关系的意思，link样式表单与当前页面的关系是stylesheet样式表。
href指向html文件根目录下CSS文件夹中的mian.css文件。
就在main.css文件中直接输入a{color：yellow}
网页中的a标签内容就会变成黄色。
注意：
使用外部样式可以很容易把我们在HTML页面当中的样式挪到一个单独的CSS文件里面去，非常容易进行管理，还可以达到不同页面共用一个CSS文件。
5导入样式（不推荐使用）
还可以在css文件中用@import url（文件地址）进行导入CSS文件。
例如：
这样a标签的前景色变成了黄色，背景色变成了蓝色。
CSS的基本语法：
![]()
image.png
有多条CSS声明时，建议分开到多行中去写，不要挤到一行，最好一行中只写一条CSS声明。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
通配符选择器：
*{
}
*代表选择当前页面中的所有标签，也就是括号中的属性会应用到所有标签中。
而且通配符的穿透力很强，优先级高于继承的样式，会覆盖继承的样式。一般不用。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
ID选择器：
ID选择器是可以帮助我们选择当前页面中唯一id值的标签，根据标签的ID属性值进行选取设置样式。 ID选择器的符号是#号。
HTML标签中ID的属性值在一个页面中必须是唯一的。
ID的命名不是随便取的，有一定的规范：
1只允许出现字母（大小写均可，严格区分）、下划线、数字。也就是说id=“laohe”和id=“laoHe”不冲突。
2只允许以字母开头
3命名没有长度限制，可以是一个字母，也可以是多个。不过不建议太长。
4不允许出现标签名。（不是硬性规定）
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
类选择器：
类选择器，是对HTML标签中class属性进行选择。CSS类选择器的选择符是"."。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
ID选择器和类选择器的区别：
1、相同的class属性值，可以在HTML中出现多次，而ID属性值在页面中只能出现一次。
2、一个class的属性可以有多个值，也就是说一个标签可以有多个class类。
建议尽量使用类选择器。
使用ID的情况：当确实能唯一确定当前页面中标签只会出现一次，这时候可以使用ID选择器。
如果不能保证相同作用的标签在页面中只出现一次，那么这时候就选择使用类选择器。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
复合选择器之标签指定式选择器：
![]()
image.png
h3.class{} 该选择器只会对含有该class的h3标签起作用，而对h3标签和其他只含有该class属性的标签不起作用。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
后代选择器：.class h3
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
先找到.box对应的标签，然后找到它的后代当中所有的li标签。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
复合选择器之并集选择器：.class,h3
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器，class类选择器，id选择器等），都可以作为并集选择器 的一部分。如果某些选择器定义的样式完全相同，或者部分相同，就可以利用并集选择器为他们定义相同的css样式。
也就是说只要是满足这个类或者h3标签的，都可以享受这个CSS设置的声明。
上下两种CSS声明是一样的。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
复合选择器之子元素选择器：
子代选择器：是让css选择器智能选择儿子辈的元素。
例如：h1>strong{color:red;}
解读为:选择器h1>strong可以解释为“选择作为h1元素子元素的所有strong元素”。尖括号和选择器之间可以有空格也可以没有，没有限制。
建议：选择器和尖括号之间有空格。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
属性选择器：
把拥有id属性的h1标签选择出来：
把拥有id属性和class属性的h1标题选出来，把含有type=“text”属性的input标签选出来：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS伪类选择器：
:link
伪类将应用于未被访问过的链接。IE6不兼容，解决此问题，直接用a标签。
:hover
伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接。IE7+所有元素都兼容。
:active
伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited
伪类将应用于已经访问过的链接。
:focus
伪类将应用于拥有键盘输入焦点的元素。
打开网页后，未被访问过的链接会变成red色，
被访问过的链接会变成purple，
当鼠标悬停在连接上的时候背景色会变成silver，前景色变成white，
当鼠标点击一个链接的时候该链接会变成黄色。
LoVe HAte顺序原则：CSS有一个层叠的特性，如果不按顺序 可能会出现混乱。
focus就是对获得焦点的链接产生的效果，Tab可以切换焦点的位置。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS层叠性：（层叠性是指在样式的优先级相同的情况下才会考虑）
标签显示的颜色是最后一次被设定的颜色。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS继承性：
当我给div设置样式的时候，作为孩子的p标签中的字体也受父容器中设置字体样式的影响。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS的优先级：（层叠性是指在样式的优先级相同的情况下才会考虑）
优先级：行内样式>id选择器>类选择器>标签选择器。
例如：文字显示为id选择器的属性绿色，而不是类选择器的红色。
结论1：继承的样式要大于默认的样式。
结论2：通配符选择器的样式的优先级比继承样式的优先级要高。
结论3：标签的选择器的优先级要高于通配符选择器的优先级。
结论4：类选择器的样式的优先级要高于标签选择器的样式的优先级。
结论5：id选择器的优先级要高于类选择器的优先级。
结论6：行内样式的选择器的优先级高于id选择器的优先级。
当含有多种样式时，含有最高优先级样式的越多就显示该样式。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS设置标签模式display属性：
![]()
image.png
例如：通过display属性可以使块级元素变成行内模式的标签：
通过设置display为none，可以让整个标签在页面中被移除掉，不影响页面布局。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS的颜色的表示：
![]()
image.png
十进制：rgb（X,X,X）
十六进制：#XXX
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS的长度单位：
![]()
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS设置字体大小：
![]()
image.png
相对大小是取决于你所使用设备的屏幕分辨率决定的，
而绝对大小是现实中多大在屏幕中就显示多大。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
font-family设置字体类型：
![]()
image.png
英文字体不需要加双引号，但是字体的类型名字是英文单词而且英文单词中间有多个单词组成，中间有空格的时候要加双引号。
escape（）使用例子如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
fonst-weight设置字体的粗细：
![]()
image.png
normal：正常不加粗
bold：加粗
bolder：更粗
lighter：更细
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
fonst-style设置字体的样式：
![]()
image.png
后两种效果基本相同，前者是字体本身有斜体的样式倾斜体，使用它斜体的样式来显示文字。
后者即使字体中没有斜体的样式它也会进行字体倾斜一定的角度。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
结果如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
设置字符的间距和文字的间距：
字间距：letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
单词间距：word-spacing属性用于定义英文单词之间的间距，对中文字符之间的间距没有任何影响。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
text-align: center;居中
text-align: right;右对齐
text-align: left;左对齐
text-decoration: none;去掉下划线
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
行高：上一行文字的底线和下一行文字的顶线之间的距离叫做行距，上面一半的行距归上面的文字，下面一半的行距归下面。行高就是文字的高度加上上面的一半行距再加上下面的一半行距。
CSS定义的行高：两行文本之间的基线的距离。
font：字体文本大小/行高
1.5em=1.5倍的文字大小。
标签属性如果不设置行高，字体默认紧贴行上部显示。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
text-decoation：文本装饰
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
text-indent：首行缩进
text-indent属性用于设置段落首行文本的缩进，只能设置块级标签。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议用em作为设置单位。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
white-space设置文本不换行控制
normal：遇到边界自动换行
nowrap：不管文本有多长它都会继续往后放，直到遇到换行符。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
word-break设置单词自动换行
![]()
image.png
break-all：打断单词换行，充分利用页面空间
keep-all：只有在遇到空格或者换行符出换行
normal：正常换行，不会打断单词的显示
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS盒模型
页面当中任何一个东西都是一个矩形盒子组成的，而网页就是由N多个盒子组成的。
盒子:边框+内边距+内容区域+外边距组成。
内边距：盒子的边框到内容区域边框的距离。
外边距：盒子与盒子边框之间的距离。
内容区域通过content设置，
内边距通过padding设置，
边框通过border设置，
外边距通过margin设置。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS盒模型的边框border设置详解:
边框样式：border-style：单实线solid 、虚线dashed、点线dotted、双实线double。
去掉图片的默认的边框，兼容性最好的写法。（在某些老的浏览器中图片是默认又边框的）
border：0 none。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS内边距padding的使用：
上内边距：padding-top
右内边距：padding-right
下内边距：padding-bottom
左内边距：padding-left
padding属性合写：
内边距是享有背景色的，它可以被背景色穿透。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS外边距margin的详解:
上外边距：margin-top
右外边距：margin-right
下外边距：margin-bottom
左外边距：margin-left
合写：margin：10px 200px 上下10像素，左右200px
margin： 上 右 下 左
