认识css|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的的第二天，今天学习css基础。
本堂课重点内容
- 使用方式
- css工作原理
- css选择器
- 颜色设置
- 字体设置
详细知识点介绍
认识css
使用方式
- 外链
- 嵌入
- 内联：不推荐
CSS工作原理
CSS选择器
-
通配选择器
* -
标签选择器
h1 -
id选择器:唯一性，
#id -
类选择器：
.done -
属性选择器：
input[type="password"]:指定对type属性值为password的input输入框做样式修改
a[href^="#"]: 指定对以#开头的a链接做样式修改
a[href$=".jpg"]: 指定对以$结尾的a链接做样式修改\
-
伪类选择器
a:link a:visted a:hover a:active
:focus
li:first-child li:last-child li:nth-child(2) -
伪元素选择器:
:: -
和伪类选择器的区别
伪类选择器可以有多个，而伪元素选择器只能有一个
伪类选择器是基于DOM的选择器，不会创建新的元素；而伪元素选择器会创建新的元素 -
选择器组合方式
开发中常用组合选择器修改样式
颜色设置
-
rgb(r, g, b)：取值从0-255，都为255就是白色，都为0就是黑色
-
#fff：使用16进制表示，例如左侧就是设置三原色的值都为16 -
HSL
-
alpha
rgba(255, 0, 0, 0.3)：同rgb，增加了不透明度alpha，为1时不透明，为0时透明
hsla(0, 100%, 50%, 0.3)：同hsl -
单词颜色
字体设置
-
字体样式font-family 通用字体族
-
字体大小font-size
-
关键字 small
medium
large -
长度 px
em -
百分数
相对于父元素字体大小
-
-
font-style
italic斜体
normal默认非斜体 -
font-weight
取值100到900，默认是400
取值normal或者bold -
line-height
定义：两行文字的基准线之间的距离
设置为数字：表示字体大小的多少倍 -
letter-spacing
-
word-spacing
-
white-space
- normal：默认，多个空格只保留一个
- nowrap：强制不换行
- pre：有几个空格，就保留几个空格
- pre-line：合并空格，保留换行
课后个人总结
今天认识了css，了解了它的基础，明白要充分利用MDN和W3C CSS规范。
