当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。
CSS样式:
CSS由两个部分组成 :选择器(你要改变的元素标签 如:div),声明(你想要的样式 如:宽度(width) 背景颜色(background....)。
eg:
.div1{//声明
500px;//样式
height:100px;
background-color:red;
}
浮动与定位:
定位分为两类:绝对定位(absolute),和相对定位(relative)。绝对定位是指定位后就不会随背景图片的变动而变动,且对一个块级元素进行绝对定位后不可再用浮动(即绝对定位与浮动不能共存)。相对定位是指定位后会随背景图片的变动而变动,相对浮动与定位可以共存。
<html> <meta charset="UTF-8"> <head> .body{ 1000px; heighjt:500px; background-color:red; } .div1{ 100px; height:500px; float:left; background-color:blue; border:absolute;//错误;绝对定位与浮动不可共存 } </head> <body> <div class="div1"></div> </body> </html>
背景上的块级元素随着鼠标拉动而变化:
在css中设置宽、高; 有两种方式:{
100px;
height:100px;
}//块级元素是固定的,不会随着鼠标的拉动而变动
{
100%;
height:100%;
}//块级元素会随着鼠标的拉动而长宽也跟着变动