系列文章目录
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;
}四、设置盒子大小和背景颜色
