CSS Class 2
学习内容：
1.设置字体：
font-style: 设置字体倾斜与否；font-size:设置字体大小；line-height:设置字体行高；font-family:设置字体种类；
p { font: italic 12px/30px arial,sans-serif; } /*将字体属性行高放在一个声明中，顺序分别为：字体倾斜与否 字体大小/行高 字体种类 */
2.边框border的样式：
（1）border-style:样式，分为dotted 点状 dashed 段状 double 两层
（2）border-width:边框的粗细
（3）border-color:边框颜色
1 h2 { 2 border: 1px dotted red; 3 /*顺序：粗细 样式 颜色*/ 4 }
3.背景样式：
（1）background-color:背景颜色
PS 使用rgba（r,g,b,alpha），可以调节背景颜色透明度，alpha值0-1，0为不可见，1为完全可见，可调节透明度，例如background-color：rgba(10,150,250,0.8)
rgba适用于所有color属性，例如border-color等。
（2）background-image: url() 背景图片
（3）background-position: px;px 背景位置 第一组数据利用正负值控制左右位置，第二组数据则用来控制上下位置，也可用center left right来大体设置
（4）background-repeat:背景平铺样式 no-repeat不平铺 repeat-x x轴平铺 repeat-y y轴平铺
（5）background-attachment:背景是否随页面滚动而滚动 fixed 图片不滚动，效果类似于图片在元素底下划过
1 p { 2 background: #ff0000 url(123.gif) no-repeat fixed center; 3 }
fixed效果：
滚动前后的效果
4.div：
div可作为盛放各种元素的容器，它是块级元素，默认占一行，但是与p标签不同，它不会产生上下都有间隔的问题
1 <html> 2 <head> 3 <style> 4 .div1 { 5 color： red； 6 } 7 </style> 8 </head> 9 10 <body> 11 <div class="div1"> 12 <p>这是红色</p> 13 </div> 14 </body> 15 </html>
p标签与div标签的默认效果：
p标签上下都有间距，而两个div却紧紧贴在一起
5.伪类：
多用于a标签，为链接添加各种效果
a:link；a:visited ；a:hover ；a:active
未访问的链接 ；已访问的链接；鼠标指向链接时，鼠标点击链接时
常用的是hover和active
ps:hover同样适用于div，可实现div的各种效果
1 a:link { 2 text-decoration: none; 3 color: cornflowerblue; 4 } 5 6 a:visited { 7 color: darkblue; 8 } 9 a:hover { 10 color: red; 11 text-decoration: underline; 12 } 13 14 a.a1:active { 15 color: gold; 16 text-decoration: line-through; 17 } 18 /*a.a1:avtive 是搭配class选择器的组合用法 这样可单独对a标签产生效果*/
2018.02.05
