CSS第一天
CSS简介
CSS的主要场景是美化网页，布局页面的
CSS是层叠列表样式（Cascading Style Sheets）的简称，有时我们也会称之为CSS样式表或级联样式表
CSS也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS语法规范
CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
选择器：改谁的样式 样式声明：改成什么样式
CSS的语法格式为：
选择器 {
属性: 值;
属性: 值;
}
例如：
h1 {
color: red;
font-size: 14px;
}
使用 {}
h1是选择器 color: red;和font-size: 14px;是声明，其中color和font-size是属性，red和14px是属性的值
选择器是用于指定 CSS 样式的 HTML 标签，花括号{}内是对该对象设置的具体样式，包含一个或多个样式声明；
属性和值之间使用 : 分隔
属性是对指定的对象设置的样式属性，属性之间使用 ; 分隔，最后一行的分号可以省略
CSS通常写在HTML中head标签的最后,例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS语法规范</title>
<style>
h1 {
color: red;
font-size: 14px;
}
</style>
</head>
在 HTML 中写样式不要忘记加 style 标签；
设置字体不要忘记 px ；
CSS 代码风格
紧凑格式
h1 { color: red;font-size: 20px;}
展开格式
h1 {
color: red;
font-size: 20px;
}
更推荐展开格式，因为更直观，更易于阅读和维护
书写样式时，应该使用小写字母，选择器和开始花括号之间保留一个空格，:后保留一个空格
CSS基础选择器
CSS选择器的作用：选择标签 —— 根据不同的需求，把对应的标签选择出来。
标签选择器
结果：把某一类标签选择出来，统一修改样式
优点：快速、统一设置同类型标签的样式
缺点：没有差异化
color和 font-size 修改素材中的 h3 和 li 标签中的颜色和文字大小
素材
<h3>任职要求</h3>
<ol>
<li>对 Vue 前端框架有深入应用并深入理解其设计原理；</li>
<li>精通 HTML、CSS 技术，有页面制作（切图）经验；</li>
<li>精通 JavaScript、TypeScript 编程，有丰富的程序开发经验；</li>
<li>
有移动端 Web 开发或微信小程序开发经验，能独立开发，并进行性能优化；
</li>
<li>熟悉前端工程化开发，精通 webpack 配置。</li>
</ol>
练习
h3 {
color: blue;
font-size: 48px;
}
li {
color: red;
font-size: 24px;
}
类选择器
如果想差异化选择不同的标签，单独选择一个或某几个标签。
定义类选择器 ： 选择器名称前有一个 . 表示是类选择器； {} 中仍然是一个或多个键值对。
使用类选择器： 找到需要修改样式的标签； 给标签增加 class 属性，属性值是选择器的类名 。
注意事项： 使用类选择器不需要 . ；
. 紧跟类名， . 与类名之间不能有空格；
长名称或词组使用 - 连接，例如： jd-nav ；
尽量用英文，不要用数字或中文；
命名要做到见名知意；
类选择器可以应用到不同类型的标签
类选择器口诀： 样式点定义 ，结构类调用 ，一个或多个 ，开发最常用
例子：
.red {
width: 100px;
height: 100px;
background-color: red;
}
<div class="red">红色</div>
div 默认占一整行，但是如果没有指定宽度和高度，那么： 宽度是浏览器的宽度； 高度是 0 ，所以看不见
多类名：
使用方式：在标签的 class 属性中使用多个类名； 类名之间使用空格分隔。
应用场景：在标签的 class 属性中使用多个类名； 类名之间使用空格分隔。
例子：
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
<div class="box red">红色</div>
id选择器
id 选择器的前缀是# 。
应用场景：专门定义 HTML 中某个特定元素的样式，因为 id 是唯一的。
id 选择器的使用步骤：
1.定义带 id 的 HTML 元素： 给 HTML 中的某个特殊元素增加 id 属性。
2.定义 id 选择器：选择器名称前有一个 # 表示是 id 选择器； 选择器名称就是对应 HTML 元素的 id 名称； {} 中仍然是一个或多个键值对。
id 选择器和类选择器的区别：
-
id 可以看成是身份证号（唯一） / 类可以看成是名字（可多人使用）；
-
id 只为特定元素设置样式，常与 JavaScript 联用；
-
类选择器在修改样式中用的最多。
id 选择器口诀： 样式 # 定义 ， 结构 id 调用 3，只能用一次 4，别人勿使用
通配符选择器
通配符选择器符号：* ， 表示选取页面中的所有元素 ，不需要调用，因为浏览器在解释HTML时，会把通配符选择器中定义的样式应用到页面中的每一个元素
字体属性
font-family 设置字体系列
字体相关的样式，例如：字体系列、大小、粗细、文字样式（斜体）等
font-family 的含义是： 字体系列、字体族
浏览器对字体的搜索顺序：当指定的字体找不到（或者某些文字不支持这个字体）时，就接着往后找
一般要把字体样式设置给 body 标签，一次设置，到处使用
扩展 —— 字体族
衬线字体 serif ，如：宋体，Times New Roman
非衬线字体 sans-serif ，如：微软雅黑，苹方，Arial
等宽字体 monospace ，如：Courier，Courier New，Monospace，新宋体，幼圆
手写体 cursive
花体 fantasy
衬线体如今已经很少使用了，而非衬线体更符合现代审美。如果你发现一名设计
师，在做海报设计、或者制图的时候，使用了宋体，说明她一定是个外行。
写 CSS 代码时，末尾的字体族不需要带引号；
Windows 推荐使用微软雅黑字体；
macOS 推荐使用苹方字体。
font-size 字号大小
设置字体大小的单位：px 像素
谷歌浏览器的默认文字大小：16px
要在 body 标签中指定页面文字的大小：不同浏览器可能默认显示的文字大小不一致；
开发时要尽量给一个明确的值，不要使用默认大小
font-weight 字体粗细
实际开发中推荐使用设置字体的粗细的方式：数字；font-weight 字重
使用数值设置字体粗细不需要单位
可以设置字体的粗细的数值：
取值范围 100 ~ 900 （按 100 递增）
normal ：正常粗细，与 400 等值
bold ：加粗，与 700 等值
font-style 字体样式
常用场景：把 em 、 i 默认的斜体改为不倾斜显示 font-style: normal
font 复合属性写法
复合属性的编写顺序：font: font-style font-weight font-size/line-height font-family
复合属性不能随意调整顺序
复合属性至少要保留： font-size 和 font-family 属性，否则设置无效
文本属性
文本颜色 color
文本属性可以定义的样式：文本相关的样式，例如：颜色、对齐方式、装饰文本、文本缩进、行间距等
定义颜色的方式
预定义的颜色名： red 、 green 、 blue ；
十六进制： #ff0000 ；
RGB 代码： rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.5)
开发中最常用的是**
文本对齐 text-align
可以设置水平方向上的对齐方式：left ：左对齐（默认）；right ：右对齐；center ：居中
不可以给不是独占一行的元素设置文本对齐，文本对齐对 span 、 a 、 em 、 ins 、 strong 等元素设置不生效
文本装饰 text-decoration、
none：默认，没有装饰线，最常用
underline： 下划线，常用
line-through： 删除线，不常用
overline ：上划线，几乎不用
文本缩进 text-indent
em：当前元素 1 个文字的大小
text-indent 属性仅对独占一行的元素生效
行间距 line-height
行间距部分组成部分：上间距；文本高度；下间距。
CSS 的三种引入方式
行内：优点：书写方便，权重高，缺点： 结构样式混合 ；使用率低 ；控制范围：控制一个标签
内部：优点：部分结构和样式分离 ；缺点：没有彻底分离 ；使用频率较多 ；控制范围：控制一个页面
外部：优点： 完全结构和样式分离； 缺点：需要 link 引入 ；使用频率多；控制范围：可以被多处复用
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
