1. CSS 简介
CSS 是用于定义网页样式和布局的样式表语言；
通过 CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，实现更精确的页面设计；
举个栗子，HTML 就好像房子的搭建，CSS 就好像房子的装修；
2. CSS 语法
CSS 通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式；
选择器{
属性1:属性值1;
属性2:属性值2;
}
注：
- 选择器的声明中可以写无数条属性；
- 声明中的每一行以分号结尾；
- 声明中的所有属性和属性值以键值对的形式存在；
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 导入方式</title>
<style>
p {
color: #50d496;
font-size: 30px;
}
</style>
</head>
<body>
<p>这是一个应用了CSS样式的文本段落</p>
</body>
</html>
效果图：
3. CSS 三种导入方式
- 内联样式 – 直接在标签的 style 属性中设定样式；
- 内部样式表 – 在 HTML 文件的 head 标签中设定对应标签的样式；
- 外部样式表 – 在一个单独的 CSS 文件中设置各种标签的样式，然后在 head 标签中 link 进来；
优先级：
内联样式 > 内部样式表 > 外部样式表
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 导入方式</title>
<link rel="stylesheet" href="./CSS/style.css">
<style>
p {
color: green;
font-size: 30px;
}
h2 {
color: pink;
}
</style>
</head>
<body>
<p>这是一个应用了CSS样式的文本段落</p>
<h1 style="color: aqua;">这是一个一级标题，使用内联样式</h1>
<h2>这是一个二级标题，使用内部样式</h2>
<h3>这是一个三级标题，使用外部样式</h3>
</body>
</html>
/* CSS 文件 */
h3 {
color: palevioletred;
}
效果：
4. CSS 选择器
选择器是 CSS 中的关键部分，它允许你针对特定元素或一组元素定义样式；
常见的选择器有：
- 元素选择器
- 类选择器
- ID 选择器
- 通用选择器
- 子元素选择器
- 后代选择器（包含选择器）
- 并集选择器（兄弟选择器）
- 伪类选择器
一些快捷方法：
标签.class 可以快速生成一个带有指定类的标签；
标签#id 可以快速生成一个带有指定 ID 的标签；
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选择器</title>
<style>
/* 元素选择器 */
h2 {
color: rgb(36, 227, 227);
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID 选择器 */
#header {
font-size: larger;
color: pink;
}
/* 通用选择器 */
* {
font-family: 'KaiTi';
font-weight: bolder;
}
/* 子元素选择器 */
.father>.son {
color: darkorange;
font-size: 20px;
}
/* 后代选择器 */
.father p {
color: purple;
font-size: 25px;
}
/* 相邻元素选择器 */
h3+p {
color: orange;
font-size: 30px;
/* 作用对象是 ABA 中的最后一个 A */
}
/* 伪类选择器 */
#element:hover {
background-color: darksalmon;
}
/*
伪类选择器还可以选择子元素：
:first-child
:nth-child()
:active
*/
/*
伪元素选择器：
::after
::before
*/
</style>
</head>
<body>
<h1 style="color: rgb(84, 222, 176);">不同类型的 CSS 选择器</h1>
<hr>
<h2>这是一个元素选择器</h2>
<h3>这是一个类选择器</h3>
<h3 class="highlight">这也是一个类选择器</h3>
<h4 id="header">这是一个 ID 选择器</h4>
<div class="father">
<!-- 儿子 -->
<p class="son">这是一个子元素选择器</p>
<div>
<!-- 孙子 -->
<p class="grandson">这是一个后代选择器</p>
</div>
</div>
<p>这是一个普通的 p 标签</p>
<h3>这是一个相邻兄弟选择器</h3>
<p>这是另一个普通的 p 标签</p>
<h2 id="element">这是一个伪类选择器</h2>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选择器</title>
<style>
/* 元素选择器 */
h2 {
color: rgb(36, 227, 227);
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID 选择器 */
#header {
font-size: larger;
color: pink;
}
/* 通用选择器 */
* {
font-family: 'KaiTi';
}
</style>
</head>
<body>
<h1 style="color: rgb(84, 222, 176);">不同类型的 CSS 选择器</h1>
<hr>
<h2>这是一个元素选择器</h2>
<h3>这是一个类选择器</h3>
<h3 class="highlight">这也是一个类选择器</h3>
<h4 id="header">这是一个 ID 选择器</h4>
</body>
</html>
显示效果：
5. CSS 常用属性
CSS 的属性很多，详细可以参考菜鸟教程；
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 类选择器 */
.block {
background-color: aquamarine;
width: 400px;
height: 100px;
}
/* 行内元素 */
.inline {
background-color: yellow;
/* 行内元素不接受宽度和高度属性 */
width: 1000px;
height: 1000px;
}
/* 行内块元素 */
.inline-block {
width: 200px;
height: 150px;
}
/* 块级元素转换为行内元素 */
.div-inline {
display: inline;
background-color: aqua;
/* 因此转换后 宽高设置失效 */
width: 1000px;
height: 1000px;
}
/* 行内元素转换为行内块元素 */
.span-inline-block {
display: inline-block;
background-color: palevioletred;
/* 转换之后可以设置宽高 */
width: 200px;
height: 100px;
}
/* 行内元素转换为块级元素 */
.span-block {
/* 块级元素默认独占一行 */
display: block;
background-color: aquamarine;
}
</style>
</head>
<body>
<h2 style="font: bolder 50px 'KaiTi';">这是一个复合属性</h2>
<p style="line-height: 40px;">
《原神》是由米哈游自主研发的一款全新开放世界冒险游戏。
游戏发生在一个被称作「提瓦特」的幻想世界，在这里，被神选中的人将被授予「神之眼」，导引元素之力。
你将扮演一位名为「旅行者」的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，
和他们一起击败强敌，找回失散的亲人——同时，逐步发掘「原神」的真相。
</p>
<div class="block">这是一个块级元素</div>
<div class="block">这是一个块级元素</div>
<span class="inline">这是一个行内元素</span>
<img src="./Pic/image.png" alt="图片无法加载" class="inline-block">
<img src="./Pic/image.png" alt="图片无法加载" class="inline-block">
<div class="div-inline">这是一个转换为行内元素的 div 标签</div>
<span class="span-inline-block">这是一个转换为行内块元素的 span 标签</span>
<span class="span-block">这是一个转换为块元素的 span 标签</span>
</body>
</html>
显示效果：
5. 盒子模型
说明：
| 属性名 | 说明 |
|---|---|
| 内容 Content | 盒子包含的实际内容，例如文本、图片等 |
| 内边距 Padding | 内容与边框之间的空间 |
| 边框 Border | 盒子的边界 |
| 外边距 Margin | 盒子与其他元素之间的空间 |
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 盒子模型</title>
<!-- 类选择器 -->
<style>
.demo {
background-color: aquamarine;
/* 将块级元素转换为行内块元素 */
display: inline-block;
/* 边框属性 -- 复合属性 */
border: 5px solid greenyellow;
}
.border-demo1 {
background-color: aqua;
width: 300px;
height: 200px;
/* 复合属性 */
border-style: solid dashed dotted double;
/* 复合属性 -- 上 右 下 左 */
border-width: 10px 0 20px 30px;
/* 如果有缺失的值，它会自动找对应的另一边 */
border-color: antiquewhite yellow pink purple;
}
.border-demo2 {
background-color: yellow;
width: 400px;
height: 300px;
/* 只对单个边操作 */
border-left: 10px solid greenyellow;
border-top: 10px solid black;
border-right: 10px solid pink;
border-bottom: 10px solid purple;
padding: 50px;
margin: 40px;
}
</style>
</head>
<body>
<div class="demo">盒子模型练习</div>
<br><br>
<div class="border-demo1">这是一个边框示例</div>
<br><br>
<div class="border-demo2">这是另一个边框示例</div>
</body>
</html>
显示效果：
6. 浮动
传统网页布局方式：
- 标准流（普通流、文档流）：网页按照元素的书写顺序依次排列；
- 浮动
- 定位
- Flexbox 和 Grid（自适应布局）
浮动的三大特性：
- 脱离标准流；
- 一行显示，顶部对齐；
- 具备行内块元素特性；
简单来说，浮动就是让元素水平无缝衔接，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动练习</title>
<style>
.father {
background-color: aquamarine;
height: 150px;
}
.left-son {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.right-son {
width: 100px;
height: 100px;
background-color: aqua;
float: right;
}
</style>
</head>
<body>
<div class="father">
<div class="left-son">左浮动</div>
<div class="left-son">左浮动</div>
<div class="left-son">左浮动</div>
<div class="right-son">右浮动</div>
<div class="right-son">右浮动</div>
<div class="right-son">右浮动</div>
</div>
</body>
</html>
显示效果：
7. 定位
定位布局可以精确定位，但是缺乏灵活性；
定位方式：
- 相对定位：相对于元素在文档流中的正常位置进行定位；
- 绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流；
- 固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而移动；
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
.box1 {
height: 350px;
background-color: aquamarine;
}
.box-normal {
width: 100px;
height: 100px;
background-color: palevioletred;
}
.box-relative {
width: 100px;
height: 100px;
background-color: aqua;
position: relative;
left: 120px;
top: 20px;
}
.box2 {
height: 350px;
background-color: yellowgreen;
margin-bottom: 300px;
}
.box-absolute {
width: 100px;
height: 100px;
background-color: burlywood;
position: absolute;
left: 120px;
}
.box-fixed {
width: 100px;
height: 100px;
background-color: plum;
position: fixed;
right: 0;
top: 300px;
}
</style>
</head>
<body>
<h1>相对定位</h1>
<div class="box1">
<div class="box-normal"></div>
<div class="box-relative"></div>
<div class="box-normal"></div>
</div>
<h1>绝对定位</h1>
<div class="box2">
<div class="box-normal"></div>
<div class="box-absolute"></div>
<div class="box-normal"></div>
</div>
<h1>固定定位</h1>
<div class="box-fixed"></div>
</body>
</html>
显示效果：
