html5 css3基础知识详解

时间：2022-11-03 07:43:25
 
 如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。Html4-html5  css2- css3

    1. CSS3的现状

1、浏览器支持程度差，需要添加私有前缀2、移动端支持优于PC端3、不断改进中4、应用相对广泛

    1. 如何对待

  1. 坚持渐进增强原则

 渐进增强： 让低版本浏览器 可以使用最基本的功能，高版本的浏览器具有更好的用户体验2、考虑用户群体3、遵照产品的方案4、听Boss的

  1.  准备工作

    1. 统一环境

由于CSS3兼容性问题的普遍存在，为了避免因兼容性带来的干扰，我们约定统一的环境，以保证学习的效率，在最后会单独说明兼容性的问题。1、Chrome浏览器 version 46+2、Firefox浏览器 firefox 42+3、PhotoShop CS6（建议）

    1. 如何使用手册

学会使用工具，可以让我们事半功倍。
元字符 含义 示例
[] 全部可选项 padding: [<length> | <percentage>]{1, 4}
|| 并列 border: <line-width> || <line-style> || <color>
| 多选一 position: static | relative | absolute | fixed
? 0个或1个 box-shadow: none | <shadow>[, <shadow>]*<shadow>: inset? && <length>{2, 4} && <color>?
* 0个或多个
{} 范围
学会查看手册，培养自主学习能力。

  1.  基础知识

    1. 属性选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
其特点是通过属性来选择元素，具体有以下5种形式：
选择器 示例 含义
E[attr]   存在attr属性即可
E[attr=val]   属性值完全等于val
E[attr*=val]   属性值里包含val字符并且在“任意”位置
E[attr^=val]   属性值里包含val字符并且在“开始”位置
E[attr$=val]   属性值里包含val字符并且在“结束”位置

    1. 伪类

除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。1、结构(位置)伪类以某元素（E）相对于其父元素或兄弟元素的位置来获取无素；
选择器 示例 含义
E:first-child   其父元素的第1个子元素
E:last-child   其父元素的最后1个子元素
E:nth-child(n)   其父元素的第n个子元素
E:nth-last-child(n)   其父元素的第n个子元素（倒着数）
n遵循线性变化，其取值0、1、2、3、4、...n可是多种形式：nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等；注：指E元素的父元素，并对应位置的子元素必须是E2、空伪类E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）3、目标伪类E:target 结合锚点进行使用，处于当前锚点的元素会被选中；4、排除伪类E:not(selector) 除selector（任意选择器）外的元素会被选中；

    1. 伪元素

1、E::first-letter文本的第一个单词或字（如中文、日文、韩文等）2、E::first-line 文本第一行；3、E::selection 可改变选中文本的样式；4、E::before和E::after在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解":" 与 "::" 区别在于区分伪类和伪元素

    1. 颜色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。如下图所示为颜色表示方法：
            RGBARed、Green、Blue、Alpha即RGBAHue、Saturation、Lightness、Alpha即HSLA不同的颜色表示方法其取值也不相同，具体如下：R、G、B 取值范围0~255HSLAH 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色S 饱和度 取值范围0%~100%L 亮度 取值范围0%~100%A 透明度 取值范围0~1RGBA、HSLA可应用于所有使用颜色的地方。见代码示关于CSS透明度：1、opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；2 、transparent 不可调节透明度，始终完全透明

    1. 文本

text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。如：text-shadow: 2px 2px 2px #CCC;1、水平偏移量 正值向右 负值向左；2、垂直偏移量 正值向下 负值向上；3、模糊度是不能为负值；

    1. 盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：1、box-sizing: border-box  盒子大小为 width2、box-sizing: content-box  盒子大小为 width + padding + border注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

    1. 边框

其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。

    1. 边框圆角

border-radius圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。如下图为了方便表述，我们将四个角标记成1、2、3、4，如2代表右上角，CSS里提供了border-radius来设置这些角横纵轴半径值。见代码示例01 边框-圆角border-radius.html分别设置横纵轴半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）。支持简写模式，具体如下：1、border-radius: 10px; 表示四个角的横纵轴半径都为10px；2、border-radius: 10px 5px; 表示1和3角横纵轴半径都为10px，2和4角横纵轴半径为5px；3、border-radius: 10px 5px 8px; 表示1角模纵轴半径都为10px，2和4角横纵轴半径都为8px，3角的横纵轴半径都为8px；4、border-radius: 10px 8px 6px 4px; 表示1角横纵轴半径都为10px，表示2角横纵轴半径都为8px，表示3角横纵轴半径都为6px，表示4角横纵轴半径都为6px；见代码示例02 边框-圆角-详解border-radius.html

    1. 边框阴影

