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>