概述

CSS（层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言，用来为网页添加样式的代码。

格式

选择器： class选择、id选择、标签选择......

LINK:

注意：

标签选择器会更改所有同标签样式
同一标签，多个选择器同时存在，以最新的样式为主（最后一个样式选择器）
行内式样式会优先选择
#用于id选择， . 用于class选择

选择器{
      属性名：属性值
    }

比如，对普通文字(p标签)进行颜色、粗细等更改

<p>Hello World</p>
<p>This is a passage</p>

<p class="passageByClass">This is a passage2</p>   //类选择
<p id="passageById">This is a passage3</p>   //id选择

<style>
    p {
      color: aqua;
      font-weight: 800;
    }

    .passageByClass {
      color: antiquewhite;
    }

    #passageById {
      color: cornflowerblue;
    }
</style>

样式书写位置与引用

内部样式

内联式：使用< style>标签

行内式：可直接在标签内使用style进行样式编写，优先级最高

<p id="passageById" style="color: white">This is a passage3</p>

外部样式（外联式）

在后缀为css文件中编写样式, 使用 link 标签引用

.passageByClass {
    color: lightskyblue;
}

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

引用优先级

行内式
内联式
外联式

注意：

当样式后面出现 !important 会优先执行(覆盖同标签内同属性名)

style.css

.passageByClass {
    color: lightskyblue !important;
    /* weight 不会执行，未有 !important */
    font-weight: 600;       
}

index.html

.passageByClass {
      color: antiquewhite;
    }

常见样式

背景

属性	作用
background	将背景属性设置在一个声明中
background-position	设置背景图像的起始位置
background-repeat	设置背景图像是否及如何重复

文本

属性	作用
color	设置文本颜色
text-align	对齐元素中的文本
word-spacing	设置字间距

文字

属性	作用
font	设置所有的字体属性
font-family	指定文本的字体
font-size	指定文本的字体大小
font-style	指定文本的字体样式

项目测试 LINK

项目测试(gitee.com)

文档推荐 LINK

CSS 基础 - 学习 Web 开发 | MDN (mozilla.org)

HTML CSS 样式表 (w3schools.cn)

CSS概述 | 青训营笔记

概述

格式

样式书写位置与引用

常见样式