HTML5第四天笔记

选择器：

1，关系选择器

1)群组选择器 h2,p,.text,#box{样式}

用逗号隔开

2）子元素选择器 父元素>子元素{样式}

用大于号>隔开

3）后代选择器 祖先 后代{样式}

用空格 隔开

<!--选择器的权重用加法计算-->

颜色具有继承性

2，动态伪类选择器(常用于a标签）

:link 链接时的状态

:visited 访问后的状态

:hover 鼠标放上去的状态

:active 鼠标点击时的状态

原则：爱恨原则 LoVeHAte 按顺序这样写

一般写a{} a:hover{}即可

3，:nth选择器

:first-child:第一个子元素

:last-child:最后一个子元素

:nth-child(n):第n个子元素 n:0,1,2...n 2n 2n+1...从0开始，每次累加1

奇偶行不同色：：nth-child(2n+1) nth-child(2n)

CSS属性

1，文字属性（文字样式、字体属性、字体样式）

font-size:12px/14px; 字体大小 （浏览器默认文字大小16px）

font-family:微软雅黑;

font-weight:100-900/bold/bolder/normal 字体加粗

color:#000000;

font-style:italic(斜体）/normal;

2,段落属性

text-align:left/center/right 文字水平对齐方式

vertical-align:top/middle/bottom 文字垂直对齐方式

text-indent:20px/2em 文字缩进

line-height:20-24px/150%/1.5 行间距

text-decoration:underline(下划线)/overline(上划线)/line-through(删除线)/none 文本修饰

特殊使用：

一行文本、有高度、垂直居中的设置方法：

line-height:height;（行高=高度）

letter-spacing:10px; 字与字之间的距离

word-spacing:1px; 单词与单词间的距离 （多用于英文网站）

text-transform:capitalize(每个单词首字母大写）uppercase(全部大写)lowercase(全部小写）（多用于英文网站）

white-space:normal/nowrap(不换行)

3，背景属性（background）

background-color:#000000/rgba()/red

background-image:url(图片的路径)

background-repeat:repeat/repeat-x/repeat-y/no-repeat;(设置背景图像的显示方式）

background-position:水平方向 垂直方向

水平方向：+300px -300px 20% left center right

垂直方向：+300px -300px 20% top center bottom

background是复合属性，可以省略-后面的。

例：background:#ff0000 url(../img/1.jpg) no-repeat 20px 30px;

4，列表属性（list-style）复合属性（主要用于ul ol li）

list-style-image:url();添加列表项前面的图像

list-style-type:none (列表前的圆点）

list-style-position：inside/outside

list-style:none;最常用

以上就是HTML5第四天笔记的内容，更多相关内容请关注PHP中文网（www.php.cn）！