继承

继承

有一些属性给父元素设置后,其后代也会继承该样式,这叫做继承性

继承性是从当前元素开始一直到最小的元素

后代元素能够继承来自祖先的文字样式。这些属性包括:color,text-开头的,font-开头的,line开头的。

关于盒子 定位 布局的属性,不能被继承。

在这里插入图片描述

在这里插入图片描述

层叠

样式表:行内式>内嵌式与外链式 (就近原则)

​ 选择器:ID选择器>类选择器>标签选择器

​ 复杂选择器权重的计算比较数基础选择器的数量:

​ ID选择器的数量 类选择器的数量 标签选择器的数量

​ ID选择器的权重记为100,类选择器记为10,标签选择器记为1.

​ PS:不进位,255个标签等于一个类名。没有任何实战的意义。

​ 权重相同时,比较书写顺序,在后面的会覆盖前面的。

【注】

​ 1.并集选择器计算权重时,要分开计算。

​ 2.如果不能直接选中元素,通过继承性影响的话,权重为0。

​ 3.同一个标签,携带了多个类名,且样式有冲突时,跟类名的顺序无关,和样式的先后顺序有关。

总结:

对于相同的选择器:样式表的排序:行内>内嵌与外链(就近原则)

​ 对于非行内样式表,选择器排序:id>类>标签。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

important 翻译:重要的。

格式:

​ k:v !important;

【注】

​ 1.!important 提升的是一个属性,而不是选择器的权重。

​ 2.!important无法提升继承的属性,权重仍然是0。

作用:

​ 将该属性的权重提为最高。

​ 慎用!使用不当的话,容易造成该关键字成倍增加,很有可能将网页这个css样式搞崩,最后不得不重构css样式。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

font-size

字号 字体大小

设置方式:单词,px,em,百分比。

字体大小默认为16px。

xx-small----- xx-largr

用的极少。

px 【推荐使用】

em 相对于父元素的font-size属性计算的。

1em=父元素的font-size的值。

百分比 相对于父元素的font-size属性计算的。

快捷键:

fz30 = font-size: 30px;

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

font-family 字体

1.字体分为英文字体和中文字体。有些英文字体不会作用到中文字体上,而中文字体会作用到英文上。

2.字体属性值可以为多个,后面的字体为备选字体,当前面的字体,电脑上没有加载时,会去加载后面的字体,如果都没有,会使用默认字体(微软雅黑)

3.书写顺序:英文字体写在前面,中文字体写在后面。

4.中文字体也有英文名称

宋体:Simsun;

黑体:SimHei;

微软雅黑:Microsoft YaHei;

1.使用英文别名可以提高网页的加载速度。

2.防止源码中的中文乱码。

font-size font-fanily

font是一个复合属性。

font:字体大小/行高 字体;

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

font-weight

​ 属性值:数字,单词。

​ 数字:100-900.越往上越粗。

​ 单词:normal(正常) bold(加粗) bolder(更粗)lighter(细)

​ 一般使用单词形式的正常与加粗。

​ fwb = font-weight: bold;

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

font-style 字体样式

​ normal 正常 默认值

​ italic 斜体 【使用斜体的话,推荐使用】

​ oblique 【不推荐使用】

​ 1.italic 带有倾斜属性的字体才可以设置。

​ 2.oblique 没有倾斜属性的字体也可以设置。

​ 快捷键:fs

在这里插入图片描述

在这里插入图片描述

文本溢出

white-space: nowrap;禁止文本换行

overflow: hidden;溢出内容隐藏

text-overflow: ellipsis;使用省略号来代替被修剪的文本

在这里插入图片描述

在这里插入图片描述

text-align:

设置段落的对齐方式。

​ left 左对齐 默认值

​ center 居中对齐

​ right 右对齐。

​ 与文本的行数没有关系。

在这里插入图片描述

在这里插入图片描述

text-indent 文本缩进

单位:px em 百分比。

百分比是按照盒子的宽度。

可以是负数,负数向前(左)缩进,正数为向后(右)缩进。

在这里插入图片描述

在这里插入图片描述

text-decoration 文本修饰

​ 有四个常见的样式

​ none 正常

​ 下划线 underline

​ 上划线 overline

​ 中划线:line-through

在这里插入图片描述

在这里插入图片描述

单词间距word-spacing

单词间距,单位是px 对于中文无效

在这里插入图片描述

  • 在这里插入图片描述

字母间距letter-spacing

字母间距,单位是px

在这里插入图片描述

在这里插入图片描述

大小写转换

​ uppercase 大写

​ lowercase 小写

在这里插入图片描述

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值