css又被叫做层叠样式表。
学习css的话可以先学习样式表，然后在学习样式。
css样式表：
1，行内样式表
2，内部样式表
3，链接样式表
4，导入样式表
一.行内样式表：
我们将行内样式表理解为紧跟标签的样式表，类似：<p style="样式值">....</p>
二.内部样式表
内部样式表一般也是写在html文件中的，一般是写在html文件的head标签中。类似：
<head>
<style>
样式
</style>
</head>链接样式表一般写在外部css文件中，这样写最大的好处是实现了表现和样式的分离。一般在html文件中使用的话t也是在head标签种，类似：
<head>
<link href="路径" type="text/css" rel="stylesheet"/>
</head>需要注意：link标签中type和rel是固定的，不可以更改和删除。其次就是对于路径的理解。
路径：
1.相对路径 ：这个文件所在的路径所引起的和其他文件(或文件夹)的关系。
1.对于同在一个文件夹中的文件，使用的时候直接使用它的名字就可以。
2.对于一个文件(image1.jpg)在文件夹(例如：image文件夹)中里面,一个在文件夹外面的情况，使用的时候：../image/image1.jpg
3.对于一个文件在文件夹(image)里面，另一个文件在另一个文件夹(html)的里面，使用的时候：image/image1.jpg
2.绝对路径：一般是指文件所在的绝对位置，通常是从盘符开始的路径
1.对于本地的绝对路径的引用，使用的话：file:///+地址(在路径开头加上file:///是为了多浏览器的兼容)
2.对于网络文件的引用，直接就是该文件的网络地址就可以了
四.导入式样式表
导入式样式表其实和链接样式表类似的，都是在外部建立css文件，然后引用给html文件，同样实现了样式和表现的分离。
类似：
<head>
<style>
@import url(路径)
</style>
</head>很简单，在理论上来说行内样式表的优先级是最高的，因为行内样式表距离要加css的标签最近，所以总结起来他们的优先级可以用四个字来描述：就近原则。
第二大部分
css样式的定义：
选择器{样式}
选择器{样式:样式值;....}
注意：在css样式中的某些样式是具有继承性的，也就是说：css中的某些样式不仅可以作用于该标签，还可以作用于该标签的后代中。
css样式选择器：
1.基本选择器
1.全局选择器 ：*{...}
2.标签(标记)选择器 ：标签{...}
3.类别选择器：.className{....}
4.id选择器：#idName{....}
注意：类别选择器和id选择器都是先定义后使用。
类别选择器的特点：
1.同一个页面可以使用多个类别选择器，但是id选择器只能在一个页面出现一次
2.一个类别选择器可以被多个页面使用
id选择器的特点：
1.在一个页面中相同的id名只能出现一次，所以同一个id名的选择器只能在一个页面选择一次。
注意：在样式不一样的情况下，如果是多个类别选择器，则所有的样式都可以实现，使用方法
<p class="className1 className2.....">....</p>
注意：在样式一样的情况下，也就是常说的发生冲突的情况下，这时候需要考虑选择器的优先级：
1.两个都是类别选择器的时候：那个在后面那个就会显示，因为代码是从上向下读的，所以前面的会被后面给代替掉。
2.但是当选择器不一样时，这时候就要考虑选择器的优先级拉
选择器的优先级：
行内>id选择器>类别选择器>标记选择器>全局选择器>权重
可以用权重来表示：
行内 1000
id选择器 100
类别选择器 10
标记选择器 1
全局选择器 0
权重根据文献是 0.1
举个例子：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：有些情况下，我们可以为某些样式设置最高权重，可以通过!important来实现。!important一般都是写在分号之前。
2.层级选择器
1，群组选择器
群组选择器一般用在这样的情况：
当多个标签都要设置成某种一样的样式时。即(标记1，标记2，....){.....}
类似：h1,span{color:red;}这样的写法相当于：h1{color:red;}
span{color:red;}
2，后代选择器
后代选择器的写法：中间用空格隔开(可以是标签或者其唯一的标记(类或id))
3，子元素选择器
子元素选择器的写法：中间用大于号>隔开(可以是标签或者是其唯一的标记(类或者id))
注意后代选择器和子元素选择器的区别：
后代选择器的话是相对于其所有的后代来说的，包括"儿子"，"孙子"，"重孙子"....等等
子元素选择器的话是相对于其第一代儿子来说的，不包括其儿子后面的代数。
4，动态伪类选择器
动态伪类选择器的话，最常见的地方一般就是a标签。
动态伪类选择器可以分为：
1.标签:link{} 链接时的状态
2.标签:visited{} 访问过后的状态
3.标签:hover{} 鼠标滑过的状态(重要)
4.标签:active{} 鼠标点击的状态
这些情况对于a标签都可以使用，但是对于其他的标签来说最常用的是:hover和:active
5，:nth选择器
：nth选择器的话其实就是将标签设置上了个数；可以将其分为三个部分：
1.标签:first-child{...} 第一个子元素
2.标签:last-child{...} 最后一个子元素
3.标签:nth-child(n){....} 第n个子元素
第三大部分
css的样式：也可以成为css格式化排版。
文字样式(排版)：
1.font-family:... 字体
2.font-size:12px; 字体的大小
3.color:red;#0000;... 字体的颜色
4.font-weight:bold;normal 字体的加粗
5.font-style:italic;... 字体的样式
段落样式(排版):
1.text-align:.. 文本对齐方式
2.text-indent:... 文本缩进
3.text-decoration:... 文本是否加划线
4.line-height:... 行间距
5.line-height:height 保持文本上下居中显示
背景样式(排版)：
1,background-color:.. 背景颜色
2,background-image:url(路径) 背景图片
3,background-repeat: 背景是否平铺
4,background-position:left/center./... 背景位置
注意：背景样式(排版)是复合属性；那么什么是复合属性呢？
复合属性：就是可以将其他的属性复合起来，即只写一个background就可以了。
列表样式(排版)：
1.list-style-type:... 列表符号类型
2.list-style-image:url(路径) 列表的前面的图片
3.list-style-position 列表的前面的位置
注意：列表属性也是复合属性。
4053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
