HTML5+CSS3学习笔记1

 html5/css3: 统一了互联网的前端标准 w3c 与 IE

HTML5

        flex
媒体文件
        <audio>音频标签
        <video>视频标签
        src定义路径 autoplay设置自动播放 controls显示控件
布局标签
        <header>头部
        <footer>底部
        <section>正文部分
        <nav>菜单
        <aside>旁边 侧边栏 
        <ariticle>文章部分
表单
        年月日<input type="date">
        时钟<input type="time">
        月份<input type="month">
        周<input type="week">
        数字<input type="number">
        滚动条<input type="range"> 
                min="10"最小值 max="50"最大值 step="5"步长
        颜色<input type="color">
        邮箱<input type="email">
        电话<input type="tel">
        属性
                required="required"  设置必输项
                placeholder="请输入邮箱" 设置文本框信息提示
列表
        <details>
                <summary>计算机课程</summary>
                <summary>c语言</summary>
                <summary>java语言</summary>
        </details>

css3

•         字体

                1.text-transform文本大小写转化
                none无 uppercase大写 capitalize首字母大写 lowwecase小写
                2.writing-mode书写方向
                horzontal-tb水平从左到右 vertial-rl垂直从右到左
                vertial-lr垂直从左到右  lr-tb垂直从左到右(IE)   tb-rl垂直从右到左(IE)
                3.white-space设置空白的显示方式
                normal空白被忽略 pre空白被保留 nowrap不会换行
                pre-wrap有空格和换号 pre-line不保留空格保留换行
                4.word-wrap超出是否换行
                normal默认 break-word换行
                5.text-overflow超出文本显示省略号
                clip裁切 elipsis省略号
               注意：必须与overflow和white-space进行连用，保证文本不超出并不不会换行才可以
                6.text-shadow文字阴影 
                值顺序：水平距离 垂直距离 模糊效果 颜色

•         边框

                1.box-shadow边框阴影
                        值顺序：inset(内阴影) 水平距离 垂直距离 模糊效果 阴影大小 阴影颜色
                2.border-radius边框圆角
                        单位：像素或百分比
        值的作用：

border-radius：20px //设置四边圆角
border-radius：20px 50px //左上右下  右上左下
border-radius：20px 50px 80px //左上  右上左下 右下
border-radius：20px 50px 80px 100px //左上 右上 右下 左下
border-radius：20px 50px 80px 100px/30px 60px 90px 20px 

•         颜色

                1.background-color:rgba(0,0,0,0.5)背景透明
                2.opacity透明度 0-1之间的值 会让里层元素也透明

•         背景

                1.background-clip背景裁切
                   border-box边框面积内 
                   padding-box内边距面积内
                   conten-box填充面积内 text按形状裁切
                2.background-size背景大小
                   单位：像素或百分比 background-size：x y

•         用户界面

                1.outline-offset设置轮框与边框的距离 单位：像素或百分比
                2.resize设置元素宽高可调整，必须与overflow: auto;连用
                   both两边 horzontal水平调整 vertical垂直调整 inherit默认继承
                   none不可调整
                   overflow: auto;
                3.zoom设置元素的放大缩小
                   单位:数字，可以为小数，不可为负数，默认为0
                4.box-sizing设置盒模型模式
                   content-box标准模式 border-box怪异模式（内缩进）

•         浏览器前缀

        1.-webkit-代表谷歌浏览器
        2.-o-代表欧朋浏览器
        3.-ms-代表IE浏览器    
        4.-moz-代表火狐浏览器
        5.-khtml-代表苹果浏览器

•         渐变色

        线性渐变
background: -webkit-gradient(linear,center top,center bottom,from(red),to(white),color-stop(0.4,yellow),color-stop(0.6,blue))
解释：线性渐变 开始位置 结束位置 开始颜色 结束颜色 颜色1 颜色2.......

background: -webkit-linear-gradient(30deg,blue,white,yellow);
解释：开始位置 颜色1 颜色2.......
        径向渐变
background: -webkit-gradient(radial,150 150,10,150 150,150,from(green),to(white),color-stop(0.4,yellow));
解释：径向渐变 内圆中心点,内圆半径，外圆中心点,外圆半径 结束位置 开始颜色 结束颜色 颜色1 颜色2.......

background: radial-gradient(circle at 30%,red,blue);
解释：开始位置 颜色1 颜色2.......
        倒影          
box-reflect：方向 距离 渐变色
方向：left right above below    
-webkit-box-reflect:right 20px -webkit-linear-gradient(right,red,transparent )