这是我参与「第五届青训营 」笔记创作活动的第2天。
学习的是关于CSS的内容。
三件套中CSS用于美化页面,它可以渲染几乎你任何想要的画面。
CSS的大概的编写方式
h1{ /* 选择器 */
color: #ff0000; /* 声明 */
font-size/* 属性名 */ : 14px; /* 属性值 */
}
我们用选择器选中DOM中的某个或某些标签,对他们的样式进行声明,没有声明的样式会用浏览器默认的样式。
使用CSS
可以在三个地方嵌入CSS
- 外联
<link rel="stylesheet" href="./index.css" />
- 内联
<head>
<style>
h1{
color:#ff0000;
font-size:14px;
}
</style>
</head>
- 行内
<span style="color:#fff;">123123</span>
选择器
- id
- class
- 伪类
- 标签
- 通配符
- 伪元素
- 等等...
选择器权重
id > 类/伪类选择器 > 标签选择器
!important 可以覆盖你的其他样式,慎用,不然会影响代码的可读性和可扩展性。
选择器组合
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | 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 |
颜色
#ff0000十六进制表达 红绿蓝色占比rgb(255,0,0)RGB表达 红绿蓝色占比hsl(0,100,100)HSL表达 色相纯度明度比例
透明度
#ff000055rgb(255,0,0,0.5)hsl(0,100,100,0.5)
文字
- font-family 字体族
- 通用字体族:
- Serif 衬线体
- Sans-Serif 无村线体
- Cursive 手写体
- Fantasy
- Monospace等宽字体
- 通用字体族:
- font-size 字号
- color 字体颜色
- line-height 行高
- letter-spaceing 字间距
- word-spaceing 词间距
white-space
- normal 换行
- nowrap 不换行
- pre 保留代码的换行和空格
- pre-wrap 超行换行,保留空格
- pre-line 保留换行,超行换行,合并空格