Inner Skills 4: CSS
四、CSS
💡
作为 HTML 的完美搭档，CSS 能让你的网页从"黑白电视"变成"彩色电影"。我会用最简单的方式教你 CSS，就像之前学习 HTML 一样
4.1 概念介绍
1. 三种添加 CSS 的方式
序号
用法
局限/特点
例子
1、
内联样式（直接写在 HTML 标签里）
如果在页面内插入第二个没有设定 css 的<h2>标题，对应的 red 不会应用，如图
html
<h2 style="color: red">红色二级标题</h2>
2、
内部样式表（放在<style>标签中）
只能对单独一个网页做外观样式处理
html
<style>
h2{ color: Red; }
p{ color: blue; font-size：36px; }
</style>
3、
外部样式表（最推荐的方式）
可以同时控制多个网页的外观
可以同时控制每一组 class 的外观
可以同时控制多个网页的外观
style.css:
css
h2{ color: Red; }
p{ color: blue; font-size:36px; }HTML 网页内：
html
<head>
<link rel="stylesheet" href="style.css">
</head>可以同时控制每一组
style.css:
css
.size{ color:red; font-size:30px }HTML 网页内：
html
<section class="news"></section>
2.选择器类型
选择器
示例
说明
元素选择器
p
选择所有<p>标签
类选择器
.intro
选择class="intro"的元素
ID 选择器
#special
选择id="special"的元素
后代选择器
div p
选择<div>内的所有<p>
3. 常用 CSS 属性
类别
属性
示例
文字
color, font-size, font-family
color: red;背景
background-color, background-image
background-color: #fff;盒子模型
width, height, padding, margin, border
padding: 10px;布局
display, flex-direction, justify-content
display: flex;CSS 的 3 个重要属性
A. border（边框）
B. padding（内边距）
C. margin（外边距）
他们负责控制不同网页元素之间的距离，距离书写规则：
4.2 实战项目
**在实战学习中，你可以用这个网址工具进行快速预览尝试：**https://www.w3schools.com/css/css_editor.asp
💡
可复制代码版本：可复制代码版本
4.2.1 入门项目
创建 HTML 文件：
bash
touch css_demo.HTML
nano css_demo.HTML添加基础 HTML：
<!DOCTYPE html>
<html>
<head>
<title>CSS学习</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>欢迎学习CSS</h1>
<p class="intro">这是第一个段落</p>
<p id="special">这是特殊段落</p>
<div class="box">这是一个盒子</div>
</body>
</html>