HTML--and--ccs3

..D主流浏览器有五大款，分别是IE (Trident内核)、火狐Firefox (Gecko内核)、

谷歌Google Chrome (Webkit内核)、苹果Safari (Webkit内核)、欧朋Opera (Presto内核)
四大内核：
1、-moz-代表firefox浏览器私有属性

2、-ms-代表ie浏览器私有属性

3、-webkit-代表safari、chrome私有属性

4、-o-代表Opera

CSS权重:
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，
权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

CSS:
语法：
选择器{
属性1：属性值
属性2：属性值
}
css样式：
1、行内样式：百度，直接写在html文件的标签内部
2、内部样式：写在标签里面，
3、外部样式：单独再web项目的css文件中创建，在html文件中使用link标签进行链接 (常用)

标签:before{
content:“添加你需要的东西 出现在标签前面”
}
标签:after{
content:“添加你需要的东西 出现在标签后面”
}

选择器：
标签选择器：

、

、
类选择器(class)：

、使用.选择器名称 (常用)
id选择器(id)：

、使用#选择器名称

层次选择器:
E F{} 后代选择器 (e元素内包含的所有元素 )
E>F{} 子选择器 (e元素的子元素)
E+F{} 相邻兄弟选择器 (e元素后面最近的一个兄弟元素)
E~F{} 通用兄弟选择器 (e元素后面所有的兄弟元素)

结构伪类选择器:
div:first-of-type{ }父元素内具有指定类型的第一个元素
div:last-of-type{ }父元素内具有指定类型的最后一个元素
div p:nth-of-type(){ }父元素内具有指定类型的第N个元素

属性选择器:
语法 p[name]{ } 选择具有属性name的P元素
p[name=val]{ }选择具有属性name的p元素,并且属性值为val (val区分大小写)
p[name^=val]{ }以val开头的任意字符串
p[name$=val]{ }以val结尾的任意字符串
p[name*=val]{ }字符串val与属性值中的任意位置匹配

用来组合文档中的行内元素。
font-family:“仿宋” ：改变字型
font-style: italic; 字体倾斜
font-size: 20px：改变字体大小
font-style:italic：改变字体风格
font-weight: 900：改变字体粗细
color:改变颜色

text-align: center(居中)：水平居中，横向(left文本靠左)(right文本靠右)(justify两端对齐)
text-indent: 1em;首行缩进 1em=一个字体的宽高
line-height: 300px;设置行高

line-height==height 居中

vertical-align: middle;垂直文本
text-shadow: 颜色 x轴 y轴 阴影模糊程度;
text-decoration : underline (下划线) overline (上划线) line-through (删除线)
{ text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden; } 隐藏溢出字符,用…显示

