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 专门用于轮播图的工具