主页

css的常见属性

2023-03-08 09:37AM

文本属性:

1.text-align: 文本水平方向对齐方式

属性值:left(默认) center right

2.vertical-align: 垂直方向对齐方式

属性值:top(默认) middle bottom baseline基线

3.line-height: (行高)每一行之间的距离

属性值:数值+px rem em vw vh %

单行文本时,行高等于容器的高度时line-height=height,文字垂直方向居中

line-height不设置单位时,默认

line-height可以当做高度去使用

4.text-index: 文本首行缩进

属性值:数值+px rem  em  vw  vh %

1em=16px

5.text-decoration: 文本修饰---三条线

属性值:underline 下划线  

ine-through 删除线

none 去除下划线(超链接去下划线)

overline上划线

边框属性:

1.边框线型:border-style

属性值:solid 实线

none 去掉边框

dashed 虚线

dotted 点线

double双实线

2.边框粗细:border-width

属性值:1-5px

3.边框颜色:border-color

默认是文字颜色(边框跟着文字走)

复合属性

border:线型 颜色 粗细

线性不能省,顺序没要求

4.单独设置某一方向上的边框

border-方位词(left right top bottom)

背景属性:

1.background-color: 背景颜色

属性值: 颜色的三种表示方式

2.background-image: 背景图片

属性值: url(路径)

3.background-repeat: 背景图片平铺

属性值: no-repeat不平铺

repeat-x 水平平铺

repeat-y 垂直平铺

repeat 都平铺(默认)

4.background-position: 背景图片位置

属性值: 值1 值2(值1代表水平方向;值2表示垂直方向)

a.英文单词left right center top bottom

b.数值+px只有一个值的时候,只代表水平方向偏移量,垂直方向默认居中

可以为负值,反向移动

5.background-size: 背景图片大小

属性值: 值1 值2(值1代表背景图片的宽;值2表示背景图片高>

1.数值+百分比

2.数值+单位

3.conver:等比例放大这个图片,铺满这个盒子为止(容易出现裁剪效果)

contain:等比例放大这个图片,只要有图片撑满某一个方向就结束(容易出现留白区域)

6.background-attachmentfixed: 背景图的固定

属性值: scroll:滚动(默认)

fixed固定 永远固定在可视化敞口的某个位置

背景复合属性: background:red url(img/imgo1.jpg) no-repeat left bottom;

顺序不做要求,属性值个数不做要求

列表属性:

1.list-style-type:设置列表项目符号类型

属性值:square方块

circle空心圆

disc实心圆

decimal有序列表的数字

none去掉列表项目符号

2.list-style-position:项目符号位置

属性值:outside外侧(默认)

inside内测

3.list-style-image: 图片作为项目符号类型

属性值:url(路径)

复合属性:

list-style:类型  位置  图片

没有顺序

文字属性:

1. font-weight:文字粗细

属性值:a. 100-500(默认)-900

b. bold bolder加粗

lighter变细

normal正常

2. font-size:文字大小

属性值:数值+px rem em vw vh移动端单位

1.一般设置偶数

2.浏览器默认 16px

3.浏览器支持最小文字大小 12px

3. font-fimily:文字字体

默认值:微软雅黑(windows系统)

1.属性值是中文,需要用双引号包裹

2.由多个英文单词组合的,需要双引号包裹

3.当有多个属性值的时候,逗号隔开,先声效第一个

4. font-style:文字倾斜

属性值:italic 倾斜

normal正常

5. color:文字颜色

属性值:a.英文单词

b.RGB

c.16进制 #

复合属性:  一个属性名有多个不同属性值,属性值之间用空格隔开(减少代码量)

6.文字的复合属性

font:粗细 倾斜 大小/行高 字体;

大小和字体不能省略 顺序不能换

参考:https://blog.csdn.net/weixin_57135131/article/details/127233435

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论