02-CSS 字体、文本属性

一、CSS 颜色的单位

1、颜色值：颜色名称、RGB数值、十六进制数值
    颜色名称：black === 黑色、white === 亮白、
             red === 大红 ......
​
    RGB数值：rgb(0~255, 0~255, 0~255)
    RGBA数值：rgba(0~255, 0~255, 0~255,[0.0 ~ 1.0]) Alpha 透明度
​
    十六进制数值：#000000、#ffffff
        0、1、2、3、4、5、6、7、8、9和字母A、B、C、D、E、F（a、b、c、d、e、f）表示，
        其中:A~F表示10~15
​
2、相对单位：所设置的对象受屏幕分辨率、可视区域、浏览器设置以及相关元素的大小
    px：根据屏幕像素点来确定的
    em：表示元素的字体高度，能够根据字体的 font-size 属性值来确定单位的大小
    百分比：通过另一个值来计算，一般参考父元素中的相同属性的值
    URL:

二、CSS基础属性

声明（设置样式的语句）

1、字体属性

1、字体的系列：  font-family:
    family-name     字体名称
​
    "微软雅黑",Arial,"arial narrow";
​
    当字体是中文字体时，需加双引号；
    可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个
    使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载
    因此，强烈推荐使用一个通用字体系列名作为后路
​
2、字体的大小：  font-size:
    length          设置为一个固定的值
    %               基于父元素的一个百分比值
​
    谷歌浏览器默认字体大小16px,允许设置的最小字体12px
    单位还可以是 pt，9pt = 12px;
    为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，
    共同确定在默认情况下16px/ppi为标准字体大小默认值,即 1em.
​
3、字体的样式：  font-style:
    normal          默认值,浏览器显示一个标准的字体样式
    italic          显示一个斜体的字体样式
    oblique         显示一个倾斜的字体样式 !!!
​
4、字体的粗细：   font-weight:
    normal          默认值,定义标准的字符
    bold            粗体字符
    lighter         更细的字符
    100~900         由细到粗的字符,
                    400 等同于 normal，而 700 等同于 bold
​
字体属性的简写
    font: font-size font-weight font-style font-family;

2、文本属性

1、文本的颜色：  color:
    十六进制值(0-9A-F),
    一个RGB值(0-255)
    颜色的名称
    eg: 纯白 #fff / rgb(255,255,255) / white
        纯黑 #000 / rgb(0,0,0) / black
​
2、文本的水平对齐方式：  text-align:
    left            排列到左边
    right           排列到右边
    center          排列到中间
    justify         两端对齐 ???(对单行文本不生效)
​
3、文本的行高：  line-height:
    normal          默认，设置合理的行间距
    number          设置数字，此数字会与当前的字体尺寸相乘来设置行间距
​
    特殊用法：实现单行文本的垂直居中，
            line-height= 容器的高度 (将行高设置为和父元素高度一致)
            
    当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上；
    当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下
    备注:line-height取值
                    1     ----  表示字号大小的1倍
                    100%  ----  表示字号大小的1倍
​
4、文本的线条修饰：  text-decoration:
    none            默认，定义标准的文本
    underline       文本下方的一条线
    overline        文本上方的一条线
    line-through    穿过文本的一条线
​
5、缩进元素中文本的首行：  text-indent:
    可以设置负数，但是不建议使用 !!!
    text-indent: 2em;
    em 是什么？
    em 是相对长度单位，他会继承父级元素的字体大小，因此不是一个固定的值
    
    按照浏览器默认字号大小16px时,
        则1em = 16px  2em =32px
​
6、设置元素的垂直对齐：  vertical-align:
    baseline        元素放置在父元素的基线上(默认)
    top             把元素的顶端与行中最高元素的顶端对齐
    bottom          使元素及其后代元素的底部与整行的底部对齐
    middle          把此元素放置在父元素的中部
        -   需要配合行高line-height使用
​
    ⭐⭐⭐面试题：解决img下方3-6像素间距问题 --- 行内块元素存在的问题
    给img的父元素设置 font-size:0 
    
    img {
        方案一
        vertical-align: top/bottom/middle;值不是默认的 baseline 即可 
        
        float:left; 方案二
        
        display:block; 方案三
    }
​
7、设置字间距：    letter-spacing
    normal          默认，定义单个字间的标准空间
    length          定义单个字间的固定空间
​
    每一个中文文字作为一个“字”，而每一个英文字母也作为一个“字”
​
8、设置词间距：  word-spacing:
    normal          默认，定义单词间的标准空间
    length          定义单词间的固定空间
​
    以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词
    如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效
​
9、设置元素中空白的处理方式： white-space:
    normal          默认，空白会被浏览器忽略
    nowrap          强制文本不换行，文本会在在同一行上继续，直到遇到 <br> 标签为止
​
10、元素中的字母：  text-transform:
    none            默认，定义带有小写字母和大写字母的标准的文本
    capitalize      文本中的每个单词以大写字母开头
    uppercase       全部转换为大写字母
    lowercase       全部转换为小写字母
    验证码案例使用 --- js

三、CSS3 新增属性

1、字体属性 @font-face

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体
使用 CSS3，网页设计师可以使用他/她喜欢的任何字体
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户
Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则
​
font-family         必需，规定字体的名称
src URL             必需，定义字体文件的 URL
font-stretch        可选，定义如何拉伸字体
font-style          可选，定义字体的样式
font-weight         可选，定义字体的粗细。
unicode-range       可选，定义字体支持的 UNICODE 字符范围
​
<style>
    @font-face
    {
        font-family: myFirstFont;
        src: url(sansation_light.woff); /* IE9+ */
    }
​
    div
    {
        font-family: myFirstFont;
    }
</style>
​
    阿里巴巴矢量图标库 iconfont 实现小图标效果:

第一步：iconfont 图标使用步骤第一步: 去搜索下载字体包

第二步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：(选择 font class 模块)

<span class="iconfont icon-xxx"></span>

第三步：使用 <span class="iconfont icon-xxx"></span>  xxx变成相对应的
 

2、文本效果

⭐1、text-shadow              向文本添加阴影
    h-shadow    必需。水平阴影的位置。允许负值
    v-shadow    必需。垂直阴影的位置。允许负值
    blur        可选。模糊的距离
    color       可选。阴影的颜色。参阅 CSS 颜色值
​
    text-shadow: h-shadow v-shadow blur color;
​
2、word-break                规定非中日韩文本的换行规则
​
    normal          使用浏览器默认的换行规则
    break-all       允许在单词内换行
    keep-all        只能在半角空格或连字符处换行
​
    word-break: normal|break-all|keep-all;
​
3、word-wrap             允许对长的不可分割的单词进行分割并换行到下一行
​
    normal  只在允许的断字点换行（浏览器保持默认处理）
    break-word  在长单词或 URL 地址内部进行换行
​
    word-wrap: normal|break-word;
​
⭐4、text-overflow            规定当文本溢出包含元素时发生的事情
    clip        修剪文本
    ellipsis    显示省略符号来代表被修剪的文本
    string      使用给定的字符串来代表被修剪的文本
​
    text-overflow: clip|ellipsis|string;

3、拓展

1、单行文本设置省略号 ⭐⭐⭐
    div{
        width:100px;
        white-spacing:nowrap;
        overflow:hidden;
        text-voerflow:ellipsis;
        }
        
2、多行文本设置省略号
    div{
        width:100px;
        overflow:hidden;
        text-voerflow:ellipsis;
        -webkit-line-clamp: n ;
        dispaly:-webkit-box;
        -webkot-box-origent:vertical;
        }
        备注:css手段,不可以写高度