# CSS
css主要用于定义页面效果
所有的页面效果属性：https://main.eagleslab.com/css3/
## 应用方式
- 行内样式
- 将css属性，直接写在标签style属性中
- 只适用于简单的样式，如果比较复杂，就会难以维护
```html
欢迎登录
```
- 内部样式
- 在head标签中写上style标签，并且在标签内写上css
- 必须要有选择器，用于选择生效的范围
- 标签选择器，直接写标签名
```html
```
- id选择器
- 在标签中可以加上id属性，用于标识唯一的元素
- 需要在对应的标签加上id属性
- 用#在id前作为选择器
```html
Document
```
- class选择器
- 需要在对应的标签加上class属性
- 在前面加上.
```html
Document
```
## 布局
- div标签
- 本身没有任何的效果，用于将多个标签组合
- 往往需要搭配id、class选择器和css一起使用
- 会占据一整行
- span标签
- 本身没有任何的效果，用于将多个标签组合
- 往往需要搭配id、class选择器和css一起使用
- 不会占据一整行
如果想要将一些元素作为一个整体进行布局，可以加上div
```html
Document
```
## 伪类选择器
当触发某种行为的时候，应用的css样式
### focus
当文本框获取光标的时候，会应用的样式
```css
.input_text:focus {
width: 220px;
border-radius: 30px;
border-color: blue;
}
```
现在动画比较生硬，可以通过设置延迟来改善
```css
.input_text {
/* 省略之前的样式 */
transition-duration: 0.5s;
/* 增加0.5s的改变延迟 */
}
```
### hover
当鼠标停在上面的时候
```css
#login_btn {
/* 省略之前的样式 */
transition-duration: 0.5s;
/* 增加0.5s的改变延迟 */
}
#login_btn:hover {
transform: rotate(360deg);
}
```
效果如下
## 盒子模型
在html中，每一个元素都有盒子模型
- 盒子中间是内容
- padding:内边距，内容与边框的距离，调整元素内部的布局
- border:边框
- margin:外边距，边框外面的距离，主要调整元素之间的布局
