module2_CSS 核心样式、H5 + C3 新特性

核心样式、H5 + C3 新特性<a name="top"></a>

二、HTML5

三、CSS 3

一、CSS核心样式

1.2 盒模型（框模型）

1.3 盒模型扩展

1.4 标准文档流

1.5 浮动

1.6 伪类

1.7 css常用样式-背景

1.8 定位

1.9 静态轮播案例

1.1 css常用样式

• 粗细font-weight

  • 作用：设置文字是否加粗

  • 属性定义方式： 单词类型，数字类型

    • 单词类型：normal（正常）、bold（粗体字体）、bolder（更粗字体）、lighter（更细字体）

    • 数字类型：100-900整百数字，400等价于normal，700等价于bold

• 字体风格font-style

  • 作用：设置文字是否斜体显示

  • 属性值：normal（设置正规字体）、italic、oblique

    • italic: 主要针对英文, 要求英文以字体中的斜体样式i显示

    • oblique: 只是讲文字倾斜显示, 与字体无关

    • 如果italic没有斜体的字体, 会强行加载oblique的样式的字体

    • 如果设置了oblique但没有倾斜的字体(与字体无关), 则会强行加载italic的字体

    • i 标签的的font-style属性默认是italic

• 行高line-height

  • 作用: 设置一行文字实际占有的高度, 文字字号在行高中是垂直居中的.

  • 字体会有默认行高，font-size加上4px小于16（cheome浏览器，因为chrome浏览器的font-size最小为12px）的时候会以16px行高，超过的话就以font-size+4来显示

  • 文字默认是在它所被设置的行高里面垂直居中显示的

  • 属性值: px像素值、百分比数值

    • 像素值即直接设为多少为多少

    • 百分比为本身字体字号的百分比（如果font-size为14px，那么如果line-height设为200%，则为28px）

• 量取方法

  • fireworks

    • 在文字效果图中，使用不同颜色的两个字体（换行再加一个），修改字号还有字体类型以及行高使两个文本重叠

    • 有时候即使字体字体字号相同也会出现不能重叠的现象，比如：14px和15px字体大小虽然相同，但是字体间距不一样

• 字体综合font

  • 顺序: 加粗, 斜体, 字号/行高, 字体

  • 格式：

    • 只有字号行高：font: 16px/20px;

    • 只有字号行高+字体： font: 16px/20px '宋体';

    • 全部都有： font: bold italic 16px/20px '宋体';

    • 全写的时候font-style跟font-weight可以调换位置

• 水平对齐text-align

  • 作用: 设置文本水平方向的对齐, 在盒子中, 不论文本是单行还是多行, 都会对应方向对齐

  • 属性值: let, right, center

• 文字修饰: text-decoration

  • 属性值: none, overline, line-through(<del>默认值), underline(<a>标签默认值)

• 首行缩进: text-indent

  • 属性: px单位、em单位、百分比

    • px: 固定单位

    • em：字体的宽度

    • 百分比：参考的是盒子的width宽度

1.2 盒模型（框模型）<a name="a1_2"></a>

回到顶部

• 盒子模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度width、高度height、内边距padding、外边距margin、边框border

• 模型区域：

  • 书写区域：width+height

  • 实体化区域（颜色区域）：w+h+pd+bd

  • 实际占位：w+h+pd+bd+mg

• 宽度 auto(默认值, 自动计算实际宽度), px(自定义), %(父元素w百分比)

  • body会自适应浏览器窗口的宽度的100%

  • span这种不是独占一行的标签默认值auto不是占父元素的100%而是根据自身内容来增加

• 高度height: auto(默认值), px, %与width相似

  • auto不是占父元素的100%, 而是根据子元素内容撑开

• 内边距padding

  • 作用: 设置元素边框内部到content之间的距离

  • 特点: 可以去加载背景(背景图, 背景色), 不能书写嵌套的内容

  • 有单一属性和复合属性(除了四值/一值设置之外, 左右总是相等的)

    • 四个值: 依次是top、right、bottom、left

    • 一个值: 四边同时设置

    • 两个值: (top bottom), (right right)

    • 三个值: (top) (right left) (bottom)

• 边框border

  • 作用: 设置的是内边距外面的边界区域, 作为盒子模型实体化的最外层

  • border有单一属性, 但是推荐直接用符合写法, 而且每一个单一属性都可以使用四值法设置

  • 复合写法: 宽度(border-width), 线的形状, 线的颜色

  • border-style: 当这个属性为none(或者border为none)的时候, 会隐藏边框线

  • 单一属性加上方向: 方向要在border后面如: border-top-color

• 外边距margin

  • 作用: 设置盒子与盒子之间的距离

  • 特点: 不能渲染背景

