前端小白的css学习笔记——简介、选择器、字体属性和文本属性（最后有思维导图哦）

CSS简介及选择器介绍

最新推荐文章于 2025-12-06 22:07:37 发布

原创最新推荐文章于 2025-12-06 22:07:37 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了CSS（层叠样式表），它用于美化HTML，使结构和样式分离。阐述了CSS的语法规范和引入方式，还介绍了选择器，包括基础选择器（标签、类、id、通配符选择器）和复合选择器，以及字体和文本属性等内容。

部署运行你感兴趣的模型镜像

简介

css是层叠样式表的（Casading Style Sheets）的简称。有时会成为css样式表或级联样式表。用来美化HTML，让网页更漂亮，布局更简单。使结构（HTML）和样式（css）相分离

语法规范：选择器 { 声明的样式 }

<style>
    p {
        color： tomoto;
        font-size: 24px;
    }
</style>
<!--style是html标签，里面的内容是css-->

引入方式：行内样式表（行内式）；内部样式表（嵌入式）；外部样式表（链接式）

<!--行内式-->

<div style="color: red; font-size: 22px;">行内式</div>

<!--嵌入式-->
<style>
    div {
        color: red;
        font-size: 22px;
    }

</style>

<!--链接式-->

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

####选择器

选择器分为基础选择器和复合选择器两个大类。

基础选择器由单个选择器组成，包括：标签选择器、类选择器、id选择器和通配符选择器。

标签选择器：更改一个类型的标签样式。（一改改一片，不能差异化更改）

<!DOCTYPE html>
<head lang="zh-CN">
    <mate charset="UTF-8">
    <title>多类名</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

类选择器：样式 . 定义，结构类（class）调用，一个或多个，开发最常用。不能以数字开头，长类名可以用短横线连接。尽量根据命名规范来写。

<!DOCTYPE html>
<head lang="zh-CN">
    <mate charset="UTF-8">
    <title>多类名</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

多类名：把多个类名写在class里，用空格分开。

<!DOCTYPE html>
<head lang="zh-CN">
    <mate charset="UTF-8">
    <title>多类名</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
        .box1 {
            color: tomoto;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
</body>

id选择器：样式#定义，结构id调用，只能调用一次。经常和JavaScript搭配使用。（多个标签调用也能改变样式，但是开发中一定不要这么做！）

<!DOCTYPE html>
<head lang="zh-CN">
    <mate charset="UTF-8">
    <title>多类名</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>

通配符选择器：* 定义，表示页面中所有元素，不需要调用，自动给所有元素使用样式。

<style>
    * {
        color: tomato;
    }
</style>

字体属性

在这里插入图片描述

文本属性

在这里插入图片描述
每天进步一点点，妈妈夸我小天才！（doge）

PS：最后附上思维导图（会不会高大上一点）
在这里插入图片描述

您可能感兴趣的与本文相关的镜像

Anything-LLM

AI应用

AnythingLLM是一个全栈应用程序，可以使用商用或开源的LLM/嵌入器/语义向量数据库模型，帮助用户在本地或云端搭建个性化的聊天机器人系统，且无需复杂设置