码迷,mamicode.com
首页 > Web开发 > 详细

CSS背景和列表

时间:2020-07-30 16:54:04      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:pac   方式   状态   属性   第一个   idt   rgb   根据   字母   

CSS背景和列表介绍

 

1、 CSS背景和列表介绍

背景样式:

background-color            设置元素的背景颜色。

background-image          把图像设置为背景。

background-position       设置背景图像的起始位置。

background-attachment         背景图像是否固定或者随着页面的其余部分滚动。

background-repeat         设置背景图像是否重复及如何重复。

Background                      简写属性作用是将背景属性设置在一个声明中。

      

       列表样式

list-style-type                 设置列表项标志的类型。

list-style-image              将图象设置为列表项标志。

list-style-position            设置列表中列表项标志的位置。

list-style            简写属性。用于把所有列表的属性设置于一个声明中。

 

 

CSS背景

 

1、 background-color

设置元素的背景颜色

background-color:颜色│ transparent

说明:

-transparent是全透明黑色(black)的速记法,类似rgba(0,0,0,0)这样的值。

-颜色值(颜色名│RGB│十六进制│)

-背景区包括内容、内边距(padding)和边框、不包含外边距(margin)

 

2、background-image

设置元素的背景图片

background-image : URL  |   none

说明:

-url地址可以是相对地址也可以是绝对地址

-元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

-默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

*背景图片会覆盖背景颜色

 

3、background-repeat

设置元素的背景图片的重复方式

background-repeat: repeat(重复)  |  no-repeat(不重复)

repeat-x (水平重复)  |  repeat-y(垂直重复)

      

*在有背景图片的状态下才能使用

 

4、background-attachment

设置元素的背景图片的显示方式

background-attachment: scroll  |  fixed

说明:

scroll:默认值,背景图片随滚动条滚动

fixed:当页面的其余部分滚动时,背景图片不会移动

 

5、background-position

设置元素的背景图片的起始位置

background-position:百分比│值

top │  right  │  bottom  l  left  |  center

 

 

说明

注意

长度值(x y)

第一个值水平位置,第二个值垂直位置

左上角00

只写一个参数的话,第二个默认为居中

百分比(x% y%)

第一个值水平位置的百分比,第二个值垂直位置的百分比

左上角0%0%,有下角100%100%,

如果仅规定了一个值,另一个值将是50%。

只写一个参数的话,第二个默认为居中

top

顶部显示,相当于垂直方向0

只写一个参数的话,第二个默认为居中

right

右边显示,相当于水平方向100%

只写一个参数的话,第二个默认为居中

left

左边显示,相当于水平方向0

只写一个参数的话,第二个默认为居中

bottom

底部显示,相当于垂直方向100%

只写一个参数的话,第二个默认为居中

center

居中显示,相当于水平方向50%

水平、垂直方向都居中

 

 

6、 background

background:[background-color][background-image]

[background-repeat]

[background-attachment]

[background-position]

*各值之间用空格分割,不分先后顺序

 

 

CSS列表

 

1、 list-style-type

设置列表项的标记样式类型

list-style-type:关键字|none

 

 

无序列表:

说明

None

无标记

Disc

空心的圆点

Circle

空心的圆点

Square

实心的方块

 

 

有序列表:

 

说明

None

无标记

Decimal

从1开始的整数

Lower-roman

小写罗马数字

Upper-roman

大写罗马数字

Lower-alpha

小写英文字母

Upper-alpha

大写英文字母

 

2、 list-style-image

使用图片设置列表项的标记

list-style-image : URL | none

 

3、 list-style-position

设置列表项标记的位置

list-style-position : inside | outside

*inside :列表项目标记放置在文本以内,且环绕文本根据标记对齐

*outside :默认值,列表项目标记放置在文本以外,且环绕文本不根据标记对齐

 

4、 list-style列表样式缩写

list-style : list-style-type

list-style-position

list-style-image

*值之间用空格分隔割

*顺序不固定

*list-style-image会覆盖list-style-type的设置

 

CSS背景和列表

标签:pac   方式   状态   属性   第一个   idt   rgb   根据   字母   

原文地址:https://www.cnblogs.com/KafuuYama/p/13404178.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!