1.3 盒模型扩展<a name="a1_3"></a>

回到顶部

• 清除默认样式

  • 浏览器加载的默认样式, 会对布局造成一定影响

  • 大部分容器级标签都有默认边距

  • ul, ol清除list-style, a清除text-decoration

  • font-weight: 清除默认加粗效果, h1-h6, b, strong

  • 设置初始化的公共样式

    • body {
          color: #333;
          font-size: 14px;
          font-family: Arial, "宋体";
      }

    • 而浏览器默认加载的样式如h1的样式会根据就近原则层叠掉body的默认样式

• 高度height应用

  • 设置高度的情况: 盒子高度固定, 同级元素紧接着加载, 自身盒子内部内容过多溢出盒子但后不会撑开

  • 控制溢出内容的属性: overflow

    • 属性值	说明
      visible	默认值,可见的可视的, 溢出部分显示的
      hidden	溢出部分直接隐藏, 隐藏超过边框范围的内容
      scroll	溢出的部分出现滚动条, 可以拖动滚动条看到隐藏部分, 多出盒子高度的部分不显示, 无论有没有溢出, 水平和垂直方向都会出现滚动条
      auto	自动的, 如果没有溢出就正常显示, 如果有溢出, 溢出的方向会自动出现滚动条

    • 必须设定高度情况: 父元素需要靠子元素内容自适应撑开

      • height: auto;

• 居中

  • 文本居中

    • 水平居中: text-align: center;

    • 垂直居中: 设置了高度, line-height=高度;(不能适配多行), 没有设置高度, 设置padding-top/bottom来撑开盒子(可以单行可以多行)

  • 元素(盒子)居中

    • 水平居中: 当宽度小于父盒子的时候设置margin的left/right都为auto

    • 垂直居中, 设置padding

• 盒模型自动内减少: 子元素(不设置width)独占一行且不比父元素宽, 其盒子模型的width会根据其padding, margin, border自适应增加或者减少

• margin塌陷现象

  • 在垂直方向如果有两个元素的外边距

  • 同级margin塌陷

    • 同级紧挨着的盒子元素margin会只保留较大的margin

    • 

  • 父子margin塌陷(合并)

    • 父元素没有设置margin-top, 贴着父元素的设置了, 会出现子元素的当作父元素的margin-top

    • 

  • 解决margin塌陷的方法

    • ① 同级: 只设置一个元素(避免)或者用触发bfc的父盒子包裹其中一个

    • ② 父子: 尽量让父元素设置padding值, 使父元素触发bfc

  • 水平方向没有margin塌陷

1.4 标准文档流<a name="a1_4"></a>

回到顶部

• 文档流: 元素排版中, 从左往右, 从上往下流式排列方式

• HTML就是一种标准文档流文件, HTML标准文档流特点通过两种方式实现: 微观现象, 元素等级

• 微观现象

  • ① 空白折叠现象, 行内元素在html文件中的换行符audi号会在网页中以空白显示

  • ② 文字类的元素如果排在一行会出现高低不齐, 底边对齐的效果

  • ③ 自动换行, 写满元素的width会出现自动换行

• 元素等级:

  • 常见加载级别: 块级元素, 行内元素, 行内块元素

  • 块级元素

    • a. 可以设置宽高, 在浏览器正常加载

      b. 块级元素必须独占一行不能与其他任何标签并排一行

      c. 块级元素如果不设置宽度, 会自动撑满父级的width区域, 会被内容自动撑开高度

  • 行内元素

    • a. 行内元素不能正常加载宽度和高度属性, 其他的盒模型属性虽然能设置, 但是容易出现加载问题(给span设置padding, 文字依然在水平线, 而padding会向上下撑开, 而不是像盒子模型那样, margin同理)

      b. 行内元素可以与其他的行内或行内块元素并排一行显示

      c. 行内元素无论是否设置宽高, 宽度和高度都只能被内容自动撑开

  • 行内块元素

    • a. 行内块元素可以设置宽度和高度

      b. 行内块元素可以与其他的行内或者行内块并排一行显示

      c. 行内块元素如果不设置宽高, 要么以原始尺寸加载, 要么被内容自动撑开

      d. 行内块依旧具有标准流的微观特性, 比如空白折叠现象(缺点)

• 显示模式display

  • 标准流中元素有默认的加载模式, 但是也是可以改变的

  • display: block/inline/inline-block/none(原有位置让出来)

• 脱离标准流方法: 浮动, 绝对定位, 固定定位

1.5 浮动<a name="a1_5"></a>

回到顶部

• 浮动的含义

  • float: left/right;

  • 作用: 让元素脱离标准流, 同一级的浮动元素可以并排在一排显示

  • 

