Day06_CSS课堂笔记

Day06 CSS 课堂笔记

1 回顾

1. CSS 中的长度单位
   px em 百分比

2. CSS 中颜色设置方式
   颜色名
   rgb()
   hex 十六进制方式


3. CSS 四种基本选择器
   ID选择器
   类选择器
   标签名选择器
   全局选择器


4. 盒子模型 元素的显示模式
   4.1 三种显示模式： inline  block inline-block
   4.2 元素默认的显示模式
   4.3 设置元素的显示模式 display


5. CSS 字体属性
   font-size
   font-weight
   font-style
   font-family
   font

6. CSS 文字颜色
	color

7. CSS 文本属性
	letter-spacing
	word-spacing
	text-indent
	text-decoration
	text-align
	vertical-align
	line-height
	

2 CSS 常用属性

2.1 背景属性

属性名	作用	属性值
background-color	设置背景颜色	颜色
background-image	设置背景图像地址	url(地址)
background-repeat	设置背景图像重复方式	repeat：重复，默认值。 repeat-x：只在水平方向重复。 repeat-y：只在垂直方向重复。 no-repeat：不重复。
background-position	设置背景图像在元素上的位置	关键字方式和坐标方式
background-attachment	设置背景图像固定	scroll：不固定，默认值。 fixed：固定。
background	背景复合属性	多个子属性值用空格分隔

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

使用关键字设置属性值：

如果只设置一个方向的位置，另外一个默认取值 center。

background-position: left top;
background-position: right top;
background-position: right bottom;
background-position: left center;
background-position: center center;
background-position: right;
background-position: bottom;
background-position: center;

使用长度指定的坐标设置属性值：

以元素的左上角为原点，x轴从左到右，y轴从上到下，建立坐标体系，使用坐标设置图像左上角的位置。

如果只设置了一个长度，被认为是 x 坐标，垂直方向默认 center;

background-position: 100px 50px;
background-position: 350px 50px;
background-position: -50px -50px;
background-position: 100px;

background-position 具有两个子属性：

background-position-x: right;
background-position-x: 200px;
background-position-y: bottom;

② 背景图像固定 background-attachment

默认情况下，背景图像定位的坐标原点是元素的左上角；如果设置 background-attachment：fixed； 背景图像定位的坐标原点就是视口的左上角，基于视口进行定位；但是只有背景图像与元素重合的区域才能显示。最终实现的效果：页面滚动，元素也随着页面滚动，但是背景图像是固定的，元素滚动不同位置能显示背景图像不同区域。

③ 背景复合属性 background

使用 background 复合属性可以同时设置背景颜色、背景图片、背景图像重复方式、背景图像定位、背景图像固定方式，把子属性的值作为复合属性的值，没有顺序和数量要求

background: yellow;
background: url(../images/bg.gif);
background: url(../images/美图.jpg) yellow  no-repeat 200px 200px;
background: url(../images/美图.jpg) no-repeat 200px 200px;

2.2 鼠标光标属性

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

自定义鼠标光标：指定图片

cursor: url(../images/arrow.ico),pointer;

2.3 列表属性

属性名	作用	属性值
list-style-type	设置列表项图标	none：无任何图标。 disc：实心圆。 circle：空心圆。 …
list-style-image	自定义列表项图标	url(图片路径)
list-style-position	设置列表项图标位置	outside：在 li 的外边，默认值。 inside：在 li 的里边。
list-style	复合属性	设置一个或多个子属性的值。 多个值使用空格分隔。 没有顺序和数量要求

2.4 表格属性

属性名	作用	属性值
table-layout	设置列宽固定	auto：列宽自动计算，默认值。 fixed：列宽固定，不会受到单元格内容多少的影响。
border-collapse	设置合并单元格边框	collapse： 合并。
border-spacing	设置单元格之间的距离 单元格边框不合并该属性才有意义	长度
caption-side	设置表格标题位置	top：顶部。 bottom：底部。
empty-cells	设置没有内容的单元格是否隐藏 单元格边框不合并该属性才有意义	show：显示，默认值。 hide：隐藏。

表格相关的 5 个 CSS 属性都需要设置给 table 元素！

3 CSS 选择器

3.1 基本选择器

① ID 选择器

② 类选择器

③ 标签名选择器

④ 全局选择器

3.2 组合选择器

① 后代元素选择器

选择器1 选择器2 {
    
}

② 子元素选择器

选择器1>选择器2 {
    
}

③ 交集选择器

选择器1选择器2 {
    
}

1. 多个选择器之间没有空格（有了空格就是后代元素选择器了）。
2. 标签名和类名组成交集选择器的时候，一定把标签名写在前面。

④ 并集选择器

选择器1,选择器2 {
    
}

3.3 伪类选择器

:link
:visited
:hover
:active

1. 多个伪类选择器一起使用，注意顺序，按照： :link :visited :hover :active  (love - hate 原则，辅助记忆)
2. 伪类选择器可以单独使用，大部分情况下与其他选择器组合成交集选择器

3.4 选择器权重（优先级）

① 基本选择器之间的权重

id > class、伪类 > 标签名 > 全局

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

1. 先比较双方ID选择器的数量，胜者优先级高，不再向下比较了
2. 如果 ID 无法分出胜负，比较类名选择器和伪类选择器的数量，胜者优先级高，不再向下比较了
3. 如果类名选择器和伪类选择器无法分出胜负，比较标签名选择器的数量，胜者优先级高
4. 最终无法分出胜负，优先级一样

注意： 并集选择器，各自计算各自的优先级，不能作为一个整体。