CSS快速入门-属性和伪类
一、属性选择器
<div class="gradefather"> hello1 <div name="son">hello2 <p name="son">hello4</p> </div> <p name="son">hello3</p> <p>hello5</p> </div>
属性选择器：
<style> p[name="son"]{ font-size:30px; color:red; } </style>
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E，Element。在此处可以省略，比如“[cheacked]”。以下同。）
p[name] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 。值仅等于val的元素。
p[name=”son”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值包含“val”的E元素
p[name~=”son”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值val开头的每个元素
div[name^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值val结尾的每个元素
div[name$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值val的每个元素
div[name*="test"]{background:#ffff00;}
E[attr|=val] 匹配属性值中包含以"val-"开头的值
div[name*="test-hahaha"]{background:#ffff00;}
注意：
1、~ 是多个属性中，包含有val（精确匹配）属性的元素；而*是指属性包含有val即匹配（模糊匹配）。
例如：
name="girl boy"(~和*都可匹配) 和name="girl-boy"（仅*可匹配）
2、| 是指以val-开头的元素
3、E[attr]，E代表标签，attr代表属性。
二、伪类
1、before和after伪类
在p标签前面添加内容：
p:before{
content:"start";
color:red;
}
在p标签后面添加内容：
p:after{
content:"end";
color:red;
}
2、a伪类
<a href="http://wwww.baidu.com">百度一下</a>
a:link {color:red;}
a:visited {color:blue;}
a:hover {color:green;}
a:active {color:yellow;}
a:hover 必须位于 a:link 和 a:visited 之后！！【hover属性必须应用在link上，且被访问过】
a:active 必须位于 a:hover 之后！！
三、属性
1、颜色
通过英文、十六进制、rgb、rgba四种方法都可以。
<div style="color:blue">ppppp</div>
<div style="color:#ffee33">ppppp</div>
<div style="color:rgb(255,0,0)">ppppp</div>
<div style="color:rgba(255,0,0,0.5)">ppppp</div> #三原色红绿蓝以及透明度
2、背景
上=>右=>下=>左
background-color: red
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)
简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片，另外，如果此时要设置一个width＝100px，你也看不出效果，除非你设置出html。
3、文本
font-size: 10px; #字体大小
text-align: center;#横向排列
line-height: 200px;#文本行高 通俗的讲，基于字体大小的百分比
text-indent: 150px;# 首行缩进，50%：基于父元素（weight）的百分比
letter-spacing: 10px; #字母间距
word-spacing: 20px;#单词间距
direction: rtl;#文字方向，从右到左
text-transform: capitalize;#文本转变，单词开头大写
4、字体
font-size: 20px/50%/larger
font-family:'Lucida Bright'
font-weight: lighter/bold/border/
<h1 style="font-style: oblique">测试字体</h1>
5、链接
● a:link - 普通的、未被访问的链接
● a:visited - 用户已访问的链接
● a:hover - 鼠标指针位于链接的上方
● a:active - 链接被点击的时刻
注释：为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！
注释：为了使定义生效，a:active 必须位于 a:hover 之后！！
6、列表
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
ul,ol{
list-style: decimal-leading-zero;
list-style: none; #经常作为去掉ul前面的符号
list-style: circle;
list-style: upper-alpha;
list-style: disc;
}
7、表格
border
border-collapse：边框合并模型separate、collapse、inherit
width
height
text-align
vertical-align
padding：td里面文本和边框的距离
color
background-color
8、轮廓
outline ： #00ff00 dotted thick 颜色、虚线、粗的
outline-color：轮廓颜色
outline-style:轮廓样式
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。
outline-width：轮廓宽度
9、 dispaly属性
● none
● block
● inline
bxslider 专门用于轮播图的工具