• 浮动的性质

  • 浮动元素脱离了标准流的限制, 行快二相性, 可以设置宽高, 可以并排一行, 不会有空白折叠现象, 不设置宽高, 元素会被内容自动撑开(类似于行内块元素, 但是没有空白折叠现象)

  • 贴边现象

    总会朝着float的方向贴边, 当前浮动元素超过父元素的宽度时候, 会向下找到有足够宽度放置该浮动元素的位置, 其中可能贴在另外一个浮动元素, 当宽度还是满出, 则依次向下贴边, 如果贴在父元素的边的时候还是超出则会溢出显示, 此过程不会向上钻空(比如2下面的空白位置)

    

  • 贴边小案例

    

    .table {
      list-style: none;
      background-color: #ccc;
      padding-top: 3px;
      padding-left: 3px;
       412px;
      height: 99px;
    }
    .dd {
       100px;
      height: 30px;
      background-color: skyblue;
      margin-bottom: 3px;
      margin-right: 3px;
      float: left;
    }

  • 浮动元素没有margin塌陷

    • margin塌陷是标准流出现的问题

  • 压盖效果: 同级元素, 一个不浮动, 最好使用定位制作.

    • 因为有兼容性问题, 所以最好不要在一个父元素的子元素中设有浮动还有不浮动的子元素

  • 字围现象

    • 因为设置了float所以出发了bfc不会让其他元素影响自身所以文字会围着浮动元素

• 浮动的问题

  • 浮动撑不高父元素的高度

  • 浮动的元素会影响其他盒子里面浮动的元素, 后面就涉及道清除浮动

• 清除浮动

  • ① 强制给父元素设置一个高度

    • 不能实现自适应效果

  • ② clear属性

    • a. 外墙, 在两个元素之间, 添加一个空div, 设置clear: both;属性

    • b. 内墙: 在浮动元素的父元素中, 添加一个空div设置clear: both;

      • 但是这样的做法会让本身想让html简洁的css变得要用html去解决css而不太符合逻辑了

    • c. 内墙升级版

      • 即添加了一个伪类, 解决了避免卸载html标签的问题

      • .clearfix:after {
            content: "";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }

  • ③ overhidden(触发bfc)

    • 可以解决并自适应高度的原因: 一个元素没有设置高度, 同时设置了溢出隐藏, 浏览器在记载盒子尺寸时, 遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度, 不论子元素是标准流还是浮动, 都会将最高的高度作为父盒子高度加载

    • 浮动影响后面的元素, 父元素有了高度后, 可以管理住内部多的所有浮动元素, 不会延伸到后面标签中影响贴边

  • 如果父元素高度固定, 建议使用height

  • 如果需要自适应, 建议使用overflow: hidden;

1.6 伪类<a name="a1_6"></a>

回到顶部

• 概念

  • 伪类和类之间有一定的相似之处, 也存在明显的区别

  • 普通的类: 需要设置class属性, 会立即加载道浏览器之上

  • 伪类: 不需要加任何属性, 语法提前规定好, 不一定立刻加载到浏览器之上, 只有用户触发了对应的行为, 才会加载

  • 伪类选择器的权重与普通的类选择器相同

  • 写法: 普通选择器:为类名

• a标签的伪类

  • Love Hate

  • link(访问前的状态, 默认), visited(跳转之后的状态), hover(鼠标浮动到上面的状态), active(正在点击的状态)

  • a的伪类有严格的书写顺序, 因为可以一次操作中, 会触发2到3个状态, 利用css的层叠行可以让其在对应的状态上显示出想要的效果

  • 所以建议一般写a标签来覆盖前面的元素然后再写a:hover

    • 发现了一个问题, 在浏览器中, a标签的默认样式是添加在a的-webkit-any-link伪类上面, 但是a的css样式可以覆盖这一个伪类, 根据选择器的权重(伪类相当于类)设置了-webkit-any-link(这里的是在样式表设置的, 非默认)之后在设置a却不生效了

    • 问题解答: 因为样式表的权重是, 排除就近原则的情况下, !important > 行内 > id > class, 伪类, input的type > 标签, 伪元素 > 通配符 > 浏览器默认加载样式, 浏览器默认加载样式无论是否有伪类或者什么都是最低权重的, 比如浏览器默认的a:-webkit-any-ling的权重比a要低

1.7 css常用样式-背景<a name="a1_7"></a>

回到顶部

• background-color: 设置背景颜色

• background-image: 设置图片作为背景, 覆盖颜色之上, 如果设置了no-repeat则边框范围的图片会隐藏, 没有设置no-repeat则会保留

• background-repeat: no-repeat repeat(默认) repeat-x repeat-y(设置了x重复, 则y方向的border不会有图片, x方向相反)

