HTML5&CSS3常用属性学习笔记

一、媒体查询语法：
  body{
    background-color:grey;
  }
  @media screen and (max-width:960px){
     body{ background-color:red;}
  }
  @media screen and (max-width:768px){
     body{ background-color:orange;}
  }
  @media screen and (max-width:550px){
     body{ background-color:yellow;}
  }
 
  也可以在样式文件引用中使用，代码表示满足条件即可引用样式(最小宽度400px像素)  
  <link rel="stylesheet" media="screen and (min-width:400px)" href="style.css" />
 
  媒体查询可选常用参数：
    width、height 窗口宽高
    device-width、device-height 设备宽高
    orientation 横向、纵向
    aspect-ratio 宽高比(16/9)
    color 颜色
    resolution 分辨率
    grid 是否网格设备、位图设备
    
 二、浏览器禁止自动调整页面大小
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    width=device-width 浏览器宽度等于设备宽度
    initial-scale=1.0  按照实际大小渲染页面
    
    将网页设计为百分比布局，流动布局公式： 目标元素宽度 ÷ 上下文宽度 = 百分比宽度
 
    弹性图片，自动缩放样式
    img,object,video,embed{
      max-width:50%
    }
    
 三、HTML5语义化元素
    <section> 定义文档或信息节点
    <nav> 定义导航
    <article> 独立的内容片断
    <aside> 侧栏
    <hgroup> 元素组
    <header> 头部
    <footer> 页脚
    <address> 标注相关元素联系信息
    
    文本级语义元素
    <b>  <em> <i>
    
    嵌入视频/音频媒体
    <video src="视频文件" wdith="100" height="100" controls autoplay poster="缩略图.jpg"></video>
    controls 为播放控制栏     
    autoplay 为自动播放
    poster 为视频缩略图
    
    兼容多种浏览器，浏览器依次解析视频文件
    <video wdith="100" height="100" controls autoplay poster="缩略图.jpg">
       <source src="a.mp4" type="video/mp4">
       <source src="a.ogv" type="video/ogg">
    </video>    
    
    <audio src="音频文件"></audio>
    
  四、CSS3
    1.整段文本快速分栏：
      <div id="main" role="main">
         <p>文本内容</p>
      </div>
      #main{
        column-width:12em; /*分栏宽度*/
        column-count:4;    /*分栏数*/
        column-gap:2em;    /*栏位间隙*/
        column-rule:thin dotted #999 /*分割线*/
      }
      
    2.字符串匹配属性选择器：
      Element[attribute^="value"]  匹配元素属性字符串开头
      例 img[id^="film"]{border:1px;}    匹配 <img src="" id="filmpic" />
      
      Element[attribute*="value"]  匹配元素属性包含字符串
      例 img[id*="film"]{border:1px;}    匹配 <img src="" id="thefilmpic" />
      
      Element[attribute*="value"]  匹配元素属性字符串结尾
      例 img[id$="film"]{border:1px;}    匹配 <img src="" id="thefilm" />
      
    3.元素选择器
      li:first-child  列表第一项
      li:last-child   列表最后一项
      
      ul li:nth-child(odd) a{color:red}   奇数行选择
      ul li:nth-child(even) a{color:red}  偶数行选择
      
      :nth-child(n) 第n项
         例子：:nth-child(3)
               :nth-child(3n+1) 第一个元素开始，每三个元素选一个
               
      :nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)
      
      ul li:not(.internal) a{color:red}  不包含class="internal"的列表
      
    4.颜色模式
      a{ color:rgb(254,2,8) }   用RGB值配置颜色
      
    5.透明度
      div{ background-color:hsla(0, 0%, 100%, 0.8) }
      
    6.文字阴影
      .element{text-shadow:1px 1px 1px #cccccc}
      .element{text-shadow:none}  取消阴影
      .element{text-shadow:-4px -4px 0px #cccccc}     阴影偏移，左上方阴影
      .element{text-shadow:0 1px 0 hsla(0, 0%, 100%, 0.75)}     浮雕效果
      .element{text-shadow:0 1px #ffffff, 4px 4px 0px #dad7d7}  多重文字阴影
      
    7.盒阴影
      .element{box-shadow:0px 3px 5px #444444}
      兼容性增加浏览器私有前缀：
        -ms-box-shadow  -moz-box-shadow  -webkit-box-shadow
        
    8.背景渐变
      background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%)   线性背景渐变
      background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%)   纵向背景渐变