学习笔记
🗒️前端-阶段01-CSS-Day06
00 分钟
2024-6-24
2024-10-29
type
status
date
slug
summary
tags
category
icon
password

1 CSS 常用属性

1.1 文本样式

属性名
作用
属性值
letter-spacing
字间距
长度
word-spacing
词间距（中文无效果）
长度
text-decoration
文本修饰线
none：无修饰线。 underline：下划线。 overline：上划线。 line-throuth：删除线
text-indent
首行缩进
长度
text-align
文本水平对齐方式
left：左对齐。 right：右对齐。 center：居中对齐
vertical-align
与同行文本如何对齐
baseline：基线对齐。 top：顶线对齐。 middle：中线对齐。 bottom：底线对齐。 sub：下标字。 super：上标字。 长度：元素底部与基线的距离
line-height
行高
长度

① vertical-align

② line-height 设置行高

行高的概念：
第一行文字中线与元素顶部距离是行高一半，最后一行文字中线与元素底部距离是行高一半！
使用行高实现元素中的一行文字垂直居中，满足以下条件：
line-height 是 font 的子属性：

1.2 背景样式

属性名
作用
属性值
background-color
背景颜色
颜色
background-image
设置背景图像地址
url(地址)
background-repeat
设置背景图像重复方式
repeat：重复。 repeat-x：横向重复。 repeat-y：纵向重复。 no-repeat：不重复。
background-position
设置背景图像位置
关键字。 两个长度表示的坐标。 百分比
background-attachment
背景图像固定
scroll：随元素滚动，默认值。 fixed：固定。
background
背景复合属性
多个值使用空格分隔

① 背景颜色

① 设置背景图像的位置 background-position

使用关键字设置属性值：
通过指定坐标（用长度）设置属性值：
使用百分比设置属性值：
background-position 的两个子属性：

② 背景图像固定 background-attachment

③ 背景复合属性 background

1.3 鼠标光标样式

属性名
作用
属性值
cursor
设置鼠标光标
pointer：小手。 move：移动图标。

1.4 列表样式

属性名
作用
属性值
list-style-type
设置列表项图标
none：无
list-style-position
设置列表项图标位置
outside：在li外面。 inside：在li里面。
list-style-image
自定义列表项图标
url(图片地址)
list-style
复合属性
多个值使用空格分隔
注意： 只有 ul、ol、li 这些标签设置列表样式才有效果！

1.5 表格样式

属性名
作用
属性值
table-layout
设置列宽固定
auto：默认值。 fixed：固定。
border-spacing
设置单元格之间的距离
长度
border-collapse
合并单元格边框
separate：默认值。 collapse：合并
caption-side
标题位置
top：表格上面。 bottom：表格下面
empty-cells
没有内容的单元格显示还是隐藏
show：显示，默认值。 hide：隐藏
注意： 表格相关的属性只能设置到 table 标签上才生效！

2 CSS 选择器

2.1 基本选择器

① ID 选择器

② 类选择器

③ 标签名选择器

④ 全局选择器

2.2 组合选择器

① 后代元素选择器

② 子元素选择器

③ 交集选择器

④ 并集选择器

2.3 伪类选择器

2.4 选择器权重（优先级）

① 单个选择器之间的权重

② 组合选择器优先级比较规则

组合： 并集选择器的组合，各自计算各自的权重，不会放在一起计算。
上一篇
前端-阶段01-CSS-Day07
下一篇
前端-阶段01-CSS-Day05
评论
Loading...
目录