11.28-12.5周期.md
注：笔记在本地写好后会上传个人博客中，在周期内会随时更新新记录的笔记。
本周观看：p60-p70+p83-p86视频，点击获取网址
笔记标准化模板：微服务简明教程：点击获取网址
Part.1 P60-70（MarkDown页内跳转暂时不可用）
Part.2 P83-86（MarkDown页内跳转暂时不可用）
Part1 P60-70
CSS层叠样式表导读
目标
- 什么是CSS
- 能够使用CSS基础选择器
- 能够设置字体样式
- 能够设置文本样式
学习路径（目录）
- CSS简介
- CSS基础选择器
CSS简介
CSS的由来：
HTML只关注内容的语义，而忽略了美观。CSS作为HTML样式的补充。
CSS也称层叠样式表、CSS样式表、级联样式表。CSS也是一种标记语言。
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面布局和外观显示样式。
CSS让我们的网页更加丰富多彩，布局灵活自如。
总结：
- HTML主要做结构，显示元素内容
- CSS美化HTML，布局网页
- CSS最大价值：由HTML专注做结构，样式交给CSS，即结构（HTML）与样式（CSS）分离。
CSS语法规范
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。
可以用紧凑写法和展开格式，其本质没有区别。
强烈推荐样式选择器、属性名、属性关键字全部用小写字母，特出情况除外！
例如：
紧凑写法
h3{ color:red }
展开格式
h3 {
color:red
}一个普通的css结构如下：
例如：
p {
color: red;
text-align: center;
}例子解释
- p 是 CSS 中的_选择器_（它指向要设置样式的 HTML 元素：）。
- color 是属性，red 是属性值
- text-align 是属性，center 是属性值
CSS选择器的作用
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类：
- 简单选择器（根据名称、id、类来选取元素）
- 组合器选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
CSS id 选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
实例
#para1 {
text-align: center;
color: red;
}CSS 类选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
实例
.center {
text-align: center;
color: red;
}CSS 通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
实例
* {
text-align: center;
color: blue;
}所有简单的 CSS 选择器
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| .class | .intro | 选取所有 class="intro" 的元素。 |
| #id | #firstname | 选取 id="firstname" 的那个元素。 |
| * | * | 选取所有元素。 |
| element | p | 选取所有 元素。 |
| element,element,.. | div, p | 选取所有 元素和所有 元素。 |
Part.2 P83-86
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
- CSS引入方式总结
行内式
当特殊的样式需要应用到个别元素时，就可以使用行内样式表。 使用行内样式表的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
例如：
<p style="color:blue;margin-left:20px;">这是一个段落。</p>内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 部分通过 标签定义内部样式表:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>HTML 样式标签
| 标签 | 描述 |
|---|---|
| <style> | 定义文本样式 |
| <link> | 定义资源引用地址 |
<style>标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html><link>标签
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>