06 ­ 第六章：字体文本样式和特 殊符号

一、字体样式

1、字体颜色 color

2、字体风格font-family

    span{
    font-family:'微软雅黑','宋体';
    }
    引入外部字体
    @font-face{
    font-family:"名称";
    src:url(' ');
    }

3、字体大小 font-size

    div{
    /*具体的值*/
    font-size:50px;
    /*百分比 相当于父容器的字体百分比调整 浏览器默认字体大小        
    16px*/
    font-size:50%;
    /*根据父元素字体大小来调整*/
    font-size:1em;
    /*当html字体大小为100px的时候 我想得到一个14px的字体，        
    14/100 等于0.14rem
    移动端布局比较多*/
    font-size:1rem;
    }

4、字体粗细font-weight

1.bold 定义粗的字体
2.bolder 定义更粗的字体
3.lighter 定义更细的字体
4.100 200 300 400 500 600 700 800 900 数值的写法没有单位
5.normal 默认 默认一般是用来给本来就加粗的字体，变成普通粗度

5、规定字体是否倾斜font-style

1.italic 定义字体倾斜
2.oblique 定义字体的斜体 (两者没有明显的区别，记住一个就行)
3.normal 默认 一般用来规定本来就是斜体的字体变成普通字体

6、规定小型大写字母 font-variant

small­caps 大型小写字母
line-height行高

7、设置行与行之前的距离

    div{
        line-height:30px;
        line-height:100%;
        line-height:1.2em;
    }

8、复合写法

基本写法：

    div{
    /*字体大小和字体风格是必须要写的*/
        font:12px ‘微软雅黑’,’宋体’;
    }

9、多样式写法:

    /*字体:字体粗细 小型大写字母 字体风格  字体大小/行高   字体类型
    顺序不能改变*/
    font:bold small-caps intalic 12px/1.2 ‘微软雅黑’;

10、文本样式

text-transform 控制文本大小写

uppercasev 字母大写
capitalize /'kæpɪtəlaɪz/ 首字母大写
lowercase 小写字母

text-align 文本对齐方式

left 左对齐
right 右对齐
center 居中
justify 两端对齐

text-indent 首行缩进

px

text-decoration 文本修饰 下划线

none 去掉下划线
underline 下划线
line­through 中划线
overline 上划线

letter-spacing 字间距

px
em

word-spacing 词间距

px
em

white-space 文本不换行

nowrap 不换行

word-break 单词内换行

break­all 单词内换行

text-overflow文本省略号

ellipsis 文本省略号

    span{
        display:block;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
    }

image.png

11、css属性的继承

默认继承的属性：

        color
        font:small-caps italic bold 50px/100px 'microsoft yahei';
        text-align
        text-indent:
        letter-spacing = 字间距
        word-spacing = 词间距
        list-style

a标签的color不继承，不继承的加上inherit

    a{color:inherit;}

12、特殊符号

空格  
大于号 >
小于号<
引号 "
版权符号 ©
http://www.w3school.com.cn/tags/html_ref_symbols.html

13、鼠标样式

    /*后缀名必须要是`.cur`后面的pointer是防止浏览器不兼容或者出错            
    的时候！就执行后面的一个
    样式！*/
    div{
        cursor:url('路径')，pointer;
    }

14、让标签里面的文字变成可以被编辑的文本

可以设置一个 contenteditable 属性值为 true

    <p contenteditable="true">楚鑫大帅逼</p>