本文共 2406 字,大约阅读时间需要 8 分钟。
目录
继承性
有一些属性给父类或祖先元素设置后,其后代元素也会继承该样式,这就叫做继承性。
继承性是从当前元素开始,一直到最小的元素。
后代元素能够继承来自祖先元素的文字样式。这些属性包括:
color,text-开头,line-开头的,font-开头的。
关于盒子、定位、布局的属性,不能被继承。
权重
层叠
样式表:行内式>内嵌式与外链式 (就近原则)
选择器:ID选择器>类选择器>标签选择器复杂选择器权重的计算比较数基础选择器的数量:
PS:不进位,255个标签等于一个类名。没有任何实战的意义。
权重相同时,比较书写顺序,在后面的会覆盖前面的。
【注】 1.并集选择器计算权重时,要分开计算。 2.如果不能直接选中元素,通过继承性影响的话,权重为0。3.同一个标签,携带了多个类名,且样式有冲突时,跟类名的顺序无关,和样式的先后顺序有关。
总结:对于相同的选择器:样式表的排序:行内>内嵌与外链(就近原则) 对于非行内样式表,选择器排序:id>类>标签。
important
翻译:重要的。
格式: k:v !important; 【注】 1.!important 提升的是一个属性,而不是选择器的权重。 2.!important无法提升继承的属性,权重仍然是0。 作用: 将该属性的权重提为最高。 慎用!使用不当的话,容易造成该关键字成倍增加,很有可能将网页这个css样式搞崩, 最后不得不重构css样式。属性
行高
line-hight:行高
一行文字实际占有的高度。 表示方式:px,百分比,em。 1920*1080 横向有1920个像素,px 纵向有1080个像素。百分比:参照字体大小。、
em。字体的倍数。
设置行高,字号时,一般设置为偶数。这样可以保证,他们的差一定是偶数,方便计算与居中。
特殊用法:
要让一行文字在盒子中垂直居中,可以让行高等于盒子高。【只适用于单行文字。】font-size 字体大小
字号 字体大小
设置方式:单词,px,em,百分比。 字体大小默认为16px。xx-small----- xx-largr
用的极少。 px 【推荐使用】em 相对于父元素的font-size属性计算的。
1em=父元素的font-size的值。
百分比 相对于父元素的font-size属性计算的
font-family 字体
1.字体分为英文字体和中文字体。有些英文字体不会作用到中文字体上,而中文字体会作用到英文上。
2.字体属性值可以为多个,后面的字体为备选字体,当前面的字体,电脑上没有加载时,会去加载后面的字体,如果都没有,会使用默认字体(微软雅黑) 3.书写顺序:英文字体写在前面,中文字体写在后面。 4.中文字体也有英文名称 宋体:Simsun; 黑体:SimHei; 微软雅黑:Microsoft YaHei;1.使用英文别名可以提高网页的加载速度。
2.防止源码中的中文乱码。font-size font-family
font是一个复合属性。 font:字体大小/行高 字体;font: 24px/40px "SimHei";
font-weight字体粗细
属性值:数字,单词。
数字:100-900.越往上越粗。 单词:normal(正常) bold(加粗) bolder(更粗) lighter(细)font-style 字体样式
normal 正常 默认值
italic 斜体 【使用斜体的话,推荐使用】 oblique 【不推荐使用】italic 带有倾斜属性的字体才可以设置。
oblique 没有倾斜属性的字体也可以设置。溢出隐藏
/* 禁止文本换行 */ white-space: nowrap; /* 溢出内容隐藏 */ overflow: hidden; /* 使用省略号来代替被修剪的文本 */ text-overflow: ellipsis;
1
visible: 对溢出内容不做处理,内容可能会超出容器。 hidden: 隐藏溢出容器的内容且不出现滚动条。 scroll: 隐藏溢出容器的内容,溢出的内容可以通过滚动呈现。 2 ellipsis:使用省略号来代替被修剪的文本 clip:溢出部分裁切掉text-align: 设置段落的对齐方式。
规定文本在块元素中的对齐方式
left 左对齐 默认值 center 居中对齐 right 右对齐。与文本的行数没有关系。
text-indent 文本缩进
单位:px em 百分比。
百分比是按照盒子的宽度。 可以是负数,负数向前(左)缩进,正数为向后(右)缩进。(这里的em是相对父元素说的,如果父元素字号不相同,即使都缩进了2em,他们也不会对齐,解决方法:用px值统一)
text-decoration 文本修饰
有四个常见的样式
none 正常 下划线 underline 上划线 overline 中划线line-through单词间距
单词间距,单位是px 对于中文无效。(原因是英文单词间都有空格,而中文一句话是连在一起的)
word-spacing: 24px;
字母间距
字母间距,单位是px 中英文都会生效
letter-spacing: 24px;text-transform大小写转换
uppercase 大写
lowercase 小写text-transform: lowercase;
基线对齐
相当于四线格中的第三条线。 默认的对齐方式为基线对齐。
一般用于图片与文字的对齐。vertical-align:middle;
top 顶部对齐
middle 中间对齐 sub 底部对齐它也可以是一个具体的数字值 为px(正值负值都可调试)
转载地址:https://blog.csdn.net/z18237613052/article/details/110879841 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!