CSS学习笔记1-CSS属性

一、什么是CSS属性

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

二、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
        }