HTML5+CSS3小结

【【【【【【【【【【【【【【【【【【【【【【【HTML5】】】】】】】】】】】】】】】】】】】】】】】】】】】】】
-------------------------------------------------------------------------------------------------------------
不允许写的结束符的标签：area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、


track、wbr
可以省略结束符的标签：li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th
可以完全省略的标签：html、head、body、colgroup、tbody


在表单type属性中，可以省略双引号，写成单引号，或者不写引号但是中间不可以有空格 不过一般还是写着双引号，好区分！




新增的标签
结构标签
section 表示页面中的一个内容块，比如章节、页眉、页脚或页面的其他部分。可以和h1、h2……等标签结合起来使用，表示


文档结构
article 标示页面中一块与上下文不相关的独立内容，比如一篇文章
aside 表示article标签内容之外的，也article标签内容相关的辅助信息
header 标示页面中头部内容
hgroup
footer
nav
figure 表示一段独立的流内容，一般表示文档主体流内容的一个独立单元


媒体标签
video 视频
audio 音频
embed 嵌入内容


表单标签


其他标签
mark 
progress 进度条
time
ruby 
wbr
canvas
details
datalist
keygen
output
menu


新增属性
html中 manifest
script中 defer推迟执行，在页面全部加载完成后才执行
async异步执行，执行的同时页面也在加载，不影响
a中 media 对什么设备进行优化
hreflang 超链接的语言
ref 链接的文件是内部还是外部








【【【【【【【【【【【【【【【【【【【【【CSS3】】】】】】】】】】】】】】】】】】】】】】】】】】】】】】】】
-------------------------------------------------------------------------------------------------------------
选择器优先级 自有样式 < class < id < id&class < 行内样式


【【后代级别选择器】】


element element div p 选择 <div> 元素内部的所有 <p> 元素。 
element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。 
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 
:only-child p:only-child 匹配属于父元素中唯一的<p> 元素。 
:nth-child(n) p:nth-child(2) 匹配父元素中的第2个<p>子 元素。n 可以是数字、关键词或公式。Odd 


和even是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。 
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。 
:root :root 选择文档的根元素。 
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。 


【【同辈级别选择器】】


element+element div+p 选择紧接在 <div> 元素之后的所有 <p>元素。
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 
:only-of-type p:only-of-type 匹配属于同类型中只有唯一兄弟元素的p
:last-of-type p:last-of-type 匹配同级兄弟元素中的最后一个<p> 元素。
:first-of-type p:first-of-type 匹配同级兄弟元素中的第一个<p> 元素。
:nth-of-type(n) p:nth-of-type(2) 匹配同类型中的第n个同级兄弟元素p。n 可以是数字、关键词或公式。


Odd 和even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是1）
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个元素开始计数。 


【【伪类选择器】】
:link a:link 选择所有未被访问的链接。 
:visited a:visited 选择所有已被访问的链接。 
:active a:active 选择活动链接。 
:hover a:hover 选择鼠标指针位于其上的链接。 
:focus input:focus 选择获得焦点的 input 元素。 
:first-letter p:first-letter 选择每个 <p> 元素的首字母。 
:first-line p:first-line 选择每个 <p> 元素的首行。 
:before p:before 在每个 <p> 元素的内容之前插入内容。 
:after p:after 在每个 <p> 元素的内容之后插入内容。
:target #news:target 选择当前活动的 #news 元素
:root :root 选择文档的根元素。


