1样式表的使用
1.内联样式表。
只影响单个元素，常用于标签。
ThisisCSS.
2.内部样式表。
对本页面元素起作用，一般写在中，用定义。
无标题文档
body{font-family:"宋体";}/style
3.连接外部样式表。
建立一个外部CSS文件用link元素引入到HTML中。
总结：
CSS外联：就是把CSS放到一个单独的文件里，然后在HTML通过调用。。
我们知道HTTP请求是比较昂贵的，CSS内联的话肯定会更快，因为把CSS放到HTML文件里，这意味着减少了一次HTTP请求。而外联的话就是一次HTTP请求，但是可以缓存，当浏览器加载过这个文件时，第二次请求的时候是第缓存里读取的，所以第二次请求时是很快的，外联的CSS还可以重用代码。那到底是使用内联还是外联呢？这就要看需求，如果一个页面不需要缓存时，也就是这个页面不太访问，或者访问不多的时候，比如注册页面，一般情况下人家只会进入一次，不可能第次进入这个网站你都去注册，那就另当别论了，这个页面不需要缓存，把CSS放在Head里时可以缩短加载时间，提高用户体验。对于经常访问的页面，外联肯定是不二的选择。
在一些大的网站，如：Google，Yahoo也可以看到把CSS写在Head里。对于结构表现行为分离的原则，我们对于CSS入在Head里是可以接受的，只要不是写在元素上面。
2定义选择器
选择器分两个种类，第一种为DOM选择器，包含类型选择器、类选择器和选择元素一部分和ID选择器，第二种包含伪选择器。
1.按照类型选择元素。
以标签为单位来设置相同的显示样式，不需要定义前缀符。
2.按照类型选择标签。
以标签样式类型选择为选择条件，类型为class，“.”为前缀，可以对多个标签应用样式，也可以派生样式。
3.按照ID选择元素
类似与类型选择器，以“#”为前缀，在标签中加入id属性引用样式。
4.选择元素的一部分
单独选择元素从而不影响其他元素，有子元素选择器和多重元素选择器。
1)子元素选择器
h1strong{color:red;}
或者：h1strong{color:red;}
注：只对第一层有效
2)多重元素选择器
优点在于避免过多的id、class属性设置，直接对所需元素进行定义。
anynameplia{float:right;color:#ADADAD;}
3)选择部分元素
实现多个元素或标签设置为同一样式。
html{color:black;}
p{color:blue;}
h2{color:silver;}
伪类选择器
CSS中已经定义好的选择器，不可以重命名。
1)标签中的集中选择器
a:link表示未访问的链接
a:visited表示已访问的链接
a:hover表示鼠标悬停的链接
a:active表示选定的链接（被按下时）
注：在CSS定义中，a:hover必须被置于a:link和a:visited之后，才是有效的。
在CSS定义中，a:active必须被置于a:hover之后，才是有效的。
如：a:link{color:#ADADAD;text-decoration:none;}/none表示将默认下划线去掉/
2)CSS中四个伪元素选择器
First-line对所选标签元素的第一行应用样式p:first-line{color:red;}First-letter对所选标签元素的文字首字母应用样式p:first-letter{color:bule;}Before在某个元素前插入一些内容li:before{content:”^^^”;}
After在某个元素后插入一些内容li:after{content:”(仅用于测试)”;}
3背景和颜色的使用
背景颜色
网页背景颜色设置：Background-color:transparent
color/透明或者设置颜色/
HSLA：/色调(0-,0==red,==green,==bule)，饱和度(%)，亮度(%)，透明度(0~1)
div.a{background:hsla(,35%,50%,0.2);height:20px;}
背景图片
格式如下：
Body{background-img:url(../picture.jpg);}
关于background还有一些属性如-cilp、origin、size等控制背景图片位置等属性
5盒子概念与使用
元素外边界。
外边界定义了矩形对象与其他矩形对象的距离，即模块与模块之间的空隙。
margin-bottom:10px;/下边界
margin-left:20px;/*左边界*/
padding:40px30px20px60px;/上下左右边界
margin:0auto;/*auto居中*/
元素边框
可以定义边框粗细。
border:50px#ADADAD;/定义粗细，颜色
border-style:soliddotteddoubledashed;/*上下左右边框单独设置样式*/
border-style属性：none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
元素内边界
内容与边框的空隙，与外边界属性类似。
padding:40px;
设置一个的时候表示上下左右距离一样，也可以用分别设置上下左右边界距离。
padding:40px30px20px60px;
内容的宽度、高度设置
在设置边框的时候可以一同定义内容的宽高度。
div.a{
background:hsla(,35%,50%,0.2);height:20px;width:px;margin-bottom:10px;/*外边界定义*/margin-left:20px;margin:0auto;padding:40px30px20px60px;/*内边界定义*/height:px;/*宽高度定义*/width:px;border:50px#ADADAD;/*边框定义*/border-style:soliddotteddoubledashed;}
列表样式
常见的列表属性值
list-style-type/*设定引导列表的符号类型*/list-style-image/*选择图像作为项目的引导符号*/list-style-position/*决定列表项目缩进*/常见的列表符号属性Circle设定类型Square图像Decimal阿拉伯数字Lower-roman小写罗马数字Wpper-roman大写罗马数字Lower-alpha小写字母Wpper-alpha大写字母None不现实项目符号Disc实心圆在style中使用列表样式List-style-type:decimal;
最后再推荐一个前端学习交流群：，群里有海量资料，每天都有技术大牛分享最前沿的前端案例，大家一起学习一起进步。