这是我参与「第四届青训营」笔记创作活动的的第2天

前端第二天---理解CSS(基础)

CSS是什么？

JavaScript(行为)、Css(样式)、HTML(内容)123

Cascading Style Sheets
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

基础代码样子:

H1{
        color: white;
        font-size: 14px;
}

h1是选择器Selector，color是选择器Property，white是属性值Value，font-size: 14px;属性和属性值在一起是声明Declarationa

在页面中使用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">Example Content</p>

一般建议使用外联写法，实现结构与样式相分离。

CSS是如何工作的

1.选择器 Selector

找出页面的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名
- 按照属性
- 按照DOM树种的位置

1.1 通配符选择器

在CSS中，通配符选择器使用"*"定义，它表示选取页面中所有元素（标签）。

1.2 标签选择器

1.3 id选择器

id需要是唯一的

1.4 类选择器

类选择器在HTML中class属性表示，class属性可以出现多次

1.5 属性选择器

通过这个元素的属性或者属性值去选中这个元素属性是一个特定的值的时候被选中

1.6 伪类（pseudo-classes）

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类

1.7 组合

1.8 选择器组

2. 颜色-RGB

颜色的两种写法

也可以直接指定颜色

2.1 颜色-HSL

2.2 alpha 颜色透明度

是1的时候表示不透明，是0的时候是透明

3. 字体 font-family

常用字体

3.1 字体大小 font-size

关键字
- small、medium、large
长度
- px、em
百分数
- 相对于父元素字体大小

3.2 字重 font-weight

3.3 行高 line-height

可以把他们统一写在一起

3.4 对齐 text-align

text-align:"left";左对齐
text-align:"right";右对齐
text-align:"center";居中对齐
text-align:"justify";使文本的两端都对齐在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。对最后一行不生效

3.5 文字间距控制 spacing

letter-spacing: 10px;每个字符之间的间距
word-spacing: 10px;每个单词之间的间距

3.6 首行缩进 text-indent

text-indent: 50px;

3.7 文字装饰 text-decoration

text-decoratio: none;
text-decoratio: underline;
text-decoratio: line-through;
text-decoratio: overline;

3.8 文字空格、换行问题

white-space

<p class="text">This is a paragraph.     The text is 
aplitted into two lines.</p>

white-space: normal;展示一个空格，把多个空格合并掉。
white-space: nowrap;强制不换行。
white-space: pre;保留所有的空格和换行。
white-space: pre-wrap;保留空格，自动换行。
white-space: pre-line;合并空格，保留换行。

4. 调试CSS

右键单击页面，选择检查
使用快捷键
- Ctrl + Shift + I (Windows)
- Cmd + Opt + (Mac)

前端第二天---理解CSS（基础）｜ 青训营笔记