box-shadow与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。如box-shadow: 5px 5px 5px #CCC1、水平偏移量 正值向右 负值向左；2、垂直偏移量 正值向下 负值向上；3、模糊度是不能为负值；4、inset可以设置内阴影；注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，符合渐进增强，实际开发中可以大胆使用。

    1. 背景

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
  1. background-size

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。其参数设置如下：a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。2、background-origin通过background-origin可以设置背景图片定位(background-position)的参照原点。其参数设置如下：border-box以边框做为参考原点；padding-box以内边距做为参考原点；content-box以内容区做为参考点；3、background-clip通过background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小。其参数设置如下：border-box裁切边框以内为背景区域；padding-box裁切内边距以内为背景区域；content-box裁切内容区做为背景区域；4、多背景以逗号分隔可以设置多背景，可用于自适应布局

    1. 渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

    1. 线性渐变(渐进增强原则）

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果，如下图是从黄色渐变到绿色。1、必要的元素：借助Photoshop总结得出线性渐变的必要元素a、方向b、起始色c、终止色d、渐变距离2、关于方向设置渐变方向，可以用关键字如to top、to right，也可以用角度（正负值均可）如45deg、-90deg等，当以角度做为参数时，可参照下图来使用，0deg从下往上，90deg从左向右，进而可以推算出180deg从上向下。注：我们可以设置渐变的起始点，这个起始点的值可以是百分比形式，这个百分比在没有设置background-size时，是相对于盒子大小的，当设置了background-size时则是相对于background-size的。

    1. 径向渐变

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果1、必要的元素：a) 辐射范围即圆半径b) 中心点 即圆的中心c) 渐变起始色d) 渐变终止色e) 渐变范围2、关于中心点中心位置参照的是盒子的左上角，例如background-image: radial-gradient(120px at 0 0 yellow green)其圆心点为左上角，background-image: radial-gradient(120px at 0 100% yellow green)其圆心为左下角。3、关于辐射范围其半径可以不等，即可以是椭圆，如background-image: radial-gradient(120px 100px at 0 0 yellow green)会是一个椭圆形（横轴120px、纵轴100px）的渐变。写在最后关于渐变不同浏览器有不同的版本，即语法格式不一样，我们以最新语法为准，可自行查找资料了解即可。http://www.w3cplus.com/css3/new-css3-linear-gradient.html

    1. 过渡

过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片见代码示例baidu.html补间动画：自动完成从起始状态到终止状态的的过渡。见代码示例01 体验过渡.html关于补间动画更多学习可查看http://mux.alimama.com/posts/1009在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。可以通过all设置所有属性的过渡效果，也可以分别设置某一属性的过渡效果，可以将过渡属性transition设置在A或B状态，但是会有一些细节的差异，transition属性拆解如下表：
属性 示例 含义
transition-property   设置过渡属性
transition-duration   设置过渡时间
transition-timing-function   设置过渡速度
transition-delay   设置过渡延时

    1. 单词

