这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
一、本堂课重点内容：
- 什么是CSS,如何在HTML中使用CSS?
- CSS中的选择器.
- 色彩相关概念.
- CSS中有关文本渲染的属性.
二、详细知识点介绍：
1.什么是CSS,如何使用CSS?
什么是CSS? CSS可以用来定义页面元素的样式，包括设置字体和颜色,设置位置和大小,添加动画效果等等.
如果把网页比作一只鸟,HTML是鸟的骨架,那CSS就是漂亮的羽毛.
在页面中使用CSS有三种方法: 外链(推荐使用,样式与结构相分离),嵌入,内联(适用于较少的样式设置)
<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">
<!-- 嵌入 -->
<style>
li{margin:0; list-style: none;}
p{margin: 1em 0;}
</style>
<!-- 内联 -->
<p style="margin:1em 0">Exampe Contene</p>
2.CSS中的选择器
找出页面元素,以便给他们设置样式. 可以使用多种方式选择元素: 按标签名,类名或id ; 按照属性 ; 按照DOM树中的位置.
常见选择器
| 选择器 | 语法 | 详细描述 |
|---|---|---|
| 通配选择器 | *{} | 匹配所有元素 |
| 标签选择器 | div{} | 根据标签选择 |
| id选择器 | #name{} | 选择id为name的元素 |
| 类选择器 | .name{} | 选择class为name的元素 |
| 属性选择器 | [Name] | 选择具有Name属性的元素 |
更多属性选择器
| 语法 | 描述 |
|---|---|
[Name="value"] | 具有Name属性且值为value |
[Name^="s"] | 具有Name属性且值以 s 开头 |
[Name$="s"] | 具有Name属性且值以 s 结尾 |
伪类选择器
描述： 不基于标签或属性定位元素。常见伪类有状态伪类和结构型伪类
- 状态伪类： 某个元素处于特定状态下才会被选中.语法示例:
a:hover{}
a 标签: :link 表示默认状态; :hover鼠标悬浮; :active 鼠标按下; :visited访问过;
输入框: :focus表示处于输入状态.
- 结构伪类: 某个元素处于特定的位置才会被选中.语法示例:
li:first-child{}
:first-child 表示第一个孩子; last-child 表示最后一个孩子; nth-child(exp)表示满足exp表达式的孩子
选择器组合
选择器组合: 例如A.className 可以更加精确的选择具有 className 类名的 A 标签
选择器组： 逗号间隔 A,B 表示选择满足条件A的标签和满足条件B的标签 p,div{} 同时选择 p 和 div 标签
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | 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 |
3.色彩相关概念
RGB: rgb(12,23,45)分别表示括号内红绿蓝的成分,取值范围为0-255
HSL: hsl(270,100%,50%)分别表示色相为270,饱和度为100%,亮度为50%
其他参数: alpha即透明度( 1 为不透明) -> rgba 或 hsla 第四个参数为透明度.
应用场景例如：按钮点击或hover之后颜色亮度的变化,用HSL会比较方便
HSl的含义是:Hue色相 Saturation 饱和度 Lightness 亮度
4.有关文本渲染的属性
属性总结
| 属性 | 属性值 | 描述 |
|---|---|---|
font-family | 宋体/黑体等等 | 字体 |
font-size | 大小：px/em等 | 字体大小 |
font-style | italic 斜体/ normal 正常 | 斜体 |
font-weight | 100-900 / normal/ bold | 粗细 |
line-heigh | 大小：px/em等 | 行高 |
其他属性值取值
-
font-size:关键字(small medium large),长度(px,em),百分数(相对于父元素字体大小) -
font-weight: 100-900 数字越大字体越粗(前提是字体做了不同粗细的适配,有可能只做了正常和粗体两种); 400代表normal,700代表bold粗体 -
line-heigh: 不带单位的数字表示字体大小的倍数 -
font-family:设置字体类型,指定多个字体从前到后选择能用的字体.- 中英文混排时,要把英文字体放在中文字体之前
- 在最后要加上通用字体族,代表的是一种风格,没有字体时就自动寻找已有的符合风格的字体
字体族 描述 Serif 衬线体 Sans-Serif 无衬线体 Cursive 手写体 Fantasy 艺术体 Monospace 等宽字体 使用web Fonts,写法规范:见实践练习例子
复合属性font: style weight size/height family
其他字体相关
| 属性 | 属性值 | 描述 |
|---|---|---|
text-align | left/right/center/justify | 文字对齐方式 |
letter-spacing | px / em 等 | 字母之间的距离 |
word-spacing | px / em 等 | 单词之间的距离 |
text-indent | px / em 等 | 段落首行缩进的的距离 |
text-decoration | underline/line-through/overline | 设置文字修饰 |
white-space | 详细解释见下 | 设置处理元素中空白的方式 |
属性值描述
text-align:justify是指两端对齐,且最后一行无效.
text-decoration:分别对应下划线,删除线,上划线.
white-space:设置处理元素中空白的方式，见下表
| 属性值 | 描述 |
|---|---|
| nowrap | 合并连续的空白,无视换行符 |
| pre | 保留所有空白和换行 |
| pre-wrap | 保留所有空白,手动和自动换行 |
| pre-line | 合并连续空白,手动和自动换行 |
三、实践练习例子：
导入webfont
@font-face {
font-family: "Megrim";
src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
}
h1 {font-family: Megrim, Cursive;}
需要注意的是：中文字体包较大,一般会使用进行裁切处理后再导入.
四、课后个人总结：
难点
- 对于不同的场景如何使用恰当的选择器?
对于a标签,我们通常不希望它出现下划线,我们就可以直接使用标签选择器对其选择.再比如li标签,我们也不希望它出现前缀小黑点.所以我认为标签选择器一般用在对默认标签属性的修改上.
对于id选择器,由于id在整个页面中具有唯一性,通常用来做一些针对性较强的选择.
对于类选择器,我认为这是最为常用的一种,像是一种弱化的id选择器,适用于大部分场景.
至于其他的伪类选择器,选择器组合,我认为首先要记住他们各自的功能是什么，他们的功能描述就决定了何时使用.
- 如何导入网络字体
webfont?
先记住代码大致框架@font-face具有font-family和src两个属性,然后要用到改字体的时候导入对应的font-family即可.
易混点
多种属性以及多种属性值的记忆与运用,个人理解是记住常用的几种属性,其他属性要用时再去查文档.
五、引用参考：
无
