如何找到标签
基本选择器
标签选择器
类选择器<br>
ID选择器<br>
基本选择器的优先级
ID选择器>类选择器>标签选择器<br>
层次选择器
E F 后代选择器 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内
E>F 子选择器 选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素
E+F 相邻兄弟选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面
E~F 通用兄弟选择器 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素
结构伪类选择器
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E F:nth-child(n) 选择父级元素E的第n个子元素F,(n可以是1、2、3),关键字为even、odd
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
属性选择器
E[attr] 选择匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)
E[attr^=val] 选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串
E[attr$=val] 选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串
E[attr*=val] 选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配
怎么样给标签加样式
字体样式
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";
文本样式
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
列表样式
list-style
list-style-type
list-style-image
背景样式
background-color<br>
background-image<br>
background-position
background简写
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
background-size
边框样式
border-color<br>
border-width<br>
border-style<br>
border简写
border:1px solid #3a6587;<br>
外边距margin
同级标签用margin
margin-top 上边距
margin-bottom 下边距
margin-left 左边距
margin-right 右边距
水平居中 margin: 0px auto;
内边距padding
包涵子父级关系下,用padding
padding-top
padding-bottom
padding-left
padding-right
圆角边框border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius: 20px 10px 50px 30px; <br>四个属性值按顺时针排列 <br>
盒子阴影box-shadow
它的值包括 6 个参数:阴影类型,X轴位移,Y轴位移,阴影大小,阴影扩展和阴影颜色。此 6 个参数可以有选择地省略。
box-shadow:5px 5px;
浮动float
float: right;
父级边框塌陷
定位position
透明度
CSS3变形
CSS3过渡
CSS3动画
超链接伪类
a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited {color:#333;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}