CSS学习笔记1-CSS属性

红太狼 2021-10-25 12:09 472阅读 0赞

一、什么是CSS属性

用下图来解释一下什么是CSS属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70][]

二、CSS常见属性

1.文字属性

1.1 font-style

作用：用于规定文字样式

语法：

标签名{
                /*italic:斜体、normal：正常*/
                font-style: normal;
            }

1.2 font-weight

作用：定义文字的粗细

语法：

p{
                /*取值及含义
                bold:加粗
                bolder：比加粗还粗
                lighter：细线
                100到900，100最细，900最粗。取值只能为100的整数倍*/
                font-weight: lighter;
            }

1.3 font-size

作用：规定文字的大小

语法：

p{
                /*取值及含义
                20px：20个像素
                取值可以任意数值，单位必须为px*/
                font-size: 20px;
            }

1.4 font-family

作用：规定文字的字体

语法：

p{
                /*取值及含义
                取值为字体名称
                注意点：
                1.字体名称必须为操作系统安装的字体
                2.可以指定备选字体，如：font-family: '不存在的字体','黑体';当指定的字体找不到时，使用备选字体
                3.定义一个标签内的英文、中文使用不同的字体。先使用英文规定字体，再使用中文规定字体。
                由于英文字体不能修饰中文，遇到中文时，就会使用备选的中文字体进行修饰。如：font-family: Arial,'黑体';
                4.字体名称为中文时，必须使用引号*/
                font-family:'黑体';
            }

1.5 文字属性缩写

注意点：

style、weight属性可以省略，也可以互换位置

size、family属性不可省略，也不可互换位置

语法：

p{
                /*font:style weight size family*/
                font: normal bold 20px 黑体;
            }

2.文本属性

2.1 text-decoration

作用：给文字添加装饰

语法：

p{
                /*取值及含义
                none：无装饰，主要用于去除超链接的下划线
                underline：下划线
                line-through：删除线
                overline：上划线*/
                text-decoration: overline;
            }

2.2 text-align

作用：规定文本的对齐方式

语法：

p{
                /*取值及含义
                left：左对齐
                center：居中
                right：右对齐*/
                text-align: right;
            }

2.3 text-indent

作用：规定文字的缩进

语法：

p{
                /*取值及含义
                2em：缩进两个字符位。缩进字符的数量可以自定义，单位建议使用em*/
                text-indent: 2em;
            }

3.文本颜色

3.1 rgb

作用：通过rgb规定文字颜色

语法：

p{
                /*取值及含义
                r代表红色、g代表绿色、b代表蓝色
                后面的数字分别代表红、绿、蓝的亮度。最大值为255，最小值为0*/
                color: rgb(255,255,0)
            }

3.2 rgba

作用：通过rgba规定文字的颜色

语法：

p{
                /*取值及含义
                r代表红色、g代表绿色、b代表蓝色、a代表透明度
                后面的数字分别代表红、绿、蓝的亮度。最大值为255，最小值为0
                a的取值1为最大，0为最小*/
                color: rgba(255,255,0,0.5)
            }

3.3 \#六个十六进制数

作用：通过十六进制数规定文字的颜色

语法：

p{
                /*取值及含义
                前两位代表红色、中间两位代表绿色、后两位代表蓝色
                最大值为255，最小值为0*/
                color: #FFEE00
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70]: /images/20211025/03055ce009354f3f8fcb27abd7f959f4.png