• background-position: (left top为默认)属性值有三种表示方法, 分别为 单词表示法, 像素表示法, 百分比表示法

  • 单词表示法: left, right, top, bottom

  • 像素表示法: xy方向可为正可为负

  • 百分比表示法: border内部(包含padding)减去图片的宽度的百分比, 较少使用

• background-attachment: 背景附着

  • scroll(默认属性)

  • fixed: 相当于fixed定位一样, 但是只会在其设定background-image的元素滚动到背景的区域才会显示, 超过了就会隐藏

• background综合写法:

  • barkground: url(imgges/bg4.jpg) no-repeat center top fixed

  • 颠倒顺序不会造成其加载错误, 注意position的先后位置不能颠倒或者拆分

  • 注意事项:

    • ① 如果只用background设置了一个值, 其余的属性会根据默认值进行加载

    • ② 如果想除去层叠综合属性的一部分, 最好用单一属性进行书写, 这样不会影响到其他属性

• 背景的应用

  • 替换插入图

    • 一般h1会放logo的图片, 为了提高SEO会把插入的图片替换成背景图, 写上描述文字上去, 但是描述的文字是需要隐藏的, 隐藏方法有

      • ① 把字号设为0 (IE8以上才会兼容)

      • ② 首行缩进text-indent: 很多em;并且设置溢出隐藏

  • padding区域背景图

    • 利用background-image可以在padding区域显示的特性, 用其来在每段行首加入background就可以显示成模仿li的符号了

• 精灵图技术(sprites)

  • 因为每次需要用到图片的时候都要向服务器发送请求, 这样频繁的接受和发送请求, 这会大大降低页面的加载速度

  • 一般把零星的小背景图集中到一张大图上去, 然后将大图应用于网页, 这样就只用发送一次请求, 就可以将背景图展示出来

  • 注意事项:

    • 只放背景图, 不放插入图片

    • 宽度取决于最宽的那个背景图片的标签宽度

    • 可以横向摆放, 也可以纵向摆放, 但是每图片留够足够的空白, 保证背景图片加载到一个标签内部, 不出现多余内容

    • 精灵图地段尽量留空白, 方便以后添加其他精灵图

  • 可以在在线网站上生成, 提高效率

• CSS3新增, 颜色半透明

  • rgba的第四个属性可以设置透明度0~1

• CSS3新增, 背景缩放

  • background-size: 可以设置背景图片的大小

    • 属性值	说明
      px值	1-2个像素值, 只设置一个, 等比例, 设置两个, 按照值加载
      百分比	原图片的基础上百分比
      cover	使图片放大, 以足够完全覆盖背景区, 溢出隐藏
      contain	使图片放大, 保证图片完整显示

• CSS3新增, 多背景

  • 在background-imag中, 每个url加载一个图片, 用逗号,分隔开

  • 后写的url会盖住前面的url

1.8 定位<a name="a1_8"></a>

回到顶部

• 概念

  • 定位属性position

    • 属性值	描述
      relative	相对定位
      absolute	绝对定位
      fixed	固定定位

    • 作用: 设定定位的元素, 它需要根据某个参考元素发生位置的偏移

  • 偏移量属性

    • 设定position只是会改变状态, 要想移动要设置偏移量

    • 水平: left, right

    • 垂直: top, bottom

    • 常用单位px

• 相对定位

  • position: relative;

    • 相对自身偏移, 偏移必须搭配偏移量

  • 性质:

    • 并没有脱离标准流, 以然占有原有位置

    • 原位留坑, 形影分离

  • 注意事项

    • ① 偏移量属性是区分正负的

    • ② 同一方向(比如left与right)不能同时设置, 如果同时设置了, 会取left或者top

    • ③ 参考元素是自身, left的正值即等于right的负值

    • 建议只用left, top

  • 实际应用

    • 子绝父相的父

    • content-box的盒子中因为border-top撑开自己用top来更正自己正确的位置

    • 模拟sup, sup的标签

• 绝对定位

  • position: absolute;

  • 性质

    • 脱离标准流, 让出标准流位置, 可以设置宽高, 也可以随时定义位置, 如果不设置宽高, 会被内容撑开

    • 注意1: 参考元素不同, 位移效果不同

    • 注意2: left/right不能再互换

  • 祖先级没有定位的时候

    • 会根据视窗的位置来进行定位, 即使body超过可视区并且可以滑动或者占不满可视区, 可是会根据可视区域进行定位, 所以不建议祖先级没有定位的情况下设绝对定位

  • 参考元素/参考点选择

    • 祖先级参考元素

      • 子绝父相, 子绝父绝, 子绝父固

    • 祖先元素参考点

      • border以内的四个顶点, 忽视padding值

