【前端学习记录4】字体样式和文本样式

一、字体样式

        1、简介：英文“font”前缀开头，是“字体”的意思。“font-size”表示字体大小，“font-weight”表示字体粗细。

        2、字体类型：font-family

              语法：font-family:字体1，字体2，... ，字体N；

              设置一种字体：#div1{font-family:Arial;}

              设置多种字体：p{font-family:Arial,Verdana,Georgia;}

              说明：“p{字体1,...,字体N;}”表示字体优先级，若字体都未安装，则显示默认字体宋体。

        3、字体大小：font-size

               语法：font-size:像素值；

               说明：取值有两种：一种是“关键字”，如small、medium、large等；另一种是“像素值”，                   如10px、16px、21px等。实际中基本不会用关键字。

               px:全称pixel(像素），1像素只屏幕最小的点。

               分辨率“800px×600px”指“屏幕宽是800个小方点，高是600个小方点”。不同系统的1px的                   大小也不同。

               取值单位：px、em、百分比等。

        4、字体粗细：font-weight

               语法：font-weight:取值；

               说明：取值有两种：一种是“100~900的数值”，另一种是“关键字”。

                font-weught属性可以取100、200、... 、900九个值，其中100相当于lighter,400相当于normal，700相当于bold，900相当于bolder。

        5、字体风格：font-style

               语法：font-style:取值；

               说明：nomal正常、italic斜体、oblique斜体。

               注：部分字体有italic属性，oblique可以让没有italic属性的字体有斜体效果。

        6、字体颜色：color

               语法：color:颜色值；

               说明：两种取值：关键字和十六进制RGB值，还有CSS3的RGBA、HSL等。

               获取十六进制RGB方法：在线工具和Color Picker

二、文本样式

         font注重个体，text注重整体。

        1、首行缩进：text-indent

              语法：text-indent:像素值；

              说明：用像素值作为单位，若font-size:14px;则text-indent:28px.

        2、水平对齐：text-align

              语法：text-align:取值；

              说明：left左对齐，center居中对齐，right右对齐。不仅对文字，对图片也有效。

        3、文本修饰：text-decoration

              语法：text-decoration:取值；

              说明：none去除所有的划线效果，underline下划线，line-through中划线，overline顶划线。

        4、大小写：text-transform

              语法：text-transform:取值；

              说明：none无转换，uppercase转换为大写，lowercase转换为小写，capitalize只将英文单词首字母转换为大写。

        5、行高：line-height

               语法：line-height:像素值；

        6、间距：letter-spacing、word-spacing

              (1)字间距

                   语法：letter-spacing：像素值；

              (2)词间距

                   语法：word-spacing：像素值；