第五届字节跳动青训营 前端进阶学习笔记（三）CSS基本概念
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
文章目录
前言
没看清楚上课时间错过签到了。。。
课程重点
- CSS代码构成
- CSS使用方法
- CSS渲染流程
- 调试CSS
CSS是什么
层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。
1.CSS基本结构
下面是一个基本的CSS选择器样式结构
selector {
property: value;
}
- seletor: 选择器
- property: 属性名
- value: 属性值
2.在面中使用CSS的方式
3.CSS是如何工作的
选择器
1.通配选择器
通配选择器即匹配所有选择器所有元素都会被应用上通配选择器中设置的属性。
ps.通配选择符的优先级是最低的。
2.标签选择器
标签选择器即根据标签的名称进行匹配优先级和伪元素选择器相同。
3.id选择器
id选择器根据标签上设置的id属性进行匹配优先级仅次于!import和行内样式。
4.类选择器
类选择器根据标签上设置的calss属性进行匹配优先级次与id选择器和伪类选择器和属性选择器同级。
5.属性选择器
属性选择器,通过标签上设置的具体属性来进行匹配,可以应用正则表达式规则。
6.伪类选择器
- 不基于元素和属性定位元素
- 伪类类型
- 状态型伪类
- 结构型位列
1状态型伪类
2结构型伪类
7.选择符
颜色
- 通过color属性设置
- color属性的值可以设置为多种不同的颜色类型
1.RGB颜色
使用6位16进制来分别表示Red、Green和Blue三种颜色每种颜色各占2位16进制位。
2.HSL颜色
3.alpha透明度
字体
1.font-family
font-family属性用来设置元素的字体族CSS定义了以下五种通用字体族:
- 衬线字体字形宽度各异而且又衬线。因为字体不同字符的尺寸不同因此宽度有差异。
- 无衬线字体字体中的字形宽度各异而且无衬线。
- 等宽字体字形宽度一样。一般用于表示编程代码或者表格数据。这种字体各个字符在横向上所占的空间使用一样的。
- 草书字体模仿人类笔迹或手写体。通常在笔划末端有较大的花饰而且比衬线字体华丽。
- 奇幻字体没有统一的特征。
ps.建议在字体列表的最后加上通用字体族尽量将英文字体放在中文字体之前因为有些中文字体可能包含因为字体而导致英文字体没有生效。
2.font-size
font-size属性被用来设置元素的字号。它的值可以是关键字、单位长度和百分比。当元素的font-size被设置为百分比的时候它的大小是相对于父元素计算的。
3.line-height
line-height指行的基线之间的距离与字号无关决定着元素所在方框的高度是增是减。line-height并不会增加或减少行之间的纵向空间它实际上控制的是行距即line-height的值与字体高度之差。
4.text-align
text-align属性被用来设置元素内行内元素的对齐方式。常用属性有center、left、right和justify。默认值为left
5.space
主要有letter-spacing 和 word-spacing两个属性用来指定字符或单词之间的字符间距。
6.text-indent
文字缩进属性只对元素内第一行文本做缩进处理通常用于实现首行缩进。
7.text-decoration
设置元素的装饰线。
8.white-space
设置元素的换行方式。
总结
本次课程主要介绍了CSS的一些基本概念和一些常用的CSS属性同时还介绍了一些CSS的调试技巧。学好CSS的关键不单只是对各种不同属性的特性了然于心同时也需要我们保持一颗好奇心持续关注和学习更多的特性。