二、对CSS的初步了解及text和font中CSS属性学习，CSS选择器

Lyk 2022/4/14 HTMLCSSlink元素浏览器渲染流程CSS文本相关属性CSS字体相关属性CSS选择器

# 1、CSS样式应用到元素上的3种方法及对color属性的补充

内联样式（inline style）
内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）
外部样式表（external style sheet）

<!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>
  
  <!-- 外部样式表  -->
  <link rel="stylesheet" href="./style.css">

  <style> /* 内部样式表 */
    .title {
      font-size:24px;
      margin:20px 0;
      font-weight:700;
    }
  </style>
  
</head>
<body>
  <div class="title" style="color:red;">div元素</div>   <!-- 内联样式 -->
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

如果引入外部的css文件较多，我们推荐下面的方法：

<!-- 如一共需要引入多个CSS文件，我们可以通过下面方法,只需要引入一个index.css文件即可完成引入多个css文件
 style.css
 reset.css
 ...
-->
<!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>
  <!-- 
  index.css 文件中的内容如下：
  (下面在index.css文件中导入其他css文件的两种写法 都是可以用的)

  @import url(./style.css)
  @import "./reset.css"
  ...

  即在index.css文件中导入另外多个css文件，这样我们就完成了通过一个css文件 引入多个css文件了，而不需要用link一个一个去引入了！
-->
  <link rel="stylesheet" href="./index.css">
</head>
<body></body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

对CSS的color属性的补充
- color属性用来设置文本内容的前景色;
- 包括文字、装饰线、边框、外轮廓等的颜色

# 2、对HTML中link元素的了解

link元素是外部资源链接元素，规范了文档与外部资源的关系
- link元素通常是在head元素中
最常用的链接是样式表（CSS）；
- 此外也可以被用来创建站点图标（比如 “favicon” 图标）；
link元素常见的属性：
- href：此属性指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的。
rel：指定链接类型，常见的链接类型：所有链接类型查看 (opens new window)
- icon：站点图标；
- stylesheet：CSS样式；
- dns-prefetch：提示浏览器该资源需要在用户点击链接之前进行 DNS 查询和协议握手。（页面优化）

# 3、认识进制及计算机中的进制

如何表示二进制、八进制、十六进制?
- 十进制：我们平时使用的数字都是十进制的，当我写下一个数字的时候，你会默认当做十进制来使用
- 二进制：（0b开头, binary）：其中的数字由0、1组成，可以回顾之前学习过的机器语言。0b10 = 2
- 八进制：（0o开头, Octonary）：其中的数字由0~7组成。 0o10 = 8
- 十六进制：（0x开头, hexadecimal）：其中的数字由0~9和字母a-f组成（大小写都可以）0x10 = 16
进制之间的转换
- 十进制转其他进制：整除, 取余数.
- 其他进制转十进制：
  - 比如二进制的1001转成十进制: 1 * 2³ + 0 * 2² + 0 * 2 + 1 = 9
  - 比如八进制的1234转成十进制: 1 * 8³ + 2 * 8² + 3 * 8 + 4 = 668
  - 比如十六进制的522转成十进制: 5 * 16² + 2 * 16 + 2 = 1314
二进制转八进制：三位转成一位八进制
二进制转十六进制：四位转成一位十六进制

# 4、CSS颜色的表示方法

在CSS中，颜色，有以下几种表示方法：
颜色关键字（color keywords）：
- 是不区分大小写的标识符，它表示一个具体的颜色；
- 可以表示哪些颜色呢？颜色关键字查询 (opens new window)
RGB颜色：
- RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；
- RGB各个原色的取值范围是 0~255；
RGB颜色可以通过以#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示。
- 方式一：十六进制符号：#RRGGBB[AA]
  - R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；A是可选的。
    
    比如，#ff0000等价于#ff0000ff；
- 方式二：十六进制符号：#RGB[A]
  - R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；
  - 三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版。
    
    比如，#f09和#ff0099表示同一颜色。
  - 四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。
    
    比如，#0f38和#00ff3388表示相同颜色。
- 方式三：函数符： rgb[a](R, G, B[, A])
  - R（红）、G（绿）、B （蓝）可以是< number >（数字），或者< percentage >（百分比），255相当于100%。
  - A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）。

# 5、浏览器渲染的流程

当浏览器解析到head中link引入的css文件时，这里浏览器不会等待css文件载入且解析完成，
而是会继续去按照它的步骤解析下去，
直到HTML的DOM结构解析完成并创建DOM树时，才会等待CSS解析完成，
CSS解析完成后，将样式附加到dom节点，
形成渲染树(render tree)，解析后展示在浏览器中。
attach style to dom nodes翻译：将样式附加到dom节点

# 6、CSS属性学习之文本text

