01-CSS学习路径+文本字体样式+选择器

扶羊人zz

已于 2023-04-07 15:46:28 修改

阅读量171

点赞数 1

文章标签：前端 css

于 2023-04-07 13:41:34 首次发布

本文链接：https://blog.csdn.net/apple_58595131/article/details/129994711

版权

浏览器渲染的流程

文本样式

text-decoration(常用) 用于设置文字的装饰线

overline：上划线
line-through：中划线（删除线）
none：无任何装饰线可以去除a元素默认的下划线
underline：下划线

text-transform (一般) 用于设置文字的大小写转换

lowercase ：(小写字母)将每个单词的所有字符变为小写
capitalize ：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
none ：没有任何影响
uppercase ：(大写字母)将每个单词的所有字符变为大写

text-indent(一般) 用于设置第一行内容的缩进

text-indent: 2em; 刚好是缩进2个文字

text-align(重要) 设置文本的对齐方式

MDN解释: 定义行内内容（例如文字）如何相对它的块父元素对齐;

W3C 中的解释 :

其实实际上只能作用于行内元素的对齐，div等在父元素中对齐无法起作用，转为行内块可使用

块元素可通过margin：0 auto样式进行水平居中

left：左对齐
right ：右对齐
center ：正中间显示
justify：两端对齐（多行文本有效，最后一行无效），修改最后一行样式添加 text-align-last: justify;

letter-spacing、word-spacing(一般) 分别用于设置字母、单词之间的间距

默认是0，可以设置为负数

字体样式

font-size(重要) 决定文字的大小

具体数值+单位比如100px 也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%（相对于父元素）
百分比基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

font-family (重要, 不过一般仅设置一次) 设置文字的字体名称

可以设置1个或者多个字体名称;
浏览器会选择列表中第一个该计算机上有安装的字体;
或者是通过 @font-face 指定的可以直接下载的字体。

font-weight(重要) 用于设置文字的粗细（重量）

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
normal ：等于400
bold ：等于700
strong、b、h1~h6等标签的font-weight默认就是bold

font-style(一般) 用于设置文字的常规、斜体显示

normal：常规显示
italic(斜体) ：用字体的斜体显示(通常会有专门的字体)
oblique(倾斜) ：文本倾斜显示(仅仅是让文字倾斜)

font-variant(了解) 可以影响小写字母的显示形式

normal：常规显示
small-caps ：将小写字母替换为缩小过的大写字母

line-height(常用) 用于设置文本的行高

行高可以先简单理解为一行文字所占据的高度
行高的严格定义是：两行文字基线（baseline）之间的间距
基线（baseline）： 与小写字母x最底部对齐的线

让line-height等同于height，可以让这行文字在div内部垂直居中，但是仅限于文本，其他元素的垂直居中还是比较复杂的，需要用到其他方法

font 是一个缩写属性

font-style font-variant font-weight font-size/line-height font-family
font-style、font-variant、font-weight可以随意调换顺序，也可以省略
/line-height可以省略，如果不省略，必须跟在font-size后面
font-size、font-family不可以调换顺序，不可以省略

选择器

简单选择器

一个HTML文档里面的id值是唯一的，不能重复

属性选择器(attribute selectors)

拥有某一个属性 [att]
属性等于某个值 [att=val]
其他了解的

后代选择器（descendant combinator）

后代选择器一: 所有的后代(直接/间接的后代) 选择器之间以空格分割

后代选择器二: 直接子代选择器(必须是直接自带) 选择器之间以 > 分割;

兄弟选择器(sibling combinator)

兄弟选择器一:相邻兄弟选择器 使用符号 + 连接

兄弟选择器二: 普遍兄弟选择器 ~ 使用符号 ~ 连接

选择器组 – 交集选择器

交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接) 发中通常为了精准的选择某一个元素;

并集选择器: 符合一个选择器条件即可(两个选择器以,号分割) 在开发中通常为了给多个元素设置相同的样式;

伪类

伪类是选择器的一种，它用于选择处于特定状态的元素;

常见的伪类有

动态伪类（dynamic pseudo-classes） :link、:visited、:hover、:active、:focus
目标伪类（target pseudo-classes） :target
语言伪类（language pseudo-classes） :lang( )
元素状态伪类（UI element states pseudo-classes）

:enabled、:disabled、:checked
结构伪类（structural pseudo-classes）
:nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )

:first-child、:last-child、:first-of-type、:last-of-type

:root、:only-child、:only-of-type、:empty
否定伪类（negation pseudo-classes）:not()

所有的伪类：

https://developer.mozilla.org/zh-

CN/docs/Web/CSS/Pseudo-classes

动态伪类（dynamic pseudo-classes)

a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接（鼠标在链接上长按住未松开）
使用注意

:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是 :link、:visited、:hover、:active
除了a元素，:hover、:active也能用在其他元素上

动态伪类 - :focus

:focus指当前拥有输入焦点的元素（能接收键盘输入）
因为链接a元素可以 被键盘的Tab键选中聚焦 ， 所以:focus也适用于a元素
动态伪类编写顺序建议为 :link、:visited、:focus、:hover、:active
直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

伪元素（pseudo-elements）

常用的伪元素有

:first-line、::first-line :first-letter、::first-letter

:before、 ::before :after、 ::after
为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
::first-line可以针对首行文本设置属性 ::first-letter可以针对首字母设置属性