文本属性字体样式列表样式背景图属性背景图位置调整

用户851070088171
276 阅读2分钟

主要内容： list-style:none; 去掉序列的样式 文本修饰线 text-decoration:none | underline | line-through; none没有线 underline下划线 line-through 删除线、贯穿线 11.字间隔 【了解】 letter-spacing 背景起始位置 background-position:x的坐标 y的坐标; //也可以是对应方向的英文：left right center top bottom;背景是否固定 background-attachment:fixed; 1.文本属性 1.大小 font-size:*px | *em | *rem; px是像素，绝对大小 em是父元素的字体大小的倍数 rem是根元素的字体大小的倍数。[html]

2.颜色
    color:颜色的英文 | #16进制值 | rgb(R,G,B) | rgba(R,G,B,透明度)

3.粗细
    font-weight: 400 normal | 700 bold;
    400或者normal代表正常粗细
    700或者bold代表加粗

4.字体类型  【宋体、微软雅黑】
    font-family:'类型1','类型2' ...;

5.字体样式   【是否倾斜】
    font-style : normal | italic ;

6.行高:一行文字所占的高度 [文字本身大小+间隔] 
    line-height:*px;
    应用： 单行文字垂直居中
          多行文字，调整行间距

7.文本缩进
    text-indent:*px;
    注意：行级元素不行

8.文本水平对齐
    text-align:left | center | right | justify;
    justify是针对多行文字

9.文本修饰线
    text-decoration:none | underline | line-through;
    none没有线
    underline下划线
    line-through 删除线、贯穿线

10.font复合属性 【了解】
    可以设置字体的多个样式，但是最简的形式都必须带字体大小和类型
    font: font-size/line-height  font-family;

11.字间隔 【了解】  letter-spacing

2.列表相关的属性 list-style:none; 去掉序列的样式

3.继承：有上下级关系的元素之间，上级元素的样式被下级元素拥有，这就是继承。 文本和列表相关的属性可以被继承。

4.背景相关的属性 1.背景颜色 background-color:颜色； 2.背景图片 background-image:url(图片路径) 3.背景平铺 background-repeat:no-repeat; //设置背景图不重复 4.背景起始位置 background-position:x的坐标 y的坐标; //也可以是对应方向的英文：left right center top bottom; 5.背景大小 background-size:宽度 高度;
6.背景是否固定 background-attachment:fixed;

7.背景的复合属性  background:属性值;

精灵图的步骤：
    1.实现一个指定大小的盒子
    2.设置精灵图为背景图
    3.通过background-position调整背景图的位置。

    优缺点：
        性能好
        命名少
        步骤繁琐，增删图标麻烦。
avatar
文章
阅读
粉丝