CSS 文本属性与值

HTML编辑文本，通过CSS的设置属性赋予HTML网页活力，改变文字类型、背景以及插入图片、视频、音频等，使网页更具生动。

• CSS中的文本属性

font-weight: bold;       //改变字体粗细
            normal   //正常字体、标准字体

font-style:oblique;     //字体风格（oblique倾斜）

text-decoration：underline;    //文字修饰（underline 下划线）
                overline;    （上划线）
                line-throug;   （删除线）
                 none; （取消文字下划线）

text-indent: 20px;    //文本首行缩进

text-align: right /center /left      //文本对齐

text-transform: uppercase; //文本转换（uppercase小写转化为大写）
                lowercase;    （大写转化为小写）

text-shadow: 0 2px 5px red;   //文本阴影

letter-spacing: 20px;    //字间距

word-spacing: 20px;   //词间距（英文单词）

line-height:20px;    //两个文本中的距离、行距

练习一个首字母大写如下：

<p>my english is very good</p>

通过CSS更改如下：

p:first-letter{
    text-transform: uppercase;
}

• CSS中的div属性

在HTML中新建一个div

<div class="box1"></div>

background-image：url("img/图片路径");     //插入图片

background-repeat：no-repeat;      //平铺方式（不平铺）
                                  “repeat-x”;    （横向X轴平铺）
                                   “repeat-y”;     （纵向Y轴平铺）

在CSS中实现图片平铺：【background-repeat：属性值】

在CSS中实现图片：不平铺

.box1{
     100px;
    height: 100px;
    border: dashed red;
    background-image: url(../img/picter/ai2003.jpg);
    background-repeat: no-repeat;
}

在CSS中实现图片X轴平铺：

.box1{
     500px;
    height: 300px;
    border: dashed red;   //画布边框
    background-size: 100px;    //图片大小
                     contain;  //上下填充画布
                     cover;    //完全填充画布，影响图片原貌

    background-image: url(../img/picter/ai2003.jpg);
    background-repeat: repeat-x;
}

在CSS中实现图片的位置： 【background-position:属性值】

.box1{
     500px;
    height: 100px;
    border: dashed red;
    background-size: 100px;
    background-image: url(../img/picter/logo_db.png);    //图片路径
    background-repeat: no-repeat;     //不平铺
    background-position: center center;     //图片居中
                         bottom lift ;    //左下角
                         top right;    // 右上角
                         50px 50px ;   //自定义位置

}

CSS中的背景附件：【background-attachment:属性值】

background-attachment:fixed;    //固定图片位置

综合上诉结构，可以* 综合简写属性 颜色 地址 平铺方式 是否固定 （不需要可以不写） 位置

background: pink url ("img/图片路径") no-repeat center center;
background-size: 100%;