导航

(六).CSS的背景样式，鼠标光标样式，列表样式，表格样式，组合选择器

Posted on 2022-03-18 23:05  云语不知  阅读(216)  评论(0)    收藏  举报

1 CSS 常用属性

1.1 背景样式

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

① 背景颜色

1. 元素默认的背景颜色是透明色，默认值是 transparent
2. 给 body 元素设置背景色就是给整个页面设置背景色

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

使用关键字设置属性值：

        .box01 {
            /* 水平位置关键字 left center right */
            /* 垂直位置关键字 top center bottom*/
            /* 设置两个关键字 */
            background-position: left top;
            background-position: left center;
            background-position: left bottom;
            background-position: center center;

            /* 只设置一个关键字，另一个默认值是center */
            background-position: left;
            background-position: bottom;
        }

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

        .box02 {
            /*
                坐标原点：元素的左上角
                x 轴方向：从左到右
                y 轴方向：从上到下
                坐标设置的是图片的左上角位置
            */
            /* 使用两个长度表示坐标 */
            background-position: 12px 50px;

            /* 
                长度和关键字混合用
                background-position: 水平 垂直
            */
            background-position: 100px bottom;
            background-position: center 20px;

            /* 只使用一个长度，该长度表示x坐标，垂直方向默认居中 */
            background-position: 200px;
        }

使用百分比设置图像属性值：

        .box03 {
            /* 
                1. 第一个百分比参照元素宽度，第二个百分比参照元素高度
                2. 根据百分比找出图像上的位置，再根据百分比找出元素上的位置，两点重合
            */
            background-position: 50% 50%;
            /* 只写一个百分比代表参考元素宽度 ，另一个默认是center*/
            background-position: 100%;
        }

background-position 的两个子属性：

background-position-x: 100px;
background-position-y: bottom;

② 背景图像固定 background-attachment

1. 实现背景图像固定效果：背景图像不随着元素滚动；元素滚动时能够显示背景图像的不同部分
2. 设置背景图像固定后，背景图像定位的坐标不再是元素，而是视口（页面显示窗口）

③ 背景复合属性 background

1. background 复合属性没有顺序要求，也没有数量要求

1.2 鼠标光标样式

属性名 作用 属性值
cursor 设置鼠标光标 default：默认
pointer：小手
move：移动图标
...		 
/* 自定义鼠标光标样式  */
/* 用自己的图片代替默认的某种样式 */
cursor: url(光标图片地址), pointer;

1.3 列表样式

属性名 作用 属性值
list-style-type 设置项目图标的类型 none：去掉项目图标
...
list-style-position 设置项目图标位置 outside：在li外面，默认值
inside：在li里面
list-style-image 自定义项目图标 url(图标地址)
list-style 复合属性 没有顺序和数量要求

列表样式只能设置给 ol、ul、li 才能生效

1.4 表格样式

属性名 作用 属性值
table-layout 设置列宽固定 auto：默认值，自动
fixed：固定
border-spacing 设置单元格之间的距离 长度
border-collapse 设置相邻单元格何并 separate：默认值，不合并
collapse：合并
caption-side 设置标题位置 top：表格上面，默认值
bottom：表格下面
empty-cells 设置没有内容的单元格是否隐藏 show：显示
hide：隐藏		 
1. 以上5个css属性，只有设置给table元素才能生效
2. 想要成功设置单元格之间的距离 border-spacing，单元格边框不能合并
3. 想要隐藏没有内容的单元格 empty-cells，单元格边框不能合并

2 CSS 选择器

2.1 基本选择器

① ID 选择器

② 类选择器

③ 标签名选择器

④ 全局选择器

2.2 组合选择器

① 后代元素选择器

选择器1 选择器2 选择器3 ...

② 子元素选择器

选择器1>选择器2>选择器3 ...

③ 交集选择器

选择器1选择器2选择器3...

div.item{}
.box.item{}

④ 并集选择器

选择器1,选择器2,选择器3...

2.3 伪类选择器

:link		未访问过，只适用于超链接
:visited	访问过，只适用于超链接
:hover		鼠标悬停在上面
:active		鼠标悬停在上面且鼠标按键按下

多个伪类选择器一起使用：书写顺序： :link :visited :hover :active  
帮助记忆："lv hao"原则

2.4 选择器权重（优先级）

① 基本选择器之间的权重

id选择器 > 类名选择器、伪类选择器 > 标签选择器 > 全局选择器

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

规则

1、先比较id选择器的数量，数量多该组合选择器的优先级高
2、如果id选择器无法分胜负，再比较类名选择器、伪类选择器的数量，数量多该组合选择器的优先级高
3、如果类名、伪类无法分胜负，再比较标签名选择器的数量，数量多的该组合选择器优先级高

注意

1.该规则只适合后代元素选择器组合，子元素选择器组合、交集选择器组合
2.对于并集选择器组合，则各自比较各自的