当前位置:Gxlcms > JavaScript > HTML5第四天笔记

HTML5第四天笔记

时间:2021-07-01 10:21:17 帮助过:5人阅读

选择器:

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.gxlcms.com)!

人气教程排行