欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

HTML5第四天笔记

程序员文章站 2022-03-15 12:25:18
...
选择器:

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)!

相关标签: HTML5