# 教学目的
知识、能力、素养
- 掌握通义灵码的代码解读功能
- 提升前端开发技能
- 增强问题解决能力
#第一节 初识CSS
# 一、CSS的引用
输入li，在下拉里面选择link:css，就会自动生成以下代码
```
<link rel="stylesheet" href="style.css">
```
新建css文件并命名为style.css。
## 二、css文件归档

新建一个style文件夹，把style.css移动到style文件夹内，修改css的引用代码
```
<link rel="stylesheet" href="style/style.css">
```
## 三、内外边距的使用

```
padding: 20px; /* 内边距，内容与边框之间的距离 */
margin: 30px; /* 外边距，元素与其他元素之间的距离 */
```
有些标签自带属性，我们可以通过重置的方式消灭自带属性。
```
body {
    margin: 0px;
}
nav ul {
    padding: 0;
    margin: 0;
}
```
头部模块和底部
```
header {
    padding: 20px 0;                  /* 内边距 */
}
footer {
    padding: 20px 0;                  /* 内边距 */
}
```
main主区域
```
.about {
    margin: 20px;
    /* 外边距 */
    padding: 10px;
    /* 内边距 */
}
.other {
    margin: 20px;
    /* 外边距 */
    padding: 10px;
    /* 内边距 */
}
```
## 四、非布局样式的运用

CSS中，有很多非布局样式，这些样式（属性）和与布局无关，包括：字体、字重、颜色、大小、行高背景、边框滚动、换行装饰性属性（粗体、斜体、下划线）等。
```
header {
    background-color: #faa0a5;      /* 自定义背景色 - 例如：亮黄色 */
    text-align: center;             /* 文字居中 */
}

footer {
    background-color: #faa0a5;      /* 自定义背景色 - 例如：亮黄色 */
    text-align: center;             /* 文字居中 */
}

.about {
    border: 1px solid rgb(223, 124, 170);   /* 黑色实线边框 */
    background-color: rgb(213, 12, 82);     /* 背景颜色 */
}

.other {
    border: 1px solid  rgb(223, 124, 170);  /* 线条边框 */
    background-color: rgb(213, 12, 82);     /* 边框内的背景颜色设为白色 */
}

nav{
    background-color: rgb(213, 12, 82);
}

nav ul {
    list-style: none;       /* 去掉默认列表符号 */
}

nav ul a {
    text-decoration: none;  /* 去掉下划线 */
    color: #000000;            /* 文字颜色 */
}
```
## 五、最低高度

```
/* 设置 main 元素的最小高度为视口高度的 80% */
main{
    min-height: 80vh;
}
```

新建一个style文件夹，把style.css移动到style文件夹内，修改css的引用代码

第四章 CSS 第一节 初识CSS

前端

本文详解CSS基础应用，涵盖样式表引用、文件归档、内外边距设置、非布局样式运用等核心知识点。通过代码实例解析header、footer、main等模块样式设置，包括背景色、边框、文本装饰等属性配置，帮助开发者快速掌握CSS布局技巧与样式优化方法，提升前端开发效率。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

第四章 CSS 第一节 初识CSS-腾讯云开发者社区-腾讯云

第四章 CSS 第一节初识CSS

第四章 CSS 第一节初识CSS

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第四章 CSS 第一节 初识CSS

第四章 CSS 第一节 初识CSS

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第四章 CSS 第一节初识CSS

第四章 CSS 第一节初识CSS