使用CSS渲染页面

1. 规则、属性和值

1) 内联样式

十分不推荐，无法对样式进行替换

<h1 style="color: red">Hello, world</h1>

2) 内部样式表

通常只在首页使用，保证页面加载完成后能够正常渲染

<style>
    /* 通配符选择器(*作用于所有的标签) */
    * {
        /* 外边距 */
        margin: 0;
        /* 内边距 */
        padding: 0;
    }

    /* 并列关系选择器 */
    .h1_1,
    .h1_2,
    .h1_3,
    .h1_4,
    .h1_5,
    .h1_6,
    .h1_7 {
        height: 50px;
    }

    /* 标签选择器 */
    h1{
        color: red;
    }

    /* 类选择器 建议使用*/
    .h1_1 {
        color: red;
        /* 上 右 下 左 */
        margin: 0 350px 20px 350px;
    }

    /* id选择器 一般不推荐使用*/
    #foo {
        color: green;
    }
</style>

3) 外部样式表

推荐使用，实现代码复用，保持统一风格

<link rel="stylesheet" href="css/style.css">

4) 样式冲突

样式表中书写的作用于同一个标签的样式如果没有任何冲突就会叠加

如果作用于同一个的标签的样式发生了冲突那么按照以下三条原则绝定谁生效:

1. 就近原则
2. 具体性原则(ID选择器 > 类选择器 > 标签选择器 > 通配符选择器)
3. 重要性原则(!important)

5）字体、颜色、文本及间距的使用

<style>
    h1 {
        font-size: 3em;
        /* 斜体 */
        font-style: italic;
        /* 拉伸 */
        font-stretch: ultra-condensed;
        /* 字间距 */
        letter-spacing: 5px;
        color: white;
        /* 文字居中 */
        text-align: center;
        line-height: 80px;
        /* 指定多种字体时英文字体放在前面,中间用逗号隔开 */
        font-family: "Times New Roman", "WeibeiSC-Bold" !important;
        /* 溢出处理 */
        overflow: hidden;
        /* 文本阴影 */
        text-shadow: 4px 4px #000000;
        /* 文本装饰 */
        text-decoration: underline;
    }
    .photo {
        /* 圆角 */
        border-radius: 40px;
    }
    p {
        text-indent: 32px;
        width: 720px;
        height: 260px;
        overflow: scroll;
        margin: 0 auto;
        border: 10px double orange;
        border-radius: 10px 20px 30px 40px;
        padding: 0 20px;
    }
    /* 样式表的伪元素 */
    p:first-letter {
        font-size: 64px;
    }

    p:first-line{
        font-size: 32px;
    }
</style>