# 6.1_text-decoration(常用)
- text-decoration用于设置文字的装饰线； decoration是装饰/装饰品的意思;
- text-decoration有如下常见取值:
  - none：无任何装饰线；可以去除a元素默认的下划线
  - underline：下划线
  - overline：上划线
  - line-through：中划线（删除线）
- a元素有下划线的本质是被添加了text-decoration属性
# 6.2_text-align(重要)
- text-align: 直接翻译过来设置文本的对齐方式;
- MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐;
- 常用的值
  - left：左对齐
  - right：右对齐
  - center：正中间显示
  - justify：两端对齐
- W3C中的解释: This shorthand property sets the 'text-align-all’and 'text-align-last’ properties and describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill（这个简写属性设置了‘text-align-all’ 和 ‘text-align-last’ 属性，并描述了如果一个块的内联级别的内容(即inline或inline-block) 没有完全填充，如何沿内联轴对齐。）
# 6.3_text-transform(一般)
- text-transform用于设置文字的大小写转换； Transform单词是使变形/变换(形变);
- text-transform有几个常见的值:
  - capitalize：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
  - uppercase：(大写字母)将每个单词的所有字符变为大写
  - lowercase：(小写字母)将每个单词的所有字符变为小写
  - none：没有任何影响
- 实际开发中用JavaScript代码转化的更多
# 6.4_text-indent(一般)
- text-indent用于设置第一行内容的缩进
- text-indent: 2em; 刚好是缩进2个文字；
# 6.5_letter-spacing、word-spacing(一般)
- letter-spacing：用于设置字母之间的间距；属性值默认是0，可以设置为负数
- word-spacing：用于设置单词之间的间距；属性值默认是0，可以设置为负数

# 7、CSS属性学习之字体font

# 7.1_font-size(重要)
- font-size决定文字的大小
- 常用的设置
  - 具体数值+单位
    1. 比如100px
    2. 也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%
  - 百分比
    1. 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
# 7.2_font-family (重要, 不过一般仅设置一次)
- font-family用于设置文字的字体名称
  - 可以设置1个或者多个字体名称;
  - 浏览器会选择列表中第一个该计算机上有安装的字体;
  - 或者是通过 @font-face 指定的可以直接下载的字体。
- 淘宝使用的字体

body, button, input, select, textarea{
  font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}
/* 5b8b\4f53的意思是宋体，\5B8B\4F53是宋体的Unicode编码写法。  */

1
2
3
4

# 7.3_font-weight(重要)
- font-weight用于设置文字的粗细（重量）
- 常见的取值:
  - 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
  - normal：等于400
  - bold：等于700
- strong、b、h1~h6等标签的font-weight默认就是bold
# 7.4_line-height(常用)
- line-height用于设置文本的行高;行高可以先简单理解为一行文字所占据的高度
- 行高的严格定义是：两行文字基线（baseline）之间的间距
- 基线（baseline）：与小写字母x最底部对齐的线
- 注意区分height和line-height的区别
  - height：元素的整体高度
  - line-height：元素中每一行文字所占据的高度
- 应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中
  - 让line-height等同于height
# 7.5_font-style(一般)
- font-style用于设置文字的常规、斜体显示
  - normal：常规显示
  - italic(斜体)：用字体的斜体显示(通常会有专门的字体)
  - oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)
- em、i、cite、address、var、dfn等元素的font-style默认就是italic
# 7.6_font-variant(了解)
- font-variant可以影响小写字母的显示形式; variant是变形的意思;
- 可以设置的值如下
  - normal：常规显示
  - small-caps：将小写字母替换为缩小过的大写字母
# 7.7_font缩写属性(常用)
- font是一个缩写属性
  - font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;
  - 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-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar

1
2

# 8、CSS常见选择器

# 8.1_通用选择器（了解）
- 通用选择器（universal selector）：所有的元素都会被选中;
  - 写法如给所有元素设置字体大小： * { font-size:40px; }
- 一般用来给所有元素作一些通用性的设置
  - 比如内边距、外边距;
  - 比如重置一些内容;
- 效率比较低，尽量不要使用;（因为会把HTML中所有的元素都遍历一遍，都加上设置的样式。而有些元素，我们在项目开发中压根不用，所有效率会比较低）
# 8.2_简单选择器（常用）

简单选择器是开发中用的最多的选择器:
- 元素选择器（type selectors）, 使用元素的名称;
- 类选择器（class selectors）, 使用 .类名 ;
- id选择器（id selectors）, 使用 #id;
  - id选择器的注意事项:
    1. 一个HTML文档里面的id值是唯一的，不能重复
    2. id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
    3. 最好不要用标签名作为id值
    4. 中划线又叫连字符（hyphen）
