CSS 介绍和基本使用
CSS 简介
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，是一种样式表语言用来设置网页的外观和布局。例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。
层叠是CSS的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在CSS处于核心地位，CSS的全称层叠样式表正是强调了这一点。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：HTML提供网页的结构，CSS 用来美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
CSS 基本使用
书写位置
所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方
<head>
……
<style>
/* style 标签中书写 CSS 注释 */
/* 此处书写 CSS 代码 */
</style>
</head>CSS 语法格式
CSS 规则由两个主要的部分构成
- 选择器：要改哪些标签的样式
- 样式声明：设置的外观
- 使用
{}包含一个或多个样式声明； - 每条样式声明以键值对形式出现：
属性: 值； - 属性和值之间使用
:分隔； - 属性之间使用
;分隔，最后一行的分号可以省略。
CSS 示例
<style>
p {
color: red;
font-size: 24px;
}
</style>注意：CSS 中数值都需要加单位
CSS 基础选择器
CSS 中选择器的作用是用来找到需要设置外观/布局的 HTML 标签，CSS 中选择器的种类非常多，本章先来学习 CSS 中的基础选择器：标签选择器、类选择器、id 选择器和通配符选择器
选择器文档：https://www.runoob.com/cssref/css-selectors.html
标签选择器
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 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>类选择器
标签选择器只能对所有标签做统一的样式设置，如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
语法
.类名 {
CSS属性: 属性值;
……
}类选择器以 . 开头
想要应用该样式的标签需要通过标签的 class 属性设置该类名
可以为不同标签设置相同类名
可以为同一个标签设置多个不同类名
示例1
- 定义
hot类表示热销书籍类； - 使用
color和font-size定义热销数据的颜色和文字大小； - 在素材代码中应用类选择器突入显示热销书籍。
<ul>
<li>HTML 入门到精通</li>
<li>CSS 布局指南</li>
<li>JavaScript 犀牛书</li>
<li>你不知道的 JavaScript</li>
</ul>
<div>不同标签页可以设置相同类名</div>不同标签可以设置相同类名
示例2
- 准备三个
div盒子，分别包含文字：红色、绿色、红色 - 定义两个类：
red和green，定义盒子宽度 width、高度 height 和背景颜色 background-color - 应用类控制盒子的显示
.red {
width: 100px;
height: 100px;
/* 背景颜色 */
background-color: red;
}
.green {
width: 100px;
height: 100px;
background-color: green;
}div 默认占一整行，但是如果没有指定宽度和高度并且div中没有内容，那么，
- div 宽度是浏览器的宽度
- div 高度是 0
同一元素使用多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选出这个标签. 简单理解就是一个标签有多个名字.
- 代码演示
.box {
width: 150px;
height: 100px;
font-size: 30px;
}
.red {
/* 背景颜色 */
background-color: red;
}
.green {
background-color: green;
}<div class="box red">红色</div>
<div class="box green">绿色</div>
<div class="box red">红色</div>类命名规则见附录
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以"#" 开头
- id 选择器的作用是唯一匹配页面上的某一个元素
#box {
color: red;
}<div>我是第一个盒子</div>
<div>我是第二个盒子</div>
<div>我是唯一的盒子</div>如果在 HTML 中给多个元素设置相同的 id 值，id 选择器是可以同时修改这些元素的样式的，但是我们应该避免这么做
通配符选择器
- 通配符选择器：*
- 通配符选择器的作用是用来匹配页面上所有的元素
- 浏览器在解释 HTML 时，会把通配符选择器中定义的样式应用到页面中的每一个元素
/* 页面上所有元素文字都显示成红色 */
* {
color: red;
}总结
基础选择器 | 作用 | 特点 | 使用频率 |
标签选择器 | 选出相同标签 | 不能差异化选择 | 较多 |
类选择器( | 按需选择标签 | 根据需求选择 | 非常多 |
id 选择器( | 选中唯一标签 | 针对唯一标签 | 通常与 JavaScript 联用 |
通配符选择器( | 选中所有标签 | 选择的太多，有部分不需要 | 特殊情况使用 |
字体属性
https://www.runoob.com/css/css-tutorial.html
字体常用属性列表
属性 | 含义 | 注意事项 |
font-size | 字号 | 但是通常是 px（像素），一定要有单位 |
font-family | 字体 | 工作中按照团队约定即可 |
font-weight | 字重 | 700 bold加粗 / 400 normal 普通 不带单位 |
font-style | 字体样式 |
把 |
font | 连写 |
|
font-size
- CSS 使用 font-size 属性定义字体大小
p {
font-size: 20px;
}- px（像素）大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小为16px ，最小大小是12px
- 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
- 可以给 body 指定整个页面文字的大小
- 查看浏览器中字体的默认大小
font-family
- CSS 使用 font-family 属性定义文本的字体系列
h2 {
font-family: '微软雅黑';
}
p {
/* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
font-family: 'Times New Roman', Times, serif;
}- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
- 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
- 推荐给body设置字体，字体最常见的几个字体：
body {
font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB';
}font-weight
- CSS 使用 font-weight 属性设置文本字体的粗细
p {
font-weight: bold;
}- 可选值
属性值 | 描述 |
normal | 默认值，不加粗 |
bold | 定义粗体，加粗显示 |
100-900 | 400 等同于 normal，700 等同于 bold，注意没有单位 |
font-style
CSS 使用 font-style 属性设置文本的风格
p {
font-style: normal;
}- 可选值
属性值 | 描述 |
normal | 默认值，显示标准的字体样式 |
italic | 斜体的字体样式 |
font
当我们想同时设置字体的时候，例如：
#box {
font-size: 2em;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
font-style: italic;
}这里会稍显麻烦，CSS 还提供给我们一个 font 属性，简化这种操作
font 属性是一个复合属性，通过 font 属性可以设置所有字体属性
body {
font: font-style font-weight font-size/line-height font-family;
}
body {
font: italic bold 16px 'Microsoft yahei';
}- font 简写属性在一个声明中设置所有字体属性。
- 可设置的属性是（按顺序）： "font-style font-weight font-size/line-height font-family"
- font-size 和 font-family 的值是必需的。如果缺少了其他值，默认值将被插入
- 注意： line-height 属性设置行与行之间的空间。
文本属性
常用文本属性列表
属性 | 含义 | 注意事项 |
color | 颜色 | #fff / rgba(r, g, b, 透明度) |
text-align | 对齐 | left / right / center |
text-indent | 首行缩进 | text-indent: 2em; |
text-decoration | 文本修饰 | text-decoration: underline; / text-decoration: none; |
line-height | 行高 | 行高等于盒子高度会垂直居中 |
color
color 属性用于定义文本的颜色
div {
color: red;
}- 可选值
属性值 | 描述 |
red/green 等 | 预定义的颜色值 |
#FF0000/#FF6600 | 十六进制，计算机中的颜色的三原色（红绿蓝） #FF(红) 00(绿) 00(蓝) |
rgb(255, 0, 0)/rgb(100%, 0%, 0%) | RGB代码 |
rgba(255, 0, 0, 0.5) | RGBA类似于RGB，最后的A代表透明度，取值范围0~1 |
text-align
text-align 属性用于设置元素内文本内容的水平对齐方式
div {
text-align: center;
}- 可选值
属性值 | 描述 |
left | 左对齐，默认值 |
right | 右对齐 |
center | 居中对其 |
text-indent
text-indent 属性用于设置元素内文本内容的缩进距离
div {
text-indent：20px;
}
div {
text-indent：2em;
}em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。
text-decoration
text-decoration 是文本修饰属性，可以给文本添加上划线、下划线、删除线
div {
text-decoration：underline;
}- 可选值
属性值 | 描述 |
none | 没有装饰线，默认值 |
underline | 下划线，超链接 a 默认具有下划线 |
overline | 上划线，几乎不用 |
line-through | 删除线，不常用 |
- 取消 a 标签的下划线
a {
text-decoration：none;
}line-height
line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
p {
line-height: 26px;
}行高的文本分为 上间距 文本高度 下间距 = 行间距
三种引入方式
按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类： 行内样式、内部样式(嵌入样式)、外部样式。
行内样式
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式
<div style="color: red; font-size: 12px;">疫情无情，人有情</div>- style 是标签的属性，行内样式只能用来控制当前标签的样式，无法重用
- 适合于简单、快速、临时修改样式
- 书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用
内部样式
内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中
<style>
div {
color: red;
font-size: 12px;
}
</style>- style 标签理论上可以放在 HTML 的任何位置，推荐放在
head标签中 - 通过此种方式，可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰，但是并没有实现结构与样式完全分离
外部样式
实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到 CSS 文件中，之后把CSS文件引入到 HTML 页面中使用
- 引入外部样式表分为两步：
- 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中
- 在 HTML 页面中，使用 link 标签引入这个文件
<link rel="stylesheet" href="css文件路径">总结
样式表 | 优点 | 缺点 | 使用频率 | 控制范围 |
行内 | 书写方便，权重高 | 结构样式混合 | 低 | 控制一个标签 |
内部 | 部分结构和样式分离 | 没有彻底分离 | 较多 | 控制一个页面 |
外部 | 完全结构和样式分离 | 需要 link 引入 | 多 | 可以被多处复用 |
综合案例
Chrome 调试工具
- 改变颜色、字体大小等
- 使用吸管工具取色
新闻详情页
- 演示效果
- 提供内容
<h1>北方高温明日达很高 京津冀多地地表温度将超60℃</h1>
<div>
2022-06-03 16:31:47 来源: <a href="#">中国天气网</a>
<input type="text" placeholder="请输入查询条件..." />
<button class="btn">搜索</button>
</div>
<hr />
<p>
中国天气网讯
今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到很高，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。
</p>
<h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
<p>
<img src="images/pic.jpeg" alt="" />
</p>
<p>
今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。
</p>
<p>
在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
</p>
<h4>明日热度再升级！京津冀携手冲击38℃+</h4>
<p>
中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入很高阶段，高温强度和范围都将发展到最强。
明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。
</p>
<p>
不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧
数据支持/王伟跃 胡啸 审核/刘文静 张方丽）
</p>
<p>本文来源：中国天气网 责任编辑：刘京_NO5631</p>附录
类命名规则
功能 | 建议命名 |
头 | header |
内容 | content / container |
尾 | footer |
导航 | nav |
侧栏 | sidebar |
栏目 | column |
页面外围控制整体布局宽度 | wrapper |
左右中 | left right center |
登录条 | loginbar |
标志 | logo |
广告 | banner |
页面主体 | main |
热点 | hot |
新闻 | news |
下载 | download |
子导航 | subnav |
菜单 | menu |
子菜单 | submenu |
搜索 | search |
友情链接 | friendlink |
页脚 | footer |
版权 | copyright |
滚动 | scroll |
内容 | content |
标签页 | tab |
文章列表 | list |
提示信息 | msg |
小技巧 | tips |
栏目标题 | title |
加入 | joinus |
指南 | guild |
服务 | service |
注册 | regsiter |
状态 | status |
投票 | vote |
合作伙伴 | partner |
作业
练习1：个人简历
效果演示
提供内容
专业简历
个人信息
个人信息
姓名：张三
年龄：29
电话：135xxx9999
邮箱：zhangsan@163.com
求职意向
从事职业：全栈工程师
期望月薪：15k-18k
教育背景
学校名称：河北工程大学
就读时间：2019.07-2022.10
所学专业：计算机科学与技术
证书
舞蹈大赛一等奖
十佳学习标兵
歌唱比赛三等奖
优秀读者
优秀实习生
工作经历
大一和大二期间，在学院组织部任职，虽然管理的是学生，但锻炼了我的组织能力。大一到大三我都是校报记者团成员，发表了20篇稿子，这很好地锻炼了我的文笔，大三暑假我在一家传媒公司实习了三个月，实习职位是文案策划，这次实习我的收获很大，无论是在工作经验上，还是在为人处事上，我觉得这为我以后的职业生涯打下了很好的基础。现在，我想找一份文案策划工作，我在实习期间对文案策划这个职位的工作内容有了一定的了解，我很喜欢这样的工作，三个月的实习也算是一种工作经验。
20XX/4 — 20XX/6：XX有限公司[1年2个月]
所属行业：检测/认证
实验室 质量管理编制员
1、协助项目工程质量管理体系的策划、质量管理的标准、制度、程序和作业文件的编制。
2、对项目材料专业的建设方主体质量行为和实体工程质量监督检查。
3、负责对承包商、监理、设备监造、独立无损检测单位质量管理文件的审查。
20XX/6 — 20XX/3：XX有限公司[9个月]
所属行业：检测/认证
实验室 工程监理
1、对项目材料专业的建设方主体质量行为和实体工程质量监督检查。
2、负责对承包商、监理、设备监造、独立无损检测单位质量管理文件的审查。
3、负责工程项目实施过程的质量文件和工程归档资料的审查。
自我评价
本人性格开朗、稳重、有活力，待人热情、真诚；工作认真负责，积极主动，能吃苦耐劳，用于承受压力，勇于创新；有很强的组织能力和团队协作精神，具有较强的适应能力；纪律性强，工作积极配合；意志坚强，具有较强的无私奉献精神。
对待工作认真负责，善于沟通、协调有较强的组织能力与团队精神；活泼开朗、乐观上进、有爱心并善于施教并行；上进心强、勤于学习能不断提高自身的能力与综合素质。在未来的工作中，我将以充沛的精力，刻苦钻研的精神来努力工作，稳定地提高自己的工作能力，与企业同步发展。练习2：模仿百度首页
效果演示
提供内容
