寒假提升 ｜ Day4 CSS 第二部分

务必下载！！

今日的代码和讲义 以及思维导图：【点击此链接下载 Day04.zip】

大纲

一. CSS属性 - 文本

1.1. text-decoration (常用)

• text-decoration 用于设置文字的装饰线

  • decoration 是装饰/装饰品的意思;

• text-decoration 有如下常见取值:

  • none :无任何装饰线
    • ✓ 可以去除 a元素 默认的下划线
  • underline :下划线
  • overline :上划线
  • line-through :中划线(删除线)

◼ a元素有下划线的本质是被添加了 text-decoration 属性

1.2. text-transform(了解)

• text-transform 用于设置文字的大小写转换
  • Transform 单词是使变形/变换(形变);
• text-transform 有几个常见的值:
  • capitalize :(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
  • uppercase :(大写字母)将每个单词的所有字符变为大写
  • lowercase :(小写字母)将每个单词的所有字符变为小写
  • none :没有任何影响

◼ 实际开发中用 JavaScript代码转化的更多.

1.3. text-indent(一般)

• text-indent用于设置第一行内容的缩进
  • text-indent: 2em; 刚好是缩进2个文字

1.4. text-align(重要)

• 案例: 文字的居中(字面理解)
• 案例: 图片的居中(MDN)
• 案例: div元素的居中(W3C inline-level)
  • 特性
  • 或者其他方法

也就是说 text-align 只能把行内元素居中

如果是块级别元素可以用 margin: 0 auto; 来对齐

或者使用 inline-block 来使用 text-align

• text-align: 直接翻译过来设置文本的对齐方式 ;
• MDN: 定义行内内容(例如文字)如何相对它的块父元素对齐;
• 常用的值
  • left :左对齐
  • right :右对齐
  • center :正中间显示
  • justify :两端对齐

text-align-last ：justify 最后一行文字的排布

1.5. letter-word-spacing(一般)

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

二. CSS属性 - 字体

2.1. font-size(高度)

• 20px; 2em; 200%

• font-size 决定文字的大小

• 常用的设置

  • 具体数值+单位
    • ✓ 比如 100px
    • ✓ 也可以使用 单位 (不推荐):1em代表100%，2em代表200%，0.5em代表50%
      • 字体大小可以继承(先略过)
  • 百分比
    • ✓ 基于父元素的 font-size 计算，比如50%表示等于父元素font-size的一半

2.2. font-family(重要,不过一般仅设置一次)

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

2.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

2.4. font-style(一般)

• font-style 用于设置文字的常规、斜体显示
  • normal:常规显示
  • italic(斜体):用字体的斜体显示(通常会有专门的字体)
  • oblique(倾斜):文本倾斜显示(仅仅是让文字倾斜)
• em、i、cite、address、var、dfn 等元素的 font-style 默认就是 italic

2.5. font-varient(了解)

• 小写字母以大写显示, 但是高度保持小写的高度

• font-variant 可以影响小写字母的显示形式

  • variant 是变形的意思;

• 可以设置的值如下

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

2.6. line-height(常用)

• 两个 基线(baseline) 距离
• 一行文本 -> line-height
• 行高 - 文本高度 = 行距

• line-height 用于设置文本的行高
  • 行高可以先简单理解为一行文字所占据的高度

• 行高的严格定义是: 两行文字基线(baseline)之间的间距
• 基线(baseline) : 与小写字母x最底部对齐的线

• 注意区分 height 和 line-height 的区别
  • height :元素的整体高度
  • line-height :元素中每一行文字所占据的高度
• 应用实例: 假设 div 中只有一行文字，如何让这行文字在div内部垂直居中
  • 让 line-height 等同于 height

2.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不可以调换顺序，不可以省略

三. CSS选择器

CSS选择器(selector)

• 开发中经常需要找到特定的网页元素进行设置样式
  • 思考:如何找到特定的那个元素?
• 什么是CSS选择器
  • 按照一定的规则 选出符合条件的元素 ，为之添加CSS样式
• 选择器的种类繁多，大概可以这么归类
  • 通用选择器(universal selector)
  • 元素选择器(type selectors)
  • 类选择器(class selectors)
  • id选择器(id selectors)
  • 属性选择器(attribute selectors)
  • 组合(combinators)
  • 伪类(pseudo-classes)
  • 伪元素(pseudo-elements)

3.1. 统配选择器

• 通用选择器( universal selector )
  • 所有的元素都会被选中;
• 一般用来给所有元素作一些通用性的设置
  • 比如内边距、外边距
  • 比如重置一些内容;
• 效率比较低，尽量不要使用;

3.2. 简单选择器(重要)

• 简单选择器是开发中用的最多的选择器:
  • 元素选择器( type selectors ), 使用 元素的名称; div
  • 类选择器( class selectors ), 使用 .类名 ; .class
  • id选择器( id selectors ), 使用 #id; #id

id注意事项

• 一个 HTML 文档里面的 id值 是 唯一 的，不能重复
  • id 值 如果由多个单词组成，单词之间可以用 中划线-、下划线_ 连接，也可以使用 驼峰标识
  • 最好 不要用标签名作为 id 值

◼ 中划线又叫 连字符(hyphen)

3.3. 属性选择器

• 拥有某一个属性 [att]

• 属性等于某个值 [att=val]

• 其他了解的(不用记)

  • [attr*=val]: 属性值包含某一个值val;

  • [attr^=val]: 属性值以val开头;

  • [attr$=val]: 属性值以val结尾;

  • [attr|=val]: 属性值等于val或者以val开头后面紧跟连接符-;

  • [attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割;

3.4. 后代选择器(重要)

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

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

3.5. 兄弟选择器

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

• 兄弟选择器二:普遍兄弟选择器 ~（选的是后面的）
• 使用符号 ~ 连接

3.6. 选择器组(重要)

交集选择器

• div.box
• 既是一个div, 也必须有一个 class 为box

并集选择器

• div, p, h1 {}

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

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

3.7. 伪类

伪类的由来(概念)

动态伪类

• hover
• 了解
  • link
  • visited
  • focus
  • hover
  • active

• 什么是伪类呢?
  • Pseudo-classes: 翻译过来是伪类;
  • 伪类是 选择器的一种，它用于选择处于特定状态的元素;

◼ 比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色;

伪类(pseudo-classes)

常见的伪类有

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

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()

7. 所有的伪类: 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(了解)

• ::first-line 可以针对首行文本设置属性
• ::first-letter 可以针对首字母设置属性

伪元素 - ::before 和 ::after (常用)

• ::before 和 ::after 用来在一个元素的 内容之前或之后插入 其他内容(可以是文字、图片)
  • 常通过 content 属性 来为一个元素添加修饰性的内容。
• 使用伪元素的过程中，不要将 content 省略，如果没有文字就用 content: ""。
• 如果位置不对的话可以用相对定位来进行微调 position: relative; left: 5px; top: 2px;
• 如果要设置宽和高，先把它变成一个 div ：display: inline-block;