3.1 CSS基础认知🍎
3.1.1 👁️🗨️CSS概念
CSS：层叠样式表（Cascading style sheets)，为网页标签增加样式表现的
语法格式：
选择器{
<!-- 属性设置 -->
属性名:属性值; <!--每一个键值对属性写完之后都要加 英文 `;`g隔开-->
}
比如：
p{
color:red;
}|------------------|------|
| CSS常见属性 | 作用 |
| color | 文字颜色 |
| background-color | 背景颜色 |
| background-image | 背景图片 |
| font-size | 字体大小 |
| width | 宽度 |
| height | 高度 |
3.1.2 👣CSS的引入方式
1. 内嵌式
写在style标签，style标签一般在head中，title下面
<style>
/* 内嵌式 */
p{
/*属性设置==》 属性名：属性值 */
color: red;
/* 文字大小 */
font-size: 50px;
/* 背景颜色 */
background-color: yellow;
/* 宽度 高度 */
/* width: 60px;
height: 600px; */
}
</style>
<p>你好！世界！</p>2. 外联式
写在一个单独的.css文件中，通过`link`标签进行导入
<!-- link 标签 导入外联的css样式 -->
<link rel="stylesheet" href="./css/01-css.css">
<div> 这是div标签-演示外联式CSS </div>3. 内联式
直接写在标签的style属性中
<!-- 内联式：直接写在标签里面 -->
<span style="color: springgreen; font-size: 90px;" >这是span标签-用来演示内联式</span>3.2 基本选择器🌶️
3.2.1 🏀标签选择器
通过标签名去控制对应标签的样式
标签选择器是一次性控制整个页面对应的标签
语法：
标签名{
属性：属性值
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<!-- 演示标签选择器 -->
<p>这是span标签-用来演示标签选择器</p>
<p>p1 </p>
<p>p2 </p>
<p> p3</p>
<p> p4</p>
<div>
<ol>
<li>
<p>这是嵌套的p标签</p>
</li>
</ol>
</div>
</body>3.2.2 🎉类选择器
通过类名，找到页面中所有带有这个类名的标签，设置样式
class="类名"
语法：
.类名{
属性：值
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 类选择器 .类名 */
.xzq03{
color: aqua;
font-size: 30px;
}
.p03{
background-color: red;
}
</style>
</head>
<body>
<p> 这是第一个p标签</p>
<p class="xzq03"> 这是第二个p标签，有类名的p标签</p>
<!-- 多个类名 -->
<p class="xzq03 p03"> 这是第三个p标签，有类名的p标签</p>
<span class="xzq03 span03">这是span标签</span>
<div class="xzq03">这是div标签</div>
</body>注意点：
- 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
- 一个标签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
3.2.3 🎿id选择器
通过id属性值，找到页面中带有这个id属性值的标签，设置样式
语法：
#id名{
属性：值
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#ix{
font-size: 40px;
}
#sx{
background-color: red;
}
</style>
</head>
<body>
<p id="ix sx">这是p标签-测试id选择器</p>
<p id="ix">这是p标签-测试id选择器</p>
<span id="ix">这是span标签</span>
<div id="ix">这是div</div>
</body>3.2.4 🔮通配符选择器
以通配符**"*"**直接选择设置整个页面的标签
语法：
*{
属性：值
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>111</p>
<p>222</p>
<span>这是span</span>
<div>这是div</div>
</body>3.3 CSS样式层叠🍖
一个标签有多个相同的属性，比如：设置两个 color，最后就会覆盖第一个，一最后的样式为准
<!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{
/* 后面的属性会覆盖掉前面的属性 */
font-size: 60px;
font-size: 20px;
color: red;
color: violet;
}
</style>
</head>
<body>
<p>这是p标签</p>
</body>
</html>3.4 字体和文本的基础样式🍊
3.4.1 🎯字体样式
- 字体大小：`font-size`
格式：
font-size:数值+px- 要跟px单位，不跟没有效果
-
字体粗细、倾斜：`font-weight`、`font-style`
<!DOCTYPE html> <html lang="en"> <head> <style> p{ color: red; /* 字体加粗 */ font-weight: bold; }</head> <body>div{ font-weight: 900; font-style: oblique; } span{ font-weight: 100; font-style: italic; } </style>这是p标签
这是div标签这是span </body> </html> -
主体加粗
关键字：
- 正常：normal
- 加粗：bold
数值：
- 100~900 （9个级别，依次递增）
- 正常：400
- 加粗：700
- 字体倾斜
- 正常：normal（默认值）
- 倾斜：italic
-
字体选择：`font-family`
<!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{ /* font-family:微软雅黑,黑体,宋体; */ font-family:Georgia, 'Times New Roman', Times, serif; } </style> </head> <body>这是一个p标签
这是div</body> </html>
常见取值：具体字体1,具体字体2,具体字体3,具体字体4,...,
- 具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体等......
- 字体系列：sans-serif、serif、monospace等......
注意：
- 从左往右按照顺序查找
- 如果字体名称中存在多个单词，推荐使用引号包裹最后一项
- 尽量使用系统常见自带字体
- font连写
直接将字体系列的 font...属性写在一起
<!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{
/* font-size: 40px;
font-weight: 900;
font-style: italic; */
/* font 连写 */
/* font : style weight size family;连写的顺序 */
/* font连写：
- 按照顺序写
- 只能省略前两个属性（style、weight）
*/
font: italic 900 90px 黑体 ;
/* font: 900px 宋体; */
}
</style>
</head>
<body>
<p>这是p标签</p>
</body>
</html>注意：
- font连写时按照顺序写：`font : style weight size family;`
- font连写可以省略前2个属性（style、weight）
3.4.2 🏓文本样式
- 首先缩进：`text-indent`
- 可以跟 数值px
- 可以指定字：em(一个em 表示一个字大小)
- 对齐方式：`text-align`
- 居中:center
- 右对齐：right
- 左对齐：left
- 文本修饰：`text-decoration`
-
underline:下划线
-
line-through:删除线
-
overline:上划线
-
none:去掉所有文本修饰
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本样式</title> <style> p{ /* 首先缩进：text-indent px：像素值 */ /* text-indent: 40px; */ text-indent: 2em;/*em:一个字*/</head> <body>/* 对齐： 居中:center 右对齐：right 左对齐：left */ text-align: left; /* 文本修饰：text-decoration underline:下划线 line-through:删除线 overline:上划线 none:去掉所有文本修饰 */ text-decoration: underline; } div{ text-decoration:line-through; } span{ text-decoration: overline; } .p1{ text-decoration: none; } </style>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案， 来实现互联网产品的用户界面交互 。
</body> </html><p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态， 以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著， 功能更加强大。 </p> <div> 这是div标签 </div> <br> <span> 这是span </span>
3.4.3 🎗️行高
每一行字体所占的高度（`line-height`）
行高取值：
- 数值+px
- em（一个em就表示一个字的大小）
- font-size的倍数(一般情况下，浏览器默认字体大小是 16px)
可以font连写：font : style weight size/line-height family ;
<!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{
/* line-height: 30px; */
/* line-height: 3em; */
line-height: 4;/*谷歌默认16px */
}
</style>
</head>
<body>
<p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，
以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，
功能更加强大。
</p>
</body>
</html>