CSS之属性与选择器 (三)：CSS文本属性、CSS字体属性、CSS常见选择器

本文链接：https://blog.csdn.net/sedrick_/article/details/129441455

跳转目录🚀

篇章	知识点
CSS之邂逅(一)	认识CSS、编写CSS样式、CSS注释、常见的CSS属性
CSS额外知识补充(二)	link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程
CSS属性与选择器(三)	CSS文本属性、CSS字体属性、CSS常见选择器
CSS属性的特性(四)	CSS属性的继承、CSS属性的层叠、CSS属性的类型、display属性、元素的隐藏、overflow属性、CSS不生效技巧
CSS盒子模型(五)	认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing
CSS设置背景(六)	background-(image、repeat、size、position、attachment)、background、background-image和img对比
CSS高级元素的使用(七)	列表元素、表格元素、表格合并、表单元素、表单常见属性
CSS之Emme语法t和结构伪类(八)	认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用
CSS额外知识补充(九)	border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性
CSS元素定位(十)	标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index
CSS元素浮动(十一)	认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
CSS flex布局(十二)	认识flex布局、flex布局的理解、flex-container属性、flex-item属性

1. CSS文本属性

1.1 text-decoration (常用)

作用：用于设置文字的装饰线
text-decoration常见的值：
- none：无任何装饰线（可以去除a元素默认的下划线）
- underline：下划线
- overline：上划线
- line-through：中划线（删除线）

<style>
    .baidu {
      text-decoration: underline;
      cursor: pointer;
    }

    .google {
      text-decoration: line-through;

      /* 设置文本的颜色(前景色) */
      color: red;
    }

    .bing {
      text-decoration: overline;
    }

    a {
      text-decoration: none;
    }
  </style>

<body>
  
  <!-- a元素默认有添加text-decoration -->
  <a href="http://www.baidu.com">百度一下</a>

  <!-- span元素也添加装饰线 -->
  <span class="baidu">百度一下</span>

  <!-- 装饰线其他的值 -->
  <span class="google">Google一下</span>
  <span class="bing">必应一下</span>

  <a href="http://www.taobao.com">淘宝一下</a>

</body>

1.2 text-transform

作用：用于设置文字的大小写转换，在实际开发中使用JS代码转化的更多
text-transform常见的值：
- capitalize：将每个单词的首字符变为大写
- uppercase：将每个单词的所有字符变为大写
- lowercase：将每个单词的所有字符变为小写
- none：没有任何影响

1.3 text-indent

作用：用于设置第一行内容的缩进

p {
      font-size: 40px;

      /* em: 相对于字体的大小，2em刚好是缩进2个文字 */
      text-indent: 2em;
    }

1.4 text-align（重要）

作用：设置子元素的行内级元素的对齐方式
text-align常见的值：
- left：左对齐
- right：右对齐
- center：正中
- justify：两端对齐

.box {
      background-color: #f00;
      /* #FF0000 => rgb(255, 0, 0) */
      color: white;

      /* text-align */
      text-align: center;
      /* text-align-last 设置最后一行的样式 */   
      text-align: justify;  
    }

问题：

如果将text-align直译过来，可能会以为是设置文本的对齐方式，但是我们同样可以通过text-align设置图片的对齐方式。
在MDN的解释下：text-align是定义行内内容（例如文字）如何相对它的块父元素对齐，但其实不是很准确

W3C官方解释：
This shorthand property sets the text-align-al’ andtext-align-last’ properties and describes howthe inline-level content of a block is aligned along the inline axis if the content does not completely fill
在这里插入图片描述
案例：

块级元素的子元素是块级元素，设置text-align是无效的，还需要通过display：inline-block（行内块）改变元素特性
块级元素使用margin：0 auto来设置自身居中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-color: #f00;
      height: 300px;

      text-align: center;
    }

    .content {
      background-color: #0f0;
      height: 200px;
      width: 200px;

      /* display: inline-block; */
      /* margin: 0 auto; */
    }
  </style>
</head>

<body>

  <div class="box">
    <div class="content"></div>
  </div>

</body>

</html>

1.5 word/letter-spacing

作用： letter-spacing、word-spacing分别用于设置字母、单词之间的间距；默认是0，可以设置为负数

.box {
      /* letter-spacing: 10px; */
      word-spacing: 30px;
    }

2. CSS字体属性

2.1 font-size

