CSS学习笔记:边框样式,列表符号【7/27】

CSS/设计
391
0
0
2022-12-01

边框样式

border-width

border-width用于定义边框的宽度,通常是一个像素值。

border-style

border-style用于定义边框的风格,通常有三种:

属性

说明

none

无样式

dashed

虚线

solid

实线

除了上表列出这几个,还有hidden、dotted、double等取值。不过其他取值几乎用不上,可以直接忽略。

border-color

border-color属性用于定义边框的颜色,取值可以是“关键字”或“16进制RGB值”。

简写方式

在css中可以使用简写方式:

border:1px solid red;

等价于:

border-width:1px;
border-style:solid;
border-color:red;

这个技巧在我们实际开发中使用非常方便!

一个元素其实有四条边(上下左右),通常对某一条边进行单独设置!

img

img

上边框border-top

border-top-width:1px;
border-top-style:solid;
border-top-color:red;

简写形式:

border-top:1px solid red;

下边框border-bottom

border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:red;

简写形式:

border-bottom:1px solid red;

左边框border-left

border-left-width:1px;
border-left-style:solid;
border-left-color:red;

简写形式:

border-left:1px solid red;

右边框border-right

border-right-width:1px;
border-right-style:solid;
border-right-color:red;

简写形式:

border-right:1px solid red;

对于边框样式,不管是整体样式,还是局部样式都要设置三个方面。边框宽度,边框外观,边框颜色。

列表项符号:list-style-type

在css中,不管是有序列表还是无序列表,都使用list-style-type来定义列表项符号。

语法list-style-type:取值;

说明list-style-type属性是针对 olul元素的,而不是li元素,其中,list-style-type属性取值如下表:

针对ol的属性取值:

属性值

说明

decimal

阿拉伯数字:1,2,3...(默认值)

lower-roman

小写罗马数字:i,ii,iii...

upper-roman

大写罗马数字:I,II,III...

lower-alpha

小写英文字母:a,b,c...

upper-alpha

大写英文字母:A,B,C...

针对ul的属性取值:

属性值

说明

disc

实心圈●(默认值)

circle

空心圆○

square

正方形■

去除列表项符号

在css中,也是使用list-style-type属性去除有序列表或无序列表的列表项符号。

语法list-style-type:none;

当对多个不同元素定义了相同的css样式时,我们可以使用群组选择器来去除列表项符号,在群组选择器中,元素之间用英文逗号隔开!

语法ol,ul{list-style-type:none;}

在实际开发中,对于list-style-type属性定义列表项符号,几乎用不上所以只需要记住list-style-type:none;就可以!

列表项图片

通常我们都觉得不管是有序列表还是无序列表的符号都比较丑,我们可以使用list-style-image属性来定义列表项图片。

语法list-style-image:url(图片路径);

list-style-image属性实际就是把列表项符号改为一张图片,引用一张图片就要给出路径。