CSS文本属性、列表与边框

文本属性

font-size：字体大小

        单位可以是px , pt , em等 12pt=16px  1em=16px  浏览器默认是16px , 设计图常用字号是12px

color：颜色

        color : red ;         color : #fffff ;         color : rgb（255，0，0）；0-255

font-family：字体

        默认字体：微软雅黑

        当字体是中文字体，英文字体中有空格时，需加双引号；

        多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体，以此类推

font-weight：加粗

        font-weight：bolder(更粗的900) / bold(加粗600) / normal(常规400)；

        font-weight：100-900；    100-500不加粗    600-900加粗

font-style：倾斜

        font-style：italic(斜体字) / oblique(倾斜的文字) / normal(常规显示)；

text-align：文本水平对齐

        text-align：left(水平靠左)  /  right(水平靠右)  /  center(水平居中)

        text-align：justify；水平两端对齐，只对多行起作用

line-height：行高

        行高指的是2行文字基线之间的垂直距离

                当line-height<height的时候，文本是垂直靠上对齐的

                当line-height>height的时候，文本是垂直靠下对齐的

                当line-height>height的时候，文本是垂直居中对齐的

        line-height的数据=height的数据，可以实现单行文本垂直居中

        line-height属性值不带单位和单位是%，都表示font-size的几倍

font：文字简写

        font是font-style   font-weight   font-size\ lint-height   font-family；的简写  ，  例   font: italic 900 70px/100px "楷体";

        注意：顺序不能改变，必须同时指定font-size 和 font-family属性时才起作用

 行高=字号大小+上半行距+下半行距   ，   文本是垂直居中对齐

半行间距=（行高-字号大小）/  2

text-decoration：文本修饰

        text-decoration：none(没有)  /  underline(下划线)  /  overline(上划线)  /  line-through(删除线)

letter-spacling：字间距

        直接给数字，单位为px，可给正负

text-indent：首行缩进

        text-indent可以取负值

        text-indent属性只对第一行起作用  

列表与边框

列表相关属性

    list-style-type：定义列表符合样式

        list-style-type：disc（实心圆）  /   circle（空心圆）  /   square（实心方块）  /   none（去掉符号）

    list-style-image：将图片设置为列表符合样式

        list-style-image：url（）；

    list-style-position：设置列表项标记的放置位置

        list-style-position：outside（列表外面，默认值）  /    inside（列表里面）

    list-style：简写（顺序可以随便调换）

CSS边框属性

    border-width：设置边框的宽度

    border-color：设置边框的颜色    transparent透明色

    border-style：设置边框的线型

        border-style：solid（实线） /   dashed（虚线）  /    double（双线） /   dotted（点状线）

    border：简写（边框宽度，边框颜色，边框线型；）

border-top/bottom/left/right

border-radius：边框弧度/圆角

        直接加数值px或百分比   /   正圆：宽高相等，边框弧度50%  /   半圆：宽是高的一半 或 高是宽的一半，两个0与两个50%

        四个角单独设置：左上，右上，右下，左下

        三个值单独设置：左上，右上左下，右下

        两个值单独设置：左上右下，右上左下

        一个值：四个角为相同值

阴影属性

    box-shadow用来设置元素的阴影效果，阴影不会影响页面布局

            第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向下移动

            第二个值：垂直偏移量，设置阴影的水平位置，正值向下移动，负值向上移动

            第三个值：阴影的模糊半径

            第四个值：阴影的颜色（rgba）

                例如   box-shadow：10px 10px 10px  rgba(0,0,0,.5)