作用：决定文字的大小
常用的值：
- 具体数值+单位：如px、em(1em代表100%，2em代表200%，0.5em代表50%)
- 百分比：基于父元素的font-size计算；

有很多属性的值是百分比时，我们需要善于查阅文档，如font-size的百分比是基于父元素的字体大小。而width的百分比是基于包含块的。无论是什么，都要学会主动查阅文档，很多东西都是很难一时记住的，学习方法很重要。

font-size：
在这里插入图片描述
width：

2.2 font-family

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

    body{
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

2.3 font-weight

作用：用于设置文字的粗细
常见的取值：常用的值一般都是 400 和 700，可以在0至1000但是几乎不这么用
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
- normal：等于400
- bold：等于700

2.4 font-style

作用：用于设置字体的常规、斜体显示
常见的取值：
- normal：常规显示
- italic(斜体)：使用当前字体对应的斜体样式
- oblique(倾斜)：一般只是常规字形的倾斜版本

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
/*   oblique <angle [-90deg,90deg]>  */
  font-style: oblique ;
}

2.5 font-variant *

作用：可以影响小写字母的显示形式
常见的值：
- normal：常规显示
- small-caps：将小写字母改为小写字母大小的大写字母

2.6 line-height（常用）

作用：用于设置文本的行高
什么是行高呢？
- 简单理解：一行文本所占据的高度
- 严格定义：两行文字基线(baseline)之间的间距，基线就是与小写字母x最底部对齐的线；其实在设置line-height
- 例如：line-height设置为40px，font-size:24px;那么40-24=16px就会平均分配给顶线和底线的上下边距。
注意区分
- height：元素整体的高度
- line-height：元素中每一行文字所占据的高度
应用：让文本在div中垂直居中：即line-height等同于height，原理就是上面举得例子

2.5 font缩写属性

作用： 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不可以调换顺序，不可以省略

.font{
	font: italic small-caps bold 16px/2 font-family;
}

3. CSS常见选择器

在开发中经常需要找到特定的网页元素进行设置样式，如何找到特定的网页元素呢？我们需要使用CSS选择器

什么是CSS选择器 ：按照一定的规则选出符合条件的元素，为其添加CSS样式
选择器的大致可以分为：
1. 通用选择器 universal selector
2. 元素选择器 type selectors
3. 类选择器 class selectors
4. id选择器 id selectors
5. 属性选择器 attribute selectors
6. 组合 combinators
7. 伪类 pseudo-classes
8. 伪元素 pseudo-elements

3.1 通用选择器 universal selector

作用：选中所用的属性，常用于给所有的元素设置一些通用的属性
缺点： 因为给所有元素添加属性会给一些没有使用到的元素添加属性，导致效率比较低，尽量不会使用

/* 使用通用选择器，不推荐 */
    /* * {
      margin: 0;
      padding: 0;
    } */

    /* 选择需要设置的多数元素，推荐 */
    body,
    h1,
    p,
    div {
      margin: 0;
      padding: 0;
    }

3.2 元素/类/id 选择器 type/class/id selectors

作用：根据元素的名称、类名、id来选择想要的元素
1. 元素选择器：使用元素的名称
2. 类选择器：使用.类名
3. id选择器：使用#id
  补充： : 在同一个HTML文档里，id是唯一的，不要重复；不要用标签名作为id值
命名规范：当类名或id由多个单词构成时可以有以下几种写法，前两种在CSS中更常用
- 连字符 first-paragraph
- 下划线 first_paragraph
- 小驼峰 firstParagraph
- 大驼峰 FirstParagraph

 /* 元素选择器 */
    h1 {
      margin: 10px;
    }

    /* 类选择器 */   
    /* 多个单词组成的类名可以用很多写法 */
    /* 连字符 first-paragraph
    	下划线 first_paragraph
    	小驼峰 firstParagraph
    	大驼峰 FirstParagraph
    */
    .first-paragraph {
      background-color: red;
    }

    /* id选择器(在同一个HTML文档里，id是唯一的，不要重复) */
    #content {
      font-size: 20px;
    }

3.3 属性选择器 attribute selectors

作用：根据元素拥有的对应属性或属性和属性的值来选择元素

 /* 属性选择器 */
    [title] {
      background-color: green;
    }

    [title=paragraph] {
      color: red;
    }

其余一些需要了解的用法：

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

3.4 组合-后代选择器 descendant combinator

