首先，什么是CSS？cascading style sheets汉译层叠样式表，WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。

 

　　通俗易懂的说，页面好不好看都由CSS来决定，CSS的学习我们可以按照进阶的步调来走

 

　　第一步：怎么创建CSS？CSS样式表创建的3种方式？

 

　　答：1. 内部样式 ：通过<style></style>标签进行创建，编写在html页面的head当中

 

　　2. 外部样式： 创建css文件，通过<link rel="stylesheet" type="text/css" href="main.css" /> 进行引入，当然还有第二种引入的方式@import url(main.css) ?,那么问题来了，我们该使用哪一个呢？以后更推荐link引入的方式，因为import的方式低版本浏览器不支持，而且在JS操作中，无法对它进行操作

 

　　3. 内联（行内）样式：这个就比较亲民了，写法也很easy直接在标签内部添加style即可。<p style="" ></p>

 

　　总结：以后实际开发中，更推荐的方式是外部样式 。 那么优先级呢？最高的是 内联样式-》内部/外部 看具体的书写顺序

 

　　第二步：知道CSS写在哪了，那具体的CSS要怎么写呢？

 

　　答：1. CSS语法： 选择符{ ?属性：属性值；属性：属性值； ?} 注意分号不可丢

 

　　第三步：选择符是什么？有哪些呢？

 

　　答：1. 选择符的目的就是为了帮助我们找到页面上面的元素

 

　　2. ID选择器：在html中给标签添加ID ，在CSS中通过 ?#ID名{ ?} ?即可找到这个元素。注意#不可改,id不要重复（常用）

 

　　3. Class选择符：在标签中添加class，css文件中通过 .class名称{? } ，可以多个标签都用同一个class，当然一个标签也能用多个class 通过空格分隔（常用）

 

　　4. 通配符：* 一个星号，有了它页面上所有的标签都会生效这个样式，它一般用来设置字体字号的

 

　　5. 标签选择器：html的标签名拿过来直接就是了，例如：p{? }? 当然你这样写完之后，你页面上所有的p标签都会应用这个样式（常用）

 

　　6.? 群组选择符：单个样式已经不能够阻挡你了，那么多个怎么写呢，很简单，通过逗号分隔就OK ，例如：p,a,div{? } .div1,.p1,.a1{ }（常用）

 

　　7. 后代选择符：当你想找到一个元素下的孩子们的时候，你会想到这个选择符，它的用法只需中间加一个空格，例如：div a{? } 这句的意思就是div下面所有的a都会应用你写的这个CSS样式，注意：空格不可少（常用）

 

　　8. 子元素选择符：写法 div > a{? } 和后代的区别呢，很简单，子元素在家谱来说，就是只找到自己的孩子，孙子很明显不归它管

 

　　9. 相邻兄弟选择器：div + a {? } 和div同级的a标签会生效样式，但是要求是必须是睡在上铺的兄弟，对面铺的都不行，必须要挨着div才行

 

　　10.后续兄弟选择器：div——a{ } 这个只要是同级的都可以找到

 

　　第四步：选择符的优先级是个什么顺序？

 

　　答：CSS选择符有权重，如下：

 

　　css中用四位数字表示权重，权重的表达方式如：0，0，0，0

 

　　类型选择符的权重为0001

 

　　class选择符的权重为0010

 

　　id选择符的权重为0100

 

　　子选择符的权重为0000

 

　　属性选择符的权重为0010

 

　　伪类选择符的权重为0010

 

　　伪元素选择符的权重为0010

 

　　包含选择符的权重：为包含选择符的权重之和

 

　　内联样式的权重为1000

 

　　继承样式的权重为0000

 

　　从样式选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。

 

　　还有一点，CSS选择符的权重，是计算的，比如你写了一个ID选择器和标签选择器，那么它的权重是把两个相加得到的结果

 

　　--------------------终于到了开始正式写CSS的地方了 噗 那上面都是什么，都是一群铺垫-----------------’

 

　　第一个：文本相关的样式

 

　　1. 文字大小 font-size 单位是px/em? 注意；一般情况下PS量取字体的时候都是偶数

 

　　2. 文字颜色 color 有三种方式写颜色 red 单词? #ccccc 16进制的方式 rgb(255,255,1)

 