• 固定定位

  • position: fixed

  • 参考元素: 浏览器窗口

  • 参考点: 浏览器窗口的四个顶点

  • 性质

    • 脱离标准流, 可以设置宽高

• 固定定位, 绝对定位都会脱离标准流并且可以设置宽高

• 定位应用

  • 压盖

  • 居中(left为-50%, 然后设置margin-left为负的自身宽度的一半)

    • 定位中left的百分比是占第一个祖级定位元素的宽度的

• 压盖z-index

  • 定位的元素不区分定位的类型(即包括absolute和fixed), 默认压盖效果主要看HTML元素书写顺序

  • 自定义压盖

    • 设置z-index, 默认是0

    • 注意事项

      • ① z-index大的会压盖属性小的

      • ② 如果相同则看书写顺序

      • ③ 只能给定位元素才会生效

      • ④ 父子盒模型中, 如果父子盒子都进行了定位, 与其他的父子级有压盖部分

        • 父级盒子: 如果不设置z-index, 后写的压住先写的; 如果设置了z-index, 值大的压盖值小的

        • 子级盒子: 如果父级没有设置z-index属性, 子级z-index大的会压盖小的; 如果父级设置了z-index, 无论子级值是多少, 都是父级的值大的子级压盖父值小的子级, 叫做"从父效应"

1.9 静态轮播案例<a name="a1_9"></a>

回到顶部

• 写css的建议顺序

  • ① 先写定位position/浮动float + left等

  • ② 再根据是否能设置盒模型属性来写判断写不写宽高

  • ③ 背景的属性

  • ④ 文字相关的属性

• 添加current来表示当前值

二、HTML5<a name="a2"></a>

2.1 HTML5简介

2.2 HTML新增

回到顶部

• 标签简写:

  • 属性值和属性名一样, 可以简写

2.1 HTML5简介<a name="a2_1"></a>

• 万维网的核心语言, 标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改, 用于取代HTML4与XHTML新一代标准版本, 所以叫HTML5

• HTML5

  • html5的设计目的是为了在移动设备上支持多媒体

  • 增加了新特性: 语义特性, 本地存储特性, 设备兼容特性, 连接特性, 网页多媒体特性, 三维, 图形及特效特性, 性能与继承特性, CSS3特性

  • 废弃属性:

    • font, center

• XHTML可扩展超文本标记语言

  • XHTML是一种增强了的HTML, 它的扩展性和灵活性将适应未来网络应用更多的需求

• HTML优势

  • 提高可用性和改进用户的友好体验

  • 更好的语义化标签

  • 可以给站点带来更多的多媒体元素

  • 可以很好的替代FLASH和Sliverlight

  • 当涉及到网站的抓取和索引的时候, 对于SEO很友好

  • 将被大量应用于移动应用程序和游戏

  • 可移植性好

• HTML5劣势

  • 该标准并未能很好的被PC端浏览器所支持

  • IE9以下的浏览器几乎不兼容

2.2 HTML新增<a name="a2_2"></a>

回到顶部

• HTML5新增语义化标签

  • 标签语义化

    • 以前制作网页布局, 我们基本用div来做, div就是一个普通的块级标签, 对于搜索引擎来说, 是没有语义的

  • 新增语义化标签

    • <header>: 头部标签

    • <nav:> 导航标签

    • <main>: 主体标签

    • <article>: 独立的内容标签

    • <section>: 区段标签

    • <aside>: 侧边栏标签

    • <footer>: 尾部标签

  • 注意事项

    • 这种语义化标准主要针对搜索引擎

    • 这些新标签页面中可以使用多次的

    • 在IE9中, 需要把这些元素转换为块级元素

    • 移动端使用这些标签更好

• HTML新增多媒体标签

  • <audio>

    • HTML在不适用插件的情况下也可以原生的支持音频格式文件的播放, 可能会不兼容某些格式

      • 

    • 属性

      • autoplay不可以在chrome中实现

      • 

    • 兼容写法

      • <audio>
            <source src="happy.mp3" type="audio/mepg" />
            <source src="happy.mp3" type="audio/ogg"/>
            你的浏览器版本过低, 不支持音频播放
        </audio>

  • video

    • HTML在不使用插件的情况下也可以原生的支持视频格式文件的播放, 当然支持格式是有限的

      • 

    • 自动播放

      • chrome也会阻止视频播放, 但是不会阻止静音的视频自动播放设置muted

    • 属性

      • 

      • poster:

        • 加载等待的图片

        • 可以用来做视频的封面

    • 兼容写法

      • <video>
            <source src="..." type="video/mp4"/>
            <source src="..." type="video/ogg"/>
            您的浏览器版本过低, 不支持video视频标签
        </video>

  • 总结

    • 音频标签和视频标签使用基本一致

    • 浏览器支持情况不同

    • 我们可以给视频标签添加muted属性进行自动静音播放视频, 音频不可以

    • 视频标签是重点, 我们经常设置自动播放, 循环和设置大小属性, 不适用controls控件

