2020年2月14号–CSS学习笔记(四)
CSS属性–背景属性
-
background-color属性
background-color
属性用于指定元素的背景颜色。
background-color的属性值
颜色名称关键词:red、blue等;
十六进制值:#fff、#000、#6e6e6e等;
RGB:rgb(255,255,255)、rgba(0,0,0,0.5)等(使用rgba可以实现透明背景色); -
background-image属性
background-image
属性在元素中设置一个或多个背景图像。
默认情况下,背景图像放置在元素的左上角,并且水平重复和垂直以覆盖整个元素 (相当于background-repeat:repeat
)。 -
background-repeat属性
background-repeat
属性指定如何重复背景图像。 背景图像可以沿水平轴 ,垂直轴 ,两个轴重复,或者根本不重复。repeat-x 只会水平重复背景图像。repeat-y 只会垂直重复背景图像。
设置继承值
当您将background-repeat
属性设置为inherit
时,它将采用与元素父级 的属性 相同的指定值。 -
background-attachment属性
background-attachment
属性设置背景图像是固定的 还是与页面的其余部分一起滚动 。
background-attachment
属性的参数:
scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed: 当页面的其余部分滚动时,背景图像不会移动 。
inherit: 规定应该从父元素继承background-attachment
属性的设置。
注意: 设置了fixed属性后,即使元素具有滚动机制,背景图像会固定在某个位置不会跟随页面元素滚动。
CSS列表样式
-
list-style-type属性
CSS列表属性 允许我们设置不同的列表项标记。 在HTML中,有两种类型的列表:
无序列表(<ul>
) - 列表项目用项目符号标记
有序列表(<ol>
) - 列表项目用数字或字母标记
使用CSS,列表可以进一步风格化,图像可以用作列表项标记。
其中一种方法是使用list-style-type
属性,可以设置为none
,circle
,square
,decimal
,disc
,lower-alpha
等。
list-style-type属性的none
值可以将列表的标记设置为不显示,在使用ul/ol
进行一些网页布局 (例如菜单) 的时候较常使用到~ -
列表的图标和位置
list-style-image
: 指定要用作列表项标记的图像。
list-style-position
: 指定标记框的位置(属性值包括:inside, outside)。
解析:
inside: 列表项目标记放置在文本以内,且环绕文本根据标记对齐
outside: 默认值。 保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 -
list-style属性
list-style
属性是设置list-style-type
,list-style-image
和list-style-position
的简写属性。 -
table属性
border-collapse
属性指定表格边框是否折叠为单个边框或默认分开。 如果边框是分开的,则可以使用border-spacing:length length;
属性来更改间距。
(如果使用border-separate:separate;而没有使用border-spaceing属性来设置分开的间距,默认的还是会有分离的效果的)
如果定义一个length
参数,那么定义的是水平和垂直间距 。
如果定义两个length
参数,那么第一个设置水平间距 ,而第二个设置垂直间距 。 -
caption-side属性
caption-side
属性指定表标题的位置。 值可以设置为top
或bottom
。 -
empty-cells属性
empty-cells
属性指定是否在表格中的空单元格 上显示边框 和背景 。
参数值可以是:
show: 呈现空单元格 的边框
hide : 隐藏空单元格 的边框 -
table-layout属性
table-layout
指定如何计算表格列的宽度 。
参数值可以是:
auto : 当列或单元格宽度未明确设置时,列宽将与组成列的单元格中的内容量成比例。
fixed : 当列或单元格宽度未明确设置时,列宽将不受组成列的单元格中的内容数量的影响。
表格布局默认设置为auto。
设置链接样式
-
设置链接样式
以下伪选择器可用:
a:link - 定义正常的未访问链接的样式
a:visited - 定义访问链接的样式
a:active - 一旦你点击链接,链接就会激活
a:hover - 当鼠标悬停时,链接悬停当为链接设置样式时,必须遵循以下规则:
- a:hover
必须在a:link
和a:visited
之后(鼠标不访问链接,a:link肯定在鼠标悬停前面;如果鼠标点击链接,就会有a:visited样式,但是一瞬间鼠标无法移开链接,因此鼠标还是在悬停,故a:hover必定在后面啦!),- a:active
必须在a:hover
之后(鼠标悬停再点击,因此肯定在后面啦!) -
链接中文本的样式
处理带链接的文本CSS最常见的用法之一是删除下划线。text-decoration
属性用于删除下划线。
以下属性用于控制链接的样式:
border:none
- 从包含链接的图像中删除边框
outline:none
- 删除IE中点击链接行上的虚线边框 -
设置鼠标光标样式
CSS允许您将鼠标悬停 在元素上时设置所需的光标样式。cursor
属性
cursor
参数值:
default
- 默认光标
crosshair
- 光标显示为十字准线
pointer
- 光标显示手形图标
cursor的值较多,以下用图片的形式列出。