前端体系复习html和css(四)

知识不过脑子
282 阅读7分钟

一. CSS属性 - 文本

1.1. text-decoration

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

text-decoration有如下常见取值: 

none：无任何装饰线

✓ 可以去除a元素默认的下划线

  1. underline：下划线

  2. overline：上划线

  3. line-through：中划线（删除线）

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

CSS属性 – text-decoration(常用) 

1.2. text-transform(了解)

text-transform用于设置文字的大小写转换(实际开发中用JavaScript代码转化的更多.)

Transform单词是使变形/变换(形变);

text-transform有几个常见的值: 

  1.  capitalize：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写

  2. uppercase：(大写字母)将每个单词的所有字符变为大写

  3. lowercase：(小写字母)将每个单词的所有字符变为小写

  4. none：没有任何影响

1.3. text-indent

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

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

1.4. text-align(重要)

text-align: 直接翻译过来设置文本的对齐方式;

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

常用的值:

  • left：左对齐

  • right：右对齐

  • center：正中间显示

  • justify：两端对齐

image.png

1.5. letter-word-spacing

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

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

二. CSS属性 - 字体

2.0. font-size

具体数值+单位

  • 比如100px

  • 也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%

百分比

  • 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

2.1. font-family

font-family用于设置文字的字体名称;

  • 可以设置1个或者多个字体名称; 

  • 浏览器会选择列表中第一个该计算机上有安装的字体; 

  • 或者是通过 @font-face 指定的可以直接下载的字体。

淘宝使用的字体:

image.png

2.2 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.3. font-style

font-style用于设置文字的常规、斜体显示 normal：常规显示

◼ italic(斜体)：用字体的斜体显示(通常会有专门的字体) 

◼ oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜) 

◼ em、i、cite、address、var、dfn等元素的font-style默认就是italic

2.4. font-varient

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

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

  • variant是变形的意思; 

◼ 可以设置的值如下

  • normal：常规显示

  • small-caps：将小写字母替换为缩小过的大写字母

2.5. line-height

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

行高可以先简单理解为一行文字所占据的高度

  • 行高的严格定义是：两行文字基线（baseline）之间的间距

  • 基线（baseline）：与小写字母x最底部对齐的线

image.png

注意区分height和line-height的区别:

height：元素的整体高度

line-height：元素中每一行文字所占据的高度

应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中(line-height等同于height)

2.6. font缩写属性

  • font-size/line-height font-family;

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选择器(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）, 使用元素的名称;
  • 类选择器（class selectors）, 使用 .类名 ;
  • id选择器（id selectors）, 使用 #id;

image.png

id注意事项:

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

  • id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识

  • 最好不要用标签名作为id值 中划线又叫连字符（hyphen）

3.3. 属性选择器

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

image.png

其他了解的(不用记)

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

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

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

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

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

3.4. 后代选择器(重要)

后代选择器一: 所有的后代(直接/间接的后代)

  • 选择器之间以空格分割

image.png 后代选择器二: 直接子代选择器(必须是直接自带)

  • 选择器之间以 > 分割;

image.png

3.5. 兄弟选择器

兄弟选择器一:相邻兄弟选择器

  • 使用符号 + 连接

image.png

兄弟选择器二: 普遍兄弟选择器 ~

  • 使用符号 ~ 连接

image.png

3.6. 选择器组(重要)

  • 交集选择器:交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)

    • div.box

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

image.png

  • 并集选择器:符合一个选择器条件即可(两个选择器以,号分割)
    • div, p, h1 {}

image.png

3.7. 伪类

伪类的由来(概念):

  • Pseudo-classes: 翻译过来是伪类; 

  • 伪类是选择器的一种，它用于选择处于特定状态的元素; 例子：比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色;

常见的伪类有：

◼ 所有的伪类: developer.mozilla.org/zh-CN/docs/…

3.8 动态伪类（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元素

动态伪类编写顺序建议为：

image.png

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

image.png

伪元素（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可以针对首字母设置属性

image.png

image.png

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

::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片) 

常通过 content 属性来为一个元素添加修饰性的内容。

image.png

avatar
文章
阅读
粉丝