2018-06-06Div+CSS基础理论

音频Audio：

<audio src="路径"></audio>

 

视频Video：

<video src="路径">视频加载不出时显示的文本</video>

 

属性：

Autoplay：自动播放！

Controls：进度条！

Poster：视频加载时显示的图像（<video src="路径" poster="../Picture/TonyStark.jpg"></video>）！

Width/Height：宽度/高度，最好只设置一个，这样可以等比例缩放！

 

Iframe页面跳转：

<a href="CeShi2.html" target="CeShiiframe">跳转</a>

<iframe src="XiaoMiZhuCe.html" frameborder="0" name="CeShiiframe"></iframe>

 

块标签/行标签/行内块标签àCSS控制方式不一样：

例如：块标签用margin：auto；来居中，而行标签用text-align：center；来居中，也可以用display来相互转换实现效果，H1àH6标签默认有margin和padding值，所以在布局时可能会出错！

 

研究下Canvas和BootStrap！！！

 

语义元素：

拥有语义的元素，给分配的区域加了个名字（如：页面头部用Div或者Header都可以）！

 

CSS层叠样式表（会覆盖）：

通过修改标签的样式来美化页面！

 

写法分类：

①    内联：写在标签里面以属性的形式表现，属性名Style（优先级最高）！

②    内嵌：写在head标签里面以便签的形式表现，标签名Style（选择器：通过各种方式找元素，例如：标签名，ID，属性值）！

③    外部引用：引入外部文件，写在head里头，以标签的形式表现（用的最多）！

<link rel="stylesheet" href="路径">  （其中路径为.css结尾的CSS文件）

 

理论：在优先级同样（或者不划分）的情况下，居后的会被最终显示出来！！！

 

通用选择器：* {

         padding:0px;

         margin: 0px;

}  à作用域是所有标签，把内边距和外边框都设置成0px是最常用的！

 

 

 

标签选择器：

标签名{

        

}

 

Class选择器：

.Class属性值{

        

}  à同一个标签有2个属性值（中间用Space空开是2个，没Space空开是一个），页面会显示最后一个属性值的设置！

 

后代选择器：

选择器1 选择器2{

         例如有两组完全一样的标签，通过后代选择器确定那一组中那一个（选择器1底下的选择器2）！

}

 

子类选择器：

选择器1>选择器2{

         只对该选择器的子Div起作用，孙子Div不起作用！

}

 

并列选择器：

选择器1 , 选择器2……{

         选中多个！

}

 

伪类选择器：

选择器：伪类 标签{

Link：未访问的链接！

Visited：已访问的链接！

Hover：鼠标移动到链接上！

Active：选定的链接！

}

 

对比选择器：

Div[name="CeShi"]{

         Div中所有Name=CeShi的！

}

 

内嵌和外部引用的区别：

直接把内嵌中<style></style>里面内容拿出来放在CSS里面就可以！

 

注释快捷键：

Html5：Ctrl+/

CSS和JavaScript：/* */

 

行内：权值1000！

Id：权值100！

Class：权值10！

标签：权值1！

*：权值0！

权值是可以叠加的，例如：

#div .class 优先级大于 .class