学习HTML5一周的收获4

/* [CSS常用文本属性]

 * 1、字体、字号：

font-weight:字体的粗细，可选属性值：bold加粗  lighter细体  100~900数值(400正常，700 bold)

 

font-size:字体大小   **PX  **%（浏览器默认字体大小的百分比，绝大部分默认16px） 

 

font-family:字体族，设置字体。

>>>多个字体样式间用逗号分隔，浏览器解析时，会从左往右依次解析，选择可用字体。

>>>一般前面使用具体字体名称，最后一个使用字体族类名称。

    （常用字体族名称：衬线体serif 非衬线体sans-serif(常用) 等宽体Monospace）

>>>例如：font-family:Arial, 'Microsoft Yahei', sans-serif;

 

font-style:字体样式,正常(normal) 斜体(italic)

 

* font-variant：small-caps; 将字母转为小型大写字体。

 

(了解)font缩写形式：font-style font-variant font-weight font-size line-height font-family

>>> 使用注意事项 ：

 ① 顺序必须严格按照上述顺序；

 ② 多个样式之间用空格分割，而且font-size/line-height 必须作为一对用/分割

 ③ font-size和font-family必须指定，其他样式不指定将采用默认样式显示；

>>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;

斜体 加粗 字号/行高   字体族(微软雅黑，非衬线字体族)

 

2、字体颜色：

color:字体颜色

opacity:透明度,0~1之间的数字。 调整时控件以及子控件均会透明，而使用rgba调整时，只会时本控件透明，子控件不会发生透明度变化。

 

3、行距、对齐等：

line-height:行高   ① 像素单位 48px ② 不带px 正常行高的倍数 ③百分数 同2

>>> 典型应用，调整控件中文垂直居中的方式：控件的height=控件的line-height

 

text-align:块级元素中文字的水平对齐方式 left center right

 

letter-spacing:字符间距,字与字之间的间距

                                                                                                                                                                                                                                                                                                                      

text-decoration:文本修饰 下划线underline、删除线line-through、上划线overline、none

 

overflow:控制超出范围文本的显示方式(auto 根据文字多少自动显示滚动条，scroll始终显示滚动条， hidden 超出范围文本隐藏) 可以通过overflow-x overflow-y分别设置水平垂直方向

 

text-overflow:设置多余文字的显示方式 clip裁剪掉 ellipsis省略号

>>>【重点】让每行多余文字显示省略号：

① white-space: nowrap; 如果是中文，需设置行末不断行

② overflow: hidden; 设置控件超出范围隐藏

③ text-overflow: ellipsis; 设置多余文本省略号显示

 

white-space: nowrap; 设置中文行末不断行显示

 

word-break: 浏览器默认在空格处断行，当一个单词长度超出范围时，会不断行显示， break-all 允许在单词内换行。

 

text-shadow:文本阴影，有四个属性值：

①水平阴影距离 必选，数值越大，阴影右移

②垂直阴影距离 必选，数值越大，阴影下移 

③阴影模糊距离 可选，数值越大，阴影越模糊。默认为0，不模糊

④阴影颜色 可选，默认为黑色

 

text-indent:首行缩进，可用像素值调整缩进大小

 

* text-stroke: -webkit-text-stroke: 0.2px #008000; 描边的粗细，描边的颜色