第一章 网页的基本结构
1.网页的组成
<!DOCTYPE html> ----- 声明网页,并且简写支持H5
<html></html> ------- 定义网页的内容和属性
<head></head> ------网页的头部,主要是属性和标题
<body></body> ------ 网页的身体，主要是网页的内容和一些脚本
2.网页的样式
CSS加载有三种方法,每种方法的权重不同(内联>内部>外部): 1.内联样式(行间样式) 内联就是在标签中直接更改样式 2.内部样式 在头部标签的<style>标签内写入样式 3.外部样式 使用link标签连接外部的css
3.选择器的权重
选择器的权重(): 1.权重不同的样式规则作用于同一元素时,权重高 的规则生效 2.权重相同的样式规则作用于同一元素时,后声明 的规则生效。 1.!import ---- infinity 2.内联样式(行间样式) ---- 1000 3.id选择器 --- 100 4.类选择器、属性选择器、伪类选择器 ----- 10 5.标签选择器、伪元素选择器 ---- 1 6.通配符选择器和(+ > ~) ----- 0
4.元素的定位
默认为position:static; 1.相对定位：position:relative; 2.绝对定位：position:position; (脱离文档流,不占空间) 3.固定定位：position:fixed; (脱离文档流,不占空间) 4.粘贴定位:position:sticky; 注:在定位的时候，一般使用[left][top][right][bottom]参数 定位还有浮动: 浮动:float 清除浮动:clear
5.元素的类型
1)块级元素 特点:常见的块级元素(自动换行， 可设置高宽 ) 2)行内元素 特点:常见的行内元素（无法自动换行，无法设置宽高） 3)行内块级元素 特点:常见的行块级元素(拥有内在尺寸，可设置高宽，不会自动换行 ) 2.三种元素的转化 1)display:block; 转化为块级元素 2)display:inline-block; 转换为行内块级元素 3)display:inline; 转换为行内元素
第二章:元素特效
1.边框
1)border-radius:top-left top-right bottom-left bottom-right; 设置边框的圆角： border-top-left-radius: 左上角 border-top-right-radius: 右上角 border-bottom-right-radius: 右下角 border-bottom-left-radius: 左下角 2)box-shadow: h-shadow v-shadow blur spread color inset 设置元素的阴影： h-shadow:水平阴影的位置。允许负值 v-shadow:垂直阴影的位置。允许负值 blur: 模糊距离,可省略 spread: 阴影的尺寸,可省略 color:阴影的颜色,可省略 inset ： 将外部阴影(outset)改为内部阴影,可省略 3)border-image: source slice width outset repeat; 设置边框的图片样式: border-image-source: 用于指定要用于绘制边框的图像的位置 border-image-slice: 图像边界向内偏移 border-image- 图像边界的宽度 border-image-outset: border-image-repeat: 用于设置图像边界是否重复(repeat)、拉伸 (stretch)或铺满(round)
2.背景
3.渐变
1)线性渐变（Linear Gradients） background-image: linear-gradient(direction, color-stop1, color-stop2, ...); direction: to bottom、to top、to right、to left、to bottom right或者0deg 2)径向渐变（Radial Gradients） background-image: radial-gradient(shape size at position, start-color, ..., last-color); background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color); shape :cirlcle,ellipse(默认值) size 参数定义了渐变的大小： 1)closest-side 2)farthest-side 3)closest-corner 4)farthest-corner 例如: background-image: radial-gradient(red 5%, yellow 15%, green 60%); background-image: radial-gradient(red, yellow, green); background-image: radial-gradient(circle, red, yellow, green); background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
4.文本效果
1)text-shadow:h-shadow v-shadow blur color; 文字阴影效果: h-shadow:水平阴影 v-shadow:垂直阴影 blur： 模糊度 color：阴影颜色 2)text-overflow:clip|ellipse|string 文字溢出效果: clip:剪切 ellipse:显示省略符号来代表被修复的文本 string:使用给定的字符串来代表被修剪的文本 注意:需要配合overflow:hidden;white-space:nowrap; 3)word-wrap:break-word; 当比较长的文字超出边界，使用可以换行(主要针对英文字母)非中日韩文本的换行规则 4)word-break:break-all|keep-all break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。
5.字体
1.自定义
@font-face{ font-family:myFont; src:url('xxx.ttf'),url('xxx.eot'); }
2.字体的样式
font-size:16px; //字体大小: font-family: //字体样式： font-style:normal|italic|oblique //字体状态: italic：字体的倾斜 oblique:字体的倾斜 font-weight:100-900; //字体的粗细:
第三章:CSS 2D&&3D动画
1.2D转换
transform： 1)translate(0px,0px) 移动: translateX() translateY() 2)rotate(0deg) 旋转: 3)scale(w,h) 放大: scaleX() scaleY() 4)skew(0deg,odeg) 倾斜: skewX() skewY() 5)matrix() 将上述方法的集成: matrix(a,b,c,d,e,f) 平移(e水平&&f垂直)： e和f不带距离单位,分别控制水平和垂直方向的移动 缩放(a水平&&d垂直): a和d分别是水平方向和垂直方向的缩放控制 倾斜(b水平&&c垂直): b和c分别是水平和垂直倾斜,是通过sinθ的最终值 旋转(a,b,c,d)： 通过公式 transform：matrix（cosθ，sinθ,-sinθ,cosθ,0,0); θ为旋转角度
-->