CSS基础汇总笔记

一、CSS简单概述

• CSS 的英文名为 Cascading Style Sheet ，翻译成中文为层叠样式表。

二、CSS的样式规则组成

selector { 属性：属性值; [属性:属性值;] …… }

三、CSS的样式的定义使用方式

1. 直接定义标记的style属性

<标记 style="样式属性:样式值; 样式属性:属性值; ……">

2. 定义内部样式表

<style type="text/css">
    <!--
        选择符1 {样式属性:样式值; 样式属性:属性值; ……}
        选择符2 {样式属性:样式值; 样式属性:属性值; ……}
    -->
</style>

3. 嵌入外部样式表

<style type="text/css">
    @import url("./style.css");
    /* 1.注意结尾的分号 2.@import应该放在style元素的任何其他样式规则前 */
</style>

4. 链接外部样式表 (常用)

<link type="text/css" rel="stylesheet" href="./style.css">
<!-- 1.外部样式表的优先级低于内部样式表 2.链接多个样式表时，靠后的样式表优先于靠前的样式表-->

四、选择符

/* 常用css选择器 */
<style type="text/css">
    /* 1.按照元素名称选择 */
    div,p{font-size:16px; color:red;}

    /* 2.按照id选元素 */
    #divdemo{background-color:#90EE90;}

    /* 3.按照class选择元素 */
    .p1{font-size:16px; color:red;}

    /* 4.按照祖孙关系选择元素 */
    div p{font-size:16px; color:red;}

    /* 5.按照父子关系选择元素 */
    div>p{font-size:16px; color:red;}
</style>

五、文字样式

1. 文字引入

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义字体示例</title>

    <!-- 优化1：preconnect 提前建立CDN域名连接，减少TCP/DNS握手延迟  -->
    <link rel="preconnect" href="https://acc-1258344699.cos.accelerate.myqcloud.com" crossorigin>
    <!-- 优化2：preload预加载字体资源，浏览器优先下载字体文件 -->
    <link rel="preload" href="https://acc-1258344699.cos.accelerate.myqcloud.com/web/website/assets/AlimamaShuHeiTi-Bold.woff2" as="font" type="font/woff2"
        crossorigin>

    <!-- Tailwind -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    // 注册tailwind工具类：会自动生成 .font-myfont
                    fontFamily: {
                        myfont: ["AlimamaShuHeiTi", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"]
                    }
                }
            }
        }
    </script>

    <style>
        /* 第一步：@font-face 注册字体。给字体起一个逻辑名称，关联字体文件 */
        @font-face {
            font-family: "AlimamaShuHeiTi";
            /* 【自己随便起的逻辑名字，后面全靠这个名字调用】 */
            src: url("https://acc-1258344699.cos.accelerate.myqcloud.com/web/website/assets/AlimamaShuHeiTi-Bold.woff2") format("woff2");
            /* 字体文件地址，可以本地路径，可以http远程url */
            font-weight: 700;
            /* 该字体对应的字重 */
            font-style: normal;
            font-display: swap;
            /* 网络慢，先用系统字体占位，下载完自动切换，避免文字空白 */
        }

        /* 第二步：选择h1标签，给它设置 font-family = 上面注册的逻辑名字 AlimamaShuHeiTi */
        h1 {
            font-family: "AlimamaShuHeiTi", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            /* sans-serif 是兜底字体：万一字体加载失败，浏览器用系统无衬线字体，页面不会崩坏 */
        }
    </style>
</head>

<body>
    <h1>这里是h1标题，将会使用CSS指定的自定义字体</h1>
    <p class="font-myfont">使用Tailwind生成的class应用字体</p>
</body>

</html>

2. 文字样式

/* 设置字体 */
font-family:字体一,字体二,字体三

/* 设置字号 */
font-size:15px
font-size:xx-small|x-small|small|medium|large|x-large|xx-large
font-size:75%

/* 设置字体样式 */
font-style:normal(默认) | italic(斜体) | oblique(歪斜体)

/* 设置字体加粗 */
font-weight: lighter | normal | blod | bolder | 80-900

/* 设置字体变体（小型的大写字母） */
font-variant:normal | small-caps

/* 设置字体下划线、顶线、删除线、闪烁效果 */
text-decoration:underline | overline | line-through | blink | none


/* 综合字体设置 */
font:font-style font-variant font-weight font-size/line-height font-family  
/* 例：font:italic bold 12px/20px arial,sans-serif; 
    多个字体用逗号（,）隔开
*/



/* 首行缩进 */
text-indent:20px

/* 字符间距 */
letter-spacing:10px

