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

1 CSS是什么？

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

h1{
    color: red;
    font-size: 14px;
}

h1-选择器
color,font-size-属性
red,14px-属性值
color:red;-声明

CSS如何工作？

加载HTML；

解析HTML（加载CSS，解析CSS，添加样式到DOM树）；

创建DOM树；

展示页面。

2 页面中使用CSS

内联-直接在标签内写style属性中；
嵌入-嵌入HTML标签中；
外链-放在一个单独的文件中。（推荐使用，可以实现内容和样式的分离）

3 CSS语法

3.1 CSS选择器

找出页面中的元素，以便给他们设置样式；
使用多种方式选择元素；
- 按照标签名、类名(.class 常用)或ID(#id 尽量唯一)；
- 按照属性；
  - [disabled]，有这个属性就会选中；
  - input[type="password"] 属性值等于它才会被选中.
- 按照DOM树中的位置。
伪类选择器
- 不基于标签和属性定位元素
- 几种伪类
  - :link——链接访问前
  - :visited——链接访问后
  - :hover——鼠标悬停
  - :active——鼠标点击后
  - :focus——聚焦后
- 结构伪类
  - :nth-child(n)——选择是其父标签第n个子元素的所有元素。3n+1
  - 注:<a href="#myp"> 我的标签 </a>

.div-effect:hover{
  background-color: blue;
  transform:scale(1.2);
  transition: 200ms;
}

悬停时改为蓝色、放大1.2倍、转换时间200毫秒。

组合

直接组合 AB 满足A同时满足B 例如：input:focus
后代组合 A B 选中B，如果它是A的子孙例如：nav a
亲子组合 A>B 选中B，如果它是A的子元素例如：section>p
兄第选择器 A~B
相邻选择器 A+B

选择器组

多个选择器之间加逗号分隔
选择器的特异度

3.2 颜色

3.2.1 预定义的颜色值

black,white,red,lightblue...

3.2.2 16进制表示法

使用6位十六进制数表示颜色，比如#ADD8E6。
其中第1、2位表示红色，第3、4位表示绿色，第5、6位表示蓝色。
简写方式 #ABC，等价于#AABBCC。

3.2.3 RGB表示法

rgb(133, 43, 22)
第一个数表示红色、第二个数表示绿色、第三个数表示蓝色。

3.2.4 取色方式

网页里的颜色，可以在chrome的调试模式下取；
可以利用Snipaste截图软件获取：
- F1截屏；
- 按shift切换16进制格式与RGB格式；
- C复制颜色。

3.2.5 HSL表示法

Hue：色相H
- 指颜色的基本属性，如红色、绿色；
- 取值0-360.
Saturation：饱和度S
- 指色彩的鲜艳程度，越高越鲜艳；
- 取值0-100%
Lightness：亮度L
- 指颜色的明亮程度，越高颜色越亮；
- 取值0-100%

div{
  color: hsl(120,50%,50%);
}

3.2.6 透明度

rgba(133, 43, 22, 0.9)第四个数表示透明度。
hsla(160, 90%, 90%, 0.5)同样。
其实表示的是不透明度，1的时候不透明，0的时候透明。

3.3 字体

font-size：字体的大小；
font-style：字体样式；
1. italic：斜体；
2. oblique
font-weight：字体的粗细宽度1-1000；
font-family：字体。
1. 可以指定多个
2. 最后最好要添加通用字体
3. 英文字体写在中文字体之前

3.4 文本

text-align
- 定义行内内容如何相对它的父元素对齐。
- text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。
line-height
- 用于设置多行元素的空间量，如多行文本的间距。
- 对于块级元素，它指定元素盒的最小高度。
- 对于非替代的inline元素，它用于计算行盒line box的高度。
- 长度单位：
  - px--设备上的像素点；
  - %---相对于父元素所占的百分比；
  - em--相对于当前元素的字体大小；
  - rem-相对于根元素的字体大小；
  - vw--相对于视窗宽度的百分比；
  - vh--相对于视窗高度的百分比。
letter-spacing
- 用于设置文本字符的间距。
text-indent
- 用于定义一个块元素首行文本内容前的缩进量。
text-decoration
- 设置文本的修饰线外观（下划线、上划线、删除线、闪烁）。
text-shadow
- 为文字添加阴影。
- 可以添加多个阴影，阴影值之间用逗号隔开。
- 每个阴影值由元素在X、Y方向的偏移量、模糊半径和颜色组成。

div内元素竖直居中、水平居中？

div{
    text-align: center;
    line-height: 200px;
    height: 200px;
}

去除链接的样式？

a{
    text-decoration: none;
}

4 调试CSS

右键点击页面，选择“检查”；
使用快捷键Ctrl + Shift + I

5 CSS布局

布局是什么？
确定内容的大小和位置的算法；
依据元素、容器、兄弟节点和内容等信息计算。
布局相关技术？
常规流（行级、块级...）、浮动、绝对定位。

5.1 盒子模型

padding 内边距
border 边框
margin 外边距
（默认）content-box中width,height指的是内容content的宽度和高度。（顺序：上右下左）
（通常使用）border-box中width,height指的是border边框的宽度和高度。

*{
    box-sizing: border-box;
}

5.2 几个属性

overflow溢出怎么办？
- visible展示
- hidden隐藏
- scroll滚动
- auto
display行or块？
- block 块级盒子
- inline 行级盒子
- inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不被拆散成多行。
- none排版时完全被忽略。

5.3 布局方式

flex布局
grid布局
见MDN文档

前端（2）CSS｜ 青训营笔记

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

1 CSS是什么？

2 页面中使用CSS

3 CSS语法

3.1 CSS选择器

3.2 颜色

3.2.1 预定义的颜色值

3.2.2 16进制表示法

3.2.3 RGB表示法

3.2.4 取色方式

3.2.5 HSL表示法

3.2.6 透明度

3.3 字体

3.4 文本

4 调试CSS

5 CSS布局

5.1 盒子模型

5.2 几个属性

5.3 布局方式

前端（2）CSS｜青训营笔记

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