CSS3常用属性,CSS继承和层叠

CSS3常用属性

​ 字体和文本

CSS字体属性定义字体,加粗,大小,文字样式。

所有的CSS字体属性

Property描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式
font-variant以小型大写字体或者正常字体显示文本。
font-weight指定字体的粗细。

CSS文本属性定义字体颜色,文本对齐,行高等等

所有CSS文本属性

属性描述
color设置文本颜色
direction设置文本方向。
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距

eg:字体文本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i14zvApz-1646139333332)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220227113324622.png)]

​ 表格

CSS可以用于改变表格的外观

border指定表格边框,

border-collapse合并表格边框位单一边框,

表格内容水平对齐使用text-align,

内容垂直对齐使用vertical-align。

eg:简单的表格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1pTkcD8L-1646139333333)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220227113648622.png)]

table 标签表示这是一个表格,tr标签表示一行,th标签表示表头单元格,td标签表示数据单元格。

列表:

在 HTML 中,列表主要有两种类型:

· 无序列表(

  • )- 列表项用的是项目符号标记

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BhFunR8e-1646139333333)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220301082752360.png)]

· 有序列表(

  1. )- 列表项用的是数字或字母标记

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6e9Jq49k-1646139333334)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220301082804628.png)]

CSS 列表属性使您可以:

· 为有序列表设置不同的列表项标记

· 为无序列表设置不同的列表项标记

· 将图像设置为列表项标记

· 为列表和列表项添加背景色

文本字体的CSS样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFvsqnVt-1646139333334)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220301083128525.png)]

——CSS的继承和层叠

继承:我们的CSS中很多的属性也是可以继承的,
其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。当然还有一部分是不能继承的。
例如边框、内外边距。
层叠:层叠是CSS的核心机制。层叠的工作机制:当元素的同一个样式属性有多种样式值的时候,
CSS就是靠层叠机制来决定最终应用哪种样式。
层叠规则:
①层叠规则一:找到应用给每个元素和属性的声明。
说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则,
并标识出所有受到影响的HTML元素。
②层叠规则二:按照顺序和权重排序。
按顺序:说明:浏览器依次检查CSS样式的来源,并设定匹配的属性,如果
匹配的属性在下一个来源也有定义,则更新该属性的值,如此循环。
权重排序:!important
③层叠规则三:按特指度排序。
计算特指度(ICE 公式)
I C E
id class Element
1.选择器中有一个ID,就在I的位置上加1;
2.选择器中有一个类(class),就在C的位置上加1;
3.选择器中有一个元素(标签)名,就在E的位置上加1;
4.得到一个三位数。得到的这个数就是我们的特指度。
例如: I C E
p 0 0 1 特指度=1
p.largetext 0 1 1 特指度=11
p#largetext 1 0 1 特指度=101
body p.largetext 0 1 2 特指度=12
body p#largetext 1 0 2 特指度=102
④层叠规则四:顺序决定权重。
说明:如果两条规则都影响到某元素的同一属性,而它们的特制度也相同,
则位置最靠下的胜出。
规则一:在特指度相同的情况下,按排列
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值