前端学习笔记(四)

字体文本样式和特殊符号

一.字体样式
    字体颜色 color
    字体风格 font-family
    字是一样的写法，但是展示的风格不一样，比如宋体，楷书，隶书，草书，这些都是不一样的字体，在学校的时候我们都练过字对吧！
    注意：
    注意，当电脑上没有属性里规定的字体的时候，是无法显示出相应的字体的，需要在电脑上安装相应的字体才可以！
    为了解决用户电脑里没有安装我们想要的字体，导致页面的问题，我们一般会写多个值，中间用逗号隔开，浏览器会优先使用前面的字体样式，如果前面的没有用第二个，以此类推！
    span{
        font-family:'微软雅黑','宋体';
    }
    字体大小 font-size
    div{
        /*具体的值*/
        font-size:50px;
        /*百分比 相当于父容器的字体百分比调整 浏览器默认字体大小16px*/
        font-size:50%;
        /*em 父元素的字体大小 根据父元素字体大小来调整*/
        font-size:1em;
        /*rem 跟标签的字体大小默认16px 最小只能12px*/
        font-size:1rem;
    }
    字体粗细 font-weight
    1.bold 定义粗的字体
    2.bolder 定义更粗的字体
    3.lighter 定义更细的字体
    4.100 200 300 400 500 600 700 800 900 数值的写法没有单位
    5.normal 默认 默认一般是用来给本来就加粗的字体，变成普通粗度
    规定字体是否倾斜 font-style
    1.italic 定义字体倾斜
    2.oblique 定义字体的斜体 (两者没有明显的区别，记住一个就行)
    4.normal 默认 一般用来规定本来就是斜体的字体变成普通字体
    如果对没有 italic 字体风格的字体使用 italic 就没有效果了,这时需要用斜体就使用 oblique;
    如果字体没有 italic样式 ,而只有 oblique 样式 ,则使用后者 oblique ;但若 字体没有oblique样式 ,则不能用 italic 替代,此时浏览器会将正常直立字体倾斜一个角度来作为倾斜字体使用
    规定小型大写字母 font-variant
    smallcaps= 大型小写字母
    规定小型大写字母 把小写字母变大，但是比文字小一圈，大写字母保持原型。
    line-height 行高
    设置行与行之前的距离
    div{
        /*给高度的一样的是可以实现垂直居中!*/
        line-height:30px;
        line-height:100%; 根据字体大小
        line-height:1.2em; rem
    }
    只写数字不写单位的时候 等于em，当不给高度的时候行高可以撑开盒子的高度！但不是所有时候都可以用行高代替高度,会造成布局的混乱,当没有字的时候 行高不起作用.
    复合写法
    基本写法：
    div{
        /*字体大小和字体风格是必须要写的*/
        font:12px ‘微软雅黑’,’宋体’;
    }
    多样式写法:
    /*字体:字体大小/行高 字体风格 字体粗细 小型大写字母 倾斜 顺序不能改变*/
    font:bold small-caps italic 12px/1.2 ‘微软雅黑’;
    文本样式
    text-transform 控制文本大小写
    uppercase 字母大写
    capitalize 首字母大写
    lowercase 小写字母
    text-align 文本对齐方式
    left 左对齐
    right 右对齐
    center 居中
    justify 两端对齐
    text-indent 首行缩进
    px 或者 百分比 em rem
    text-decoration 文本修饰 下划线
    none 去掉下划线
    underline 下划线
    linethrough
    中划线
    overline 上划线
    letter-spacing 字间距
    px
    em
    word-spacing 词间距 对中文无效.
    px
    em
    white-space 文本不换行
    nowrap 不换行
    文本会在在同一行上继续，直到遇到标签为止。
    word-break 单词内换行
    breakall
    单词内换行 一行写不下的时候，强制拆开一部分，换行显示，对中文无效。
    text-overflow 文本省略号
    ellipsis 文本省略号
    要实现这个效果，必须要搭配一个属性overflow:hidden;元素溢出隐藏,对行内元素无效(内容撑开宽高)
    span{
        display:block;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
    }
    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;}

二. 特殊符号

    空格 nbsp 前后加上& ;
    大于号 gt
    小于号 lt
    引号 quot
    版权符号 copy