CSS文字相关设置(大小、加粗、倾斜、颜色、居中、下划线、行高)和background背景设置

1. 文字大小

每个浏览器的默认文字大小都一样，我们给HTML的body标签设置统一的文字大小

    
    test title
    

        body {
            font-size: 50px;
        }
        
    



4级标题
盒子一

显示效果如下：

2. 加粗、倾斜、颜色、居中、下划线、行高

    
    test title
    


        .font-set {
            font-weight: 700;
            font-style: italic;
            color: #ff0000;
            text-align: center;
            text-decoration: underline;
            line-height: 50px;
        }

        .font-style-normal {
            font-style:normal
        }

    





盒子一

斜着的文字, 搜索引擎我告诉你, 我很重要 
斜着的文字, 搜索引擎我告诉你, 我不重要

• font-weight的700等同于bold, 400等同于normal
• font-style默认是normal
• color还可以是red、rgb(255, 0, 0)、rgb(100%, 0%, 0%)
• text-align还可以是left(默认)、right
• text-decoration还可以是none、line-through、overline
• line-height等于上间距 + 文字高度 + 下间距。值可以是50px，或者是5(表示相对于文字的倍数)

显示效果如下：

3. 设置文字垂直居中

    
    test title

    

        div {
            font-size: 50px;
            line-height: 100px;
            width: 500px;
            height: 100px;
            background: red;
        }

    




盒子一

• 将line-height设置的和盒子一样的高度，则文字垂直居中
• line-height大于盒子高度，文字偏下；反之

4. 文字缩进

    
    test title
    

    .text-set {
        text-indent: 2em;
    }

    



盒子一
盒子二

• 缩进的单位还可以是px，缩进的值可以是负数

显示效果如下：

5. backgroup背景设置

    
    test title

    

        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(images/baidu.png);
            background-repeat: repeat-x;
            background-position: 50% center;
            background-attachment: fixed;
        }

    




盒子一

参数说明如下：

• background-color默认的值是transparent, 表示没有背景颜色
• background-color位于background-image底下
• 另一种指定backgroup-color的方式是通过: background: rgba(0, 0, 0, 0.3);, 可以通过最后一个参数指定透明度, 参数范围为0-1
• background-image默认值是none
• background-repeat默认值是repeat, 表示x和y轴都重复。取值还有no-repeat、repeat-y
• background-position第一个参数表示x的位置, 第二个参数表示y的位置。可以有3种形式, 而且3种形式可以混用
  1. px形式
  2. 第一个参数值可以是left、center、right, 第二个参数值可以是top、center、bottom
  3. 百分比：相对于父盒子来说
• background-attachment默认值是scroll, 即背景图片会随着屏幕的滚动而滚动, 是正常的现象。当设置为fixed时, 此时background-position的x,y就相对于视口窗口, 而不是父盒子, 随着屏幕滚动, 背景图片固定在视口窗口, 但父盒子是滚动的, 背景图片只有在父盒子中才能显示

显示效果如下：