默认字符集（欧洲字符集）
css复习
1层叠样式表 好处，重复使用。
body中通过样式选择器更改网页，多级元素都会影响页面
注意元素的之间的影响
外联外部建立一个css文件夹 加link rel=“stylesheet”文档类型 样式表文件。
href 文件路径。
内连： style
内嵌：内部写style
同一种样式只显示一种。
。
2选择器
通配选择器*效率比较低。 所有的元素都控制
将所有利用全部一起单独计算。有其他的元素在更改。
元素选择器，
选择器作用效果不同。
id选择器>class类选择器》元素》通配
一个class可以匹配多个类选择器
包含选择器{
div子元素
受到父元素影响
组合的影响。
}
6伪类选择器
div：first—letter第一个字符
-改变
样式改变
颜色
16进制
rgb定义颜色
三种基础色可以用整数 red/green/blue
opacity:0.0-1.00 设置透明度。
rgb的扩展
background -color：rgba（255，0,0,0.1）
0.1为透明度值范围与opacity相同。
字体
css3
italic；斜体
font- weight：字重
艺术字体
font-family：“”：插入不同字体文件使用不同文字。
font-size：文字大小
长度{
绝对和相对 px与em
}
8/5笔记
text-decoration:underline:下划线
cursor ：pointer；
设置手形
js的链接：
onclick=“loncation.href”='链接'
盒模型
tr没有边框
table td，table th{
}
合并边框：
border--collapse：collapse；合并边框 默认值separate 代表分离collapse合并
设置宽度用百分比吧，基于父元素。
9/5笔记
页面布局
满足pc和移动端。
固定宽度，根据宽度来决定内容。确定界面
界面设置开始为1024。
设计之间有一定的数值
960px(ˇ?ˇ) 效果比较好可以等分可以等比例划分..
有间隙距离 通过边距划分。
边距设置“内边矩：
换行 ”
文字间距：
单词间距。和字母间距
Word -spacing: :
间距单词或者空格的间距被放大
letter-spacing：
单个字体之间间距
、
固定宽度：
基础界面
margin：0
padding：0
内外边距为0
居中margin：0 auto
float：
漂浮。
font-family：字体样式
content-left：
min：给出最小
max-：给出最大
5/12
定位----自然----文档流
定位
position
static按文档依次排布】
相对
relative：
left 强于right
top强于bottom
绝对定位 absolute
脱离文档流： 绝对定位的坐标平移的坐标原点是以有定位属性的父元素来确认的，所有的都没有定位默认以页面顶部的左上角。
opacity：
透明度。
z-index： 可以在上层显示
固定定位
{ position ：fixed：
}
float : 浮动
overflow；hidden 溢出隐藏
overflow：scroll 添加滚动条
裁剪
clip：rect（上，右，下，左） 下边值大于上
5/15、
二级导航：
margin ：0 auto：居中显示。
display：
list-style-none：去除小点
float ：left：
改变排列方式横排。
line-height：：：：行高
cursor：改变鼠标样式：
脱离文档流：
绝对定位：
二级标题{
padding-left：0；
list-style ：none：
position ：a 绝对定位
隐藏起来
display ：none ；
显示出来：
display ：block
1 长
宽
父元素加相对定位
}
}
加缩进
text-indent：缩进
5/16日
clear：both ：清除浮动影响。
select >
option：
选择框和 选择栏
5/17
HTML规范：HTML4与HTML5 标准规范2014年 确定
htpp 超文本协议 2.0规范
一支持网页多媒体
二canvas画布 画图和绘制动画
三维，图形及特效。
语义话标签 HTML中内容进行分类
新表单 标签
增加离线储存
强大web的表现特性
video 视频 加控件 controls=controls controls
第二种控制大小
video controls width sype=“audio/mp3” 格式
source src=“ 路径”
autoplay 自动播放
audio 音频
svg矢量图
header 头部
nav 导航、
article 文章部分
section 文章分分段
asised
测边编栏
离线本地储存
localstorage 储存不限制时间
input 的格式{
URL 地址 http//
input type=“submit" 提交
Range 百分比 值的范围1-100 。
color 弹出颜色框 颜色选择器 传递16进制的颜色
date 调节时间与日期
}
新表单{、
datalist{
input type=“text”list=“infos"；
datalist id=infos:
option=
}
5/18
css3 介绍
模块化、、、改变
web 前端模块化发展。 框模型。 【a控制透明度】
支持多个背景
2D转换
3D转换
rotateX（）
rotateY()
css 动画转换
队列排版
用户界面调整
字体系统
@font-face
css3媒体查询
css3强大特效实现。
box-shadow 阴影 长度length{2-4个} color颜色 {box-shadow：（1px 水平偏移值 大于0向右 小于0向左 ）（2px 垂直偏移度 大于0时向下）
（3px 阴影的模糊度 越大越模糊 且影响扩大） （4px阴影大小范围 值越大阴影越大） red 默认黑色}
box-shadow ：inset （阴影范围从外部到内部改变）
border-radius 圆角{
长度或者百分比吧 不可以为负值 顺时针
}
边框图片
border-image
border-image-slice：27）切割不带单位
border-image-repeat：
背景图片
background -position：center：图片定位
background -size：cover： 等比例缩小图片可能放不下
background-contain：自动出现平铺
rgba “（透明）
background-origin： 从
background-repeat：no-repeat： 去除重复
5/19
线性渐变：
background-linear-gradienet
css代码
渐变度 坐标点 开始颜色到结束颜色
background：gradient （linear ，0 200，0 300 ，from （red），to（blue）） 垂直方向上的渐变
background：gradient （linear ，100 0 ，200 0 ，from （red），to（blue）） 水平方向渐变
环形渐变
{ 半径高度变化 中心到外面
background：radial-gradient（circle，red，blue）；
（ellipse） ：椭圆
}
文本特效：
{
text-shadow 文字阴影
左右 上下 模糊度
text-shadow：2px 3px 2px： 不能有负值
}
text-overflow文本溢出
overflow：hidden；
文本溢出效果
overflow-hidden：隐藏起来；
overflow-auto：增加了滑动条；
text-overflow ：ellipsis 显示对象显示省略号。超出部分不显示并且出现省略号 需要overflow：hidden，这个
设置的前置支持。
而且设置了white-space：代表一行而且不换行。。
强制换行：
white-space：nowrap；
word-wrap：break-Word ；
文本轮廓
outline；；对象外轮廓 边框外部
2D效果
transform：translate（50px ）化 1一个值水平 。二个值上下
transform：rotate（90deg）： 旋转 deg倾斜度。 自旋转转
定点转 加绝对定位
transform -origin：left top； 选择定位位置。
放大或者缩小；
扩大：
transform：scale（倍数）；
scale （负数）；方向相反；
scale（0）；不存在隐藏了
scale（0<x<1）就是缩小。
2D转换
扭曲 斜切扭曲 可以单独确定转换方向
transform：skew（30deg，） 【翻转】
换矩阵
1-水平缩放
2-垂直方向扭曲
3-（1-0之间的数字） 水平扭曲
4-垂直方向的缩放
5-水平平移
6-垂直平移
transform ：matrix（1,2,3,4，5，6）；
3D旋转
transform：rotateY
- -rotateX
5/22
界面效果旋转。以及过渡
过渡有慢慢改变的方式，感受改变的过程。 hover：指定范围的改变
动画不需要触发立即开始动触发。
NO Flash:
css 是效果的改变。
transition：width 2s；
定义过渡在触发过渡：hover：
过渡四个值：
transition-----property 触发过渡效果 默认all代表所有css属性 none取消过渡效果。
--duration过渡持续时间】 时间不能为零执行持续的时间
--timing-function【过渡时间曲线，过渡速度快与慢 默认ease。
动画效果贝塞尔曲线模式。
ease-in由慢到快
ease-out；又快到慢
--delay 【过渡 延迟效果时间的开始时间】
没有节点。
5月23号；
@keyframes 规则
animation
[ animation-name ]： 检索或设置对象所应用的动画名称
[ animation-duration ]： 检索或设置对象动画的持续时间
[ animation-timing-function ]： 检索或设置对象动画的过渡类型 贝塞尔曲线
[ animation-delay ]： 检索或设置对象动画延迟的时间
[ animation-iteration-count ]： 检索或设置对象动画的循环次数 >=1
[ animation-direction ]： 检索或设置对象动画在循环中是否反向运动 infinte 无限循环
[ animation-play-state ]： 检索或设置对象动画的状态。.......................................................................
w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式
声明变化规则
@keyframes aaa1{
from{
（ ）
}
to{
（transform：translate（300px））
}
}
@keyframes aaa1{
0%{
（ ）
}
100%{
（transform：translate（300px））
}
}
text-align：center： 去除小点
5/24hao
animation-fill-mode：forwards 结束后的样式保持状态不变 不加infinite才有作用。
5/25号
transform：过渡动画
transition：自动播放动画 6个设置值
字体样式
印刷体与手写体
ttf字体后缀
@font-face{
font-family：myname （自己自己字体命名）
src:url( 路径）
}
加引用自己定义的字体
------------------------------------------------------------------------------
字体图标
在http协议每加载一张图片页面刷新一次；
采用字体图标库 特殊的字体。
引用字体在显式图标
引用图标库里面的内容。
字体图标不变模糊。
5/26========================================================================
媒体查询
媒体类型
madia type
aural （语音 和语言合成器）
Braille 【盲文触摸装置】
print 【打印设备】
projection【投影设备】
screen 【屏幕设备】
tty 【固定间字符网格】
embossed （分页盲文打印）
设备宽度【device -width】
@import ”路径“
@import url (" 路径")；
缺点加载外部表过慢容易卡。
css3扩展
===============================================================
960px网格系统 多层次等比例划分。
clear 清除浮动。
push和pull 参数 左右宽度
=========================
css框架
怎样使用bootstrap 默认下载dist 目录下的
device 设备
==================================================================================
6.12
补充内容
浏览器的内核不同：引擎也不相同。
渲染模式：
DTD文档对象模式。
===============================================
6.13
less增加变量，函数等功能方便制作主题，扩充，
dist主要引用文件
建立less文件夹js文件夹
引入less文件
先引用less 在引用js
link rel=“stylesheet/less ” href="less/"
less 书写
外部赋值控制效果小于内部效果
@声明变量
.div1{
引用变量数据声明的变量
}
通过控制变量进行控制修改
.mydiv（）{
添加效果
}
div2{
.mydiv( ) ;调用 .没有div里面的样式相当于函数调用；
}
css补充：
优雅降级与渐进增强；
选择器的优先级与权重；