【【属性选择器】】
[attribute] [target] 选择带有 target 属性所有元素。 
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。【常用】
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。【常用】
[attribute*=value] a [src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。【常用】


【【UI伪类选择器】】
:enabled input:enabled 选择每个启用的 <input> 元素。 
:disabled input:disabled 选择每个禁用的 <input> 元素 
:checked input:checked 选择每个被选中的 <input> 元素。 
:not(selector) :not(p) 选择非 <p> 元素的每个元素。 
::selection ::selection 选择被用户选取的元素部分。 


-------------------------------------------------------------------------------------------------------------
响应式布局


@media screen and (min-width:1024px){ }


【screen是媒体类型 】
all 默认。适用于所有设备。
aural 语音合成器。
braille 盲文反馈装置。
handheld 手持设备（小屏幕、有限的带宽）。
projection 投影机。
print 打印预览模式/打印页。
screen 计算机屏幕。
tty 电传打字机以及类似的使用等宽字符网格的媒介。
tv 电视类型设备（低分辨率、有限的滚屏能力）


【and是操作符】
and 逻辑与，连接设备名与选择条件、选择条件1与选择条件2。
not 排除某种设备
, 设备列表
only 限定某种设备类型


【min-width是属性值】
width <length> 视觉屏幕/触摸设备 接受最大最小值 定义输出设备中的页面可见区域宽


度(单位一般为px)


heigth <length> 视觉屏幕/触摸设备 接受最大最小值 定义输出设备中的页面可见区域高


度(单位一般为px)


device-width <length> 视觉屏幕/触摸设备 接受最大最小值 定义输出设备的屏幕可见宽度(单


位一般为px)


device-heigth <length> 视觉屏幕/触摸设备 接受最大最小值 定义输出设备的屏幕可见高度(单


位一般为px)


orientation portrait |landscape 位图介质类型 不接受最大最小值 定义’height’是否大于或等


于’width’。值portrait表是，landscape代表否即设，备手持方向：portait为横向，landscape为竖向


aspect-ratio <ratio> 位图介质类型 接受最大最小值定义 ’width’与’height’的比率，即


浏览器的长
宽比
device-aspectratio <ratio> 位图介质类型 接受最大最小值 定义’device-width’与’device-


height’的比率，即设备屏幕长宽比。如常见的显示器比率：4/3， 16/9，16/10


color <integer> 视觉媒体 接受最大最小值 定义每一组输出设备的彩色原件个数。如
果不是彩色设备，则值等于0
color-index <integer> 视觉媒体 接受最大最小值 定义在输出设备的彩色查询表中的条目数。
如果没有使用彩色查询表，则值等于0
monochrome <integer> 视觉媒体 接受最大最小值 定义在一个单色框架缓冲区中每像素包含的


单色原件个数。如果不是单色设备，则值等于0
resolution <resolution> 位图介质类型 接受最大最小值 定义设备的分辨率。如：96dpi，300dpi


，
118dpcm
scan progressive| interlace 电视类 不接受最大最小值 定义电视类设备的扫描工序， progressive


逐行扫描，interlace隔行扫描
grid <integer> 栅格设备 不接受最大最小值 用来查询输出设备是否使用栅格或点阵。
只有1和0才是有效值，1代表是，0代表否


-------------------------------------------------------------------------------------------------------------
边框


border-radius 圆角
box-shadow 阴影 box-shadow:1px 1px 3px red; x轴 y轴 程度 颜色
可以使用滤镜来兼容IE8以下的IE浏览器


border-image 边框背景
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)


-------------------------------------------------------------------------------------------------------------
背景
background-color 规定背景的颜色
background-image 规定背景的背景图
background-repeat 规定背景的重复方式
background-clip 规定背景的绘制去吧   从哪个地方开始剪切
background-origin 规定背景的定位区域 内容的参照点
background-position 规定背景的定位
background-size 规定背景图片的尺寸大小


-------------------------------------------------------------------------------------------------------------
text模型属性


text-overflow 规定当文本溢出包含元素时发生的事情
值：clip 修建文本，ellipsi 显示省略号来代表被修剪的文本 string 使用给定的字符串来代表被


修建的文本 white-space:nowrap 文本不换行


text-fill-color 给文字指定填出颜色  在webkit内核下使用，需要加前缀 -webkit-


text-stroke 给文字描边  在webkit内核下使用，需要加前缀 -webkit-
text-stroke-width 给文字描边的宽度
text-stroke-color 给文字描边的颜色


text-shadow 给文字添加阴影


text-break 规定非中日韩文本的换行规则
值：normal 使用浏览器默认的换行规则，break-all 允许在单词内换行，keep-all 只能在半角空


格或连字符处换行


text-wrap 允许对长的不可分割的单词进行分割并换行到下一行
值：normal 只在允许的断字点换行（浏览器保持默认处理），break-word 在长单词或URL地址内部


换行


-------------------------------------------------------------------------------------------------------------
颜色


rgba(x,x,x,opacity)
hsl()


透明度
opacity: 取值是0到1
filter:Alpha(opacity=20) 取值是0到100


颜色渐变


