css属性

属性和属性值

属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性

属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜色值等。

 

文本属性

字体大小  

    font-size

    浏览器默认16px，视图默认12px

    pt：px=3：4

    1em=16px   0.75em=12px

    medium=16px/12pt/1em（常规大小）

    font-size：0（可以不带像素）

 

文本颜色

    color：rgb（0，0，0）或color：#

    rgba 全透明  a的取值范围（0-1）

    白色#fff  黑色#000 黄色#ff0  红色#f00

 

文本字体

    font-family

    1、常用微软雅黑

    2、改变浏览器默认字体

    3、多个字体时，首先显示字体1，不存在就显示字体2，以此类推

    4、中文字体或多个英文单词字体要用双引号括起来，单个英文单词字体不用

 

文字加粗

    font-weight

    bolder/bold/normal（常规）

    数字为100-900，没有单位，数字越大越粗

 

文字倾斜

    font-style

    italic 斜体字

    oblique  倾斜的文字

 

水平对齐

    text-align

    left/center/right

    justify两端对齐

    1、对横着的标签、纯数字和字母以及不换行的文字无效果

    2、对英文单词和行内元素以及行内块元素有效果

 

行高

    line-height

    1、line-height：20px（给像素）：固定的行间距

    2、line-height：20（不带像素）：字号大小的20倍

    3、line-height：500%（给百分号）：行间距比当前字体高度大5倍

            字号大小+行距=行高（文字顶端到下一行文字顶端的距离）

    1）去掉文字默认的上下间距，行高=字号大小

    2）单行文本直接给了行高，数值包括文字默认上下间距，且居中

    3）有高有行高

        行高=高，文字垂直居中

        行高>高，文字靠下

        行高<高，文字靠上

 

文本修饰 

    text-decoration:none/underline/overline/line-through

    说明：

        none:没有修饰

        underline:添加下划线

        overline:添加上划线

        line-through:添加删除线

 

首行缩进

    text-indent:value

    说明：

        1、text-indent可以取负值；

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

 

字间距

    letter-spacing:value

    控制英文字母或汉字的字距。

 

词间距

    word-spacing:value;

    控制英文单词词距。

 

文本流控制

    layout-flow:horizontal/vertical-ideographic;

    说明：

        1、horizontal:自左向右

        2、vertical-ideographic:自上而下

 

边框属性

边框宽度    border-width

边框颜色    border-color

边框样式    border-style:solid（实线） dashed（虚线） dotted（点划线） double（双线）

 

列表属性

列表样式            list-style-type:disc（实心圆） cirde（空心圆） square（实心方块）                list-style-type = list-stlye 去掉列表样式

用图作列表样式       list-style-image：url

定义列表符号位置     list-style-position：outside（外边） inside（里边）

 

背景图属性

背景颜色            background-color

背景图引入          background-image：url

背景图平铺          background-repeat：no-repeat（不平埔）repeat-x（横向）repeat-y（纵向）

背景图定位          background-position：left/center/right+数值（水平）

                                                                         bottom/center/top+数值（垂直）

滚动条              background-attachment：scroll（滚动） fixed（固定）

 

背景图显示范围：由元素的大小决定背景图显示多少

                           1、元素大小>背景图，默认下背景图在容器中平铺

                           2、元素大小<背景图，默认下，容器有多大，背景图就显示多少

                           3、元素大小=背景图 ，默认下背景图完全显示

                                同一个元素里，插入两个背景图，用(,)隔开