HTML详解连载（6）

news2024/11/25 10:53:48

HTML详解连载（6）

专栏链接 [link](http://t.csdn.cn/xF0H3)
- 下面进行专栏介绍
开始喽
- CSS特性
- - 继承性
  - - 注意
  - 层叠性
  - - 特点
  - 优先级
  - - 规则
    - 公式
    - - 注意
  - 叠加计算
  - - 公式（每以及之间不存在进位）
    - 规则
- Emmet写法分析
- - 属性名
  - 属性值
  - 注意
- 背景图平铺方式
- - 属性名
  - 属性值
- 背景图位置属性
- - 属性名
  - 属性值
  - 关键字
  - 坐标（数字+pz，正负都可以）
  - - 注意
- 背景图缩放
- - 作用
  - 属性名
  - 常用属性值
  - 数字+单位（px）
- 背景图固定
- - 作用
  - 属性名
  - 属性值
- 背景复合属性
- - 属性名
  - 属性值
- 显示模式
- - 标签（元素）的显示方式
  - - 作用
  - 块级元素
  - - 位置
  - 行内元素
  - - 位置
    - 尺寸
  - 行内块元素
  - - 位置
    - 尺寸
  - 转换显示模式
  - - 属性名

专栏链接 link

下面进行专栏介绍

本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记
进行适当修改。希望能对大家能有所帮助，同时也是请大家对我进行监督，对我写的代码进行建议，互相学习。

开始喽

在这里插入图片描述

CSS特性

优简代码/定位问题，并解决问题
继承性
层叠性
优先级

继承性

子级默认继承父级的文字控制属性

注意

标签自己有样式，则生效自己的样式，不继承

层叠性

特点

相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加：不同的CSS属性都生效

优先级

也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

规则

选择器优先级高的样式生效

公式

通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

注意

选中标签的范围越大，优先级越低

叠加计算

如果是符合选择器，则需要权重叠加计算

公式（每以及之间不存在进位）

行内样式，id选择器个数，类选择器个数，标签选择器个数

规则

1、从左到右依次比较个数，同一级个数多的优先级高，如果个数相同，则向
	后比较!important权重最高
2、继承权重最低

在这里插入图片描述

Emmet写法分析

代码的简写方式，输入缩写 VScode会自动生成对应的代码
HTML
CSS：大多数简写方式为属性单词的首字母
背景图
网页中，使用背景图实现装饰性的图片效果。

属性名

background-image(bgi)

属性值

url(背景图URL)

注意

背景图默认是平铺的效果

背景图平铺方式

属性名

background-repeat（bgr）

属性值

属性	含义
no-repeat	不平铺
repeat	平铺（默认）
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

背景图位置属性

属性名

background-position（bgp）

属性值

水平方向位置处置方向位置

关键字

关键字	含义
left	左侧
right	右侧
center	居中
top	顶部
button	底部

坐标（数字+pz，正负都可以）

注意

关键字取值方式写法，可以颠倒顺序
可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中

背景图缩放

作用

设置背景图大小

属性名

backgro-size（bgz）

常用属性值

关键字	含义
cover	等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
contain	等比例缩放背景图片以完全装入背景区，可能背景区部分空白
百分比	根据盒子尺寸计算图片大小