一.添加样式_为什么用函数添加样式 $style1 ='style="text-align:center;colo-CSDN博客

本文链接：https://blog.csdn.net/weixin_52735772/article/details/114330007

1.为网页添加样式

ctrl + ？：文本内容CSS中的注释。

术语解释

h1{
    color: red;
    background-color: lightblue;
    text-align: center;
}

CSS规则：选择器 + 声名块

选择器

选择器：用来选中元素。

ID选择器：选中对应id值的元素。
元素选择器
类选择器：

    <p class="big-center red">Doloribus temporibus tempora odio iure.</p>

声名块

出现在大括号中，声名块中包含很多属性(声名)，每个属性表达了每一个样式规则。

CSS代码书写位置

内部样式表

书写在style元素中。(写在head中)

内联样式表(元素样式表)

    <h1 style="color: red;background-color: blue;text-align: center;">
        中国军事网
    </h1>

直接写在元素的style属性中。

外部样式表(主流)

将样式写到独立的css文件中。

link元素为空元素，无结束标记。

    <link rel="stylesheet" href="./CSS/index.css">
<body>
    <div class="red-big-center">
        Lorem ipsum dolor sit amet.
    </div>
</body>

外部样式表可解决多页面样式重复的问题。
有利于浏览器缓存，从而提高页面响应速度。
有利于代码分离(HTML和CSS)，更容易与阅读和维护。

2.常见样式声明

1.color

元素内部的文字颜色。

预设值：定义好的单词。

三原色，色值：(红，绿，蓝)，每个颜色可以使用0–255之间的数字来表达。

rgb();hex();

淘宝红：#ff4400；黑色：#000000；白色：#ffffff；红色：#ff0000

紫色：#ff00ff；青色：#00ffff；黄色：#ffff00；灰色：#ccc

2.bankground-color

元素背景颜色

3.font-size

元素内部文字的尺寸大小

(1)px：是绝对单位，像素(文字的大小，所占的像素)；

(2)em：是相对单位，相对于父元素的字体大小。

每个元素必须有字体大小，若没有声明，则直接使用父元素

的字体大小。如果没有父元素，则使用基准字号。

use agent(UA)：用户代理(浏览器)

4.font-weight

文字粗细程度，可以取值数字，可以取值为预设值。

bold(700)：加粗

normal:正常

strong元素默认加粗。

5.font-family

文字类型，计算机中存在的字体才会生效。

使用多个字体，以匹配不同环境。

        /* CSS规则 */
        div{
            font-family: 楷体,sans-serif;
        }

sans-serif:非衬线字体(边缘没有经过修饰)

6.font-style

字体样式，通常用来设置斜体

i元素，em元素默认字体是倾斜字体(表示特殊文本，专业术语等)，实际使用中通常用它表示一个图标(icon)

7.text-decoration

文本修饰给文本加线

del元素：错误的内容。
s元素：过期的内容。

8.text-indent

首行文本缩进(像素，文字)

8.line-height

每行文本的高度(该值越大，行于行之间的距离越大)

设置行高为容器的高度，可以让文本垂直居中。

行高可以设置为纯数字，表示相对于当前元素的字体大小。

10.width

设置内容宽度

11.height

设置内容高度

12.letter-space

文字间隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*单行文本垂直居中*/
        p{
            background-color: #008c8c;
            color: white;
            height: 50px;
            width: 1920px;
            line-height: 50px;
            letter-spacing: 1em;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet.
    </p>