文章目录
CSS基础语法
一、CSS简介
CSS是层叠样式表的简称，其是一门标记语言
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图形处理（宽高、边框样式、边距等）以及版面的布局和外观显示样式
1、CSS语法规范
使用HTML时，需要遵从一定的规范，CSS也是如此。想要熟练地使用CSS对网页进行修饰，首先要了解CSS样式规则
选择器 {属性:值}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选择器{样式} */
p {
color:red;
/* 修改文字的大小为12像素 */
font-size:12px;
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
</html>
选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和值之间以”键值对“的形式出现
属性时对指定的对象设置的样式属性，例如字体大小（font-size）字体颜色（color）
属性和属性之间用英文“;”分开
CSS一般写在<head>标签里面
2、CSS代码风格
样式格式书写
-
紧凑格式
h3 {color: deeppink;font-size: 20px;} -
展开格式
h3 { color: pink: font-size: 20px; }强烈推荐第二种，更加直观
样式大小写
- 推荐用小写
空格规范
- 属性值前面，冒号后面，保留一个空格
- 选择器（标签）和大括号中间保留空格
二、CSS基础选择器
选择器（选择符）就是根据不同需求把不同标签选出来。有基础选择器和复合选择器
基础选择器
由单个选择器组成
基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器
1、标签选择器
指用HTML标签名称作为选择器，按标签分类，为页面中某一类标签指定统一的CSS样式
h3 {
color: pink:
font-size: 20px;
}
优点：能快速为页面中同类型的标签统一设置样式
缺点：不能差异化样式，只能选择全部的当前标签
2、类选择器
如果想要差异化选择不同的标签，单独选择一个或某几个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 类选择器，在要修饰的标签那添加class属性 */
/* 类选择器口诀：样式点定义，结构类调用，一个或多个，开发最常用 */
.red {
color:red;
font-size:12px;
}
</style>
</head>
<body>
<p class="red">有点意思</p> <!--结构需要用class属性来调用-->
<p>hello</p>
</body>
</html>
- 类选择器的使用“.”（英文点号）进行标识，后面紧跟类名（自定义，自己命名）
- 可以理解为给这个标签起名字，来表示
- 长名称或词组可以使用横线来为选择器命名
- 不要使用纯数字、中文等命名，尽量使用英文字母来表示
多类名
使用场景
- 可以把一些标签元素相同的样式（共同的部分）放到一个类里面
- 这些标签都可以调用这个公共的类，然后再调用自己独有的类
- 从而节省CSS代码，统一修改也非常方便
- 多类名选择器在后期布局比较复杂的情况下，较多使用
使用方式：<div class=“类型一 类型二”></div>
- 在标签class属性中写多个类名
- 多个类名必须用空格分开
- 这个标签就可以分别具有这些类名的样式
3、id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* id选择器，#开头，使用方法和HTML中的锚点链接类似 */
/* id选择器的口诀：样式#定义，结构用id调用，只能调用一次 */
#red {
color:red;
font-size:12px;
}
</style>
</head>
<body>
<p id="red">有点意思</p>
<p>hello</p>
</body>
</html>
id选择器和类选择器的区别
- 类选择器可以被多次使用
- id选择器只能使用一次，不得重复
- id选择器和类选择器最大的区别在于使用次数
- 类选择器在修改样式中用的最多，id选择器一般用于唯一性元素上，经常和JavaScript搭配使用
4、通配符选择器
在CSS中，通配符选择器使用"*"定义，它表示选取页面中所有标签
* {
属性1:值1;
···;
}
通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况下使用，以下是清除所有的元素标签的内外边距
* { margin: 0; padding: 0; }
5、总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签 | 不能差异化选择 | 较多 | p {color: red;} |
| 类选择器 | 可以选出一个或多个标签 | 可以根据需求选择 | 非常多 | .nav {color: red;} |
| id选择器 | 一次只能选择一个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #nav {color: red;} |
| 通配符选择器 | 选择所有标签 | 选择的太多，有部分不需要 | 特殊情况使用 | * {color: red;} |
三、CSS字体属性
CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）
字体系列
CSS使用font-family属性定义文本的字体系列
p { /* p标签内的内容字体为微软雅黑 */
font-family:"微软雅黑";
}
各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：“Microsoft YaHei”, tahoma, arial, “Hiragino Sans GB”
字体大小
CSS使用font-size属性定义字体大小
body {
font-size: 20px;
}
/* 标题标签比较特殊，需要单独指定文字大小 */
h2 {
font-size: 20px;
}
px（像素）大小是我们网页常见的单位
Chrome默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量明确大小，不要默认大小
可以给body指定整个页面文字的大小
字体粗细
CSS使用font-weight属性设置文本字体的粗细
body {
font-weight: normal
}
/* nomal（默认，正常字体，400）、bold（粗体,700）、bolder（特粗体）、lighter（细体）、自定义大小（直接写数字） */
文字样式
CSS使用font-style属性设置文本的风格
p {
font-style: normal
}
/* normal（默认，标准字体样式）、italic（斜体） */
复合属性
简写方式，节约代码
font: font-style font-weight font-size/line-height font-famliy（按照顺序来哦）
p {
font:italic 700 16px "Microsoft YaHei";
}
使用font属性时，必须按照上面的语法格式中的顺序写，不能更换顺序，并且各个属性间以空格空开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用
总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 我们通常的单位是px像素，一定要跟上单位 |
| font-family | 字体 | 实际工作按照团队约定来写字体 |
| font-weight | 字体粗细 | 加粗是700或者bold、不加粗是400或者normal，数字不要跟单位 |
| font-style | 字体样式 | 斜体是italic、不倾斜是normal工作中我们常用normal |
| font | 字体连写 | 1.字体连写是有顺序的，不能随便换位置2.其中字号和字体必须同时出现 |
四、文本属性
CSS Text（文本）属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
1、文本颜色
color属性表示颜色
p {
color: red
}
| 表示方法 | 属性值 |
|---|---|
| 预定义的颜色值 | red, green, blue, pink等 |
| 十六进制 | #FF0000, #FF6600 |
| RGB代码 | rgb(255, 0, 0)或(100%, 0%, 0%) |
2、对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
div {
text-align: center; /* 居中对齐 */
}
3、装饰文本
text-decoration属性规定添加到文本的装饰。可以给文本添加下划线（underline）、删除线（line-through）、上划线（overline）等，默认的是没有装饰线（none）
div {
text-decoration: underline;
}
4、文本缩进
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进
p {
text-indent: 20px; /* 缩进20像素，如果是2em，则是缩进2个元素 */
}
em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果单前元素没有设置大小，则会安照父元素的一个文字大小
5、行间距
line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
p {
line-height: 16px;
}
总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 文本颜色 | 我们通常使用十六进制表示颜色 |
| text-align | 文本对齐 | 可以设定文字水平的方式 |
| text-indent | 文本缩进 | 通常我们用于段落首行缩进两个字符text-indent: 2em; |
| line-height | 行高 | 控制行与行之间的距离 |
五、CSS的引入方式
1、内部样式表
内部样式表（内嵌样式表）是写到html页面的内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中
<style>
p {
color: red;
font-size: 20px
}
</style>
<style>标签理论上可以放到HTML文档的任何位置，但一般放在文档的<head>标签中
通过这种方式，可以方便控制当前整个页面中的元素样式设置
代码结构清晰，但是并没有实现结构与样式的完全分离
2、行内样式表
行内样式表（内嵌样式表）是在元素标签内部的style属性中设定CSS样式。适合修改简单样式
<div style="color: red; font-size: 20px">hello world</div>
style其实就是标签的属性
在双引号中间，写法符合CSS规范
可以控制当前页面的标签设置样式
由于书写繁琐，并且没有体现出结构与样式的分离的思想，所以不推荐使用，只有对当前元素添加简单样式的时候，可以考虑使用
3、外部样式表
实际开发都是外部样式表，适合于样式比较多的情况。核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
引入外部样式表步骤：
-
新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中
-
<link rel=“stylesheet” href=“filename.css”>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css.css"> </head> <body> <p id="red">有点意思</p> <p>hello</p> </body> </html>
总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 结构样式混写 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 完全实现和样式分离 | 需要引入 | 最多 | 控制多个页面 |
六、Chrome调试工具
Chrome浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML结构和CSS样式
使用
- Ctrl + 滚轮：可以放大开发者工具的代码大小
- 左边是HTML元素结构。右边是CSS样式
- 右边CSS样式可以改变数值（左右箭头或者直接输入）和查看颜色
- Ctrl + 0：复原浏览器大小
- 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
- 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误
七、Emmet语法
Emmet语法的前身是Zen coding，它使用缩写来提高html/css的编写速度，Vscode内部已集成该语法
1、快速生成HTML结构语法
-
生成标签，直接输入标签名按tab键即可。比如：div 然后tab键，就可以生成<div></div>
-
如果想要生成多个相同标签，加上*就可以了。比如：div*3 就可以生成3个div
<!-- div*3 --> <div></div> <div></div> <div></div> -
如果有父子级关系的标签，可以用>。比如：ul>li 即可
<!-- ul>li --> <ul> <li></li> </ul> -
如果有兄弟关系的标签，用 + 就可以了。比如：div+p
<!-- div+p --> <div></div> <p></p> -
如果生成带有类名或者id名字的，直接编写.demo 或者 #two tab键就可以了
<!-- .demo --> <div class="demo"></div> <!-- #demo --> <div id="demo"></div> -
如果生成的div类名是有顺序的，可以用自增符号 $ 。比如：.demo$*5
<!-- .demo$*5 --> <div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div> <div class="demo4"></div> <div class="demo5"></div> -
如果想要在生成的标签内部写内容可以用{}表示。比如：div{hello}——》<div>hello</div>
<!-- div{hello$}*5 --> <div>hello1</div> <div>hello2</div> <div>hello3</div> <div>hello4</div> <div>hello5</div>
2、快速生成CSS样式语法
CSS基本采取简写形式即可
- 比如：w200 按tab 可以生成 width: 200px;
- 比如：lh26 按tab 可以生成 line-height: 26px;
3.、快速格式化代码
Vscode 快速格式化代码：Shift + alt + F
八、CSS复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的
- 复合选择器可以更准确、更高效的选择目标元素（标签）
- 符合选择器是由多个基础选择器，通过不同的组合方式组合而成的
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
1、后代选择器**
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内存标签写在后面，中间用空格分离。但标签发生嵌套时，内层标签就成为外层标签的后代。
元素一 元素二{样式声明}
ol li {color: red;} /* 选择li标签 */
元素一和元素二中间用空格隔开
元素一是父级，元素二是子集，最终选择的是元素二
元素二可以是子级，也可以是孙子级等，只要是元素一的后代即可
ol li p {color: pink} /* 选择p标签 */元素一和元素二可以是任意的标签选择器
2、子选择器
子元素选择器（子选择器）只能作为某元素的最近一级子元素。简单理解就是选亲儿子元素
元素一 > 元素二{样式声明}
表示选择元素一里面的所有直接后代（子元素）元素二
div > p {text-decoration: none;} /* 选择p标签 */
元素一和元素二中间用大于号隔开
元素一是父级，元素二是子级，最终选择的是元素二
元素二必须是亲儿子，其孙子、重孙之类都不归它管
3、并集选择器**
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常被用于集体声明
并集选择器是各选择器通过逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分
元素一, 元素二 { 样式声明 }
表示选择元素一和元素二
ul, div {font-size: 20px;} /* 选择ul和div标签 */
元素一和元素二中间用逗号隔开
逗号可以理解为和的意思
并集选择器同常用于集体声明
4、伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第N个元素
伪类选择器书写最大的特点是用冒号（:）表示，比如：:hover, :first
链接伪类选择器
a:link /* 选择所有未被访问的链接*/
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /* 选择活动的链接（鼠标按下未弹起的链接） */
为了确保生效，要按照上面顺序书写
因为a链接在浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式
/* a是标签选择器 */
a {
color: gray;
}
/* :hover是链接伪类选择器，鼠标经过是变色 */
a: hover {
color: red;
}
:focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对与表单元素来说
input:focus {
background-color: yellow;
}
总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选子代 | 较少 | 符号是大于号 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a {}和a:hover {}实际开发的写法 |
| :focus选择器 | 选择获得光标的表单 | 跟表单有关 | 较少 | input:focus 记住这个用法 |
九、CSS的元素显示样式
1、概念
作用：网页得标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的页面
元素的显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，一行可以有多个<span>
HTML元素一般分为块元素和行内元素两种类型
2、块元素
常见的块元素有<h1>-<h6>/<p>/<div>/<ul>/<ol>/<li>等，其中<div>标签是最典型的块元素
块级元素的特点
- 比较霸道，自己独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块元素
文字类的元素不能使用块级元素
<p>标签主要用于存放文字，因此<p>标签里面不能放块级元素，特别是不能放<div>
同理<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
3、行内元素
常见的行内元素有<a>/<strong>/<b>/<em>/<i>/<del>等，其中<span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素
行内元素的特点
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身的宽度
- 行内元素只能容纳文本或其他行内元素
链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块极模式最安全
4、行内块元素
在行内元素中有几个特殊标签——<img>/<input>/<td>，它们可以具有块元素和行内元素的特点
行内块元素的特点
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度
- 高度、行高、外边距以及内边距都可以控制（块级元素特点）
5、元素显示模式的转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性比如想要增加链接<a>的触发范围
-
转换为块元素
display: block;
a { width: 30px; height: 30px; /* 把行内元素a转换为块级元素 */ display: block; } -
转换为行内元素
display: inline;
div { /* 把div块级元素转换为行内元素 */ display: inline; width: 30px; } -
转换为行内块
display: inline-block;
span { /* 把span转换为行内块 */ display: inline-block; }
6、垂直居中
盒子的高度等于行高
十、CSS背景
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片的位置、背景图像固定等
1、背景颜色
background-color属性定义了元素的背景颜色
div {
background-color: 颜色值;
}
一般情况下元素的背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色
2、背景图片
background-image属性定义了元素的背景图片
div {
/* 不要拉下url() */
background-image: url(图片url);
}
3、背景平铺
如果需要在HTML页面对背景图片进行平铺，可以使用background-repeat属性
background-repeat: repeat|no-repeat|repeat-x|repeat-y;
repeat：平铺（默认），repeat-x：沿着X轴平铺，no-reapeat：不平铺
4、背景图片位置
利用background-position属性可以改变图片在背景中的位置
background-position: x y;
/* 如果是方位名词，right center和center right 效果是等价的 */
参数代表的位置：x坐标和y坐标。可以使用方位名词或者精确位置
| 精确值 | 说明 |
|---|---|
| length | 百分数|由浮点数字和单位标识符组成的长度值 |
| position | top|center|left|right 方位名词 |
参数是方位名词
- 如果指定两个字都是范围名词，则两个值的位置是无关的
- 如果只指定了一个方位名词，另一个是省略，则第二个值默认居中对齐
参数是精确单位
- 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中参数
参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
5、背景图像固定
background-attachment属性设置背景图像是否固定或者随着页面的其余部分移动
用来做视觉滚动效果
background-attachment: scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像随对象内容滚动 |
| fixed | 背景图像固定 |
6、复合型写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图像位置;
7、背景色半透明
background: rgba(255, 255, 255, 0.3);
最后一个参数是alpha透明度，范围是在0~1之间
我们习惯把0.3的0省略掉，写为background: rgba(0, 0, 0, .3);
背景半透明是指盒子背景半透明，盒子里面的内容不受影响
8、总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x和y坐标 |
| background-attachment | 背景附着 | scroll（背景滚动）/fixed（背景固定） |
| 背景简写 | 书写更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; |
| 背景色半透明 | 背景色半透明 | background: ragb(0, 0, 0, .3);后面必须是4个值 |
扫一扫
773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