• HTML5新增表单标签

  • 分别有: email, url, date, time, montyh, week, number, range, tel, search, color

  • 

  • datalist

    • 作提示文本

    • 用法

      • <input type="text" />
        <datalist>
            <option value="提示1" />
            <option value="提示2">ts</option>
        </datalist>

  • input新属性

    • 

属性	值	描述
required	required	表单拥有该属性表示其内容不能为空, 必填
placeholder	提示文本	表单的提示信息, 存在默认值将不显示
autofocus	autofocus	自动聚焦属性, 页面加载完成自动聚焦到指定表单, 一般页面放1个
autocomplete	off/on	当用户在字段开始键入时, 浏览器基于之前键入过的值, 应该显示出在字段填写的选项 -需要放在表单内同时加上name属性 -同时要成功提交过
multiple	multiple	可以多选文件提交, 用在type="file"

三、CSS 3<a name="a3"></a>

3.1 css3 新增选择器

3.2 CSS3盒模型

3.3 CSS3过渡效果

3.4 2D转换

3.5 3D转换

3.6 动画

回到顶部

3.1 css3 新增选择器<a name="a3_1"></a>

• 子级选择器

  • 子级选择器用于选取带有特定父元素的元素

    • 不可以爷孙或其他关系

• 语法: element1 > element2

• 兄弟选择器

  • 相邻兄弟

    • 语法: element1 + element2

    • 特点: 只能选择element1和紧跟随着的element2, element2必须是下一个, 两个必须拥有相同的父亲

  • 其他兄弟

    • 语法: element1 ~ element2

    • 特点: 能选择element1后面出现的所有element2, element2不必紧随element1, 两者必须拥有相同的父亲

• 结构伪类选择器

  • child类

    • 必须E跟child同时匹配

      • 不匹配情况

      • ...
        <style>
            .box p:first-child {...}
        </style>
        ...
        <!-- 这个时候不会匹配到p, 因为其不是第一个元素 -->
        <div class="box">
            <h1>...</h1>
            <p>...</p>
        </div>

      • 建议使用father :first-child这样可以只选择第一个而不用另外去匹配了

    • 选择器	简介
      E:first-child	匹配父元素中第一个子元素E
      E:last-child	匹配父元素中最后一个E元素
      E:nth-childe(n)	匹配父元素中的第n个子元素E

    • n是从0开始算的

      • 2n + 1分别匹配1, 3, 5, 7...

      • -n + 4分别匹配4, 3, 2, 1

  • type类

    • 会忽略不为同类的元素

      • 匹配情况

      • <style>
            .box p:first-of-type {...}
        </style>
        ...
        <!-- 这个时候会匹配到第一个p也就是第二个子元素, 因为其不是第一个元素 -->
        <div class="box">
            <h1>...</h1>
            <p>...</p>
            <p>...</p>
        </div>

      • 使用.box :first-of-child的话会匹配所有类型的第一个元素

    • 选择器	简介
      E:first-of-type	指定类型E的第一个
      E:last-of-type	指定类型E的最后一个
      E:nth-of-type(n)	指定类型的第n个

• 伪元素选择器

  • 新增伪元素

    • 选择器	介绍
      E::before	在E元素内部的前面插入一个元素
      E::after	在E元素内部的后面插入一个元素
      E::first-letter	选择到了E容器内的第一个字母
      E::first-line	选择到了E容器内的第一行文本

    • ::before与CSS2的:before的用法是一样的, 只不过一个是CSS3的, ::则是H5的写法

    • 单冒号与双冒号的区别

      • 双冒号与单冒号的用法一样区别的点在于

      • 单冒号在CSS2就已经提了出来， 所以兼容性比CSS3较好

      • 单冒号与双冒号的写法是为了让伪类与伪元素区分开来

      • 在H5开发建议用双冒号

    • 注意事项

      • ① 伪元素只能给双标签添加, 不能给单标签添加

      • ② 伪元素的冒号前面不能有空格, 如E ::before这个写法是错误的

      • ③ 伪元素里面必须写上属性content: "";

      • ④ before和after创建一个元素, 但元素是行内元素

      • ⑤ 因为在DOM里面看不见创建的元素, 所以称之为伪元素

• 属性选择器

  • 新增属性选择器

    • 选择器	简介
      E[att]	选择具有att属性的E元素
      E[att = "val"]	选择具有att属性值等于val的E元素
      E[att ^= "val"]	匹配具有att属性, 且值以val开头的E元素
      E[arr $== "val"]	匹配具有att属性, 且值以val结尾的元素
      E[att *= "val"]	匹配具有att属性, 且值中含有val的E元素

    • 前面可以有空格, 代表选择所有满足条件的子元素

