基础CSS笔记|青训营社区
这是我参与「第四届青训营 」笔记创作活动的的第2天
CSS的使用方法
- 外链link （定义在css样式文件中，通过选择器影响对应的标签。）
- 嵌入style （定义在style标签中，通过选择器影响对应的标签。）
- 内联 （直接定义在标签的style属性中。）
选择器
| 选择器名称 | 选择的内容 | 示例 |
|---|---|---|
| 元素选择器（也称作标签或类型选择器） | 所有指定 (该) 类型的 HTML 元素 | div 选择 <div> |
| 通配符选择器 | 选择所有标签 | *{color:red;} |
| ID 选择器 | 具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID） | #my-id 选择 <p id="my-id"> 或 <a id="my-id"> |
| 类选择器 | 具有特定类的元素（单一页面中，一个类可以有多个实例） | .my-class 选择 <p class="my-class"> 和 <a class="my-class"> |
| 属性选择器 | 拥有特定属性的元素 | img[src] 选择 <img src="myimage.png"> 而不是 <img> |
| 伪（Pseudo）类选择器 | 特定状态下的特定元素（link 是指默认状态下，visited 是指访问过后的状态，hover 是指鼠标移动上面的状态，active 是指鼠标按下的状态） | a:hover 仅在鼠标指针悬停在链接上时选择 <a>， |
字体和文本
字体大小 font-size
关键字：small、medium、large
| 单位 | 描述 |
|---|---|
| px | 设备上的像素点 |
| % | 相对于父元素的百分比 |
| em | 相对于当前元素的字体大小 |
| rem | 相对于根元素的字体大小 |
| vw | 相对于视窗宽度的百分比 |
| vh | 相对于视窗高度的百分比 |
字体样式 font-style
关键字：normal（正常）、italic（斜体）
文字位置 text-align
关键字：left（居左）、right（居右）、center（居中）、justify（两侧对齐）
行高 line-height
首行缩进 text-indent
文字装饰 text-decoration
关键字：none、underline 下划线、line-through 贯穿线、overline 上划线
