跳至主要內容

前提准备

辉哥大约 4 分钟html5666

CSS3学习前提

以下为学习过程中的极简提炼笔记，以供重温巩固学习

CSS学习准备

准备工作

  1. 已完成html5标签学习
  2. 已熟悉使用编译器：vscode

学习目的

  1. 掌握CSS3语法&书写规范
    （表现样式太多，新时期有GPT，不要求完全记住，起码熟悉基本语法，熟练运用 CSS 样式规则）

学习路线

认识CSS3

  1. CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表
  2. *.css 支持在vscode中编辑，支持在浏览器上打开
  3. CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
  4. html是一种标记语言，CSS 是也是一种标记语言
  5. 前端编写html+css，浏览器搭配css解析html，c端用户通过浏览器接收最后生成的信息

CSS的构成

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明

  1. 选择器是用于指定 CSS 样式的 HTML 标签，花括号{}内是对该对象设置的具体样式
  2. 属性和属性值以“键值对”的形式出现
  3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  4. 属性和属性值之间用英文“:”分开
  5. 多个“键值对”之间用英文“;”进行区分
  6. 所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方

语法格式案例

CSS语法案例
<head>
  <style>                  <!-- css部分 -->
    /* 选择器 {样式} */
    /* 给谁改样式 { 改什么样式} */
    p {
        color: red;
        /* 修改了文字大小为12像素 */
        font-size: 12px;  
    }
  </style>
</head>

<body>                      
    <p>有点意思</p>         <!-- html部分 -->
</body>
<head>
  <style>                  <!-- css部分 -->
    p {
      color: red;
      font-size: 12px;  
    }
  </style>
</head>
<body>                      
    <p>有点意思</p>         <!-- html部分 -->
</body>

CSS的书写风格

  1. 样式格式书写，强烈推荐使用展开格式， 因为更直观。

① 展开格式

h3 {
color: pink;
font-size: 20px; 
}

② 紧凑格式

/* h3 { color: deeppink;font-size: 20px;} */
  1. 样式大小写，强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外
h3 {
color: pink;
}

/* H3 { */
/* COLOR: PINK; */
/* } */
  1. 空格规范
    ① 属性值前面，冒号后面，保留一个空格
    ② 选择器（标签）和大括号中间保留空格
h3 {
color: pink;
}

学会查阅技术链文档

bing: http://www.bing.com/
W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/

以及\03-前端基础CSS第一天\素材路径下文本

power by VuePressThemeHope
Copyright © 2025 辉哥