• 选择器权重 **

  • 基础选择器: id选择器 > 类选择器 > 标签选择器 > *

  • 伪类选择器、属性选择器的权重等于类选择器

  • 伪元素选择器的权重等于标签选择器

3.2 CSS3盒模型<a name="a3_2"></a>

回到顶部

• border-sezing

  • CSS3 中可以通过box-sizing来指定盒模型, 这样我们就可以设置如何计算一个元素的总宽度和总高度

属性值	简介
content-box Standard	默认值, 标准盒子模型, 盒模型是外扩的 width和height只包括内容的宽和高 在width和height之外绘制元素的内边距和边框
border-box Quirks模式	怪异模式, 盒模型是内减的 width和height属性包括内容, 内边距和边框, 但不包括外边边距 为元素指定的任何内边距和边框都将在已设定width和height内进行绘制

• 边框圆角border-radius

  • 属性值: 可以是像素值, 或者百分比, 百分比参考的是盒子整体宽度, 高度的百分比

  • 综合设置的时候用/分割, 则前部分跟后部分都可以用四值法

    • border-radius: 10px 20px 30px 40px / 1px

  • 单一属性

    • border-top-left-radius...

属性值	说明
x-radiu/y-radius	/分割两部分属性值, 前面为水平半径, 后面为垂直半径, 得到的是椭圆角
radius	一个属性值, 则水平和垂直都设置为同一个值, 得到的圆角

• 盒子坐标

• 文字阴影

  • 在CSS3中, text-shadow可想文本应用阴影, 通过属性值能够规定水平阴影, 垂直阴影, 模糊距离, 以及阴影颜色

• 属性

  • 属性值	简介
    h-shwdow	必须. 水平阴影的位置, 允许负值
    v-shadow	必须. 垂直阴影的位置, 允许负值
    blur	可选, 模糊距离
    color	可选, 阴影的颜色

  • 可添加多个阴影

    • 用逗号分隔开, 后面添加的会被前面的覆盖掉

• 盒子阴影

  • 在CSS3 中, box-shadow属性用于对盒子边框添加阴影

    • 属性值	简介
      h-shadow	必需. 水平阴影的位置, 允许负值.
      v-shadow	必需. 垂直阴影的位置, 允许负值.
      blur	可选, 模糊距离
      spread	可选, 阴影的尺寸, 意义是阴影部分向上下左右都延申长度
      color	可选, 阴影的颜色
      inset	可选, 将外部阴影改为内部阴影, 不要设置成outset, 不然语法错误, 如果想外部阴影不添加inset即可

  • 也可以设置多个属性, 用逗号分隔开, 先添加的属性覆盖后添加的属性

3.3 CSS3过渡效果<a name="a3_3"></a>

回到顶部

• 动画效果

  • CSS3 出现之前, 前端一般使用Flash懂话或Javascript制作懂话

  • 帧动画: 通过一帧一帧的画面按照固定顺序和播放速度播放, 如电影胶片

• 过度属性

  • transition: 过渡的属性 过渡时间 运动取消 延时曲线

  • 过渡属性可以实现属性变化的时候的平滑过渡效果

• 单一属性写法

  • 属性	描述
    transition	简写属性, 用于在一个属性中设置四个过渡属性
    transition-property	规定应用过渡的CSS属性名称
    transition-duration	定义过渡效果花费的时间, 默认是0
    transition-timing-function	规定过渡效果的时间曲线, 默认是ease
    transition-delay	规定过渡效果何时开始, 默认是0 单位是s, 一定要写单位

• transition-property

  • none表示没有属性过渡

  • all表示所有属性过渡

  • 多个属性要过度的话用逗号分隔

• transition-timing-function时间曲线

  • 值	描述
    linear	规定以相同速度开始至结束的过渡效果
    ease	规定慢速开始, 然后变快, 然后慢速结束的过渡效果, 默认
    ease-in	规定以慢速开始的过渡效果
    ease-out	规定以慢速结束的过渡效果
    ease-in-out	规定以慢速开始和结束的过渡效果
    cubic-bezier(x1, y1, x2, y2)	在cubic-bezier函数中定义自己的值, x1, x2取是0至1之间的数值, y1, y2取值任意, 四个数值表示拉扯的点的两个坐标

  • 

  • cubic-bezier函数

    • 可以在chrome控制台进行调整然后复制到属性上

    • 

• 浏览器兼容

  • IE10, Firefox, Chrome以及Opera支持transition属性

  • Safiri需要前缀-webkit-

  • 注意IE9以及更早的版本不支持transition

