百度不在便捷,图片全部失效请多包涵。
前言
前面我们说过了CSS的盒子模型。本篇的内容主要讲述背景样式和列表样式。后续还会有JS 的篇章。
1. 背景样式
背景样式的数属性:
属性名 | 简述 | 值 |
---|---|---|
background-color | 背景颜色 | RGB,颜色英文名称,十六进制,RGBA,默认值(transparent) |
background-image | 背景图片 | URL,none |
background-repeat | 背景图片重复 | repeat重复,no-repeat不重复,repeat-x水平重复,repeat-y纯值重复,inherit继承 |
background-attachment | 背景图片显示方式 | scoll(默认)背景图片随滚动条滚动,fixed当页面的其余部分滚动时,背景图片不会移动 |
background-position | 背景图片的定位 | 百分比,值,top,right,bottom,left,center |
background | 背景缩写 |
1.1background-color|背景颜色
我们测试一下RGB和RGBA的效果:
为了更好的看出两个效果的不同,我们给
background-color:#f00;
<div style="background-color:#00f; width:100px; height:100px;" >
<div style="background-color:#f00; width:10px; height:10px;">
</div>
<div style="background-color:#f005; width:10px; height:10px;">
</div>
</div>
效果:
高宽100px背景为蓝色的div
嵌套两个高宽10px背景为红色的div。
注:背景包括内容,内边距和边框,不包含外边距。
我们来看一下RGB和RGBA的不同
RGB值得写法:
#fff
- #后边有三个值,它们的取值范围0-9加上a-t。
- 三个值分别代表 #红绿蓝,三色。
RGBA值得写法:
#ffff
3. #后边有四个值,它们的取值范围0-9加上a-t。
4. 前三个值分别代表 #红绿蓝,三色。最后一个是透明底。
1.2 background-image|背景图片
注:背景包括内容,内边距和边框,不包含外边距。默认,背景图片位于元素的左上角,并在水平和垂直方向上重复。
background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554099573&di=ea4bf33ef492285c2acb5dbc1e5d35c1&imgtype=jpg&er=1&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg);
<div style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554099573&di=ea4bf33ef492285c2acb5dbc1e5d35c1&imgtype=jpg&er=1&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg); width:600px; height:600px;" >
</div>
高宽3000px背景为图片的的div
效果:
背景图片位于元素的左上角,并在水平和垂直方向上重复。意思就是水平垂直平铺效果。
== 同时设置了本经颜色和背景图片,会显示背景图片。==
1.3 background-repeat|背景图片重复
值 | 意 |
---|---|
repeat | 重复 |
no-repeat | 不重复 |
repeat-x | 水平重复 |
repeat-y | 纯值重复 |
inherit | 继承 |
<div style="background-repeat:repeat; background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554099573&di=ea4bf33ef492285c2acb5dbc1e5d35c1&imgtype=jpg&er=1&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg); width:1200px; height:1200px; border:10px solid #f00; display:inline-block;" >
</div>
<div style=" background-repeat:no-repeat; background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554099573&di=ea4bf33ef492285c2acb5dbc1e5d35c1&imgtype=jpg&er=1&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg); width:1200px; height:1200px; border:10px solid #f00; display:inline-block; " >
</div>
<div style="background-repeat:repeat-x; background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554099573&di=ea4bf33ef492285c2acb5dbc1e5d35c1&imgtype=jpg&er=1&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg); width:1200px; height:1200px; border:10px solid #f00; display:inline-block;" >
</div>
<div style=" background-repeat:repeat-y; background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554099573&di=ea4bf33ef492285c2acb5dbc1e5d35c1&imgtype=jpg&er=1&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg); width:1200px; height:1200px; border:10px solid #f00; display:inline-block;" >
</div>
效果:
1.4 background-attachment|背景图片显示方式
值 | 意 |
---|---|
scoll | (默认)背景图片随滚动条滚动 |
fixed | 当页面的其余部分滚动时,背景图片不会移动 |
1.5 background-position|背景图片的定位
值 | 意 | 注意 |
---|---|---|
百分比 | % | 只写一个参数的话,第二个默认居中 |
值 | px | 只写一个参数的话,第二个默认居中 |
top | 顶部 | 只写一个参数的话,第二个默认居中 |
right | 右 | 只写一个参数的话,第二个默认居中 |
bottom | 底部 | 只写一个参数的话,第二个默认居中 |
left | 左 | 只写一个参数的话,第二个默认居中 |
center | 中间 | 水平纯值居中 |
background-position:值1 值2;
background-position:值;
1.5 background|背景缩写
注:各值之间用空格分隔,不分先后顺序。
2.列表样式
属性名 | 简述 | 值 |
---|---|---|
list-style-type | 列表项标记 | 后边说明 |
list-style-image | 列表图片标记 | none,url |
list-style-position | 列表项标记位置 | inside,outside |
list-style | 列表样式缩写 |
2.1 list-style-type|列表项标记
无需列表
值 | 说明 |
---|---|
none | 无标记 |
disc | 实心的圆点 |
circle | 空心圆点 |
square | 实心的方块 |
有序列表
值 | 说明 |
---|---|
none | 无标记 |
decimal | 整数数值从1起 |
lower-roman | 小写罗马 |
upper-roman | 大写罗马 |
lower-alpha | 小写英文 |
upper-alpha | 大写英文 |
2.2 list-style-image|列表图片标记
list-style-image:url();
2.3 list-style-position|列表项标记位置
值 | 意 |
---|---|
inside | 列表项目标记放置在为本以内,且环绕文本根据标记对齐。 |
outside | 默认值,列表项目标记放置文本以外,且环绕文本不根据标记对齐。 |
inherit | 继承 |
2.3 list-style|列表样式缩写
1.值之间用空格分隔,不分先后顺序。
2.list-style-image覆盖list-style-type的设置。
4.总结
本篇我们讲述了背景样式和列表样式。
如本文章描述有误请尽快联系博主!感谢您的阅读与帮助!