CSS3元素与选择器

多媒体元素

• <video>标签专门用来播放网络上的视频或电影
  使用方法：<video src=""> </video>

• <audio>标签专门用来播放网络上的音频数据
  使用方法：<audio src=""> </audio>

• 多媒体标签的基本属性
  1.scr和autoplay属性
  src属性用于指定媒体数据的URL地址
  autoplay属性用于指定媒体是否在页面加载后自动播放
  使用方法：<video src="sample.mov" autoplay="autoplay"> </video>

2.preload属性
preload属性用于指定视频或音频是否预加载。如果使用预加载，则浏览器会预先将视频或音频数据进行缓冲，这样可以加快播放速度，因为播放时数据已经预先缓冲完毕。该属性有3个可选值，分别是none、metadata和auto，其默认值为auto
①none表示不进行预加载
②metadata表示预加载媒体的元数据(媒体字节数、第一帧、播放列表、持续时间等)
③auto表示预加载全部视频或音频
使用方法：<video src="sample.mov" preload="auto"> </video>

3.poster(<vedio>标签独有属性)和loop属性
当视频不可用时，可以使用<video>标签向用户展示一幅替代用的图片。当视频不可用时，最好使用poster属性，以免展示视频的区域中出现一片空白。
使用方法：<video src="sample.mov" poster="cannotuse.jpg"> </video>
loop属性用于指定是否循环播放视频或音频
使用方法：<video src="sample.mov" autoplay="autoplay" loop="loop"> </video>

4.controls、width和height属性(后两个为<vedio>标签独有属性)
controls属性用于指定是否为视频或者音频添加浏览器自带的播放用的控制条。控制条中包括播放、暂停等按钮。
使用方法：<video src="sample.mov" controls="controls"> </video>
width和height属性用于指定视频的宽度与高度(以像素为单位)

5.volume和muted属性
volume属性用于读取或修改媒体的播放音量，取值为0~1，0表示静音，1表示最大音量
muted属性用于读取或修改媒体的静音状态，该值为布尔值，true表示处于静音状态，false表示处于非静音状态

列表元素

Note：这个属性在HTML4中弃用，但是在HTML5中被重新引入。除非列表中序号很重要(比如，在法律或者技术文件中条目通常被需要所引用)，否则请使用CSS list-style-type 属性替代。

• 列表分为两种类型：一种是有序列表；另一种是无序列表。前者使用编号来记录项目的顺序，而后者使用项目符号来标记无序的项目。
• 列表的主要标签：

标签	描述
<ul>	无序列表
<ol>	有序列表
<dir>	目录列表
<dl>	定义列表
<menu>	菜单列表
<dt>、	定义列表的标签
<li>	列表项目的标签

• 无序列表
  在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀
  无序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>几个标签和type属性
  无序列表的属性：在默认情况下，无序列表的项目符号是●，而通过type参数可以调整无序列表的项目符号，避免项目符号的单调。

无序列表的符号类型：

类型值	列表项目的符号
disc	●
circle	○
squre	■

• 有序列表
  有序列表是使用编号，而不是项目符号来编排项目的。列表中的项目以数字或英文字母开头，通常各项目间有先后的顺序性。
  在有序列表中，主要使用<ol>和<li>两个标签(<ol>是父元素，<li>是子元素)
  有序列表的属性：在默认情况下，有序列表的序号是数字的，通过type属性可以调整序号的类型
  有序列表的符号类型：

type取值	列表项目的序号类型
1	数字1,2,3,4…
a	小写英文字母a,b,c,d…
A	大写英文字母A,B,C,D…
i	小写罗马数字i,ii,iii…
Ⅰ	大写罗马数字Ⅰ,Ⅱ,Ⅲ，Ⅳ…

容器元素

• <div>标签是用来为HTML文档的内容提供结构和背景的元素。<div>开始标签和</div>结束标签之间的所有内容都是用来构成这个块的，其中所包含标签的特性由<div>标签中的属性来控制，或者通过使用样式格式化这个块来进行控制。
• 语法格式：<div id="value" align="value" class="value" style="value"></div>
  ①id：<div>标签的id也可以是它的名字，常与CSS样式相结合，实现对网页中元素的控制
  ②align：用于控制<div>标签中元素的对齐方式，其值可以是left、center和right，分别用于设置元素的居左、居中和居右对齐
  ③class：用于设置<div>标签中元素的样式，其值为CSS样式中的class选择符
  ④style：用于设置<div>标签中元素的样式，其值为CSS属性值，各属性值之间使用分号分隔

<header>标签：通常用于表示页头，也可以用于表示文章的头部
<footer>标签：通常用于表示页脚，也可以用于表示文章的尾部
<article>标签：通常用于表示整篇文章
<section>标签：通常用于表示文章的章节
<aside>标签：通常用于表示侧边栏

