系列文章目录
HTML5+CSS3+移动web——HTML 基础-CSDN博客
https://blog.csdn.net/ymxk2876721452/article/details/136070953?spm=1001.2014.3001.5501HTML5+CSS3+移动web——列表、表格、表单-CSDN博客https://blog.csdn.net/ymxk2876721452/article/details/136221443?spm=1001.2014.3001.5501
目录
一、CSS简介
二、CSS引入方式
1.内部样式表
2.外部样式表
3.行内样式
三、选择器
1.标签选择器
2.类选择器
3.id选择器
4.通配符选择器
四、设置盒子大小和背景颜色
一、CSS简介
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。
<!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>
p {
color: red;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈</p>
</body>
</html>CSS 代码写在title 标签下方添加 style 双标签，style 标签里面书写
二、CSS引入方式
1.内部样式表
CSS 代码写在 style 标签里面
2.外部样式表
CSS 代码写在单独的 CSS 文件中（.css）
<link rel="stylesheet" href="./my.css">3.行内样式
配合 JavaScript 使用
CSS 写在标签的 style 属性值里
<div style="color: red; font-size:20px;">你好，Word！</div>三、选择器
作用：查找标签，设置样式。
1.标签选择器
标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。
例如：p, h1, div, a ......
<style>
p {
color: red;
}
div {
color: red;
font-size:20px;
}
</style>2.类选择器
作用：查找标签时，用于化设置标签的显示效果
-
定义类选择器 → .类名
-
使用类选择器 → 标签添加 class="类名"
<style>
.red {
color: red;
}
.size{
font-size: 30px;
}
</style>
<!-- 使用类选择器 -->
<div class="red">设置颜色为红色</div>
<div class="red size">设置颜色为红色,大小为30</div>定义类名：尽量用英文名，类名要见名知意
一个类选择器可以供多个标签使用，一个标签可以使用多个类名，类名之间用空格隔开
3.id选择器
id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式
同一个 id 选择器在一个页面只能使用一次。
-
定义 id 选择器 → #id名
-
使用 id 选择器 → 标签添加 id= "id名"
<style>
/* 定义 id 选择器 */
#red {
color: red;
}
</style>
<div id="red">使用 id 选择器</div>4.通配符选择器
作用：查找页面所有标签，设置相同样式。
通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
* {
color: red;
}四、设置盒子大小和背景颜色