作用：选择所有的直接和间接后代，或者选择直接后代
两种用法：
- 全部子代(直接+间接子代)：选择器之间以空格分割
- 直接子代：选择器之间以 > 分割

/* 后代选择器 */
    /* 全部后代 */
    #content div {
      color: red;
    }

    /* 直接子代 */
    #content>div {
      color: blue;
    }

3.5 组合-兄弟选择器 sibling combinator

作用：选择相邻兄弟，或者选择普遍兄弟
两种用法：
- 相邻兄弟：使用符号+连接
- 普遍兄弟：使用符号~连接

/* 相邻兄弟 */
    /* .one + div {
      color: red;
    } */

    /* 直接兄弟 */
    .one ~ div {
      color: red;
    }

在这里插入图片描述

3.6 选择器组-交集选择器

作用：选择同时符合两个选择器条件，精准的选择某一个元素
用法: 两个选择器紧密连接,如下表示类名和元素选择器结构，即类名为one的div元素

3.7 选择器组-并集选择器

作用：同时给符合对应选择器条件的元素设置相同的样式
用法: 选择器直接使用逗号,分割

3.8 伪类 Pseudo-classes

认识伪类： 伪类是选择器的一种，它用于选择处于特定状态的元素
常见的伪类：
1. 动态伪类 dynamic pseudo-classes
  - :link :visited :focus :hover :active
2. 目标伪类 target pseudo-classes
  - :target
3. 语言伪类 language pseudo-classes
  - :lang()
4. 元素状态伪类 UI element states pseudo-classes
  - :enabled :disabled :checked
5. 结构伪类 structural pseudo-classes
  - :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type()
  - :first-child :last-child() :fist-of-type :last-of-type
  - :root :only-child :only-of-type :empty
6. 否定伪类 negation pseudo-classes
  - :not()

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

3.8.1 动态伪类 dynamic pseudo-classes

作用： 动态伪类常用于设置超链接各个状态下的样式，除了a元素，:hover、:active也能用在其他元素。:focus常用于表单输入获取焦点时使用，但是a元素也可以被Tab键选中聚焦，所以:focus也适用于a元素
动态伪类书写顺序： :link :visited :focus :hover :active
注意: :hover必须放在:link和:visited后面才能完全生效,:active必须放在:hover后面才能完全生效

用a元素使用举例：

  /* 未访问链接时 */
    a:link {
      color: orange;
    }

    /* 已访问链接时 */
    a:visited {
      color: red;
    }
    /* a链接获得焦点时（如使用tab选中时） */
    a:focus {
      color: pink;
    }

    /* 鼠标挪动到链接上 */
    a:hover {
      color: green;
    }

    /* 鼠标在链接上长按未松开时 */
    a:active {
      color: blue;
    }

3.9 伪元素 pseudo-elements

认识伪元素： 是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式
常见的伪元素：
- ::first-line
- ::first-letter
- ::before
- ::after

其中，伪元素虽然可以用:单引号，但是为了区分伪类和伪元素，我们常用 ::双引号表示

3.9.1 ::first-line & ::first-letter

::first-line 在一段文本中，无论盒子大小都可以最准确的给首行文本设置属性
::first-letter 可以针对首字母(字符/文本)设置属性

 	p {
      width: 100px;
    }

    p::first-letter {
      color: red;
      font-size: 20px;
    }

    p::first-line {
      background-color: orange;
    }

在这里插入图片描述

3.9.2 ::before & ::after

::before和 ::after 用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)；常通过 content 属性来为一个元素添加修饰性的内容。

	.box::before {
      content: "123";
      color: red;
    }

    .box::after {
      content: "321";
      color: blue;
    }

    .content:hover {
      color: red;
    }

<body>
  
  <div class="box">我是div元素</div>

  <div class="content">我是div元素</div>

</body>

在这里插入图片描述
其中，我们使用::before,::after添加内容和修改内容的样式后可以整合到一个专属的类如.item::before、.item::after,这样每当我们需要添加相同内容时，只需要添加相应的item类名即可。

:before,::after伪元素：

可以插入文字
可以插入图片
是行内非替换元素，无法设置元素的尺寸,无法设置元素的上下内外边距

	.box::after {
      /* content: "321"; */
      content: url(../images/hot.svg);
      color: blue;
    }
    
    .box2::after{
    /* 使用伪元素过程中，不要将content省略*/
    content:""
    display:inline-block;
    width:8px;
    height:8px;
    background-color:red;
    }