CSS代码书写位置

1. 内部样式表：书写在style元素中
   

2. 内联样式表(元素样式表)：直接书写在元素的style属性中
   

3. 外部样式表：将样式书写到独立的css文件中
   
   CSS注释快捷键：ctrl+?

基础选择器

元素选择器

• 最常见的CSS选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置HTML样式，那么选择器通常是某个HTML元素，如b、h1、a，甚至可以是HTML本身
  

类选择器

• 类选择器允许以一种独立于文档元素的方式来指定样式。类选择器可以单独使用，也可以与其他元素结合使用。在类选择器前面有一个"."
• 在使用类选择器之前，需要修改具体的文档标签，以便类选择器正常工作。为了将类选择器与元素关联，必须为class属性指定一个适当的值。
  

ID选择器

• 类选择器和ID选择器的区别
  ①只能在文档中使用一次：与类不同，在一个HTML文档中，ID选择器会使用一次，而且仅一次
  ②不能使用ID词列表：不同于类选择器，ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表
  

通配选择器

选择文档中所有的元素

属性选择器

• 在使用属性选择器时，需要声明属性与属性值，声明方法如下：[att=val]。其中，att代表属性，val代表属性值。
  

选择器	描述
[attribute]	用于选取带有指定属性的元素
[attribute=value]	用于选取带有指定属性和值的元素
[attribute~=value]	用于选取属性值中包含指定词汇的元素
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attribute^=value]	匹配属性值以指定值开头的每个元素
[attribute$=value]	匹配属性值以指定值结尾的每个元素
[attribute*=value]	匹配属性值中包含指定值的每个元素

伪类选择器

1. E:link(链接伪类选择器)：选择匹配E的元素，且匹配元素被定义了超链接并未被访问
2. E:visited(链接伪类选择器)：选择匹配E的元素，且匹配元素被定义了超链接并已被访问
3. E:hover(用户操作伪类选择器)：选择匹配E的元素，且匹配元素正被鼠标指针经过
4. E:active(用户操作伪类选择器)：选择匹配E的元素，且匹配元素被激活
   书写顺序(爱love恨hate法则)：link-visited-hover-active
5. E:foucus(用户操作伪类选择器)：选择匹配E的元素，且匹配元素获取了焦点
6. E:checked：表示任何处于选中状态的radio(), checkbox () 或 (“select”) 元素中的option HTML元素 (“option”)
   
7. E:first-child(结构伪类选择器)：选择匹配E的元素，且该元素为父元素的第一个子元素
8. E:last-child(结构伪类选择器)：选择匹配E的元素，且该元素为父元素的最后一个子元素
9. E:nth-child：首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0，1，2，3…)
10. E:first-of-type：表示一组兄弟元素中其类型的第一个元素
11. E:last-of-type：表示一组兄弟元素中其类型的最后一个元素
    
12. E:nth-last-child：从兄弟节点中从后往前匹配处于某些位置的元素

• E:nth-last-child(odd) or E:nth-last-child(2n+1)：表示选中倒数的奇数行：1、3、5 等。
• E:nth-last-child(even) or E:nth-last-child(2n)：表示选中倒数的偶数行：2、4、6 等。
• E:nth-last-child(7)：表示倒数第7个元素
• E:nth-last-child(5n)：表示倒数的第5、10、15等元素。
• E:nth-last-child(3n+4)：表示倒数的第4、7、10、13等元素。
• E:nth-last-child(-n+3)：表示一组兄弟节点中的最后三个元素。
  

13. E:nth-of-type()：针对具有一组兄弟节点的标签，用n来筛选出在一组兄弟节点的位置
14. E:nth-last-of-type(an+b)：这个CSS伪类匹配那些在它之后有an+b-1个相同类型兄弟节点的元素，其中n为正值或零值。它基本上和E:nth-of-type一样，只是它从结尾处反序计数，而不是从开头处。
15. E:only-child：匹配没有任何兄弟元素的元素
    

伪元素选择器

1. E::first-line：选择匹配E的元素内的第一行文本
2. E::first-letter：选择匹配E的元素内的第一个字符
   
3. E::before：在匹配E的元素前面插入内容
4. E::after：在匹配E的元素后面插入内容
   
5. E::selection：应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）

选择器的组合

1. 包含选择器(空格)：E F-选择匹配F的元素，且该元素被包含在匹配E的元素内

2. 子包含选择器 (>)：E > F-选择匹配F的元素，且该元素为所匹配E的元素的子元素。注意：E和F不仅仅是指类型选择器，还可以是任意合法的选择符组合

3. 相邻兄弟选择器(+)：E + F-选择匹配F的元素，且该元素位于所匹配E的元素后面相邻的位置。注意：E和F不仅仅是指类型选择器，还可以是任意合法的选择器组合

4. 后面出现的所有兄弟元素 —— ~