【web前端】CSS笔记小结基础选择器+字体+文本（Day 1）_基础选择器带文字叫什么-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_61096287/article/details/124052613

本文是CSS入门教程的一部分，详细介绍了CSS的基础选择器，包括标签选择器、类选择器（强调类选择器的命名规范和多类名使用）、ID选择器和通配符选择器，并探讨了它们的区别。此外，还讲解了字体属性，如字体系列、大小、粗细和样式，以及文本属性，如颜色、对齐、装饰和缩进。最后，提到了CSS的引入方式和Chrome调试工具的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

※类选择器和id选择器的区别→最大区别是使用次数

I.CSS简介

①HTML的局限性→只关注内容的语义；

②CSS是层叠样式表（Cascading Style Sheets)的简称，也叫CSS样式表或级联样式表，是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面布局和外观显示样式。

③总结

④CSS语法规范

注意，<style></style>标签要写在<head></head>里面！

eg.代码：

<!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 {
            color: blueviolet;
            font-size: larger;
        }
    </style>
</head>

<body>
    <p>css语法规范</p>
    <p>刚开始学,继续加油（；´д｀）ゞ</p>
</body>

</html>

效果：~~加油加油（＞人＜；）！！~~

PS:比如color是属性，后面的blueviolet是属性值，所以用”:“分开，用”;“结束

⑤代码风格

1）样式格式书写→推荐第二种（直接下载beautify插件或Prettier - Code formatter插件即可）

2）样式大小写→推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外

3）空格规范

❀属性值前面，冒号后面，保留一个空格；

❀选择器（标签）和大括号中间保留空格

II.CSS基础选择器（也叫选择符）

①作用→选择标签

②分类→基础+复合

1）基础选择器（标签、类、id、通配符）

❀标签选择器

❀类选择器

样式点定义、结构类调用（开发最常用）

语法

※目前收集的类选择器命名规范

1）页面结构

容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer

导航：nav 侧栏：sidebar 栏目：column 左右中：left right center

页面外围控制整体布局宽度：wrapper

2）导航类

导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar

左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title

摘要: summary

3）功能类

标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：register 搜索：search

功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll

标签页：tab 当前: current 技巧：tips 图标: icon 提示信息：msg 注释：note

文章列表：list 指南：guild 服务：service 热点：hot 新闻：news 投票：note

下载：download 合作伙伴：partner 友情链接：link 版权：copyright

eg1️⃣ 代码：

<!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>
        .blue {
            color: blue;
            font-size: x-large;
        }
        
        .bv {
            color: blueviolet;
            font-style: italic;
            font-size: larger;
        }
        
        .cb {
            color: cadetblue;
            font-style: oblique;
            font-size: large;
        }
    </style>
</head>

<body>
    <p class="blue">类选择器口诀：</p>
    <p class="bv">样式点定义,结构类（class）调用</p>
    <P class="cb">一个或多个,开发最常用~!</p>
</body>

</html>

效果：

eg2️⃣ 画盒子代码：

<!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>
        .blue {
            background-color: cornflowerblue;
            width: 200px;
            height: 100px;
        }
        
        .green {
            background-color: aquamarine;
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="blue"></div>
    <div class="green"></div>
</body>

</html>

效果：

※类选择器的特殊使用→多类名

1️⃣使用方式

eg. 代码：

<!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>
        .blue {
            color: cornflowerblue;
            font-size: 35px;
        }
        
        .box {
            width: 200px;
            height: 100px;
        }
        
        .grey {
            background-color: darkgray;
        }
    </style>
</head>

<body>
    <div class="box blue grey">测试ing</div>
</body>

</html>

效果：

2️⃣使用场景

❀id选择器

重点：id属性只能在每个HTML文档中出现一次

eg.代码：

<!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>
        #blue {
            color: aqua;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div id="blue">样式#定义，结构id调用，只能调用一次，别人切勿使用</div>
</body>

</html>

效果：

※类选择器和id选择器的区别→最大区别是使用次数

1）类选择器→可以多次；id选择器→只能一次
2）类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

❀通配符选择器

用“*”定义，它表示选取页面中所有元素（标签）

❀总结

修改样式时，类选择器使用最多！

2）复合选择器

博客地址：【web前端】CSS笔记小结（持续更新ing）（Day 2）_进击的文文文的博客-优快云博客来源：黑马程序员pink老师前端入门教程I.emmet语法https://blog.youkuaiyun.com/weixin_61096287/article/details/124137212

III.字体属性

作用：定义字体系列、大小、粗细及样式

①系列font-family

PS：从第一个开始检测，如果电脑里安装了该字体，就显示，如果都没有，显示默认字体

②大小font-size

PS：标题标签要单独设置大小

③粗细font-weight→实际开发更常用数字

④样式font-style

斜体标签→<em></em> <i></i>

字体对比：

代码：

<!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 {
            font-style: italic;
        }
        
        i {
            font-style: normal;
        }
        
        .ziti {
            background-color: rgb(9, 244, 165);
            color: rgb(22, 23, 24);
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="ziti">
        <p>这是font-style的倾斜</p>
        <em>这是em的倾斜</em>
        <br/> <i>这是正常文字</i>
    </div>
</body>

</html>