CSS
- CSS是网页美容师；
- CSS是一种标记语言；
- CSS主要用于设置HTML页面中的文本内容，图片的外形，以及版面的布局和外观的显示样式；
- CSS的主要部分构成：
- 选择器；
- 一条或多条的声明；
- 语法格式：选择器{声明}
- 属性与属性值之间用冒号隔开；
- 多个键值对之间用分号隔开；
- CSS写在
<style></style>标签之间；
Emmet语法
- Emmet语法可提高html/css的编写速度，VSCode内部已经集成了该语法；
- 快速生成Html结构语法：
- 生成标签，直接输入标签名 按tab键，例如输入div 然后按下tab键，就可以生成<div></div>标签；
- 若想生成多个相同的标签，输入div*3 然后按下tab键；
- 若有父子级关系的标签，可以用
>例如 ul>li； - 若有兄弟级关系的标签，可以用
+例如div+p； - 若生成带有类名或者id名字的，直接写
p.demo或者p#two然后按下tab键； - 若生成的div类名是
有顺序的，可以使用自增符号$； - 若想要在生成的标签内部写内容可使用
{}；
- 快速生成CSS结构语法：
- 写属性中的各首字母，然后按下tab键；
- 格式化代码：
- VSCode快速格式化代码：shift + alt + f
- 设置
Command+S保存时，自动格式化代码，操作如下：
image.png
Snip20211222_37.png
"editor.formatOnType" : true
"editor.formatOnSave" : true
-
ul>li*5>a：表示ul中包含5个li，li中包含5个a标签； - 批量设置属性值
shift + alt + 向下拖动然后输入数据内容；
CSS样式表
- CSS中有
三种样式表，分别为：行内样式表(行内式)，内部样式表(嵌入式)，外部样式表(链接式)； -
内部样式表：是写到html页面内部的，将所有的CSS代码抽取出来，单独放到一个<style></style>标签中；- <style></style>标签可以放在当前页面的任何地方，一般放在文档的
head标签中； - 代码结构虽然清晰，但没有实现html与CSS的分离；
- <style></style>标签可以放在当前页面的任何地方，一般放在文档的
<!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>
div {
color: green;
}
</style>
</head>
<body>
<div>多少发多少发多少粉丝多福多寿</div>
</body>
</html>
-
行内样式表：是在元素标签内部的style属性中设定CSS样式，适合于修改简单样式；- 在当前标签的style属性中编写样式；
- 可控制当前标签的样式；
<!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>
</head>
<body>
<p style="color: red;font-size: 12px;">都是风刀霜剑看风景的是；反倒是 对方觉得少了</p>
</body>
</html>
-
外部样式表：将样式单独写到CSS文件中，之后再把CSS文件引入到HTML中，适合样式繁琐的情况下；- 第一步：创建CSS文件，以.css结尾；
- 第二步：在HTML页面中，使用link标签引入；
image.png
- 使用外部样式表设置CSS，通常也被称为外链式或链接式引入，是开发中常用的方式；
- 首先
style.css文件，如下：
div {
color: red;
}
- 然后在html文件中引入：
<!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="style.css">
</head>
<body>
<div>时代峰峻的索科洛夫觉得少了</div>
</body>
</html>
- 三种样式表的总结：
image.png
元素的显示模式 -- 元素类型
- 元素的显示模式：元素标签以什么方式进行显示，例如div标签独占一行；
块元素
-
块元素：常见的块元素有h1-h6，p，div，ul，ol，li等等，其特点如下：- 独占一行；
- 高度，宽度，外边距，内边距都可以设置；
- 宽度默认是容器(父标签的宽度的)的100%，高度是内容的高度；
- 是一个容器及盒子，里面可以放行内元素或块元素；
-
文字类的元素内不能使用块元素，例如h1-h6和p标签放文字，不能放块元素；
行内元素
-
行内元素：常见的行内元素有a，span，strong，b，em，i，del，s，ins，u等等，也可称为内联元素，其特点如下：- 相邻行内元素在一行上，一行可以显示多个；
-
高，宽直接设置是无效的，默认宽高就是内容的宽高； - 行内元素只能容纳文本或其他行内元素；
-
a标签中不能再放a标签； - 特殊情况链接a标签里面可以放块级元素，但是给a标签转换一下块级模式最安全；
行内块元素
-
行内块元素：在行内元素中有几个特殊的标签，img，input，td，button，它们同时具有块元素和行元素的特点，可称之为行内块元素，其特点如下：- 和相邻行内元素在一行上，但是
它们之间默认会有空白的间隙，一行可以显示多个(行内元素特点)； - 默认宽度就是本身内容的宽度(行内元素特点)；
- 高度，行高，外边距以及内边距都可以控制(块元素特点)；
- 和相邻行内元素在一行上，但是
image.png
-
元素显示模式的转换：一个模式的元素需要另外一种模式的特性，例如想要增加a标签的触发范围；-
display: block：转换为块元素； -
display: inline： 转换为行内元素； -
display: inline-block：转换为行内块元素；
-
<!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>
a {
width: 150px;
height: 50px;
background-color: pink;
/* 行内元素转换为块元素 */
display: block;
}
div {
width: 300px;
height: 100px;
background-color: red;
/* 块元素转换为行内元素 */
display: inline;
}
span {
width: 300px;
height: 30px;
background-color: green;
/* 行内元素转换为行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<a href="http:www.baidu.com">前往百度</a>
<div>我是块级元素</div>
<div>我是块级元素</div>
<span>行内元素转换为行内块元素</span>
<span>行内元素转换为行内块元素</span>
</body>
</html>
- 小米左侧边栏的案例实现：
<!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>
a {
width: 230px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
line-height: 40px;
/* 行内元素转块元素 */
display: block;
}
a:hover {
/* 鼠标经过 背景颜色发生变化 */
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>
- 效果图如下：
image.png
- 单行文字垂直居中显示：
让文字的行高等于盒子的高度，原理在于行高 = 上间距+文字高度+下间距；
