这是我参与「第四届青训营 」笔记创作活动的的第2天
本堂课重点内容
-
认识CSS
-
CSS是如何工作的
-
认识选择器
-
了解颜色、字体
详细知识点介绍
CSS是什么？
Cascading Style Sheets 层叠样式表
用来定义页面元素的样式
-
设置字体和颜色
-
设置位置和大小
-
添加动画效果
下面根据一个基础样式来介绍一下css
h1 {
color: white;
font-size: 14px;
}
其中 h1 为选择器（Selector）:
使用选择器选中页面中某些元素， 为选中的元素定义样式
例如这里的 h1 为选择器，则说明我们将为页面上的所有h1定义样式
另外的color\font-size都是属性（选择器 Property）
white\14px都是属性值（Value）
我们将属性、属性值用冒号组合起来称之为声明(Declaration)
将多条声明用分号隔开，放在大括号中称之为声明块
选择器加上声明块，我们称之为一条规则
CSS本质上是一条条样式规则组成
在页面中使用CSS
在页面中使用CSS共有三种方法
-
外链 将CSS定义放在单独文件中，用<link>标签引入到页面中
<!-- 外链 --> <link rel="stylesheet" href="/assets/style.css"> -
嵌入 将CSS样式定义代码直接通过<style>标签，写在页面中
<!-- 嵌入 --> <style> li { margin: 0; list-style: none; } p { margin: 1em 0;} </style> -
内联 HTML基本所有标签都有 style 属性，我们将CSS样式直接写在 style 属性中
<!-- 内联 --> <p style="margin:1em 0">Example Content</p>一般我们使用外链写法，起到样式和功能分离的效果
CSS 是如何工作的
选择器 Selector
找出页面中的元素，以便给他们设置样式
使用多种方法选择元素
-
按照标签名、类名或 id
-
按照属性
-
按照 DOM 树中的位置
标签选择器
通配选择器
<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style>
* {
color: red;
font-size: 20px;
}
<style>
如上代码中的“*”号即为通配选择器，它将对所有元素起作用
id 选择器
通过 #+id 去选中对应的元素，我们通过id 选择器，选中元素时，id值需要是唯一的
类选择器
<h2>Todo List</h2>
<ul>
<li class="done">Learn HTML</li>
<li class="done">Learn CSS</li>
<li>Learn JavaScript</li>
</ul>
<style>
.done {
color: gray;
text-decoration: line-through;
}
</style>
通过 .+类名 去选中对应的元素，与id选择器不同，类名可以出现多次
属性选择器
通过 [属性名=“属性值”] 去选中对应的元素，其中属性值可选
伪类（pseudo-classes）
不基于标签和属性定位元素
几种伪类
-
状态伪类
-
结构性伪类
组合（Combinators）
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A > B | 选中B，如果它是A的子元素 | section > p |
| 兄弟选择器 | A ~ B | 选中B，如果它在A后且合A同级 | h2 ~ p |
| 相邻选择器 | A + B | 选中B，如果它紧跟在A后面 | h2 + p |
选择器组
通过“,”将选择器分开合成选择器组
颜色
颜色 - RGB
RGB色彩就是常说的光学三原色，R代表Red（红色），G代表Green（绿色），B代表Blue（蓝色）。自然界中肉眼所能看到的任何色彩都可以由这三种色彩混合叠加而成，因此也称为加色模式。
颜色 - HSL
Hue Saturation Lightness
色相 饱和度 亮度
HSL是一种将RGB色彩模型中的点在圆柱坐标系中的表示法。
alpha 透明度
取值可以在0-255之间或者0.0f---1.0f之间,数值越小透明度越高
字体
通用字体族
-
Serif 衬线体
- Grorgia、宋体
-
Sans-Serif 无衬线体
- Arial、Helvetica、黑体、微软雅黑
-
Cursive 手写体
- Caflisch Script、楷体
-
Monospace 等宽字体
- Consolas、Courier、中文字体
-
Fantasy
较为夸张的字体
- Comic Sans MS、Papyrus
font-family
font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表
Web Fonts
可以让网页使用在线字体的一种技术手段
font-size
设置字体大小
-
关键字
- small、medium、large
-
长度
- px、em
-
百分数
- 相对于元素字体大小
font-style
设置字体样式，如斜体
font-weight
设置字重，范围为100-900，受字体影响，需要字体支持
line-height
设置行高
white-space
HTML中对空白符的处理规则
-
normal：合并多余空格
-
nowrap：强制不换行
-
pre：保留所有空格和换行
-
pre-wrap：一行内显示不下时自动换行
-
pre-line：合并空格但保留换行
调试CSS
-
右键点击页面，选择[检查]
-
使用快捷键
-
Ctrl+Shift+I（windows）
-
Cmd+Opt+I（Mac）
-
实践练习例子
例一：了解CSS
<head>
<meta charset="UTF-8">
<title>Blog</title>
<style>
h1 {
color: orange;
font-size: 24px;
}
p {
color: gray;
font-size: 14px;
line-height: 1.8;
}
</style>
</head>
<body>
<h1>Web框架的架构模式探讨</h1>
<p>在写干货之前，我想先探讨两个问题，模式的局限性?模式有什么用?</p>
</body>
解析
在HTML中使用嵌入方式引用CSS样式
运行效果
例二： 认识伪类__状态伪类
<a href="htpp://example.com">
example.com
</a>
<label>
用户名：
<input type="text">
</label>
<style>
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
color: orange;
}
a:active {
color: red;
}
:focus {
outline: 2px solid orange;
}
</style>
解析
由<a>标签构成的链接，在HTML中有多种状态，如默认状态、点击、鼠标滑过等
因此我们可以用伪类选择器，定义不同状态下的样式
如
-
a:link 表示默认状态下的样式
-
a:visited 表示访问过的链接的样式
-
a:hover 表示鼠标移到链接上后的样式
-
a:active 表示鼠标按下后链接的样式
另外，输入框存在 focus 状态，即点击后，可在输入框输入文字的状态，通过 :focus 设置对应样式
运行效果
例三： 认识伪类__结构性伪类
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>星球大战：原力觉醒</li>
<li>复仇者联盟 3</li>
<li>侏罗纪世界</li>
</ol>
<style>
li {
list-style-position: inside;
border-bottom: 1px solid;
padding: 0.5em;
}
li:first-child {
color: coral;
}
li:last-child {
border-bottom: none;
}
</style>
解析
结构性伪类会根据你的DOM 节点，在DOM 树中出现的位置，决定是否选中元素
例子中，通过 first-child 伪类，为li 中首个 child 设置样式。用过 last-child 为 li 中 末位 child 设置样式。
运行结果
例四：认识组合选择器
<article>
<h1>拉森火山国家公园</h1>
<p>拉森火山国家公园是位于...</p>
<section>
<h2>气候</h2>
<p>因为拉森火山国家公园...</p>
<p>高于这个高度，气候非常寒冷...</p>
</section>
</article>
<style>
article p {
color: black;
}
article > p {
color: blue;
}
h2 + p {
color:red;
}
</style>
解析
-
article p：选择 article 下所有的 p 标签
-
article > p：选择 article 下直接的 p 标签
-
h2 + p： 选择 h2 紧跟下的 p 标签
运行结果
课后个人总结
在这次的 CSS学习中，让我大致对 CSS 有一个粗略的了解，可以算是学会了 CSS 的基础知识。
个人感觉其中选择器的认识需要特别掌握，而选择器中，伪类知识点又是难点所在，尤其要注意伪类和伪元素的使用，需要多加练习。
