html and css第三天0409第四天0410 css选择器~h5新增标签~边框与背景

• CSS3新增选择器
  • 基本选择器-通配选择器
    • 通配符选择器（*）用来选择所有元素，也可以选择某个元素下的所有元素
  • 基本选择器-元素选择器
    • 元素选择器包含的HTML元素有：html、body、p、div、ul、li等。
  • 基本选择器-ID选择器
    • 在使用ID选择器之前（#id）
  • 基本选择器-类选择器
    • 类选择器(.class)是以独立于文档元素的方式来指定元素样式
  • 基本选择器-群组选择器
    • 将相同样式的元素分组在一起，每个选择器之间逗号隔开
  • 层次选择器-后代选择、子选择器
    • 1、【后代】选择器【x y】，儿子，孙子，重孙，，
    • 2、【子】选择器【x>y】，只有儿子
  • 层次选择器-相邻兄弟选择器、通用选择器
    • 3、【相邻兄弟】选择器【x+y】, 后面的、紧挨着的兄弟，1个或没有
      • 紧挨在该元素后的元素，且具有相同的父元素
    •  4、【通用兄弟】选择器【x~y】
      • 同层、后面的、具有相同父元素所有的元素
  • 动态伪类选择器，主要是链接使用，伪类选择器，使用“：”
    • a:link 未被访问的超链接
    • a:visited 已访问的超链接
    • a:hover 鼠标悬停
    • a:active 点击鼠标，超链接被激活
  • UI元素伪类选择器
    • x:checked 元素处于选中状态
    • x:enabled 元素处于可用状态
    • x:disabled 元素处于不可用状态
  • 目标伪类选择器
    • E:target 匹配元素被相关URL指向
  • 结构伪类选择器
    • E:root 根元素
    • E:empty 没有任何子元素（包括text节点）的元素
    • child系列
    • E:first-child 第一个子元素
      • 【执行步骤】p:first-child
      • 1)找到页面中的p元素(任何标签内部第一个出现p元素)
      • 2)找到该p元素的父元素(找到div元素：id为A、id为B、id为C)
      • 3)检测父元素的第一个子元素类型是否为p标签
      • A的第1个子元素是h1不选，B的第1个子元素是p选择，C的第1个子元素是p选择
      • 4)最终选择【B】的第1个子元素、【C】的第1个子元素
    • E:last-child 最后一个子元素
    • E:only-child 仅有的一个子元素
    • E:nth-child(n) 第n个子元素
    • E:nth-last-child(n) 倒数第n个子元素
    • of-type系列
      • E:first-of-type 同类型中的第一个同级兄弟元素
      • E:last-of-type 同类型中的最后一个同级兄弟元素
      • E:only-of-type 同类型中的唯一的一个同级兄弟元素
      • E:nth-of-type(n) 同类型中的第n个同级兄弟元素
      • E:nth-last-of-type(n) 同类型中的倒数第n个同级兄弟元素
    • 两者区别：
      • 1)child系列的元素序号是把父亲的【所有】子元素放在一个集合中，然后排序
      • 2)type 系列的元素序号是把父亲的【指定元素类型】的所有子元素放在一个集合中，然后排序。
  • 属性选择器
    • E[att] 具有att属性
    • E[att="val"] 具有att属性，且属性值【等于】val
    • E[att^="val"] 具有att属性，且属性值为以val【开头】的字符串
    • E[att$="val"] 具有att属性，且属性值为以val【结尾】的字符串
    • E[att*="val"] 具有att属性，且属性值为【包含】val的字符串
    • E[att~="val"] 具有att属性，且属性值为用【空格】分隔的字词列表，其中一个等于val
    • E[att|="val"] 具有att属性，且属性值为以val【开头】并用连接符【"-"】分隔的字符串
  • 伪元素选择器
    • E:first-letter/E::first-letter 第一个字符（1个2个“:”皆可）
    • E:first-line/E::first-line 第一行的（1个2个“:”皆可）
    • E:before/E::before 在对象前发生，与content一起使用（1个2个“:”皆可）
    • E:after/E::after 在对象后发生，与content一起使用（1个2个“:”皆可）
    • E::selection 对象被选择时(只能1个“:”)
• HTML5标签
  • (块状元素) 有意义的div
  • 新的结构标签带来网页布局的改变及提升搜索引擎的友好度：
    • <header> 标记定义一个页面或一个区域的头部
    • <nav> 标记定义导航链接
    • <article> 标记定义一篇文章
    • <section> 标记定义一个区域
    • <aside> 标记定义页面内容部分的侧边栏
    • <footer> 标记定义一个页面或一个区域的底部
    • <hgroup> 标记定义文件中一个区块的相关信息
    • <figure> 标记定义一组媒体内容以及它们的标题
      • 使用figure标签代替li标签，P标签由figcaption标签代替。 
      • <figcaption> 标签定义 figure 元素的标题
      • 一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置 
  • 新的全局属性标签
    • <contenteditable> 用户编辑内容标签
      • true规定可以编辑元素内容。 false规定无法编辑元素内容。
    • <hidden> 隐藏属性标签
      • hidden 属性规定对元素进行隐藏，隐藏的元素不会被显示。
      • hidden属性在html5中，只要存在，就是隐藏效果，而不论值为多少都要显示元素，要删除hidden属性，而不是设置为false。
    • <spellcheck> 拼写语法检查标签
      • 1.类型为 text 的 input 元素中的值（非密码）
      • 2.textarea 元素中的值
      • 3.可编辑元素中的值
  • 其他标签
    • <mark> 有标记文本标签（突出的黄色标记）。
    • <video> 元素定义视频，比如电影片段或其他视频流。 
      • video标签只支持Ogg、MPEG4、WebM这三种视频媒体格式.
    • <audio> 元素定义音频，比如音乐或其他音频流
      • audio标签只支持wav、mp3、ogg这三种音频媒体格式
    • <embed> 元素用来插入各种多媒体格式
      • 可以是midi，WAV，aiff，au，MP3等
    • <time> 元素表示日期或时间，也可以同时表示两者，
      • time有一个pubdate属性，pubdate属性是可选的、布尔值属性。
      • 它可以用到time元素上，表示文章或整个网页的发布日期。
• 边框与背景
  • border-radius：圆角
  • box-shadow: h-shadow v-shadow blur spread color inset;
    • h-shadow 必选。水平阴影的位置，可正可负
    • v-shadow 必选。垂直阴影的位置，可正可负
    • blur 可选。模糊距离，正值，0即无模糊效果，值越大阴影边缘越模糊
    • spread 可选。阴影向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小
    • color 可选。阴影的颜色
    • inset 可选。将外部投影改为内部投影，默认outset
    • box-shadow: 10px 20px 5px 10px red inset ;
  • 设置背景图 background-image: url(xx);
    • 背景尺寸属性 background-size
    • /* 用数值改变背景图大小 */
    • /* background-size: 100px; */
    • /* 以百分比改变背景图大小，相对于div的宽度 */
    • /* background-size: 50%; */
    • /* 等比放大背景图 */
    • /* background-size: cover; */
    • /* 等比缩小背景图 */
    • /* background-size: contain; */
    • 背景图片重复方式 background-repeat: repeat-y;