CSS样式控制：布局、字体与背景的艺术-优快云博客

本文链接：https://blog.youkuaiyun.com/ITMonkeyKing/article/details/128902652

使用CSS对网页布局、字体、颜色、背景和其他效果实现更加精确的控制。

1. CSS基础语法

3个部分组成：选择器、样式属性和值。

定义方式多样：

在HTML文件内部定义；
分标签定义、分段定义；
在HTML文件外部定义

语法结构：

/*
1. css选择器：可以是元素名(如body)，可以是#id或.class；
2. 样式属性：如颜色、大小、定位等属性
3. 属性值：指定范围值(如left、right)或数值(如0~999px)；
*/
css选择器{
    样式属性:属性值;
    样式属性:属性值;
}


//示例
/*
选择网页中所有的p元素，将字体颜色设置为黄色
*/
p{
    color:yellow
}

/*
选中网页中所有id=tab的元素，修改字体颜色为黄色。
*/
#tab{
    color:yellow;
}

/*
选择网页中所有class=tab的元素，修改字体颜色为黄色
*/
.tab{
    color:yellow
}

/*
群组选择器，可以同时选中多个选择器对应的元素
*/
.tab1,.tab2,.tab3{
    color:yellow
}

2. 添加CSS方法

4种方法：链接外部样式表、内部样式表、导入外部样式表和内嵌样式。

2.1 链接外部样式

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 链接外部样式 -->
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

2.2 内部样式表

内部样式表一般位于 HTML 文件的头部，即 <head> 与 </head> 标签之间，并且以结束，这样定义的样式就可应用到网页中。


<head>
 <!-- 内部样式表 -->
    <style>
        .title{
            font-size: 16px;
            color: hotpink;
            line-height: 20px;
        }
        .red{
            color: red;
        }
    </style>
</head>

2.3 导入外部样式表

使用@import导入

<head>
<style>
    @import url("index.css")
</style>
</head>

2.4 内嵌样式

内嵌样式是混合在HTML标签里使用——直接在标签里添加style属性：

<body>
    <h1 style="font-size:16px;color:#000000;line-height:20px">标题</h1>
</body>

3. CSS字体属性

属性	描述
font
font-family	设置字体系列
font-size	设置字体的尺寸
font-style	设置字体样式
font-variant	以小型大写字体或正常字体显示文本
font-weight	设置字体的粗细

3.1 字体代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1,p{
            font-family: "楷体";
        }
    </style>
</head>

<body>
    <h1>春晓</h1>
    <p>春眠不觉晓，</p>
    <p>处处闻啼鸟。</p>
</body>

</html>

3.2 字体复合属性

设置font的复合属性来简化CSS代码。
可以按照：字体系列、字体大小、字体样式、字体粗细等顺序来写，各个值之间用空格相连。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 复合属性 */
        h1{
            font: bold 10px "华文行楷";
        }
    </style>
</head>

<body>
    <h1>春晓</h1>
    <p>春眠不觉晓，</p>
    <p>处处闻啼鸟。</p>
</body>

</html>

4. 背景属性

属性	描述
background	简写属性，将背景属性设置在声明中
background-attachment	背景图像是否固定或随着页面的其他部分滚动
background-color	设置元素的背景颜色
background-image	把图像设置为背景
background-position	设置背景图像的起始位置
background-repeat	设置背景图像是否重复及如何重复

4.1 背景示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            height: 1000px;
            background-color: #f7e3da;
            color: #ffffff;
        }

        h1 {
            background-color: #1794a0;
            font-family: "楷体";
            font-size: 22px;
            font-style: normal;
            color: #c06c84;
        }

        p {
            background-color: #ee7c58;
            /* 字体 */
            font-family: "楷体";
            /* 字号 */
            font-size: 18px;
            /* 字体样式 */
            font-style: italic;
            /* 颜色属性 */
            color: #355e7e;
        }

        .p2 {
            /* 加粗字体 */
            font-weight: bold;
        }

        /* 复合属性 */
        h2 {
            font: bold 10px "华文行楷";
        }

        /* 背景图像 */
        .box {
            width: 600px;
            height: 500px;
            border: 2px solid grey;
            /* 设备背景图 */
            background-image: url(img/img_0.jpg);
            /* 设置背景大小，CSS3有的特性 */
            background-size: 100px;
            /* 背景不重复 */
            background-repeat: no-repeat;
            /* 背景位置 */
            background-position: center;
            /* 背景附件，设置背景图是滚动还是固定不动.验证效果请注释上面的位置属性 */
            background-attachment: fixed; 
        }

        .box2 {
            width: 400px;
            height: 300px;
            border: 2px solid grey;
            /* 复合属性写法 */
            background: url(img/s_05.jpg) no-repeat center/300px;
        }
    </style>
</head>

<body>
    <h1>春晓</h1>
    <h2>孟浩然</h2>
    <p>春眠不觉晓，</p>
    <p class="p2">处处闻啼鸟。</p>
    <div class="box">

    </div>
    <div class="box2">

    </div>
</body>
</html>

5. 段落属性

word-spacing属性设置单词间隔
letter-spacing属性设置字符间隔
text-decoration属性对文本进行修饰
text-align属性设置文本水平对齐
vertical-align属性设置文字垂直对齐方式
text-transform文本转换属性用来转换英文字母大小写
text-indent设置段落首行缩进和缩进距离
line-height设置段落中行与行之间的距离
white-space设置网页内空白的处理方式

5.1 段落属性代码示例

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            /* 单词间隔 */
            word-spacing: 10px;
            /* 字符间隔 */
            letter-spacing: 10px;
        }
        a{
            /* 文字修饰 */
            text-decoration: underline;
        }

        div{
            /* 文本水平对齐 */
            text-align: center;
        }

        .ch{
            /* 垂直对齐方式 */
            vertical-align: super;
        }

        .p1{
            /* 文字转换属性,强制大写 */
            text-transform: uppercase;
        }
        .p2{
            /* 文字转换属性,驼峰形式 */
            text-transform: capitalize;
        }

        p{
            /* 文本缩进 */
            text-indent: 2em;
            /* 文本行高 */
            line-height: 2;
            /* 空白处理,保留空白序列 */
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <p>
        他们脸上的皱纹里积满了阳光和泥土，他们向我微笑时，我看到空洞的嘴里牙齿所剩无几。<br>
        他们时常流出浑浊的眼泪，这倒不是因为他们时常悲伤，他们在高兴时甚至是在什么事都没有的平静时刻，也会泪流而出。<br>
        然后举起和乡间泥路一样粗糙的手指，擦去眼泪，如同掸去身上的稻草。
    </p>
    <br>
    <p>
        Dark light, just light each other. The responsibility that you and my shoulders take together, 
        the such as one dust covers up. Afraid only afraid the light is suddenly put out in theendless 
        dark night and Countless loneliness.
    </p>

    <a href="https://www.baidu.com">百度</a>

    <hr>
    <div>
        文字水平居中显示
    </div>
    <hr>

    5<span class="ch">2</span>-2<span class="ch">2</span>=21

    <hr>
    <p class="p1">hello world.</p>
    <p class="p2">hello world.</p>
    
</body>
</html>