• HTML知识小结之CSS

    目录

    一、了解CSS

    1.定义

    • CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
    • 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

    2.关系

    • 一个基本的网站包含很多个网页，一个网页由html, css和javascript组成。html是主体，装载各种dom元素；css用来装饰dom元素；javascript控制dom元素。用一扇门比喻三者间的关系是：html是门的门板，css是门上的油漆或花纹，javascript是门的开关；

    • HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

    3.语法规则

    • CSS写在style标签中，style标签一般写在head标签里面，title标签下面，选择器 {css属性}
    • 常用属性：字体颜色，背景颜色，大小，宽高
      在这里插入图片描述

    二、引入 CSS 的方式

    有 4 种方式可以在 HTML 中引入 CSS。
    其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码。
    另外两种是引入 外部 CSS文件。

    1.行内式

    • 行内式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
    • css写在标签的style属性中
    • 示例
    <div style="background: skyblue">
        <h1>你好h1>
div>

    • 1
    • 2
    • 3
    • 代码效果
      在这里插入图片描述
    • 这种方法不常用，因为它只能改变当前标签的样式，如果想要多个
      拥有相同的样式，你不得不重复地为每个
      添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

    2.内嵌式

    • 内嵌式指的是在 HTML 头部中的