cursor: Pointer; wait ,Auto 鼠标光标样式
选择器:hover鼠标悬浮后出现特效
选择器:active鼠标单击未释放特效
a:link {color: blue} /* 未被访问的链接
a:visited {color: blue} /* 已被访问过的链接
a:hover {color: blue} /* 鼠标悬浮在上的链接
a:active {color: blue} /* 鼠标点中激活链接

   a{text-decoration: none;}  //去除链接下划线

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

 list-style: none;去掉列表前面的东西

background-color：背景颜色
background-image: url(…/img/1.png);背景图片
background-repeat: repeat-x(水平平铺) repeat- y(垂直平铺) 背景图像重复显示
background-repeat:no-repeat; 取消背景图片重复显示
background-position: 20px(水平) 30px(垂直) 背景图像位移(-20反向位移)
background-size: Xpx Ypx;背景图像大小
opacity: 0.5;调整透明度X值范围0~1 (设置opacity元素的所有后代元素会随着一起具有
透明性，一般用于调整图片或者模块的整体不透明度)
background: rgba(0,0,0,0.6); (使背景透明,文字不透明)
div:块级元素，双标签

a{
display:table-cell; 图片居中
******** vertical-align: middle;文本垂直
text-align: center;居中} //必须建立在div的盒子基础下居中

盒子模型：
border建立在div基础之下
border:线条粗细px 线条风格 线条颜色(solid实线)(dotted点线)(dashed虚线)
(double双线)
width:100%;给盒子设置长度
height:60px;给盒子设置高度
border-top-color:#0000FF; 盒子上边框颜色
border-bottom-color:#0000FF; 盒子下边框颜色
border-left:none; 清除左侧边框
border-width:2px 5px 8px 16px 盒子边框线条粗细
margin-top: 上外边距;
margin-bottom: 下外边距;
margin-left: 左外边距;
margin-right: 右外边距;

padding-top: 上内边距;
padding-bottom: 下内边距;
padding-left: 左内边距;
padding-right: 右内边距;

圆角边框：
border-radius：左上角px 右上角px 右下角px 左下角px
border-radius：50% 圆形，前提宽和高必须一样

半圆：
上半圆、下半圆，宽度是高度的2倍
左半圆、右半圆，高度是宽度的2倍
扇形：
三同：宽度、高度、圆角半径相同
一不同：圆角半径取值不同
阴影：

   box-shadow: inset(盒子内部阴影) X轴px Y轴px 范围px 阴影颜色;

块级元素(block)：

独占一行 内联元素(inline)： 行级块元素: display属性: block：具有块级元素属性，会自动换行 inline：具有内联元素属性，不会自动换行 inline-block：不但具有块级元素属性还具有内联元素属性 none:不会被显示

浮动:
float : left ; 元素左浮动
float : right; 元素右浮动
clear: left; 清除文本左侧浮动
clear: right; 清除文本右侧浮动
clear: both; 左右两侧 不允许浮动

解决边框塌陷：
在父级元素添加伪元素after
选择器: :after{
content:"";//添加元素为空
display:block;//设置元素为块级元素
clear：both;//清除两侧浮动
}
伪元素: 每个标签都有伪元素, 默认是行内元素,
要想展示出来需要display:block;//设置元素为块级元素
选择器: :before 在标签的最前面
选择器: :after 在标签的最后面

position:定位
position:relative:相对定位，相对元素本身位置
相对定位：相对自己原来的位置发生偏移，不会脱离文档流，
不会删除它原来在文档流中占据的位置，且后面是元素不会填补空位

position:absolute:绝对定位，相对于浏览器左上角
绝对定位：相对它的父元素发生偏移（而且这个父元素必须设置了position属性，
如果父元素没有position属性，则从最近的父元素开始找，直到找到body为止），
会脱离文档流，后面的元素会填补它原来的位置。
position:fixed:固定定位，和absolute相同
在网页定位里面，定位方向是一个镜像文件
z-index:层级关系，只能在有position使用
开发当中父级盒子使用relative, 子级盒子使用 absolute定位

凡是设置了position:absolute; flot:left/rigth;元素,系统打内部把元素自动转换
成 inline-block 行级块元素

变形函数：
动画语法: transform:translate(-12px) scale(1.1);
平移：
transform:translate(x,y);
transform:translateX(x);
transform:translateY(y);
缩放：
transform:scale(放大或者缩小的倍数)
倾斜：
transform:skew(x度数deg，y度数deg)
transform:skewX(x度数deg)
transform:skewY(y度数deg)
旋转：
transform: rotate(30deg);值为正时，顺时针旋转，值为负时，逆时针旋转

过渡属性：
语法 : transition:all 1s linear;
transition: 全部值 过渡到完成的时间s 过渡的速度 延时的时间s;
过度的速度：
all 时间(s/秒数) 过渡的速度 延迟时间
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）

高级动画的属性：1、@keyframes 2、animation
@keyframes : 规定动画
@keyframes name{ 设置关键帧
0%{
width: 0;
transform: translateX(0);
}
25%{
width: 292px;
transform: translateX(0);
}
50%{
width: 592px;
transform: translateX(0);
}
75%{
width: 792px;
transform: translateX(0);
}
100%{
width: 992px;
transform: translateX(0);
}
}
animation : 所有动画属性的简写属性,除了 animation-play-state 属性
animation-name:规定@keyframes 动画的名称.
animation-duration:规定动画完成一个周期所花费的秒或毫秒. 默认是0
animation-timing-function:规定动画的速度曲线 默认是"ease"
animation-delay: 规定动画何时开始 默认是0
animation-iteration-count: 规定动画被播放的次数. 默认是1
animation-direction: 规定动画是否在下一周期逆向地播放.默认是
“normal”"alternate"动画应该轮流反向播放
animation-play-state: 规定动画是否正在运行或暂停. 默认是running
animation-fill-mode: 规定对象动画时间之外的状态

animation-direction：
animation-direction:normal | alternate;
值:normal 默认值. 动画应该正常播放
值:alternate 动画应该轮流反向播放
animation-play-state:
值: pausrd 规定动画已暂停
值: running 规定动画正在播放
animation-fill-mode:
值: none 不改变默认行为
forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)
backwards 在animation-delay 所指定的一段时间内,在动画显示之前,应用开始
属性(在第一个关键帧中定义)
both 向前和向后填充模式都被应用

html：超文本标记语言
超文本：文字、视频、图片、动画、音频
标记语言：标签，网页都是由标签组成
标签：双标签、单标签
网页组成部分
1
2网页头部
3网页主体

双标签：

这个标签只能用在head里面

标题标签

段落标签

不管放到哪里，都是要换行 是一个行内标签，用来组合行内的多个元素 字体加粗 字体倾斜 标签定义文档中已删除的文本 单标签：
强行换行

---

水平线标签 特殊符号： 空格：  大于：> 小于：< 引号："（双引号） 版权符号：©

图片标签：
<img src=“图片路径”/ alt=“图片替代文字” title=“鼠标悬停文字” height=“图片高度，
单位为px” width=“图片宽度，单位px”>
链接标签：
链接名字

同页面中的锚链接：


块元素：无论元素多少，独占一行，p h1
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)

列表：
1.无序列表：小黑点:disc（默认值）；
方块:square；
空心圆:circle。

• 内容1
• 内容2
• 内容3

2.有序列表（呈现出来的是一个有顺序的数字排列） 有序列表其属性 type start type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母。value1表示 有序列表项目符号的类型。

type类型 描述
Type=1 表示列表项目用数字表示（1,2,3……）
Type=a 表示列表项目用小写字母表示(a,b,c…)
Type=A 表示列表项目用大写字母表示(A,B,C…)
Type=i 表示列表项目用小写罗马数字表示(i,ii,iii….)
Type=I 表示列表项目用大写罗马数字表示(I,II,III…)
（2）、start是编号开始的数字，如start=2则编号从2开始，如果从1开始可以省略。
value2表示项目开始的数值。

或是在

• 标签中设定value＝"n"改变列表行项目的特定编号，例如
• 。
  使用这些属性，把它们放在
  1. 或
  2. 的的初始标签中

• 1. 内容1
  2. 内容2
  3. 内容3
  3.定义列表:自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项 前没有任何项目符号

  标题1

  第一项

  第二项

  表格：

  表格里面的标题
  一	二
  四	他

  主体头部
  主体页面
  主体底部

  表单:

  表单标签

  文本框：

  密码框：

  单选框：

  复选框：

  列表框：
  

  湖南 湖北 北京

  按钮：
  

  <input type=“image” name=“j” value=“图片按钮”
  src=“img/005vp4nfgy1fx0fu2gzvnj305i05g0sj.jpg”
  width="200px"height=“20px” />

  多行文本域：
  

  上传文件：
  
  
  邮箱：会对我们输入的邮箱地址进行初级认证
  网址：对网址进行初级认证
  数字：
  搜索框：

  required=“required” ：空白提示
  placeholder=“请输入手机号码” ：提示文字
  pattern="^1[358]\d{9}"：正则表达式
  readonly:只读
  disabled:禁止