# 8.3_属性选择器(attribute selectors)（了解）
- 拥有某一个属性 [att]
- 属性等于某个值 [att=val]
- 其他了解的(不用记)
  1. [attr*=val]：属性值包含某一个值val;
  2. [attr^=val]：属性值以val开头;
  3. [attr$=val]：属性值以val结尾;
  4. [attr|=val]：属性值等于val或者以val开头后面紧跟连接符-;
  5. [attr~=val]：属性值包含val, 如果有其他值必须以空格和val分割;
- 使用属性选择器的例子：

<style>
  [title] {
    font-size:30px;    
  }
  [title = kk] {
    font-size:20px;
  }
</style>

<div title="lyk">我是一个div元素</div>
<p title="kk">我是一个div元素</p>

1
2
3
4
5
6
7
8
9
10
11

# 8.4_后代选择器（descendant combinator）（常用）
- 后代选择器一: 所有的后代(直接/间接的后代) -选中所有指定后代
  
  选择器之间以空格分割；如div元素下的所有span元素： div span{}
- 后代选择器二: 直接子代选择器(必须是直接子代) -选中所有指定子代
  
  选择器之间以 > 分割；如div元素下的span元素：div>span{}
# 8.5_兄弟选择器(sibling combinator)（一般）
- 兄弟选择器一：相邻兄弟选择器 +；使用符号 + 连接
  - W3C官方描述:相邻的兄弟组合器( + ) 分隔两个选择器，并且仅当它紧跟在第一个元素之后，并且它们都是同一个 parent 的子+元素时才匹配第二个元素。
- 兄弟选择器二:：普遍兄弟选择器 ~ ；使用符号 ~ 连接
  - W3C官方描述:通用兄弟组合器( ~) 分隔两个选择器并匹配第二个元素的所有迭代，这些迭代在第一个元素之后（尽管不一定立即），并且是同一个父元素的子元素 (opens new window)。
- 如下面例子

  <style>
    .default + .content1 {/* div1元素文本没有变红，说明必须是紧跟该元素（span元素）之后相邻的兄弟元素  才能匹配的到*/
      color: red;
    }
    
    .default + .content2 {/* div2元素文本变红了，这里是紧跟该元素（span元素）之后相邻的兄弟元素，所以匹配到了  */
      color: red;
    }
    
    .content1 ~ p {/*  p1元素没有变黄，p2,p3元素变黄了；说明必须是该元素（div1元素）之后的兄弟元素才能匹配的到  */
      color:yellow;
    }
  </style>

  <div class="box">
    <p class="baz1">我是一个p1元素</p>
    <div class="content1">我是一个div1元素</div>
    <span class="default">我是一个span元素</span>
    <div class="content2">我是一个div2元素</div>
    <p class="baz2">我是一个p2元素</p>
    <p class="baz3">我是一个p3元素</p>
  </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 8.6_选择器组 – 交集并集选择器（常用）
- 交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)
  
  在开发中通常为了精准的选择某一个元素;
- 并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)
  
  在开发中通常为了给多个元素设置相同的样式;

  <style>
    div.content1{      /* 交集选择器 */
      color: red;
    }
    
    p,span,h2{      /* 并集选择器 */
      color:blue;
    }
  </style>

  <div class="box">
    <p class="baz1">我是一个p1元素</p>
    <div class="content1">我是一个div1元素</div>
    <span class="default">我是一个span元素</span>
    <div class="content2">我是一个div2元素</div>
    <p class="baz2">我是一个p2元素</p>
    <p class="baz3">我是一个p3元素</p>
    <h2>我是一个h2元素</h2>
  </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 8.7_伪类选择器（常用）

# 1、认识伪类
- Pseudo-classes: 翻译过来是伪类;
- 伪类是选择器的一种，它用于选择处于特定状态的元素;
- 比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色;
# 2、常见的伪类
- 1.动态伪类（dynamic pseudo-classes）
  - :link、:visited、:hover、:active、:focus
- 2.目标伪类（target pseudo-classes）
  - :target
- 3.语言伪类（language pseudo-classes）
  - :lang( )
- 4.元素状态伪类（UI element states pseudo-classes）
  - :enabled、:disabled、:checked伪类(pseudo-classes)
- 5.结构伪类（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
- 6.否定伪类（negation pseudo-classes）(后续学习)
  - :not()
- 所有的伪类学习查询: 所有伪类学习查询 (opens new window)
# 3、动态伪类（dynamic pseudo-classes)
- 使用举例
  1. a:link 未访问的链接（只能用在a元素）
  2. a:visited 已访问的链接（只能用在a元素）
  3. a:hover 鼠标挪动到链接上(重要) （能用在其他元素）
  4. a:active 激活的链接（鼠标在链接上长按住未松开）（能用在其他元素）
- 使用注意
  1. :hover必须放在:link和:visited后面才能完全生效
  2. :active必须放在:hover后面才能完全生效
  3. 所以建议的编写顺序是 :link、:visited、:hover、:active