/* 行距 */
line-heigt:normal | 倍数 | 长度单位(可为负数) | 百分比

/* 水平对齐 */
text-align:left|right|center|justify(两端对齐)

/* 转换英文大小写 */
text-transform:uppercase|lowercase|capitalize(每个词首字母大写)|none

六、背景与颜色

/* 设置网页或文字的背景颜色 */
background-color:颜色关键字|RGB值|transparent(默认)

/* 插入背景图片 */
background-image:url(img/a.jpg)|none

/* 设置背景图重复方式 */
background-repeat:repeat|repeat-x|repeat-y|no-repeat

/* 设置背景图片是否随滚动条一起移动 */
background-attachment:scroll|fixed

/* 设置背景图片位置 */
/* 在利用百分比和长度设置图片位置时都要指定两个值，并且这两个值要用空格隔开，一个代表水平位置，一个代表垂直位置。 */
background-position:百分比|长度|关键字（left|center|right|top|center|bottom）
background-position:right bottom

七、盒子模型的概念与使用

CSS将样式调用在每个元素上时，都把每一个元素当成一个长方形的盒子，用这个假设的盒子设置各元素与网页直接的距离。使用盒子模型时，常用属性有：margin、padding、border。

1. margin设置元素外边距

margin:8px                                /*四个外边距都为8px*/

margin:10px 5px;                          /*上下10px,左右5px*/

margin:10px 5px 15px;                     /*上10px,左右5px，下15px*/

margin:10px 5px 15px 20px;                /*上10px 右5px 下15px 左20px*/

margin-(top|right|bottom|left):100px      /*单独设置各外边距*/

2. padding设置元素内边距

padding:10px;                          /* 所有 4 个内边距都是 10px */

padding:10px 5px;                      /* 上下10px 左右5px */

padding:10px 5px 15px;                 /* 上10px 左右5px 下15px */

padding:10px 5px 15px 20px;            /*上10px 右5px 下15px 左20px*/

padding-(top|right|bottom|left):100px      /*单独设置各内边距*/

3. border边框相关设置

/* 边框样式属性 */
border-style:1-4个样式值
border-(top|right|bottom|left)-style：样式值     /*单边框设置样式*/

/*边框宽度属性*/
border-width:thic|medium|thick|长度值
border-(top|right|bottom|left)-width:thic|medium|thick|长度值

/* 边框色彩属性 */
border-color:颜色关键字|RGB值
border-(top|right|bottom|left)-color:颜色关键字|RGB值

/* 边框综合属性 */
border:边框宽度|边框样式|边框颜色
border-(top|right|bottom|left)：单边框宽度|单边框样式|单边框颜色
/* 例子：.p1{border：2px solid #FFFF00} */

• 元素边框的样式取值说明（border-style）

八、列表样式

1. 列表样式 list-style-type

2.列表图像 list-style-image
　　设置列表符号为图片

list-style-image:url(img/a.gif) | none

3.列表符号的缩进 list-style-position

list-style-position:inside(更偏右)|outside(默认)

九、DIV应用

0. 极简HTML骨架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
  <style>
    /* box-sizing：计算模式开关：
        - border-box：width = 内容 + padding + 边框总宽度
        - content-box（默认）：width 只是内容宽度，padding、border会额外把盒子撑大 */
    * {
      margin:0;
      padding:0;
      box-sizing:border-box;
    }
  </style>
</head>
<body>
  <!-- 所有页面可见HTML写在这里 -->

</body>
</html>

1. <div>标记

   div标签的属性说明

   属性名		描述
   position定位方式	static	静态定位 (默认)，遵循标准文档流布局，忽略top/right/bottom/left和z-index属性
   	relative	相对定位，遵循标准文档流布局，不脱离文档流，即仍在原位置占据空间。生效属性：top/right/bottom/left、z-index，
   	absolute	绝对定位，脱离文档流，不占据空间。相对于最近的非static定位祖先元素定位，若无此类祖先，则相对于初始包含块（通常是整个窗口）。生效属性：top/right/bottom/left、z-index
   	fixed	固定定位，脱离文档流，相对于浏览器视口定位，不依赖父元素定位。利用固定定位可以实现元素位置不随页面滚动而发生变化。生效属性：top/right/bottom/left、z-index
   	sticky	粘性定位，混合relative和fixed特性，根据滚动位置在两者间切换。生效属性：top/right/bottom/left、z-index，且必须指定要给定位属性。需浏览器支持太老版本可能不支持
   	其他	inherit：继承父元素的position值。 initial：重置为默认值static。 revert：恢复属性到继承前的状态（若无继承则回退到initial）。 revert-layer：回退到层叠上下文外的值（CSS级联与继承规范定义）。
   width、height宽高	width	定义层的宽度
   	height	定义层的高度
   top、bottom、right、left设置位置	auto	默认值
   	长度值	数字和长度单位，对象与其他对象某个方向的相对位置
   	百分比	作为属性值为一个相对值
   float浮动 (不仅仅用于图像和表格)	left	表示浮动元素在左边，是居左对齐
   	right	表示浮动元素在右边，是居右对齐
   	none	表示不浮动 (默认)
   clean清除	left	表示不允许在某元素的左边有浮动元素
   	right	表示不允许在某元素的右边有浮动元素
   	both	表示不允许在某元素的左右两边有浮动元素
   	none	表示允许在某元素的左右两边有浮动元素
   z-index层空间	auto	表示子层会按照父层的属性显示
   	数字	必须是无单位的整数，一般取正整数

