文本|文字属性|基本选择器和伪类

day04-css文本,文字属性,基本选择器和伪类

一、css文本属性6个

text-decoration用于设置文字的装饰线
- none: (全无)
- underline：下划线
- overline：上划线
- line-through：(穿过) 删除线
letter(字母)/word(单词)-spacing：字母/单词之间的距离默认是0可以设置为负数
text-transform（转换）
- capitalize: 首字母大写
- uppercase：转换大写
- lowercase：转换小写
- none
text-indent：首行文本缩进(只能在块级元素上面设置)
text-align：
- center
- left
- right
- justify（证明…正确）全行排满不会出现结尾存在放不下单词留白的情况
  - 单行的话没有效果，默认最后一行不会全部排满，要使用text-align-last/frist
writing-mode:vertical-rl;

文字垂直方向排布
user-select
word-break

指定了怎样在单词内断行，默认换行规则中文换行，英文按单词换行(字母间有空格)

break-all：字母换行

bread-world：单词换行, 且有文本溢出的时候将单词进行截断换行，不会插入连字符(hyphens)。

keep-all：中文不换行，英文按单词换行

break-word：默认换行规则与 overflow-wrap: anywhere 的合，不论 overflow-wrap的值是多少。

overflow-wrap：break-word 为防止溢出，如果行中没有其他可接受的断点，则不可断的字符串（如长词或 URL）可能会在任何时候换行。在断点处不会插入连字符(hyphens)。重点在计算最小内容内在大小时，不考虑由单词换行引入的软换行机会，就是说需要指定限制元素的宽度，他才会知道在哪里断行

overflow-wrap：anywhere 和 break-word 的区别就是在计算最小内容内在大小时会考虑由单词换行引入的软换行机会，这个比较常用，因为他会考虑所以
white-space:

pre-wrap; 只对中文起作用，强制换行

nowrap; 强制不换行，都起作用

二、css字体属性（6个）

font-size: 决定文字的大小
- 浏览器文字默认大小是16px，该属性会继承
- em：更具父级字体大小变化，2em就是32px
font-weight
- normal：400（默认大小）
- bold：700（strong，b，h1~h6默认都是bold
font-style：
- normal:常规显示
- italic（斜体）：用当前字体的斜体显示(通常会有专门的字体)
- oblique（斜的）：如果当前字体没有斜体的话，也会将文字倾斜
font-variant（变形）
- samll-caps: 将小写字母转为缩小后的大写
font-family（设置文本字体类型）
- 有空格的字体记得加引号会比较规范一点
- 默认字体微软雅黑Microsoft YaHei
- @font-face: 指定的可以直接下载的字体

font: 缩写属性

  <--必须包含以下值：-->
    <font-size>
    <font-family>
  <--可以选择性包含以下值：-->
    <font-style> 斜体
    <font-variant> 小写转大写并缩小字母
    <font-weight> bold 变小
    <line-height> 行高必须在font-size后面以/开始

font-style font-variant font-weight font-size/line-height font-family

line-height(设置文本行高)复习重点
- 两行文字之间的间距（baseline）
- line-height只能设置块级元素设置行元素内容高度不变，但是会有高度的效果，也会撑起块级元素
- 要有内容 line-height 才会生效
- 行高不会根据高度变化
  - 使用场景：当我们动态的给元素添加border的时候固定line-height，避免影响文本在垂直方向的对其样式

三、文字溢出

3.1、单行文字溢出

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

文字溢出注意事项

注意自身元素的类型宽高，例p元素的宽度是auto的如果父元素没有设置宽度的话会失效
注意父元素的类型，例: 父元素是inline-block类型没有设置宽度那么宽度就是自动的，自身元素又没有设置宽度那么就会失效
flex布局会和white-space起冲突：在父级元素添加一个overflow；相当于你这个元素超出了不仅我要隐藏我父元素也是要隐藏的
或者给flex：1的 item设置最小宽度为0；

white-space

white-space 用于设置空白处理和换行规则

normal：合并所有连续的空白，允许单词超屏时自动换行
nowrap：合并所有连续的空白，不允许单词超屏时自动换行
pre：阻止合并所有连续的空白，不允许单词超屏时自动换行
pre-wrap：阻止合并所有连续的空白，允许单词超屏时自动换行
pre-line：合并所有连续的空白（但保留换行），允许单词超屏时自动换行

text-overflow

text-overflow 通常用来设置文字溢出时的行为

clip：溢出的内容直接裁剪掉（字符可能会显示不完整）
ellipsis：溢出那行的结尾处用省略号表示
text-overflow生效的前提是overflow不为visible
常见的是将white-space、text-overflow、overflow一起使用

3.2、多行元素文字溢出

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
       overflow: hidden;
       text-overflow: ellipsis;
    //文字自动换行
       word-wrap: break-word;
       word-break: normal;

四、选择器

