CSS 入门指南（一）：基本概念 选择器 常用元素属性
一、初识 CSS
1, CSS 定义
层叠样式表(Cascading Style Sheets，缩写为 CSS)，是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）
CSS 能够对网页中元素位置的排版进行 像素级 精确控制，实现美化页面的效果. 能够做到页面的样式和结构分离
2, 基本语法规范
选择器 +{一条/N条声明)
- 选择器决定针对谁修改(找谁)
- 声明决定修改啥 (干啥)
- 声明的属性是键值对，使用：区分键值对，使用：区分键和值
书写规则： 选择器{属性名：属性值}
<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文件路径]"> -
优点: 样式和结构彻底分离了.
-
缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效
【案例】：
<!--创建 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, 代码风格
样式风格
① 紧凑风格
p { color: red; font-size: 30px;}
② 展开风格
p {
color: red;
font-size: 30px;
}
样式大小写
虽然 CSS 不区分大小写, 我们开发时统一使用小写字母
空格规范
- 冒号后面带空格
- 选择器和
{之间也有一个空格
二、选择器
1. 基本概念
选择器功能
选中页面中指定的标签元素，来设置样式
- 要先选中元素, 才能设置元素的属性.
- 就好比 SC2, War3 这样的游戏, 需要先选中单位, 再指挥该单位行动.
选择器种类
以下内容只是 CSS2 标准中支持的选择器, 在 CSS3 中还做出了一些补充, 咱们后面再说
基础选择器：单个选择器构成的
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
复合选择器：把多种基础选择器综合运用起来
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
参考文档：w3school
2. 基础选择器
2.1 标签选择器
**标签选择器：**使用 标签名 作为选择器 -> 选中 同名标签 设置 相同的样式
特点: 能快速为同一类型的标签都选择出来，但是不能差异化选择。相当于 选中所有的这个标签都生效css
例如：p，h1，div，a，img…
<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. 复合选择器
定义： 由 两个 或 多个基础选择器，通过不同的方法组合而成
作用：更准确、更高效的选择目标元素（标签）
<span> span 标签</span>
<div>
<span> 文字颜色 </span>
</div>
- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
3.1 后代选择器
后代选择器：又叫包含选择器，选中某元素的某后代元素
选择器写法： 父选择器 子选择器 {CSS 属性}，父子选择器之间用空格隔开
如下：
元素1 元素2 {样式声明}
【案例1】
<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 选择器)
<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 交集选择器
交集选择器：选中同时满足 多个条件 的元素
🇭🇹 选择器写法：选择器1选择器2{CSS 属性}，选择器之间连写，没有任何符号。
p.box{color: red;}
注意：如果交集选择器中有标签选择器，标签选中器必须写在最前面
<head>
<title>交集选择器</title>
<style>
p.box{color: red;}
p.div.box{color:green;}
div#blue{color:blue;}
</style>
</head>
<body>
<p class="box ">这是p标签 ：box</p>
<p>pppp</p>
<div class="box">这是div标签：box</div>
<p class="div box">1</p>
<div id="blue">
交集选择器的id
</div>
</body>
3.5 伪类选择器
🔗 伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式
<style>
/* 悬停的时候文字颜色是红色,用hover来设置样式 */
a:hover {color: red; background-color:green;}
div:hover {color:red ;}
</style>
<a href="#">这是超链接</a>
<!-- 任何标签都可以添加伪类，任何一个标签都可以鼠标悬停 -->
<div>div </div>
① 链接伪类选择器
| 选择器 | 作用 |
|---|---|
| :link | 访问前 |
| :visited | 访问后 |
| :hover | 鼠标悬停 |
| :active | 点击时（激活） |
<style>
/* 超链接伪类 */
<!-- 任何标签都可以添加伪类，任何一个标签都可以鼠标悬停 -->
a:link {color: red;}
a:visited {color: green;} <!-- 访问后 -->
a:hover{color:blue;}
a:active{color:orange;}
</style>
<a href="#">这是超链接</a>
注意：
注意事项 按照
LVHA的顺序书写, 例如把active拿到前面去, 就会导致active失效。记忆规则 “绿化”浏览器的 a 标签都有默认样式，一般实际开发都需要单独制定样式.
实际开发主要给链接做一个样式，然后给
hover做一个样式即可. link, visited, active 用的不多.
如下：
/* 工作中，一个 a 标签选择器设置超链接的样式， hover 状态特殊设置 */
a {color: black;}
a:hover {color: red;}
备注：如何让一个已经被访问过的链接恢复成未访问的状态?
- 清空浏览器历史记录即可：
ctrl + shift + delete
② :foces 伪类选择器
选取获取焦点的 input 表单元素.
<style>
.three>input:focus{color:red;}
</style>
<div class="three">
<input type="text">
<input type="text">
</div>
此时被选中的表单的字体就会变成红色
③ 结构伪类选择器
根据元素的 结构关系 查找元素
| 选择器 | 说明 |
|---|---|
| E:first-child | 查找第一个 E 元素 |
| E:last-child | 查找最后一个 E 元素 |
| E:nth-child(N) | 查找第 N 个 E 元素（第一个元素 N 值为1） |
【案例】
<style>
p:first-child{color: red;}
p:nth-child(3){color:blue;}
p:last-child{color: green;}
</style>
<p>P: 111</p>
<p>P: 222</p>
<p>P: 333</p>
<p>P: 444</p>
效果如下：
补充：:nth-child(公式)
根据元素的结构关系查找多个元素
| 功能 | 公式 |
|---|---|
| 偶数标签 | 2n |
| 奇数标签 | 2n+1; 2n-1 |
| 找到 5 倍速的标签 | 5n |
| 找到第 5 个以后的标签 | n+5 |
| 找到第 5 个以前的标签 | -n+5 |
④ 伪元素选择器
创建虚拟元素（伪元素），用来摆放装饰性的内容
| 选择器 | 说明 |
|---|---|
| E::before | 在 E 元素里面 最前面 添加一个伪元素 |
| E::after | 在 E 元素里面 最后面 添加一个伪元素 |
注意：
- 必须设置
content: " "属性，用来设置 伪元素 内容，如果没有内容，则引号留空 - 伪元素默认是 行内 显示模式，不受 宽高 影响
- 权重 和 标签选择器 相同
<style>
div{color: red;}
div::before{content: "I";}
div::after{content: "You";}
</style>
<div> miss </div>
结果如下：
3.6 复合选择器小结
| 选择器 | 作用 | 注意事项 |
|---|---|---|
| 后代选择器 | 选择后代元素 | 可以是孙子元素 |
| 子选择器 | 选择子元素 | 只能选亲儿子，不能选孙子 |
| 并集选择器 | 选择相同样式的元素 | 更好的做到代码复用 |
| 链接伪类选择器 | 选择不同样式的元素 | 重点掌握 a:hover 的写法 |
| :focus 伪类选择器 | 选择被选中元素 | 重点掌握 input:focus |
三、常用元素属性
| 描述 | 属性 | 属性值 / 关键字 |
|---|---|---|
| 字体大小 | font-size | 30px/10em/300%/3cm |
| 字体粗细 | font-weight | 数字 / normal / bold |
| 字体倾斜 | font-style | normal / italic |
| 字体族 | font-family | 黑体、微软雅黑 |
| 字体复合属性 | font |
备注：上面 1 em = 当前标签的字号大小
1. 字体属性
1.1 设置字体
body {
font-family: '微软雅黑';
font-family: 'Microsoft YaHei';
}
注意：
-
字体名称可以用中文，但是不建议
-
如果电脑没有 安装微软雅黑，就按照黑体使用
-
如果电脑有没有安装黑体，就按照任意一种非衬线字体系列显示
-
可以设置多个字体名称，之间使用空格隔开，在实际加载中只会选择一种加载，选择的依据是书写顺序进行（每个字体名用逗号隔开，从左往右查找）
-
如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体。
-
font-family: 微软雅黑，黑体， sans-serif;
font-family属性最后设置一个字体族名，网页开发建议使用 无衬线字体- 建议使用常见字体, 否则兼容性不好
【案例】
<style>
.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋体';
}
</style>
<div class="font-family">
<div class="one">
这是微软雅黑
</div>
<div class="two">
这是宋体
</div>
</div>
1.2 设置大小
p{font-size: 20px}
- 不同的浏览器默认字号不一样，最好给一个明确值. (chrome 默认是 16px)
- 可以给
body标签使用font-size - 要注意单位 px 不要忘记.
- 标题标签需要单独指定大小
注意：实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮
【案例】
<style>
.font-size .one {font-size: 40px;}
.font-size .two {font-size: 20px;}
</style>
<div class="font-size">
<div class="one">大大大</div>
<div class="two">小小小</div>
</div>
1.3 设置粗细
p{
font-weight: bold;
font-weight: 700;
}
- 可以使用数字表示粗细
- 700 == bold，400 是不变粗
- == norma取值范围是 100->900
【案例】
<style>
.font-weight .one {font-weight: 900;}
.font-weight .two {font-weight: 100;}
</style>
<div class="font-weight">
<div class="one">粗粗粗</div>
<div class="two">细细细</div>
</div>
1.4 文字样式
/*设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
- 很少把某个文字变倾斜
- 但是经常要把 em /i 改成不倾斜
【案例】
<style>
.font-style em {font-style: normal;}
.font-style div {font-style: italic;}
</style>
<div class="font-style">
<em>倾斜1</em>
<div class="one">倾斜2</div>
</div>
1.5 font 复合属性
font 是否倾斜，是否加粗，字号/行高 字体（必须按顺序属性）
<style>
p{
/* font-size: ;
font-style: ;
font-weight: ;
font-family: ; */
/* font: style weight size 字体 */
font: italic 700 66px 宋体; /* 可以省略前两个，如果省略了相当于设置了默认值 */
font: 100px 微软雅黑;
/* 一个属性冒号后面书写多个值的写法--复合属性 */
}
</style>
<p>这是p标签</p>
注意：字号和字体值必须书写，否则 font 属性不生效
2. 文本属性
| 文本缩进 | text-indent | 数字 + px / em |
|---|---|---|
| 文本对齐 | text-align | left（左对齐）、 center（居中）、right（右对齐） |
| 修饰线 | text-decoration | none(无)、underline(下滑线)、line-through(删除线)、overline(上划线) |
| 颜色 | color | 颜色英文词、rgb、rgba、#RRGGBB（16进制） |
| 行高 | line-height | 30px/ 2（纯数字表示是当前大小的倍数） |
2.1 文本颜色
认识 RGB
我们的显示器是由很多很多的 “像素” 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.
- 我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.
- 计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示 为 00-FF).
- 数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.
设置文本颜色
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
鼠标悬停在 vscode 的颜色上, 会出现颜色选择器, 可以手动调整颜色.
color 属性值的写法：
- 预定义的颜色值(直接是单词)
- [最常用] 十六进制形式
- RGB 方式
十六进制形式表示颜色, 如果两两相同, 就可以用一个来表示.
#ff00ff => #f0f
<style>
.color {
color: red;
/* color: rgb(255, 0, 0); */
/* color: #ff0000; */
}
</style>
<div class="color">这是一段话</div>
2.2 文本对齐
控制文字水平方向的对齐
不光能控制文本对齐,也能控制图片等元素居中或者靠右
text-align:[值];
- center：居中对齐
- left： 左对齐
- right： 右对齐
【案例】：
<style>
.text-align .one {text-align:left;}
.text-align .two {text-align: right;}
text-align .three {text-align:center;}
</style>
<div class='text-align'>
<div class="one">左对齐</div>
<div class="two">右对齐</div>
<div class="three">居中对齐</div>
</div>
2.3 文本装饰
text-decoration: [值];
常用取值：
underline： 下划线none： 啥都没有. 可以给 a 标签去掉下划线.overline：上划线. [不常用]line-through： 删除线 [不常用]
【案例】：
<style>
.text-decorate .one {text-decoration: none;}
.text-decorate .two {text-decoration: underline;}
.text-decorate .three {text-decoration: overline;}
.text-decorate .four {text-decoration: line-through;}
</style>
<div class="text-decorate">
<div class="one">啥都没有</div>
<div class="two">下划线</div>
<div class="three">上划线</div>
<div class="four">删除线</div>
</div>
2.4 文本缩进
控制段落的 首行 缩进 （其他行不影响）
text-indent: [值]
- 单位可以使用 px 或者 em
- 使用 em 作为单位更好，1 个 em 就是当前元素的文字大小.
- 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
【案例】：
<style>
.text-indent .one {text-indent: 2em;}
.text-indent .two {text-indent: -2em;}
</style>
<div class="text-indent">
<div class="one">正常缩进</div>
<div class="two">反向缩进</div>
</div>
2.5 行高
行高指的是上下文本行之间的基线距离.
HTML 中展示文字涉及到这几个 基准线
- 顶线
- 中线
- 基线 (相当于英语四线格的倒数第二条线)
- 底线
内容区：底线和顶线包裹的区域，即下图深灰色背景区域
其实基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离
line-height: [值]
注意1: 行高 = 上边距 + 下边距 + 字体大小
- 上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12px
【案例】
<style>
.line-height .one {
line-height: 40px;
font-size: 16px;
}
</style>
<div class="line-height">
<div>上一行</div>
<div class="one">中间行</div>
<div>下一行</div>
</div>
效果如下：
注意2： 行高也可以取 normal 等值
- 这个取决于浏览器的实现. chrome 上 normal 为 21 px
注意3： 行高 = 元素高度, 就可以实现文字居中对齐
<style>
.line-height .two {
height: 100px;
line-height: 100px;
}
</style>
<div class="line-height">
<div class="two">文本垂直居中</div>
</div>
效果如下：
3. 背景属性
| 属性 | 描述 |
|---|---|
| background-color | 背景色 |
| background-image | 背景图 |
| background-repeat | 背景图平铺方式 |
| background-position | 背景图位置 |
| background-size | 背景图尺寸 |
| background-attachment | 背景图固定 |
| background | 背景图复合属性 |
3.1 背景颜色
background-color: [指定颜色]
默认是
transparent（透明）的，可以通过设置颜色的方式修改
<style>
body {background-color: #f3f3f3;}
.bgc .one {background-color: red;}
.bgc .two {background-color: #0f0;}
.bgc .three {
/* 背景透明 */
background-color: transparent;
}
</style>
<div class="bgc">
<div class="one">红色背景</div>
<div class="two">绿色背景</div>
<div class="three">透明背景</div>
</div>
3.2 背景图片
background-image: url(...);
比 image 更方便控制位置(图片在盒子中的位置)
注意:
- url 不要遗漏.
- url 可以是绝对路径，也可以是相对路径
- url 上可以加引号, 也可以不加.
【案例】
<style>
.bgi .one {
background-image: url(rose.jpg);
height: 300px;
}
</style>
<div class="bgi">
<div class="one">背景图片</div>
</div>
3.3 背景平铺
平铺：就是盒子太大，但是图片只有一张，那么就会复制图片填充这个盒子（默认平铺效果）
background-repeat: [平铺方式]
重要取值:
repeat: 平铺no-repeat: 不平铺，只显示一张背景图片，显示在盒子的左上角repeat-x: 水平平铺repeat-y: 垂直平铺
默认是 repeat. 背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方.
【案例】
3.4 背景位置
由于背景图默认是在左上角的，但是我们可以通过这个来调整背景图的位置
background-position: x, y;
作用：修改图片的位置，参数有三种风格:
- 方位名词: (top, left, right, bottom)
- 精确单位: 坐标或者百分比(以左上角为原点) ，数字 +px（正负都可以）
- 混合单位: 同时包含方位名词和精确单位
<style>
.bgp .one {
background-image: url(rose.jpg);
height: 500px;
background-repeat: no-repeat;
background-color: purple;
background-position: center bottom;
background-position: 50px -100px;
background-position: 50px center;
}
</style>
<div class="bgp">
<div class="one">背景居中</div>
</div>
注意
- 如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
- 如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )
- 如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
- 如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中. 如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂 直居中)
关于坐标系
计算机中的平面坐标系, 一般是左手坐标系(和高中数学上常用的右手系不一样. y轴是往下指的).
3.5 背景尺寸
background-size: length|percentage|cover|contain;
- 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
- 也可以填百分比: 按照父元素的尺寸设置.
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无 法显示在背景定位区域中。- 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.
<style>
.bgs .one {
width: 500px;
height: 300px;
background-image: url(rose.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>
<div class="bgs">
<div class="one">背景尺寸</div>
</div>
注意体会 contain 和 cover 的区别. 当元素为矩形(不是正方形) 时, 区别是很明显的.
contain：
cover:
结论：
cover：用于等比放大背景图以完全覆盖背景区，可能背景图片部分看不到contain：用于等比缩小背景图（背景图需要大于被放的块，否则背景图任然会被放大）- 百分比：根据盒子尺寸计算图片大小
3.6 背景固定
background-attachment: fixed;
- 背景不会随着元素的内容滚动
3.7 背景复合属性
属性名：background
属性值：背景色 背景图 平铺方式 背景图位置/缩放 背景图固定 （空格隔开各个属性值，不区分顺序）
如下：
4. 圆角矩形
通过 border-radius 使边框带圆角效果.
4.1 基本用法
border-radius: length;
length 是内切圆的半径. 数值越大, 弧线越强烈
如下：
<style>
div{
width: 200px;
height: 100px;
border: 2px solid red;
border-radius: 10px;
}
</style>
<div>IsLand 1314</div>
- 上面代码中的 border 在下面的盒模型那里会说的，可以慢慢看
4.2 生成圆形
div{
width: 100px;
height: 150px;
border: 2px solid red;
border-radius: 50%;
}
4.3 生成矩形
让 border-radius 的值为矩形高度的一半即可
div{
width: 100px;
height: 50px;
border: 2px solid red;
border-radius: 50px;
}
效果如下：
4.4 展开写法
border-radius 是一个复合写法,实际上可以针对四个角分别设置
border-radius:2em;
等价于
border-top-left-radius:2em;
border-top-right-radius:2em:
border-bottom-right-radius:2em:border-bottom-left-radius:2em;
border-radius:10px 20px30px 40px;
等价于(按照顺时针排列)
border-top-left-radius:10px:
border-top-right-radius:20px:
border-bottom-right-radius:30px:
border-bottom-left-radius:40px;
5. 查看 CSS 属性 -Chrome 调试工具
一般都是用 Chrome 浏览器进行调试，用其他浏览器调试有时候会出现效果与代码不符的情况
打开 Chrome 调试工具的方法
- 直接按 F12 键
- 鼠标右键页面 => 检查元素
标签页含义
elements查看标签结构console查看控制台source查看源码+断点调试network查看前后端交互过程application查看浏览器提供的一些扩展功能(本地存储等)- Performance, Memory, Security, Lighthouse 暂时不使用, 先不深究
elements 标签页使用
- ctrl+ 滚轮进行缩放，ctrl+0 恢复原始大小,
- 使用 左上角 箭头选中元素
- 右侧可以查看当前元素的属性,包括引入的类
- 右侧可以修改选中元素的 css 属性，例如颜色：可以点击颜色图标，弹出颜色选择器，修改颜色。例如字体大小可以使用方向键来微调数值。注意：此处的修改不会影响代码,刷新就还原了
- 如果 CSS 样式写错了,也会在这里有提示 ！！！
6. 元素的显示模式
网页中的 HTML 标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。其中元素显示模式就是元素(标签)以什么方式进行显示，比如
自己占一行，比如一行可以放多个
<span>等。
- HTML 元素一般分为块元素和行内元素两种类型。有的资料也有行内块元素的说法。
6.1 块级元素
- h1 - h6、p、 div、 ul、 ol、 li …，其中 其中
标签是最典型的 块元素
特点:
- 独占一行
- 高度, 宽度, 内外边距, 行高都可以控制.
- 宽度默认是父级元素宽度的 100% (和父元素一样宽)
- 是一个容器(盒子)， 里面可以放 行内 和 块级 元素
<style>
.demo1 .parent {
width: 500px;
height: 500px;
background-color: green;
}
.demo1 .child {
/* 不写 width, 默认和父元素一样宽 */
/* 不写 height, 默认为 0 (看不到了) */
height: 200px;
background-color: red;
}
</style>
<div class="demo1">
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
</div>
</div>
注意:
- 文字类的元素内不能使用块级元素
- p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div
- 同理，
<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
比如：
<body>
<p><div>蛤蛤</div></p>
</body>
- 从上面的示例可以看到当把块级元素
<div>放到文字内的元素<p>中时，浏览器解析时会把它单独拿出来，同时设置的样式也不能生效。
6.2 行内元素/内联元素
常见的元素:
- a、strong、b、em、i、del、s、ins、u、span，其中
<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
特点:
- 不独占一行，一行可以显示多个
- 设置高度、宽度、行高无效
- 左右外边距有效(上下无效)，内边距 有效,
- 默认宽度就是本身的内容
- 行内元素只能容纳文本和其他行内元素，不能放块级元素
<style>
.demo2 span {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="demo2">
<span>child1</span>
<span>child2</span>
</div>
注意:
a标签中不能再放a 标签(虽然 chrome 不报错, 但是最好不要这么做).- 特殊情况下：
a标签里可以放块级元素，但是更建议先把a转换成块级元素.
行内元素和块级元素的区别
- 块级元素独占一行，行内元素不独占一行
- 块级元素可以设置宽高，行内元素不能设置宽高,
- 块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置
6.3 行内块元素
在行内元素中有几个特殊的标签例如 <img/> 、<input/> 、<td> ，它们同时具有块元素和行内元素的特点。 称它们为行内块元素。
行内块元素特点
-
和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
-
默认宽度就是它本身内容的宽度(行内元素特点)。
-
高度，行高、外边距以及内边距都可以控制(块级元素特点)。
【案例】
<head>
<style>
img{width: 50px; height: 50px;}
</style>
</head>
<!-- 1、一行可以设置多个 -->
<!-- 2.可以设置宽高 -->
<body>
<img src="./走路.gif" alt="别看了">
<img src="./走路.gif" alt="别看了">
</body>
效果如下：
6.5 元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能一个 | 可以设置宽高 | 父级容器的100% | 可包含任何标签 |
| 行内元素 | 一行可以多个 | 不能设置宽高 | 本身内容的宽度 | 可包含文本和行内元素 |
| 行内块元素 | 一行可以多个 | 可以设置宽高 | 本身内容的宽度 | - |
6.4 改变显示模式
特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性。比如想要增加链接 <a> 的触发范围
使用 display 属性可以修改元素的显示模式，可以把 div 等变成行内元素,也可以把 a,span 等变成块级元素
display:block改成块级元素[常用]display:in1ine改成行内元素[很少用]display:inline-block改成行内块元素
【案例】
<style>
div{
width:300px;
height:300px;
background-color: pink;
display: inline;
}
</style>
<div>111</div>
<div>222</div>
【★,°:.☆(￣▽￣)/$:.°★ 】那么本篇到此就结束啦，如果有不懂 和 发现问题的小伙伴可以在评论区说出来哦，同时我还会继续更新关于【Linux】的内容，请持续关注我 ！！
