html5和css （四 布局新增）

布局的H5新增标签(了解)

header
footer
main
aside
article
section
dialog
​
双标签，没有任何默认样式，跟div一样。 有语义

 

字体图标

http://fontawesome.dashgame.com/

 

CSS3新增功能

1 CSS3选择器详解

1.1 基础选择器

  • 通配选择器*
  • 元素选择器E
  • ID选择器#id
  • CLASS选择器.class
  • 群组选择器select1,selectN

1.2 层次选择器

  • 后代选择器 E F
  • 子选择器 E>F
  • 相邻兄弟选择器 E+F
  • 通用兄弟选择器 E~F

1.3 属性选择器

 

selector[attr] 包含指定的属性
selector[attr=value] 指定属性的值
selector[attr^=value] 属性值以value开头
selector[attr$=value] 属性值以value结束
selector[attr*=value] 属性值包含value
selector[][][] 多个属性选择器

  • E[attr] 选择具有att属性的E元素。
  • E[attr="val"] 选择具有att属性且属性值等于val的E元素。
  • E[attr~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。
  • E[attr^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
  • E[attr$="val"]选择具有att属性且属性值为以val结尾的字符串的E元素。
  • E[attr*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。
  • E[attr|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

1.4伪类选择器

/*语法*/
selector:伪类 {
   
}

 

:link     未访问的超链接
:visited  访问过的超链接
:hover    鼠标悬停 任意元素,鼠标滑过元素属性改变 css属性
:actived  激活状态的超链接
有顺序必须按照link,visited ,hover ,actived



:focus    获得焦点时
​
:first-child   兄弟元素第一个
:last-child    兄弟元素最后一个
:nth-child()    指定数字，也可以指定关键字"odd", "even"
:nth-last-child
:only-child      后代中只有一个孩子的
​
:fist-of-type
:last-of-type
:nth-of-type()      指定数字，也可以指定关键字"odd", "even"
:nth-last-of-type()
:only-of-type()

 

1.5 伪元素选择器

::first-letter   第一个字
::first-line     第一行
::before         最前面插入一个子元素
::after         最后面追加一个子元素


CSS3 基础

2.1 浏览器私有前缀

-weibkit-*    chrome/safari
-moz-*       firefox
-ms-*         ie
-o-*         opera

 

2.2 CSS3 新增的颜色

rgba(r,g,b,不透明度)  不透明度：0~1 小数， 数越大，越不透明

 

2.3 CSS3新增长度单位

  • rem

  • vw

  • vh

2.4CSS3渐变(了解)

线性渐变

语法

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值

<angle>：用角度值指定渐变的方向（或角度）。
    to left： 设置渐变为从右到左。相当于: 270deg
    to right：设置渐变从左到右。相当于: 90deg
    to top：  设置渐变从下到上。相当于: 0deg
    to bottom： 设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
<color-stop> 用于指定渐变的起止颜色：
    <color>：  指定颜色。
    <length>： 用长度值指定起止色位置。不允许负值
    <percentage>： 用百分比指定起止色位置。

示例

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

径向渐变

语法

<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

<position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

<shape> = circle | ellipse

<size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]

<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner

<circle-size> = <length>

<ellipse-size> = [ <length> | <percentage> ]{2}

<shape-size> = <length> | <percentage>

<color-stop> = <color> [ <length> | <percentage> ]?

取值

<position> 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center
    <percentage>①：用百分比指定径向渐变圆心的横坐标值。可以为负值。
    <length>①：用长度值指定径向渐变圆心的横坐标值。可以为负值。
    left：设置左边为径向渐变圆心的横坐标值。
    center①：设置中间为径向渐变圆心的横坐标值。
    right：设置右边为径向渐变圆心的横坐标值。
    <percentage>②：用百分比指定径向渐变圆心的纵坐标值。可以为负值。
    <length>②：用长度值指定径向渐变圆心的纵坐标值。可以为负值。
    top：设置顶部为径向渐变圆心的纵坐标值。
    center②：设置中间为径向渐变圆心的纵坐标值。
    bottom：设置底部为径向渐变圆心的纵坐标值。

<shape> 确定圆的类型
    circle：指定圆形的径向渐变
    ellipse：指定椭圆形的径向渐变。

<extent-keyword> circle | ellipse 都接受该值作为 size
    closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
    closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
    farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
    farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角

<circle-size> circle 接受该值作为 size
    <length>：用长度值指定正圆径向渐变的半径长度。不允许负值。

<ellipse-size> ellipse 接受该值作为 size
    <length>：用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
    <percentage>：用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。

<color-stop> 用于指定渐变的起止颜色：
    <color>：指定颜色。
    <length>：用长度值指定起止色位置。不允许负值
    <percentage>：用百分比指定起止色位置。不允许负值

示例

radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);

 

3 新增的CSS3属性

3.1 边框圆角

border-radius 长度单位
border-top-left-radius
border-top-righ-radius
border-bottom-left-radius
border-bottom-right-radius

  • border-radius

    设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。 如果只提供一个，将用于全部的于四个角。 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。

    垂直半径也遵循以上4点。

  • border-top-left-radius 设置或检索对象的左上角圆角边框

  • border-top-right-radius 设置或检索对象的右上角圆角边框

  • border-bottom-right-radius 设置或检索对象的右下角圆角边框

  • border-bottom-left-radius 设置或检索对象的左下角圆角边框

 

3.2 

布局相关属性

display: 值很多很多 .... table table-row...
box-sizing: content-box（默认值） / border-box

 

  • box-sizing 定义盒子模型的尺寸解析方式 
    >content-box(默认)    
>border-box
  • resize 否允许用户缩放，调节元素尺寸大小 
    none： 不允许用户调整元素大小。 (默认)
both： 用户可以调节元素的宽度和高度。 
horizontal： 用户可以调节元素的宽度     
vertical： 用户可以调节元素的高度。
  • display 盒子是否以及如何显示 
    > none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
> inline： 指定对象为内联元素。 
> block： 指定对象为块元素。 
> list-item： 指定对象为列表项目。 
> inline-block： 指定对象为内联块元素。（CSS2） 
> table： 指定对象作为块元素级的表格。类同于html标签<table>（CSS2） 
> inline-table： 指定对象作为内联元素级的表格。类同于html标签<table>（CSS2） 
> table-caption： 指定对象作为表格标题。类同于html标签<caption>（CSS2） 
> table-cell： 指定对象作为表格单元格。类同于html标签<td>（CSS2） 
> table-row： 指定对象作为表格行。类同于html标签<tr>（CSS2） 
> table-row-group： 指定对象作为表格行组。类同于html标签<tbody>（CSS2） 
> table-column： 指定对象作为表格列。类同于html标签<col>（CSS2） 
> table-column-group： 指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2） 
> table-header-group： 指定对象作为表格标题组。类同于html标签<thead>（CSS2） 
> table-footer-group： 指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
> run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3） 
> box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
> inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
> flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
> inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
> flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3） 
> inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3
 

3.3 外轮廓

outline:1px solid #ccc
outline-style
outline-color
outline-width


  • outline 给元素周围绘制一条轮廓线

    <' outline-width '> || <' outline-style '> || <' outline-color '>

  • outline-width 外廓线宽度

    ： 用长度值来定义轮廓的厚度。不允许负值 medium： 定义默认宽度的轮廓。 thin： 定义比默认宽度细的轮廓。 thick： 定义比默认宽度粗的轮廓。

  • outline-style 外廓线风格

    none： 无轮廓。与任何指定的 <' outline-width '> 值无关 dotted： 点状轮廓。 dashed： 虚线轮廓。 solid： 实线轮廓 double： 双线轮廓。两条单线与其间隔的和等于指定的 <' outline-width '> 值 groove： 3D凹槽轮廓。 ridge： 3D凸槽轮廓。 inset： 3D凹边轮廓。 outset： 3D凸边轮廓。

  • outline-color 外廓线颜色

  • outline-offset 外廓线的偏移量
 
 

3.4 不透明度

opacity: 0~1
  • opacity 检索或设置对象的不透明度。 对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果
 

 

3.5 阴影

box-shadow:水平偏移 垂直偏移;   偏移可以负值
box-shadow:水平偏移 垂直偏移 颜色;
box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/
box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;

  • box-shadow 设置元素的阴影

    值: none | [ , ]*
    = inset? && {2,4} && ?

    取值：

    ​ none： 无阴影

    <length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
<length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 
<color>： 设置对象的阴影的颜色。 
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

    可以设定多组效果，每组参数值以逗号分隔

    test .outset {
    box-shadow: 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-blur {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-extension {
    box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
}
.test .inset {
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
}
.test .multiple-shadow {
    box-shadow:
        0 0 5px 3px rgba(255, 0, 0, .6),
        0 0 5px 6px rgba(0, 182, 0, .6),
        0 0 5px 10px rgba(255, 255, 0, .6);
}

  • box-reflect 倒影 （仅webkit 了解）

    值: box-reflect：none | ? ?

    取值：

    direction

    above： 指定倒影在对象的上边 
below： 指定倒影在对象的下边 
left： 指定倒影在对象的左边 
right： 指定倒影在对象的右边

    offset

    <length>： 用长度值来定义倒影与对象之间的间隔。可以为负值 
<percentage>： 用百分比来定义倒影与对象之间的间隔。可以为负值

    mask-box-image

    none： 无遮罩图像 
<url>： 使用绝对或相对地址指定遮罩图像。 
<linear-gradient>： 使用线性渐变创建遮罩图像。 
<radial-gradient>： 使用径向(放射性)渐变创建遮罩图像。 
<repeating-linear-gradient>： 使用重复的线性渐变创建背遮罩像。 
<repeating-radial-gradient>： 使用重复的径向(放射性)渐变创建遮罩图像。 
 

 

3.5  CSS3新增背景属性

background-size: cover / contain / 400px 300px / 100% 100%
background: color image postion/size repeat attachment

background: bg-image bg-position / bg-size bg-repeat bg-attachment bg-origin bg-clip bg-color

  • background-origin 背景图片原点

    取值：
padding-box：(默认值) 从padding区域（含padding）开始显示背景图像。 
border-box： 从border区域（含border）开始显示背景图像。 
content-box： 从content区域开始显示背景图像。

  • backgroun-clip 指定对象的背景图像向外裁剪的区域。

    取值：
padding-box： 从padding区域（不含padding）开始向外裁剪背景。 
border-box： (默认值)从border区域（不含border）开始向外裁剪背景。 
content-box： 从content区域开始向外裁剪背景。 
text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果

  • background-size 背景图像的尺寸

    <length>： 用长度值指定背景图像大小。不允许负值。 
<percentage>： 用百分比指定背景图像大小。不允许负值。 
auto： 背景图像的真实大小。 
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。 
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

  • CSS3多背景

    background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
              url(test1.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
           url(test1.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;
 

 

3.6 CSS3变换

  • transform

    translatex() 
    translatey()
    translate(x, y)
    rotate() 角度 deg
    skewx()  角度deg
    skewy()
    skew(x, y)

  • transform-origin 变换的原点。 对translate没有意义。 对rotate影响大

相关属性

  • transform

    设置或检索对象的转换。

    取值

    none (默认值)无转换

    2D Transform Functions：

    matrix()： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵 
translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 
translatex()： 指定对象X轴（水平方向）的平移 
translatey()： 指定对象Y轴（垂直方向）的平移 
rotate()： 指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义 
scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 
scalex()： 指定对象X轴的（水平方向）缩放 
scaley()： 指定对象Y轴的（垂直方向）缩放 
skew()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 
skewx()： 指定对象X轴的（水平方向）扭曲 
skewy()： 指定对象Y轴的（垂直方向）扭曲

    3D Transform Functions：

    matrix3d()： 以一个4x4矩阵的形式指定一个3D变换 
translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 
translatez()： 指定对象Z轴的平移 
rotate3d()： 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略 
rotatex()： 指定对象在x轴上的旋转角度 
rotatey()： 指定对象在y轴上的旋转角度 
rotatez()： 指定对象在z轴上的旋转角度 
scale3d()： 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 
scalez()： 指定对象的z轴缩放 
perspective()： 指定透视距离

  • transform-origin

    设置或检索对象以某个原点进行转换。 用法

    如果提供两个值，第一个用于横坐标，第二个用于纵坐标。 
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。 
3D变形需要制定Z坐标 第三个参数值

    取值

    left  right  center   <lenght>  <percentage>
top bottom  center   <lenght>  <percentage>

  • transform-style

    指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。 flat： (默认)指定子元素位于此元素所在平面内 preserve-3d： 指定子元素定位在三维空间内

  • perspective

    指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大，而「z<0」时则比正常小，大小程度由该属性的值决定。

    none： 不指定透视 ： 指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值

  • perspective-origin

    设置透视点的位置

    用法

    ​ 该属性提供2个参数值。

    如果提供两个，第一个用于横坐标，第二个用于纵坐标。 
如果只提供一个，该值将用于横坐标；纵坐标将默认为center。

    取值

 

3.7 过渡效果

过渡(transition)

过渡相关属性

  • transition 检索或设置对象变换时的过渡。

    注意：

    如果只提供一个参数，则为 <' transition-duration '> 的值定义；如果提供二个参数，则第一个为 <' transition-duration '> 的值定义，第二个为 <' transition-delay '> 的值定义

    用法 transition：[,]* = [ none | ] || || ||

  • transition-property 设置对象中的参与过渡的属性

    默认值为：all。默认为所有可以进行过渡的css属性。 如果提供多个属性值，以逗号进行分隔。 取值

    none： 不指定过渡的css属性 
all： 所有可以进行过渡的css属性 
<IDENT>： 指定要进行过渡的css属性

    那些CSS属性可以被过渡

    颜色属性
具有长度值 百分比的属性
值是数字的属性 如 z-index  opacity  outline-offset等
变形系列属性
阴影
渐变

  • transition-duration 设置对象过渡的持续时间

    如果提供多个属性值，以逗号进行分隔。

  • transition-timing-function 设置对象中过渡的动画类型

    取值
    ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) cubic-bezier(, , , )： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内 http://cubic-bezier.com/ steps([, [ start | end ] ]?)： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

  • transition-delay 设置对象延迟过渡的时间

CSS3触发过渡的条件

  • 伪元素触发
  • 媒体查询
  • JavaScript触发

 

3.8 CSS3动画

关键帧

@keyframes 动画名字 {
    0% {
        
    }
    20% {
        
    }
    40% {
        
    }
    100% {
        
    }
}

 

相关CSS属性

animation-name  指定动画的名字
animation-duration  动画的执行时间
animation-timing-function  执行效果速度  
animation-delay   延迟
animation-iteration-count   循环 次数  infinite(无限)
animation-direction:  alternate （正向 反向 交替）\ reverse（反向）
animation-play-state: running / paused
animation 复合属性

 

 

 

posted on 2018-08-07 20:13  阿乐的博客园  阅读(292)  评论(0)  编辑  收藏  举报

导航