CSS(二)常用元素属性

目录

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