　　3. 字体 font-family 可以设置多个字体，逗号分隔，生效是看用户电脑上安装的字体，注意写字体加引号

 

　　4. 加粗：{font-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900; but 600-900才能看出了加粗的效果

 

　　5. 倾斜：font-style：italic(倾斜度小)/oblique（倾斜度大）/normal（取消倾斜，常规显示）;but 倾斜度小or大并看不出来

 

　　6. 水平对齐方式 text-align:left/right/center

 

　　7. 行高 { line-height:normal/value; } 行高小技巧，把行高和高度设置一样的，可以让元素内的内容垂直居中

 

　　8. 文本修饰：text-decoration:none/underline/overline/line-through

 

　　说明：

 

　　none:没有修饰

 

　　underline:添加下划线

 

　　overline:添加上划线

 

　　line-through:添加删除线

 

　　9. 都是font开头的，font的简写版：

 

　　说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)

 

　　顺序: font-style | font-weight | font-size / line-height | font-family

 

　　例如：font:bold italic 30px "微软雅黑"

 

　　10.首行缩进：{text-indent:value;} 那么值该是多少呢？如果你的字体大小是12px，想空两个格，那么就text-indent:24px; 当然你也发现了这样计算好烦，虽然并没有超过100，还有一种更简单的方式，换个单位，em ，1em=16px=100% 如果想空两个字，直接写text-indent:2em; 呦嚯嚯——

 

　　11.字间距{letter-spacing:value;}控制英文字母和汉字的字距。（英文字母和汉字）

 

　　12. 词间距{word-spacing:value;}控制英文单词词距。（通用于英文词和词之间的间距,）对中文不起效果

 

　　第二个：列表相关样式

 

　　1. 定义列表符号样式：list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；

 

　　2. 定义列表符号的位置：list-style-position:outside(外边)/inside(里边)；

 

　　3.使用图片作为列表符号：list-style-image：url(所使用图片的路径及全称)；

 

　　第三个：背景相关样式

 

　　1. 背景颜色 语法：选择符{background-color:颜色值;}

 

　　2. 背景图片的设置? 语法：background-image：url(背景图片的路径及全称)；

 

　　了解下目前的图片格式撒：

 

　　1)jpg:有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )

 

　　2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;

 

　　3)png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;

 

　　4)WebP 在各大互联网公司已经使用得很多了 WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。但WebP是一种有损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。

 

　　3. 背景图片平铺属性 语法：选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

 

　　4.背景图的固定 语法：选择符{background-attachment:scroll(滚动)/fixed(固定);}

 

　　5.背景图片的位置 语法：选择符{background-position:left/center/right/数值?top/center/bottom/数值;}

 

　　两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。

 

　　当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。

 

　　说明：向右方向，向下方向是负值

 

　　6. 背景属性缩写：background:属性值1 属性值2 属性值3；background:url（背景图片的路径及全称） no-repeat center top；

 

　　background的值的顺序是background-color，background-image，background-repeat，background-attachment，background-position

 

　　背景还有一个很重要的应用场景就是：雪碧图

 

　　background-position属性使用频率非常高，大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置，不得不说它的作用非常重要，当然除了在使用雪碧图的场景外，别的某些场景也常常会使用到这个属性。

 

　　下面来认识下CSS3新增内容

 

　　1. 属性选择器：语法 [att*=val] 属性值包含val 例：[class*=“div” ]? 意思是class属性包含div字符

 

　　语法 [att^=val] 属性值以val开始 例：[class^=“div” ]? 意思是class属性以div开头

 

　　语法 [att$=val] 属性值以val结尾 例：[class$=“div” ]? 意思是class属性以div结束

 

　　2. 伪类选择器：找到第一个 li:first-child{? }

 

　　找到最后一个 li:last-child{? }

 

　　找到同级下的第n个 li:nth-child(n){? }

 

　　反向找到第n个 li:nth-last-child{? }

 

　　找到偶数 li:nth-child(even){? }

 

　　找到奇数 li:nth-child(odd){? }

 

　　3. 伪元素选择器：像选择元素的第一行文字使用样式 p:first-line { }

 

　　像选择元素的第一个字符使用样式 p:first-letter { }

 

　　在选择元素的之前添加新元素 p:before{ }

 

　　在选择元素的之后添加新元素 p:after{ }