css常用属性

1、字体属性

1.1、font-size 字体大小属性

设置字体大小 可以设置的值有：

通常使用px来设置font-size的值 如font-size:100px 就是字体大小为100px

每个浏览器有其默认的字体大小值，如谷歌浏览器就时16px为默认大小

1.2、font-weight字体粗细

1.2.1、font-weight的属性

font-weight:100~900;

font-weight 由细变粗 100-300 比普通文本细

font-weight 400-500 普通文本 600及其以上 就会比普通文本粗

单词：normal(相当于400）：正常 bold bolder（相当于700）：加粗 lighter（相当于100）：变细

1.3、font-family字体样式

font-family:'宋体' 就是浏览器内显示的文字设置为宋体

注意：1、如果时中文 需要加上英文状态下的引号

                        font-family: '隶书'

           2、如果时引文 单个(挨在一起的一个单词)的英文 不需要加引号

                        font-family: LiSu;

           3、如果英文时有多个单词组合(Times New Roman)而成的就需要加引号

                        font-family: 'Courier New', Courier, monospace;

            4、浏览器的兼容:从左到右去解析，如果浏览器不支持第一种字体，继续解析第二项... 如果所有的字体都不能解析 使用浏览器默认字体

                        font-family: Georgia, 'Times New Roman', Times, serif;

            5、既有中文 又有英文字体 需要将英文字体写在前面，中文写在所有英文字体后面

                        font-family: 'Courier New', Courier, monospace,'隶书';

2、文本属性

        2.1 color:控制文字的颜色

                颜色表示的方法:

                1. 颜色的英文名字 如：red、green、blue、orange等

                2.十六进制 ： #000000   一般#后面跟6位数   像#ooffaa 可以缩写为#ofa

                3.rgb： 

                         一共三个取值 取值范围0-255或者0-100% rgb（200,99,9）

                        rgba（200，99，9）a表示透明度 取值范围0-1 完全透明-完全不透明

                4.色相

                        H 颜色名字 （0-360） 0/360红色 120绿色 240蓝色

                        S 纯度 值越高越纯 越低越灰 （0-100%）

                        L 亮度 黑到白 值越高越白 越低越黑（0-100%）

                        如：hsl(200,80%,50%)

        2.2 text-align:设置文本内容在标签的水平对其方式

                text-align: right; 靠右对齐

                left:左     center:中间    right：右边     justify：两端对齐

        2.3 text-decorarion

  /* 下划线 */

            text-decoration:underline;

            /* 上划线 */

            text-decoration: overline;

            /* 删除线 */

            text-decoration: line-through;

            /* 默认值 */

            text-decoration: none;

        2.4 transform

            

            /* 每个单子首字母大写 */

            text-transform:capitalize;

            /*  所有的字母都要小写  */

            text-transform: lowercase;

            /* 所有字母都要大写 */

            text-transform: uppercase;

            /*  默认 文本内容是怎么样就怎么显示*/

            text-transform: none;

       2.5 text-shadow:水平方向的阴影位置 垂直的阴影位置 模糊距离 阴影颜色;可以有多组用逗号隔开

如： 

 text-shadow: -10px -5px 2px red , 5px 5px 1px blue;

        2.6 text-letter:增加或减少字符间的空白距离 正值增加  负值减少一般用于中文 英文状态下每个字母就会间隔

        2.7 word-spacing:增加或减少字符间的空白距离 正值增加  负值减少 一般用于英文 控制每个单词之间的距离

            注意:如果用于中文表示每一个挨在一起的中文之间的空白间隙（就是每个词之间的空隙）

        2.8 line-height  控制文本行高

            单行文本垂直居中： 行高如果设置为height一样的值就会居中

        2.9 word-break 控制换行规则

/* 使用浏览器默认的换行规则 */
            word-break: normal;