admin管理员组文章数量:1037775
CSS 入门指南（一）：基本概念 & 选择器 & 常用元素属性
一、初识 CSS
1, CSS 定义
层叠样式表(Cascading Style Sheets，缩写为 CSS)，是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）
CSS 能够对网页中元素位置的排版进行 像素级 精确控制，实现美化页面的效果. 能够做到页面的样式和结构分离
2, 基本语法规范
选择器 +{一条/N条声明)
- 选择器决定针对谁修改(找谁)
- 声明决定修改啥 (干啥)
- 声明的属性是键值对，使用：区分键值对，使用：区分键和值
书写规则： 选择器{属性名：属性值}
代码语言：javascript代码运行次数：0运行复制<style>
/*这里写的都是css,css通常写在style标签中*/
p{ /*p:选择器:查找标签*/
/*设置文字颜色变红*/
/* color: red; */
color: rgb(172,25,44);
/*字变大 px：像素 */
font-size: 30px;
}
</style>
<p>这是一个p标签</p>注意：
- css 要写到
style标签中(后面还会介绍其他写法) style标签可以放到页面任意位，一般放到head标签内- CSS 使用 /* */ 作为注释.(使用 ctrl +/快速切换)
3, CSS 引入
① 内部样式表：学习使用
- CSS 代码在 style 标签里面，嵌入到 html 内部
- 优点：这样做能够让样式和页面结构分离.
- 缺点：分离的还不够彻底. 尤其是 css 内容多的时候.
前面写的代码主要都是使用了这种方式. 实际开发中不常用.
- PS: 搜狗搜索中仍然保留着这种写法.
② 行内样式表：配合 JS 使用
- 通过 style 属性, 来指定某个标签的样式.
- 只适合于写简单样式. 只针对某个标签生效.
- 缺点: 不能写太复杂的样式，这种写法优先级较高, 会覆盖其他的样式
<style>
div {
color: red;
}
</style>
<div style="color:green">想要生活过的去, 头上总得带点绿</div>效果如下：
- 此时可以看到 red 被覆盖了
③ 外部样式表：开发使用
CSS 代码写在单独的 CSS 文件里面 (.css)
在 HTML 使用 link 标签引入 CSS
<link rel="stylesheet" href="[CSS文件路径]">优点: 样式和结构彻底分离了.
缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效
【案例】：
代码语言：javascript代码运行次数：0运行复制<!--创建 my.css文件-->
p{
color: red;
}
<!--创建 test.html文件-->
<head>
<!-- link 引入外部样式表，rel: 关系，样式表 -->
<link rel="stylesheet" href="./my.css">
</head>
<body>
<p>这是一个p标签</p>
</body>注意：不要忘记 link 标签调用 CSS, 否则不生效
关于缓存：
- 这是计算机中一种常见的提升性能的技术手段.
- 网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的。如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取. 就可以使用缓存先存起来(就是存在本地磁盘上了)。从而提高访问效率
- 可以通过
ctrl + F5强制刷新页面，强制浏览器重新获取 css 文件
4, 代码风格
样式风格
① 紧凑风格
代码语言：javascript代码运行次数：0运行复制p { color: red; font-size: 30px;}② 展开风格
代码语言：javascript代码运行次数：0运行复制p {
color: red;
font-size: 30px;
}样式大小写
虽然 CSS 不区分大小写, 我们开发时统一使用小写字母
空格规范
- 冒号后面带空格
- 选择器和
{之间也有一个空格
二、选择器
1. 基本概念
选择器功能
选中页面中指定的标签元素，来设置样式
- 要先选中元素, 才能设置元素的属性.
- 就好比 SC2, War3 这样的游戏, 需要先选中单位, 再指挥该单位行动.
选择器种类
以下内容只是 CSS2 标准中支持的选择器, 在 CSS3 中还做出了一些补充, 咱们后面再说
基础选择器：单个选择器构成的
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
复合选择器：把多种基础选择器综合运用起来
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
参考文档：w3school
2. 基础选择器
2.1 标签选择器
**标签选择器：**使用 标签名 作为选择器 -> 选中 同名标签 设置 相同的样式
特点: 能快速为同一类型的标签都选择出来，但是不能差异化选择。相当于 选中所有的这个标签都生效css
例如：p，h1，div，a，img…
代码语言：javascript代码运行次数：0运行复制<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>猫</p>
<p>咬人</p>
<div>君</div>
<div>阿叶</div>
<div>阿叶君</div>2.2 类选择器
特点: 差异化表示不同的标签，可以让多个标签的都使用同一个标签.
步骤：
- 定义类选择器 -> .类名
- 使用类选择器 -> 标签添加 class= “类名”
<style>
.red{
color: red;
}
.size{
font-size: 66px;
}
</style>
<p>111</p> <!--黑色-->
<!-- 一个标签可以使用多个类名，用空号隔开就行 -->
<p class="red size ">222</p> <!--红色-->
<div class="red">333</div>注意：
- 类名用
.开头的 - 一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让 代码更好复用)
- 类名自定义，不要用 纯数字或者中文，尽量用英文命名
- 类名可以由数字、字母、下划线、中划线组成，但是不能用数字、中划线开头
- 一个标签可以同时使用多个类名 ，用空号隔开就行，这样做可以把相同的属性提取出来，达到简化代码的效果.
**开发习惯：**类名见名知意，多个单词可以用 - 连接
2.3 id 选择器
和类选择器类似.
- CSS 中使用
#开头表示 id 选择器 - id 选择器的值和 html 中某个元素的 id 值相同
- html 的元素 id 不必带
# - id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)
步骤：
- 定义 id 选择器 -> #id 名
- 使用 id 选择器 -> 标签添加 id= “id名”
<style>
#blue{
color: skyblue;
}
</style>
<div id="blue">这个div文字是蓝色</div>
<p id="blue">111</p>以后加js会容易出错注意：
- 所有标签都有id属性
- id 属性值在一个页面中是唯一的，不可重复
- 一个标签只能有一个id属性
- 一个id选择器只能选中一个标签
类比：姓名是类选择器, 可以重复。 身份证号码是 id 选择器，是唯一的.
**id 选择器 VS 类选择器：**前者优先级更高
2.4 通配符选择器
通配符选择器： ***** ， 不需要被页面结构调用。
- 浏览器自动查找页面所有标签，设置相同样式
<style>
/* *通配符，作用找到页面中所有标签，设置样式，一般用于网页中 统一行距和字距 */
*{color: red;}
</style>
<div>div</div>
<h1>h1</h1>
<p>pp</p>2.5 基础选择器小结
名称 | 作用 | 特点 |
|---|---|---|
标签选择器 | 能选出所有相同标签 | 不能差异化选择 |
类选择器 | 能选出一个或多个标签 | 根据需求选择，最灵活常用 |
id 选择器 | 能选出一个标签 | 同一个 id 在一个 HTML 中只能出现一次 |
通配符选择器 | 能选择所有标签 | 特殊情况下使用 |
3. 复合选择器
定义： 由 两个 或 多个基础选择器，通过不同的方法组合而成
作用：更准确、更高效的选择目标元素（标签）
代码语言：javascript代码运行次数：0运行复制<span> span 标签</span>
<div>
<span> 文字颜色 </span>
</div>- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
3.1 后代选择器
后代选择器：又叫包含选择器，选中某元素的某后代元素
选择器写法： 父选择器 子选择器 {CSS 属性}，父子选择器之间用空格隔开
如下：
代码语言：javascript代码运行次数：0运行复制元素1 元素2 {样式声明}【案例1】
代码语言：javascript代码运行次数：0运行复制<style>
/* 找到div里面的 p 设置文字颜色是红色 */
div p{color: red;}
</style>
<!-- 后代:儿子，孙子，重孙子 -->
<p>这是p标签</p>
<div>
<p>这是div的儿子</p>
<span>
<p> span 的儿子</p>
</span>
<p>
<p>p儿子的儿子</p>
<div>p儿子的div</div>
<div>
<p>
div的儿子
</p>
</div>
</p>
</div>效果如下：
- 上面我们可以看到只要是属于 div 后代的 p标签，都变红了
【案例 2】：可以是任意基础选择器的组合. (包括类选择器, id 选择器)
代码语言：javascript代码运行次数：0运行复制<style>
.one li a {color: green;}
</style>
<ol class="one">
<li>ddd</li>
<li>eee</li>
<li><a href="#">fff</a></li>
<li><a href="#">fff</a></li>
<li><a href="#">fff</a></li>
</ol>3.2 子代选择器
如果我们不想选中所有后代，只选子代
子代选择器：选中某元素的 子代 元素（最近的子级），只选择亲儿子，不选孙子元素
选择器写法： 父选择器 > 子选择器{CSS 属性}，父子选择器之间用 > 隔开
<style>
.cat>a {color: red;}
</style>
<!--使用 Emmet 快捷键生成上面的 html 代码: .cat>a+ul>li*2>a -->
<div class="cat">
<a href="#">小猫</a>
<ul>
<li><a href="#">小狗</a></li>
<li><a href="#">小狗</a></li>
</ul>
</div>3.3 并集选择器
并集选择器：选中多组标签设置相同样式
✈️ 选择器写法：元素1，元素2，… ，元素N {CSS 属性}
- 选择器之间用 , 隔开
- 表示同时选中元素 1 和 元素 2 …
- 任何基础选择器都可以使用并集选择器.
- 并集选择器建议竖着写，每个选择器占一行. (最后一个选择器不能加逗号)
<style>
/* 每组选择器可以是基础选择器或者复合选择器 */
span,
h1,
div>p{
color: red;
}
</style>
<p>pp</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>
<div>
<p>div的儿子</p>
</div>3.4 交集选择器
交集选择器：选中同时满足 多个条件 的元素
CSS 入门指南（一）：基本概念 & 选择器 & 常用元素属性
一、初识 CSS
1, CSS 定义
层叠样式表(Cascading Style Sheets，缩写为 CSS)，是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）
CSS 能够对网页中元素位置的排版进行 像素级 精确控制，实现美化页面的效果. 能够做到页面的样式和结构分离
2, 基本语法规范
选择器 +{一条/N条声明)
- 选择器决定针对谁修改(找谁)
- 声明决定修改啥 (干啥)
- 声明的属性是键值对，使用：区分键值对，使用：区分键和值
书写规则： 选择器{属性名：属性值}
代码语言：javascript代码运行次数：0运行复制<style>
/*这里写的都是css,css通常写在style标签中*/
p{ /*p:选择器:查找标签*/
/*设置文字颜色变红*/
/* color: red; */
color: rgb(172,25,44);
/*字变大 px：像素 */
font-size: 30px;
}
</style>
<p>这是一个p标签</p>注意：
- css 要写到
style标签中(后面还会介绍其他写法) style标签可以放到页面任意位，一般放到head标签内- CSS 使用 /* */ 作为注释.(使用 ctrl +/快速切换)
3, CSS 引入
① 内部样式表：学习使用
- CSS 代码在 style 标签里面，嵌入到 html 内部
- 优点：这样做能够让样式和页面结构分离.
- 缺点：分离的还不够彻底. 尤其是 css 内容多的时候.
前面写的代码主要都是使用了这种方式. 实际开发中不常用.
- PS: 搜狗搜索中仍然保留着这种写法.
② 行内样式表：配合 JS 使用
- 通过 style 属性, 来指定某个标签的样式.
- 只适合于写简单样式. 只针对某个标签生效.
- 缺点: 不能写太复杂的样式，这种写法优先级较高, 会覆盖其他的样式
<style>
div {
color: red;
}
</style>
<div style="color:green">想要生活过的去, 头上总得带点绿</div>效果如下：
- 此时可以看到 red 被覆盖了
③ 外部样式表：开发使用
CSS 代码写在单独的 CSS 文件里面 (.css)
在 HTML 使用 link 标签引入 CSS
<link rel="stylesheet" href="[CSS文件路径]">优点: 样式和结构彻底分离了.
缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效
【案例】：
代码语言：javascript代码运行次数：0运行复制<!--创建 my.css文件-->
p{
color: red;
}
<!--创建 test.html文件-->
<head>
<!-- link 引入外部样式表，rel: 关系，样式表 -->
<link rel="stylesheet" href="./my.css">
</head>
<body>
<p>这是一个p标签</p>
</body>注意：不要忘记 link 标签调用 CSS, 否则不生效
关于缓存：
- 这是计算机中一种常见的提升性能的技术手段.
- 网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的。如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取. 就可以使用缓存先存起来(就是存在本地磁盘上了)。从而提高访问效率
- 可以通过
ctrl + F5强制刷新页面，强制浏览器重新获取 css 文件
4, 代码风格
样式风格
① 紧凑风格
代码语言：javascript代码运行次数：0运行复制p { color: red; font-size: 30px;}② 展开风格
代码语言：javascript代码运行次数：0运行复制p {
color: red;
font-size: 30px;
}样式大小写
虽然 CSS 不区分大小写, 我们开发时统一使用小写字母
空格规范
- 冒号后面带空格
- 选择器和
{之间也有一个空格
二、选择器
1. 基本概念
选择器功能
选中页面中指定的标签元素，来设置样式
- 要先选中元素, 才能设置元素的属性.
- 就好比 SC2, War3 这样的游戏, 需要先选中单位, 再指挥该单位行动.
选择器种类
以下内容只是 CSS2 标准中支持的选择器, 在 CSS3 中还做出了一些补充, 咱们后面再说
基础选择器：单个选择器构成的
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
复合选择器：把多种基础选择器综合运用起来
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
参考文档：w3school
2. 基础选择器
2.1 标签选择器
**标签选择器：**使用 标签名 作为选择器 -> 选中 同名标签 设置 相同的样式
特点: 能快速为同一类型的标签都选择出来，但是不能差异化选择。相当于 选中所有的这个标签都生效css
例如：p，h1，div，a，img…
代码语言：javascript代码运行次数：0运行复制<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>猫</p>
<p>咬人</p>
<div>君</div>
<div>阿叶</div>
<div>阿叶君</div>2.2 类选择器
特点: 差异化表示不同的标签，可以让多个标签的都使用同一个标签.
步骤：
- 定义类选择器 -> .类名
- 使用类选择器 -> 标签添加 class= “类名”
<style>
.red{
color: red;
}
.size{
font-size: 66px;
}
</style>
<p>111</p> <!--黑色-->
<!-- 一个标签可以使用多个类名，用空号隔开就行 -->
<p class="red size ">222</p> <!--红色-->
<div class="red">333</div>注意：
- 类名用
.开头的 - 一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让 代码更好复用)
- 类名自定义，不要用 纯数字或者中文，尽量用英文命名
- 类名可以由数字、字母、下划线、中划线组成，但是不能用数字、中划线开头
- 一个标签可以同时使用多个类名 ，用空号隔开就行，这样做可以把相同的属性提取出来，达到简化代码的效果.
**开发习惯：**类名见名知意，多个单词可以用 - 连接
2.3 id 选择器
和类选择器类似.
- CSS 中使用
#开头表示 id 选择器 - id 选择器的值和 html 中某个元素的 id 值相同
- html 的元素 id 不必带
# - id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)
步骤：
- 定义 id 选择器 -> #id 名
- 使用 id 选择器 -> 标签添加 id= “id名”
<style>
#blue{
color: skyblue;
}
</style>
<div id="blue">这个div文字是蓝色</div>
<p id="blue">111</p>以后加js会容易出错注意：
- 所有标签都有id属性
- id 属性值在一个页面中是唯一的，不可重复
- 一个标签只能有一个id属性
- 一个id选择器只能选中一个标签
类比：姓名是类选择器, 可以重复。 身份证号码是 id 选择器，是唯一的.
**id 选择器 VS 类选择器：**前者优先级更高
2.4 通配符选择器
通配符选择器： ***** ， 不需要被页面结构调用。
- 浏览器自动查找页面所有标签，设置相同样式
<style>
/* *通配符，作用找到页面中所有标签，设置样式，一般用于网页中 统一行距和字距 */
*{color: red;}
</style>
<div>div</div>
<h1>h1</h1>
<p>pp</p>2.5 基础选择器小结
名称 | 作用 | 特点 |
|---|---|---|
标签选择器 | 能选出所有相同标签 | 不能差异化选择 |
类选择器 | 能选出一个或多个标签 | 根据需求选择，最灵活常用 |
id 选择器 | 能选出一个标签 | 同一个 id 在一个 HTML 中只能出现一次 |
通配符选择器 | 能选择所有标签 | 特殊情况下使用 |
3. 复合选择器
定义： 由 两个 或 多个基础选择器，通过不同的方法组合而成
作用：更准确、更高效的选择目标元素（标签）
代码语言：javascript代码运行次数：0运行复制<span> span 标签</span>
<div>
<span> 文字颜色 </span>
</div>- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
3.1 后代选择器
后代选择器：又叫包含选择器，选中某元素的某后代元素
选择器写法： 父选择器 子选择器 {CSS 属性}，父子选择器之间用空格隔开
如下：
代码语言：javascript代码运行次数：0运行复制元素1 元素2 {样式声明}【案例1】
代码语言：javascript代码运行次数：0运行复制<style>
/* 找到div里面的 p 设置文字颜色是红色 */
div p{color: red;}
</style>
<!-- 后代:儿子，孙子，重孙子 -->
<p>这是p标签</p>
<div>
<p>这是div的儿子</p>
<span>
<p> span 的儿子</p>
</span>
<p>
<p>p儿子的儿子</p>
<div>p儿子的div</div>
<div>
<p>
div的儿子
</p>
</div>
</p>
</div>效果如下：
- 上面我们可以看到只要是属于 div 后代的 p标签，都变红了
【案例 2】：可以是任意基础选择器的组合. (包括类选择器, id 选择器)
代码语言：javascript代码运行次数：0运行复制<style>
.one li a {color: green;}
</style>
<ol class="one">
<li>ddd</li>
<li>eee</li>
<li><a href="#">fff</a></li>
<li><a href="#">fff</a></li>
<li><a href="#">fff</a></li>
</ol>3.2 子代选择器
如果我们不想选中所有后代，只选子代
子代选择器：选中某元素的 子代 元素（最近的子级），只选择亲儿子，不选孙子元素
选择器写法： 父选择器 > 子选择器{CSS 属性}，父子选择器之间用 > 隔开
<style>
.cat>a {color: red;}
</style>
<!--使用 Emmet 快捷键生成上面的 html 代码: .cat>a+ul>li*2>a -->
<div class="cat">
<a href="#">小猫</a>
<ul>
<li><a href="#">小狗</a></li>
<li><a href="#">小狗</a></li>
</ul>
</div>3.3 并集选择器
并集选择器：选中多组标签设置相同样式
✈️ 选择器写法：元素1，元素2，… ，元素N {CSS 属性}
- 选择器之间用 , 隔开
- 表示同时选中元素 1 和 元素 2 …
- 任何基础选择器都可以使用并集选择器.
- 并集选择器建议竖着写，每个选择器占一行. (最后一个选择器不能加逗号)
<style>
/* 每组选择器可以是基础选择器或者复合选择器 */
span,
h1,
div>p{
color: red;
}
</style>
<p>pp</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>
<div>
<p>div的儿子</p>
</div>3.4 交集选择器
交集选择器：选中同时满足 多个条件 的元素
本文标签： CSS 入门指南（一）基本概念 amp 选择器 amp 常用元素属性
版权声明：本文标题：CSS 入门指南（一）：基本概念 & 选择器 & 常用元素属性 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1748357105a2290308.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论