【所有控制元素尺寸、空隙的 CSS 属性分成 4 大类】
元素自身尺寸：width /height/min-width /min-height/max-width /max-height
盒子内部留白：padding
盒子外部空隙：margin /gap(Flex/Grid 专用)
文本行间距：line-height(只针对文字)

2. <span>标记
   相对于<div>,用于范围较小的地方，常用于行内元素。

3. <div>和<span>区别

• 相同点：<div>和<span>都没有对元素内的对象进行任何样式的定义，主要用于应用样式表，两者都可用来产生区域范围，以定义不用的文字段落。

• 不同点：

  • 区域内是否换行： <div>标记区域内的对象与区域外的上下文间会自动换行，而<span>不会。
  • 标记相互包含： 当需要同时用到这两个标记是，建议用<div>包含<span>标记。否则有可能会造成<span>标记的区域不完整而形成断行的现象
  • 定位不同: <div>是块元素，指定定义HTML的容器；<span>是行内元素，指定内嵌文本容器

4. CSS 布局和定位 (CSS Display & Position)-范叶亮：https://leovan.me/cn/2023/05/css-display-and-position
5. 常规流中的块和内联布局：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow

十、开发流程

步骤1：复制基础空白骨架

就是我们这套固定外壳

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>xxx</title>
  <style>
    * {
      margin:0;
      padding:0;
      box-sizing:border-box;
    }
  </style>
</head>
<body>

</body>
</html>

作用：保证基础环境不会出低级错误。

步骤2：编写HTML结构（只关心页面上有哪些模块）

思考页面由哪几块组成：头部、导航、侧边栏、内容、卡片。 选用合适标签：语义标签(header/main/aside) + div，不要写任何class，不要写任何css。 只把内容、嵌套关系写对。

重点：先把嵌套父子关系搞对，父是谁、子是谁，这一步非常关键。 比如 aside 和 content 必须都在 main 里面。

步骤3：给元素起 class 名字

给需要写样式的盒子加上 class。

原则：

1. class描述这个盒子是干什么的（page‑header、sidebar、card），不要描述样式（不要写 class=“red big”）
2. 不需要修改样式的标签，可以不加class。比如单纯的 <p> 文本。
3. 不要滥用 id 做样式。

步骤4：写CSS

按照顺序：布局 → 尺寸 → 间距 → 美化

1. 布局优先：display:flex写在父容器；position定位
2. 宽高、min‑height
3. padding、gap、margin（间距）
4. 颜色、背景、圆角阴影（美化放到最后）

你流程没有遗漏大步骤，但是有2个隐性思考环节，很多新手直接跳过，导致写代码反复返工

隐性A：动手写HTML之前，脑子里简单画模块草图

不用画图软件，脑子里分块： 页面 =【头部】+【主体（侧边栏｜内容区）】+【页脚】 想清楚谁是谁的父盒子。

很多人直接上手敲标签，写完发现嵌套关系错了，后面写flex布局怎么都达不到效果。

隐性B：写完HTML之后，先在浏览器打开看一眼原始效果

没有CSS，浏览器会展示浏览器默认样式。 检查两件事：

1. 模块嵌套逻辑是否符合预期
2. 文本内容是否完整 确认没问题，再加class，再写CSS。

❌非常不推荐的反面做法（千万不要这么干）

1. 写一行HTML，立刻写一行CSS，边写边调。写着写着结构一团乱。
2. 一边写CSS一边疯狂修改HTML结构。
3. 先想颜色、圆角美化，再做布局排版。

📌极简一句话记住整套流程

想模块 → 搭HTML结构 → 浏览器校验原始结构 → 添加class → 写CSS（布局优先，美化最后）