CSS样式
行内样式
直接将style属性写在标签里面，不建议使用
内部样式
将style标签写在head标签里面
外部样式
<link rel="stylesheet" href="main.css"/> 外部样式引入
@charset "utf-8"; css开头加
选择器
标签选择器
直接输入元素的类型
id 选择器
id选择器（id用来取名）：通过 #语法来选择
类选择器
类选择器（class用来取名）：通过 .语法来选择
后代选择器
后代选择器：通过中间空格来选择控制所有后代，如果用>隔开，那么就只影响直系。
交集选择器
交集选择器,相交的部分就是要设置属性值的标签
1,格式:
选择器1选择器2…{
属性:值;
}
2,注意点:
(1),选择器之间没有任何的连接符号
(2),选择器可以是标签名称,也可以是id、class名称
(3),交集选择器仅仅是了解，不常用
并集选择器
实现多个选择器共用同一属性：值
1,格式:
选择器1,选择器2,…{
属性:值;
}
2,注意点:
(1),选择器之间利用,连接
(2),选择器可以是标签名称,也可以是id、class名称并集选择器
优先级：id>类>标签
属性：值
| 属性 | 值 | 作用 |
|---|---|---|
| font-weight: | bold; | 字体加粗 |
| text-align: | center; | 文本水平居中 |
| font-style: | italic; | 斜体 |
| line-height: | 与父元素一般高 | 通过行高进行垂直居中 |
| letter-spacing: | ; | 字符间距 |
| text-decoration | : underline; | 文本修饰下划线 |
| text-decoration | : overline; | 上划线 |
| text-decoration: | line-through; | 中划线 |
| text-decoration: | none; | 去掉线 |
| text-indent: | ; | 文本缩进 |
| -webkit-text-stroke: | 1px red; | 文本描边 |
| text-shadow | : 10px 5px 1px black; | 文字阴影 |
| 依次作用为 | 右移动10，下移动5 ，字体清晰度，越小越清晰 | |
| Margin： | 0 auto | 水平居中 |
| border： | 1px solid red | （边框粗细 实心 红色) |
| Padding: | 0 | （内边距） |
| Margin: | 0 | （外边距） |
| Border-bottom: | 1px solid red | 只加下边框 |
| 鼠标覆盖. | a:hover{} | |
| display: | inline-block; | 将当前元素变为既是行级也是块级 |
| -webkit-transition: | width 1.5s,opacity 1.5s; | 过度时间 |
| border-radius | ; | 数值越大越圆 |
| background-image： | url（“ ”） | 背景图 |
| Background-repeat: | “no-repeat | (不平铺） |
| Repeat-x | （横向平铺） | |
| Repeat-y | （纵向平铺） | |
| Background-size： | （可以加像素、百分比改变图片大小，容易拉 伸） | |
| Cover | 让当前背景图恰好覆盖当前容器，图片不能拉伸，图片可 能丢失一部分 | |
| Contain | 让当前容器恰好容纳当前背景图，图片不拉伸，容器可 能会有空白 | |
| Background-position： | 10px 10px | （将背景图上下左右移动） |
| overflow | ：hidden | 超出部分隐藏掉 |
| transform: | scale(1.5); | 按比例缩放 |
| cursor： | pointer | 鼠标放上去变手 |
盒子模型 box model
margin 写一个值表示四个方向 两个第一个上下第二个左右，三个上右下左，按瞬时针方向
当周围没有参照物时默认以左上为参考系，右下没有参照物，则
margin-right margin-button 没有效果、
1.标准流
2.非标准流
float ：right（left）
3.清除浮动的影响
增加兄弟节点 clear：left right both；
定位
| position： | 作用 | 注释 |
|---|---|---|
| relative | 相对定位 | 相对于原来本身的位置定位，其所占空间保留 |
| absolutely | 绝对定位 | 相对于第一个采取定位的父元素来定位，原来的位置不再保留 |
| fixed | 固定位置 |
属性：值的一些用法
| 属性 | 值 | 作用 |
|---|---|---|
| overflow: hidden;text-overflow: ellipsis;white-space: nowrap; | 实现文本省略号的出现 | |
| Box-shadow | ：5px 5px 1px black； | 水平 垂直 模糊 实现阴影 |
| Div: | active{} | 鼠标点击 |
background:| url("…/w2d3/sub-btn.jpg") no-repeat;|背景的属性可以写在一起
背景图的渲染
background-clip: ; 裁剪
transfrom
| transfrom： | 作用 | 注释 |
|---|---|---|
| TranslateY() | 沿y轴移动 | |
| Translate（100px,200px） | x轴100px y轴200px | |
| Scale(1.5) | 放大1.5倍 | |
| ScaleX | ||
| scaleY | ||
| Rotate | 旋转 默认z轴 | |
| rotateX | ||
| rotateY | ||
| rotateZ | ||
| skew(100deg); | 斜切 | |
| skewX() | 沿x轴 | |
| skewY() | 沿y轴 |
Perspective：150px；3D效果加给父元素
动画
animation-name: myframes; 动画名称
animation-duration: ; 动画持续时间
animation-delay: ; 动画开始时间，动画延迟时间
animation-iteration-count: ; 动画播放次数 infinite无限次
animation-direction: alternate; 动画下次倒着播放
animation-fill-mode: forwards; 规定对象动画时间之外的状态
animation-iteration-count: infinite ; 动画一直循环下去
@keyframes myframe{ 定义动画，用百分比，起始点明确
from{
}
to{
}
}
响应式布局
<meta name="viewport"content="width=device-width,initial-
scale=1.0,maximum-scale=1,user-scalable=no"/>
<meta name="format-detection" content="telephone=no,email=no"/>
响应式布局必写的前缀，写在<title></title>下面
@media screen and (max-width: 640px){ 最高宽640px
. div1{
background-color: red;
height: 300px;
}
}
三种响应式布局的写法
1.对需要响应式布局的对象进行操作
2.创建一个新的css文件
3.直接引用两个css文件