background:-webkit-gradient(类型,开始位置，结束位置，颜色结束）


background:-webkit-gradient(linear,0 0，100% 100%，
from(#000),
to(#fff),
color-stop(0.2,red),color-stop(0.5,blue),color-stop(0.2,green))




径像渐变




IE下渐变使用滤镜


文字渐变


-------------------------------------------------------------------------------------------------------------
用户界面


使用以下属性时需要加前缀 -moz- -webkit
column-count 规定元素应该被分隔的列数
column-gap 规定列之间的间隔
column-rule 设置所有colume-rule*属性的简写属性
column-width 规定列的宽度


resize 规定是否可由用户调整元素的尺寸 仅支持文本域textarea
box-sizing 改变盒子尺寸的大小
outline （轮廓）是给元素周围绘制轮廓外边框，通过设置一个数值是边框外缘的外围偏移，可起到突出元素的作用


。给一个元素添加外边框 不占据空间




-------------------------------------------------------------------------------------------------------------
动画


【【2D属性】】


   改变中心点
transform-origin:0 0;    <!--改变中心点，改变参照点的位置 可以用px，%，关键字进行转换-->
   
   偏移
transform:translate(10px,10px);    //偏移
        transform: translateX(10px);   //在X轴偏移
   缩放
            transform: scale(0.5,0.5);
            transform: scaleX(0.5);<!--转换-->          


    旋转
            transform: rotate(10deg);    <!--旋转角度 默认是以中心点旋转 deg角度 rad弧度-->*/


    斜切


            transform:skew(10deg,10deg);
            transform:skewX(10deg);
            transform: matrix(1,0,0,1,100,100);   
<!--第一个和第四个代表缩放，二三代表斜切，斜切的时候不接受单位，默认的是一个弧度 五六代表平移-->


【【3D属性】】


transform 向元素应用2D或3D转换函数
transform-origin 允许你改变被转换元素的位置
transform-style 规定被嵌套元素如何在3D空间中显示
perspective 规定3D元素的透视效果，只有webkit可用
perspective-origin 规定3D元素的底部位置，只有webkit可用 需搭配perspective元素使用，应用在父元素上
backface-visibility 定义元素在不面对屏幕时是否可见 visible背面可见 hidden背面不可见


【过渡】
就是在某个元素的状态或样式发生变化的时候，你可以给他指定在变化的过程中的方式，比如说变化的时间，变化的速度，变


化的运动方式，变化的属性等等，可以是我们很轻松的完成动画效果，不用再借助js的复杂的算法。


transition 用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的CSS属性的名称
transition-duration 定义过渡效果花费的时间。默认是0
transition-timing-function 规定过渡效果的时间曲线。默认是“ease”
linear 直线运动
ease 先慢到快然后到慢
ease-in 先慢到快
ease-out 先快到慢
ease-in-out 先慢到快然后由快到慢
cubic-bezier(n,n,n,n) 自定义 取值范围是-1到1之间
transition-delay 规定过渡效果何时开始。默认是0
transition: property duration timing-function delay;    属性 运动时间 运动方式 等待多长时间开始运动


【倒影】
box-reflect:方向 间隔 模糊程度（透明度）




【动画 animation】


animation 所有动画属性的简写属性，除了animation-play-state
animation-name 规定@keyframes动画的名称
animation-duration 规定动画完成一个周期所花费的秒或者毫秒。默认是0
animation-timing-function 规定动画的速度曲线。默认是“ease”
animation-delay 规定动画何时开始。默认是0
animation-iteration-count 规定动画被播放的次数。默认是1
animation-direction 规定动画是否在下一周期逆向的播放。默认是“normal”
animation-play-state 规定动画是否正在运行或暂停。默认是“running”


@keyframes规则：
animationname 必需，定义动画名称
keyframes-selector 必需，动画时长的百分比
css-style 必需，一个或多个合法的CSS样式属性
在火狐下支持，其他浏览器中记得加前缀


定格动画
animationend 当animation执行完成后js调用的事件
animationend moz内核
webkitAnimationEnd webkit内核
oAnimationEnd opera内核
MSAnimationEnd IE内核


transitionend 当transition执行完成后js调用的事件
transitionend
webktiTransitionEnd
oTransitionEnd
MSTransitionEnd




【【】】