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

原文地址:https://www.cnblogs.com/postgredingdangniu/p/9145673.html