3.4 2D转换<a name="a3_4"></a>

回到顶部

• 概念

  • 属性名: transform

  • 作用: 对元素进行移动, 缩放, 转动, 拉长, 或拉伸. 配合过渡和即将学习的动画只是, 可以取代大量之前只能靠FLash才可以实现的效果

  • 属性值: 多种转换方法的属性值, 可以实现不同的转换效果

• 2D转换-位移

  • translate()

    • 属性值为translate()时, 可以实现位移效果

    • 值	说明
      translate(x, y)	x, y分别为水平和垂直方向唯一的距离, 可以为px值或百分比, 取分正负, 百分比的话是自身border以内的宽度
      translate(x)	只有一个数值, 表示水平方向的位移

• 2D转换-缩放

  • scale()

    • 属性值为scale()时, 可以实现元素缩放效果

    • 值	说明
      scale(x, y)	x,y分别为改变元素的宽度和高度的倍数
      scale(n)	只有一个值, 表示宽度和高度同时缩放n倍
      scaleX(n)	改变元素的宽度
      scaleY(n)	改变元素的高度

    • 进行缩放的话是以自身中心进行缩放的

    • 如果想在一个父容器中缩小并贴边定位的话

      • .box2 {
            /* 左下角缩小 */
            position: absolute;
            left: -25%;
            bottom: -25%;
             100%;
            height: 100%;
            background-color: pink;
            transform: scale(0.5);
        }

      •  

• 2D转换-旋转

  • rotate()

    • transform属性值设置为rotate(), 实现元素的旋转

    • 单位: deg

    • 正值为顺时针, 负值为逆时针

    • 设置transform多个属性值的时候, 书写顺序不同会导致转换的效果有差异

• 2D转换-倾斜

  • skew()

    • transform属性值设置为skew()时, 实现元素的倾斜

    • 单位: deg

    • 可以填写两个属性, 当只是一个属性的时候, 第二个属性默认为0

• 2D转换-基准点

• transform-origin

  • 设置调整元素的水平和垂直方向原点的位置, 调整元素的基准点

  • 属性值:

  • 值	说明
    x	定义X轴的远点在何处. 可能的值: left, center, right, 像素值, 百分比
    y	定义Y轴的远点在何处, 可能的值: top, center, bottom, 像素值, 百分比

3.5 3D转换<a name="a3_5"></a>

回到顶部

• 3d转换与2d转换的区别

  • transform属性不止能实现2D转换, 也可以制作3D立体转换效果, 比普通的x, y轴组成的平面效果多了一条z轴

  • 

• 透视perspective

  • 特点: 近小远大

    • 并非任何情况下需要透视效果, 如果要展示z轴的变化则要设置

  • 作用: 设置在z轴的视线焦点的观察位置, 从而实现3D查看效果

  • 注意: 透视属性需要设置给3D变化元素的父级

• 3D旋转

  • 在rolate后面加上X, Y, Z

  • 为正则为该轴的顺时针旋转

• 3D位移

  • 在translate后面加上X, Y, Z

  • 如果设置了translateZ和perspective则会向人脸方向进行移动()

• 旋转之后会导致元素的X轴Y轴也进行旋转, 会以旋转之后的方向作为基准, 所以设置transform谁先谁后会有区别

• 盒子案例

  • transform-style

    • 用于设置被嵌套的子元素在父元素的3D空间中显示, 子元素会保留自己的3D转换坐标轴

    • 属性值

      • flat: 所有元素在2D平面呈现

      • preserve-3d: 保留3D空间

    • 一般来说这个属性给父元素

    • 正方形骰子案例

  • 兼容问题

    • IE10, FF, Opera支持

    • Chrome和Safari需要-webkit-

    • IE9需要-ms-

3.6 动画<a name="a3_6"></a>

回到顶部

• CSS3 中提供了自己的动画制作方法, 着可以在许多网页中取代动画图片, Flash动画以及JavaScript

• 步骤: 创建动画, 绑定动画

• @keyframes

  • 用于创建动画, 可以用关键词或者百分比

  • ex: from to 100% 50%

• animation

  • 需要将@keyframes中创建的动画捆绑到某个选择器, 否则不会产生动画效果

  • animation: 动画名称(必须) 过渡时间(必须) 速度曲线 动画次数 延时时间

  • 属性	描述
    animation-name	规定@keyframes动画的名称
    animation-duration	规定动画完成一个周期所花费的秒或毫秒, 默认是0
    animation-timing-function	规定动画的速度曲线, 默认是"ease"
    animation-delay	规定动画何时开始, 默认是0
    animation-iteration-count	规定动画被播放的次数, 默认是1, infinite表示无限播放