- 除了a元素，:hover、:active也能用在其他元素上
# 4、动态伪类 - :focus
1. :focus指当前拥有输入焦点的元素（能接收键盘输入）
  - 文本输入框一聚焦后，背景就会变红色
2. 因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
3. 动态伪类编写顺序建议为
  - :link、:visited、:focus、:hover、:active
4. 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
  - 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red
# 8.8_伪元素（常用）
- 常用的伪元素有
  - :first-line、::first-line
  - :first-letter、::first-letter
  - :before、::before
  - :after、::after
- 注意：为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
- 伪元素 - ::before和::after(常用)
  - ::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
  - 常通过 content 属性来为一个元素添加修饰性的内容。
```
<style>
  .box::before {
    content:'123';
    color:red;
  }
  .box::after {
    content: "456";
    color:blue
  }
</style>
<div class="box">我是一个div元素</div>

```
1
2
3
4
5
6
7
8
9
10
11
12
- 伪元素 - ::first-line - ::first-letter(了解)
  - ::first-line可以针对首行文本设置属性
  - ::first-letter可以针对首字母设置属性

  <style>  
    .content {
      width: 100px;
    }
    .content::first-letter{
      color: red;
    }
    .content::first-line{
     background-color: blue;
    }
  </style>
  <p class="content">我是一个p元素，我来测试一下伪元素的使用</p>
  <!-- 浏览器显示: 首行第一个文字：‘我’ 为红色
                  首行文字：‘我是一个p元’ 背景颜色为蓝色-->

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Lyk-Blog

Choose mode

二、对CSS的初步了解及text和font中CSS属性学习，CSS选择器

二、对CSS的初步了解及text和font中CSS属性学习，CSS选择器

# 1、CSS样式应用到元素上的3种方法及对color属性的补充

# 2、对HTML中link元素的了解

# 3、认识进制及计算机中的进制

# 4、CSS颜色的表示方法

# 5、浏览器渲染的流程

# 6、CSS属性学习之文本text

# 6.1_text-decoration(常用)

# 6.2_text-align(重要)

# 6.3_text-transform(一般)

# 6.4_text-indent(一般)

# 6.5_letter-spacing、word-spacing(一般)

# 7、CSS属性学习之字体font

# 7.1_font-size(重要)

# 7.2_font-family (重要, 不过一般仅设置一次)

# 7.3_font-weight(重要)

# 7.4_line-height(常用)

# 7.5_font-style(一般)

# 7.6_font-variant(了解)

# 7.7_font缩写属性(常用)

# 8、CSS常见选择器

# 8.1_通用选择器（了解）

# 8.2_简单选择器（常用）

# 8.3_属性选择器(attribute selectors)（了解）

# 8.4_后代选择器（descendant combinator）（常用）

# 8.5_兄弟选择器(sibling combinator)（一般）

# 8.6_选择器组 – 交集并集选择器（常用）

# 8.7_伪类选择器（常用）

# 1、认识伪类

# 2、常见的伪类

# 3、动态伪类（dynamic pseudo-classes)

# 4、动态伪类 - :focus

# 8.8_伪元素（常用）

Lyk-Blog

二、对CSS的初步了解及text和font中CSS属性学习，CSS选择器

二、对CSS的初步了解及text和font中CSS属性学习，CSS选择器

# 1、CSS样式应用到元素上的3种方法及对color属性的补充

# 2、对HTML中link元素的了解

# 3、认识进制及计算机中的进制

# 4、CSS颜色的表示方法

# 5、浏览器渲染的流程

# 6、CSS属性学习之 文本text

# 6.1_text-decoration(常用)

# 6.2_text-align(重要)

# 6.3_text-transform(一般)

# 6.4_text-indent(一般)

# 6.5_letter-spacing、word-spacing(一般)

# 7、CSS属性学习之 字体font

# 7.1_font-size(重要)

# 7.2_font-family (重要, 不过一般仅设置一次)

# 7.3_font-weight(重要)

# 7.4_line-height(常用)

# 7.5_font-style(一般)

# 7.6_font-variant(了解)

# 7.7_font缩写属性(常用)

# 8、CSS常见选择器

# 8.1_通用选择器（了解）

# 8.2_简单选择器（常用）

# 8.3_属性选择器(attribute selectors)（了解）

# 8.4_后代选择器（descendant combinator）（常用）

# 8.5_兄弟选择器(sibling combinator)（一般）

# 8.6_选择器组 – 交集并集选择器（常用）

# 8.7_伪类选择器（常用）

# 1、认识伪类

# 2、常见的伪类

# 3、动态伪类（dynamic pseudo-classes)

# 4、动态伪类 - :focus

# 8.8_伪元素（常用）

# 6、CSS属性学习之文本text

# 7、CSS属性学习之字体font