CSS(二)常用元素属性

分手后的思念是犯贱 2024-03-24 13:22 101阅读 0赞

**目录**

1.字体属性

1.1设置字体

1.2大小

1.3粗细

1.4文字样式

2.文本属性

2.1颜色

2.2对齐

2.3装饰

2.4缩进

2.5行高

3.背景属性

3.1颜色

3.2图片

3.3平铺

3.4位置

3.5尺寸

4圆角矩形

4.1用法

4.2生成圆形

4.3圆角矩形

4.4展开写法

--------------------

## 1.字体属性 ##

### 1.1设置字体 ###

> font-family:'' '';

### 1.2大小 ###

> font-size: ;

单位px

### 1.3粗细 ###

> font-weight: ;

取值范围100-900

### 1.4文字样式 ###

> 设置倾斜
> 
> font-style:italic;
> 
> 取消倾斜
> 
> font-style:normal;

## 2.文本属性 ##

### 2.1颜色 ###

> color: 属性 ;

属性:

1.英文单词

2.十六进制

3.rdb方式

### 2.2对齐 ###

> text-align:值;

center:居中对齐

left:左对齐

right:右对齐

### 2.3装饰 ###

> text-decoration:值:

underline:下划线

none:都没有

overline:上划线

line-throught删除线

### 2.4缩进 ###

> text-indent:值;

单位px或em

1em是1个字符

### 2.5行高 ###

> line-height: 值;

单位px

###  ###

## 3.背景属性 ##

### 3.1颜色 ###

> background-color:指定颜色;

### 3.2图片 ###

> background-image:url(路径);

### 3.3平铺 ###

> background-repeat:平铺方式

### repeat:平铺 ###

no-repeat:不平铺

repeat-x:水平平铺

repeat-y: 垂直平铺

### 3.4位置 ###

> background-position:x y;

方位名词:center left right botton top

精确单位:坐标或者百分比

混合单位:同时包含方位名词和精确单位

### 3.5尺寸 ###

> background-size:length|percentage|cover|contain;

contain可以露出背景色

## 4圆角矩形 ##

### 4.1用法 ###

> border-radius:lehgth;

### 4.2生成圆形 ###

让 border-radius 的值为正方形宽度的一半即可

div{
                width: 200px;
                height: 200px;
                background-color: aqua;
                color: black;
                /* border-radius:50%; */
                border-radius: 100px;
            }

### 4.3圆角矩形 ###

生成圆角矩形让 border-radius 的值为矩形高度的一半即可

div {
        width: 200px;
        height: 100px;
        border: 2px solid green;
        border-radius: 50px;
    }

### 4.4展开写法 ###

border-top-left-radius:2em;
    
    border-top-right-radius:2em;
    
    border-bottom-right-radius:2em;
    
    border-bottom-left-radius:2em;

border-radius: 10px 20px 30px 40px