- 继承性
权重
- 层叠
- important
属性
- 行高
- font-size 字体大小
- font-family 字体
- font-weight字体粗细
- font-style 字体样式
- 溢出隐藏
- text-align: 设置段落的对齐方式。
- text-indent 文本缩进
- text-decoration 文本修饰
- 单词间距
- 字母间距
- text-transform大小写转换
- 基线对齐

继承性

有一些属性给父类或祖先元素设置后，其后代元素也会继承该样式，这就叫做继承性。

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

后代元素能够继承来自祖先元素的文字样式。这些属性包括：

color，text-开头，line-开头的，font-开头的。

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

权重

层叠

样式表：行内式>内嵌式与外链式（就近原则）
选择器：ID选择器>类选择器>标签选择器

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

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

权重相同时，比较书写顺序，在后面的会覆盖前面的。
【注】
1.并集选择器计算权重时，要分开计算。
2.如果不能直接选中元素，通过继承性影响的话，权重为0。

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

在后来的vue组件引入中,被引入的组件中写样式仍然遵循上述原则

<HelloWorld class="colori" />  这本文件写的colori样式会覆盖引入写的样式,本文件样式属于后加(父元素内写的样式)

    总结：对于相同的选择器：样式表的排序：行内>内嵌与外链（就近原则）对于非行内样式表，选择器排序：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（正值负值都可调试）

选择器权重及字体属性相关推荐

css学习（第一天）（css基础选择器，css字体属性，css文本属性，css引入方式）
CSS第一天 1.css简介 1.1 html的局限性 1.2 css-网页的美容师 1.3 css语法规范 1.4 css代码风格 1.4.1 样式格式书写 1.4.2 样式大小写风格 1.4.3 ...
选择器的权重和字体样式
12选择器的权重(面试题) 样式冲突优先级: !important>内联>id选择器>class选择器/属性选择器>元素选择器>通配选择器>继承选择器注意:1. ...
CSS快速学习2：选择符权重和字体类属性
选择符的权重: CSS中用四位数字表示权重. 类型选择符的权重为0001 class选择符的权重为0010 id选择符的权重为0100 子选择符的权重为0000 属性选择符的权重为0010 伪类选择符 ...
CSS（简介、基础选择器、字体属性、文本属性、引入方式）
文章目录 1.CSS简介 1.1HTML的局限性 1.2CSS-网页美容师 1.3CSS语法规范 2.CSS基础选择器 2.1选择器的作用 2.2选择器的分类 2.3标签选择器 2.4类选择器 2.5 ...
CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...
CSS的基础选择器、字体属性、文本属性和引入方式
目录一.css的语法规范二.css的基础选择器 (一)基础选择器总结 (二)标签选择器 (三)类选择器 (四)id选择器 (五)通配符选择器三.CSS字体属性 (一)字体属性总结 (二)font ...
2021-04-03 Web前端之CSS——选择器、字体属性、文本属性、样式表
视频课程:黑马程序员Pink老师笔记: 选择器以及一条或多条声明写在<head><style>之间</style></head> font-size ...
CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...

选择器权重及字体属性

目录

继承性

权重

层叠