empty 空的；无意义的；无知的； 英 ['em(p)tɪ]
letter 信；字母，文字； 英 ['letə]
transparent 透明的；显然的；坦率的；易懂的 美 [træns'pærənt]
shodow 阴影；影子；幽灵；庇护；隐蔽处 美 ['ʃædo]
origin 起源；原点；出身；开端 美 ['ɔrɪdʒɪn]
clip 剪；剪掉；缩短 美 [klɪp]
gradient 梯度；坡度；倾斜度 美 ['ɡredɪənt]
radial 半径的；放射状的；光线的；光线状的 美 ['redɪəl]
��  2 ҳ

    1. 边框

其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。

      1. 边框圆角

 border-radius   每个角可以设置两个值，x值，y值圆角处理时，html5 css3基础知识详解脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。如下图可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置）

      1. 边框阴影

box-shadow 与text-shadow用法差不多1、水平偏移量正值向右负值向左；2、垂直偏移量正值向下负值向上；box-shadow: 5px 5px 27px red, -5px -5px 27px green;3、模糊度是不能为负值；4、inset可以设置内阴影；html5 css3基础知识详解设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感。

1.1.4案例 用css实现

    1. 渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变

      1. 线性渐变（gradient变化）

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。上图是从黄色渐变到绿色Background:linear-gradient(To right表示方向(left,top,right,left ,也可以使用度数)         Yellow, 渐变起始颜色Green  渐变终止颜色) html5 css3基础知识详解            1、必要的元素：a、方向b、起始颜色c、终止色；html5 css3基础知识详解2、关于方向如下图

      1. 径向渐变(radial径向)

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果  background:radial-gradient(
           150px  at  center,
           yellow,
           green
      ); 围绕中心点做渐变，半径是150px，从黄颜色到绿颜色做渐变.1、必要的元素：a、辐射范围即圆半径  (半径越大，渐变效果越大)b、中心点即圆的中心  (中心点的位置是以盒子自身)    background:radial-gradient(
            150px  at left center,
           yellow,
           green
        );以左上角为圆的中心点    background:radial-gradient(
            150px  at 0px  0px,
             yellow,
             green
        );c、渐变起始色d、渐变终止色2、关于中心点：中心位置参照的是盒子的左上角3、关于辐射范围：其半径可以不等，即可以是椭圆div{
         width:300px;
         height:300px;
         margin:100px auto;
         background:radial-gradient(
             250px  at0px0px,
             yellow,
             green
         );
         border-radius:150px;
    }

    1. 背景

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。background-size:width,height可以设置背景图片的宽度以及高度
  1. background-size设置背景图片的尺寸

     background-size:600px,auto;       自动是适应盒子的宽度
         background-size: 100% auto;  当宽度发送改变时，高度会有内容溢出。
     常规用法，通过百分百，和像素来调整背景的尺寸.    background-size:auto100%; cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。整个背景图片完整显示在背景区域.contain会自动调整缩放比例，保证图片始终完整显示在背景区域。也可以使用长度单位或百分比案例:全屏背景自动适应.
  1. background-origin(原点，起点)设置背景定位的原点

所谓的背景原点就是调整背景位置的一个参照点.调整背景图片定位的参照原点.border-box以边框做为参考原点；padding-box以内边距做为参考原点；content-box以内容区做为参考点；3、background-clip设置背景区域clip(裁切) border-box裁切边框以内为背景区域；padding-box裁切内边距以内为背景区域；content-box裁切内容区做为背景区域；4、以逗号分隔可以设置多背景，可用于自适应局背景图片尺寸在实际开发中应用十分广泛。

    1. 过渡(transition)

Transition:param1  param2param1   要过渡的属性param2   过渡的时间.过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态帧动画：扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片关于补间动画更多学习可查看http://mux.alimama.com/posts/1009特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。transition-property设置过渡属性transition-duration设置过渡时间用来控制速度linear(匀速)ease-in (加速)transition-timing-function设置过渡速度transition-delay设置过渡延时 超过时间后执行动画以上四属性重在理解

    1.  2D转换transform

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。在css3当中，通过transform(变形)来实现2d或者3d转换,其中2d有，缩放，移动，旋转，扭曲。
  1.  缩放scale (x, y)可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；

  3. 移动translate(x, y)可以改变元素的位置，x、y可为负值；

x在水平方向移动。y在垂直方向移动。
  1. 旋转rotate(30deg)可以对元素进行旋转，正值为顺时针，负值为逆时针；

  1. skew(30deg,30deg)倾斜

      x沿着水平方向倾斜   y沿着水平方向倾斜案例1，火箭移动案例2盾牌，将位置还原案例3旋转原点

    1. 单词：

transition 过渡；转变； [træn'zɪʃən]
property 性质，性能；财产；所有权 ['prɑpɚti]
duration 持续，持续的时间，期间 [du'reʃən]
transform 改变，使…变形；转换 [træns'fɔrm]
scale 规模；比例； [skel]
rotate 旋转；循环 ['rotet]
translate 转变为；调动 [træns'let]
skew . 斜交；歪斜 [skjuː]
perspective 观点；远景；透视图 [pɚ'spɛktɪv]
preserve 保存；保护；维持； [prɪ'zɝv]]
animation 活泼，生气；激励；卡通片绘制 [,ænɪ'meʃən]
iteration 迭代；反复；重复 [,ɪtə'reʃən]
inifinite 无限的，无穷的；无数的；极大的 ['ɪnfɪnət]
alternate 使交替；使轮流 ['ɔltɚnət]
     


1、3d变换
    rotateX() 沿着x轴旋转
    rotateY() 沿着y轴旋转
    rotateZ() 沿着z轴旋转

    translateX() 沿x轴位移

    translateY() 沿Y轴位移
    translateZ() 沿Z轴位移  translateZ 需要配合透视使用

    旋转方向：
        对着正方向去看 都是顺时针旋转
    backface-visibility:hidden 背面不可见
    伪元素 获取自定义属性的值
        content:attr(data-text);
        // 自定义属性的作用 存储数据
        <span data-text="传">传</span>
    透视
         如果希望看到  3d效果 需要添加透视 近大远小
         透视 设置是 盒子 和 用户眼睛的距离，加给变换元素的父盒子
         透视的值越大效果越不明显  perspective:1000px;
         透视产生的3d效果,只是视觉上的呈现，并不是真正的3d

    真正的3d的盒子
        让子盒子保持真正的3d效果
        transform-style:perserve-3d;
        注意点：加给 父盒子

动画：      css3中也可以来定义动画
                和 js使用函数类似     先定义 在调用
                function say(){}
                定义动画：
                @keyframes  动画名称{
                    from{
                        起始状态
                    }                    to{
                        结束状态
                    }                }

                @keyframes 动画名称{
                    0%{
                    }                    30%{
                    }
                    100%{
                    }                }

                调用动画
      animation: 动画名称 持续时间 ；

                  调用动画: 动画名称 持续时间 执行次数  是否反向 延迟执行 运动曲线..
                  动画名称： animation-name: move
                  单次动画执行时间：animation-duration: 2s;

                  重复次数  animation-iteration-count: 1;   infinite 无数次
                  动画方向：animation-direction    alternate：交替 reverse 反向
                  动画延迟：animation-delay: 1s;
                  动画结束后的所保持的状态：
                      backwards:保持动画开始前的状态
                      forwards:保持动画结束后的状态
                  运动曲线：animation-timing-function
                    linear 运算  ease-in-out :先加速后减速  steps
                    steps(ｎ) 让动画分步完成
                    animation-timing-function: steps(15);

            动画的播放状态 ：paused 暂停 running 运行
                    animation-play-state: paused;
标签：

相关文章