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
posted on 2018-06-06 16:11 Postgre叮当牛i 阅读(146) 评论(0) 编辑 收藏 举报