HTML 摆放内容，CSS 美化内容
１ CSS
定义：层叠样式表（Cascading Style Sheets，缩写为CSS），是一种样式表语言，用来描述HTML文档的呈现（美化内容）。
书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。
1.1 CSS 引入方式
1.1.1 内部样式表：
CSS 代码写在 style 标签里面
例子：
<!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>CSS</title>
<style>
p {
color: red;
/* 数字 加 像素 */
font-size: 30px;
}
</style>
</head>
<body>
<p>初识 CSS</p>
</body>
</html>运行效果：
1.1.2 外部样式表 开发最常用
- CSS 代码写在单独的 CSS 文件中（.css)
- 在 HTML 使用 link 标签引入
HTML 文件
<!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>CSS 引入方式</title>
<!-- link 引入外部样式表； rel：关系，样式表 关系 -->
<link rel="stylesheet" href="./demo2.css">
</head>
<body>
<p>这是 p 标签</p>
</body>
</html>CSS 文件
/* 写法：选择器 {} */
p {
color: red;
}运行效果：
1.1.3 行内样式表 配合 JS 使用
配合 JavaScript 使用
CSS 写在标签的 style 属性值里
<!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>CSS 引入方式</title>
<!-- link 引入外部样式表； rel：关系，样式表 关系 -->
<link rel="stylesheet" href="./demo2.css">
</head>
<body>
<p>这是 p 标签</p>
<!-- 行内样式表 style=" CSS 属性" -->
<div style="color:green; font-size: 20px;">这是 div 标签</div>
</body>
</html>运行效果：
2 选择器
- 作用：查找标签，设置样式
- 基础选择器：标签选择器、类选择器、id 选择器、通配符选择器
2.1 标签选择器
使用标签名作为选择器 → 选中同名标签设置相同的样式。
2.2 类选择器
作用：查找标签，差异化设置标签的显示效果
步骤：
- 定义类选择器 -> .类名
- 使用类选择器 -> 标签添加 class="类名"
开发习惯：类名见名知意多个单词可以用－连接，例如：news-hd （新闻头部）
- 一个类选择器可以供多个标签使用
- 一个标签可以使用多个类名，类名之间用空格隔开
<!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>类选择器</title>
<style>
.red {
color: red;
}
.size {
font-size: 20px;
}
</style>
</head>
<body>
<!-- 一个标签可以使用多个类选择器 class 属性写多个类名即可，类名用空格隔开 -->
<p class="red size" >这是 p 标签</p>
<!-- 一个类选择器也可以被多个标签使用 -->
<div class="red">div 标签</div>
</body>
</html>运行效果：
2.3 id 选择器
作用：查找标签，差异化设置标签的显示效果。
场景：id 选择器一般 配合JavaScript使用，很少用来设置 CSS 样式
规则：同一个 id 选择器在一个页面只能使用一次
步骤：
- 定义 id 选择器 → #id名
- 使用 id 选择器 → 标签添加 id="id名"
<!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>id 选择器</title>
<style>
#red {
color: aqua;
}
</style>
</head>
<body>
<!-- id 选择器一般配合 js 使用 -->
<div id="red">div 标签</div>
</body>
</html>2.4 通配符选择器
作用：查找页面所有标签，设置相同样式
通配符选择器：＊，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
<!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>通配符选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>div 标签</div>
<p>p 标签</p>
<h1>h1 标签</h1>
</body>
</html>运行效果：
3 画盒子
目标：使用合适的选择器画盒子
差异化画盒子：使用类选择器
<!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>画盒子</title>
<style>
/* 用类选择器 */
.red {
width: 100px;
height: 100px;
background-color: brown;
}
.orange {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<!-- div 标签独占一行 -->
<div class="red">div1</div>
<div class="orange">div2</div>
</body>
</html>运行效果：
4 文字控制属性
4.1 行高的特殊作用：垂直居中
垂直居中技巧：行高属性值等于盒子高度属性值
<!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>行高：垂直居中</title>
<style>
div {
height: 50px;
background-color: skyblue;
/* 行高和 height 一样，即可垂直居中 */
line-height: 50px;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>运行效果：
4.2 font 复合属性
- 使用场景：设置网页文字公共样式
- font: 是否倾斜 是否加粗 字号/行高 字体 （必须按顺序书写）
- 注意：字号和字体值必须书写，否则 font 属性不生效
4.3 颜色值写法
5 调试工具 谷歌浏览器
- 鼠标右键、检查
- 或者 F12
5.1 找错误
5.2 调试看效果
参考链接：
29-体验CSS_哔哩哔哩_bilibili
30-CSS引入方式_哔哩哔哩_bilibili
31-选择器-标签和类_哔哩哔哩_bilibili
32-选择器-id和通配符_哔哩哔哩_bilibili
33-画盒子_哔哩哔哩_bilibili
34-字体修饰属性-大小和粗细和倾斜_哔哩哔哩_bilibili
35-行高_哔哩哔哩_bilibili
35-行高_哔哩哔哩_bilibili
36-字体族_哔哩哔哩_bilibili
37-font属性_哔哩哔哩_bilibili
39-文字颜色_哔哩哔哩_bilibili
40-调试工具_哔哩哔哩_bilibili