1、通用选择器

*{}

效率比较低，尽量不要使用，因为加载html的时候，遇见通用选择器会遍历所有的html元素

很浪费资源

2、层级选择器

注意：

设置公共样式的时候记得，尽力要精确一点选择用>子元素选择器这样的话当你要在添加相同元素的子元素的时候，还有变动的空间

更好的方法是下级不要直接标签选择做好用类选择器

(1)子元素选择器：符号“>”,查找所有的直接子元素下一级

$(‘parent > child’) 在给定的父元素下匹配所有的子元素
(2)后代选择器：符号“空格”，查找所有的子直接或间接元素全部

$(‘ancestor descendant’) 在给定的祖先元素下，匹配所有的后代元素
(3)紧邻同辈选择器(向下)：符号“+”,匹配所有紧接在某元素后的第一个元素

$(‘prevSibling + nextSibling’) 匹配所有紧接在prevSibling元素后的nextSibling元素。
(4)相邻同辈选择器(向下)：符号为“~”，匹配所有紧接在某元素后的所有元素

$(‘prev ~ sibling’) 匹配所有紧接在prev元素后所有的siblings元素。

3、属性选择器

a[title] {}: 权重 11 级别
a[title=box]
a[attr*=val]: 属性值包含某一个值val;
a[attr^=val]: 属性值以val开头;
a[attr$=val]: 属性值以val结尾;
a[attr|=val]: 属性值等于val或者以val开头后面紧跟连接符;
a[attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割;

4、交集选择器

交集选择器是”并且”的意思，既有…并且有…，规则：第一个选择器是标签选择器，第二个是 class 选择器，而且要连在一起

div.myClass {color: red}

5、群组选择器

div，.box,#id {text-decoration: underline}

6、伪类（Pseudo-classes）

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

6.1、动态伪类5个（dynamic pseudo-classes）

:link (未访问该元素的状态) ：适用于a标签

:visited（以访问过该元素状态的样式）：适用于a标签

:focus (聚焦) 交互行元素被选中，input 或者a，button，可用于其他标签

:hover(悬停)：适用于其他标签

:active(活跃)：被点击鼠标没有按下还没松开的时候，适用于其他标签

注意动态伪类的编写顺序从上到下lvfha

补充：直接给a元素设置样式，相当与给a元素的所有动态伪类都设置了

6.2、目标伪类（target pseudo-classes）

:target ：当浏览器跳转到该伪类标记的锚点上面

6.3、语言伪类language pseudo-classes）

:lang(en/zh) : 该元素的语言类型在lang配置的状态中被选中

6.4、元素状态伪类（UI element states pseudo-classes）

:enabled、:disabled、:checked

6.5、结构伪类（structural pseudo-classes）练习

:nth-child(an+b|an )：就是从b开始,每a个元素被选中一个（单个的an就是a的倍数会被选中）相同父元素

:nth-last-child(an+b|an )：和nth-child用法相同只不过是从后面开始

:nth-of-type( an+b|an)：同类型的元素 就是从b开始,每a个元素被选中一个（单个的an就是a的倍数会被选中）

:nth-last-of-type( )：从后面开始作用和nth-of-type相同

:first-child：选择器选中的元素集合在其该元素的父级里排名必须第一的元素会被选中，；

:last-child：选择器选中的元素集合在其该元素的父级里排名必须最后的元素会被选中

:first-of-type：所选中元素集合，同类型的元素排名第一个会被选中

:last-of-type：选中元素集合，同类型的元素排名最后一个会被选中

:root：这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 “ 元素，除了优先级更高之外，与 html 选择器相同。

:only-child：当选中元素 没有兄弟元素的时候才会被选中

:only-of-type：当选中的元素，没有相同类型的兄弟元素的时候会被选中

:empty：当元素内容为空的时候

6.6、否定伪类（negation pseudo-classes）(后续学习)

:not()：当某组元素不包含指定元素的时候会被选中

6.7、所有伪类：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

四、常用伪元素

注意：伪元素不能添加动画

::first-line：首行文本设置属性
::first-letter ：首航字母设置属性
::before：元素内容的前面添加内容

#id::before {content:''/url(htt://....)}

::before和::after是默认是行内元素，不能设置宽高可以设置成inline-block根据需求设置后面的方格

注意：content不能为空
::after：元素内容的后面添加内容，功能同上
::-webkit-input-placeholder、改变input里面placeholder属性字体的颜色

五、伪元素和伪类的区别：

个人理解：伪类是选择器选择元素设置样式，伪元素是创建新元素。代表某个元素的子元素。
伪元素不能匹配任何真实存在的html元素。

六、其他属性

1.scroll-snap-type

使用场景，全屏滚动切换效果

属性 scroll-snap-type 设置了在有滚动容器的情形下吸附至吸附点的严格程度

.box {
    scroll-snap-type: x mandatory;
}