总结——关于CSS样式表的基础知识
【总结——关于CSS样式表的基础知识】
一、使用CSS样式控制页面的表现
- 行内样式
<p style=”color:red; font-size:14px;”> - 内嵌式
<head>
<title>页面标题</title>
<style type=”text/css”>
body{
margin:0 auto;
width:960px;
}
</style>
</head> - 链接式
<head>
<link href=”mycss.css” type=”text/css” rel=”stylesheet”>
</head> - 导入样式
<head>
<style type=”text/css” >
@import url(“mycss.css”);
</style>
</head>
二、CSS选择器
- 标记选择器
如：li选择器，用于声明页面中所有<li>标记的样式风格
<style type=”text/css”>
li{
color:red;
text-decoration:none;
}
</style> - 类别选择器 .class
.error{color:red; font-size:17px; }
注意：class类别选择器的另一种更为直观的使用是直接在标记声明后按类别名称来区别该标记。
如：h3.first_class{color:green} - ID选择器
ID selector 与 class selector基本相同，不同之处在于ID选择器在HTML页面中只能使用一次，因此针对性更强。
如： #once{ font-weight:bold; font-size:30px; } - 选择器集体声明，适用于某些选择器的样式风格是完全相同或部分相同的情况下。
如：h1, h2, h3, p{color:purple; font-size:14px; }
h2.special, .special, #once{text-decoration:underline;} - 选择器的嵌套，嵌套方式可用于对特殊位置的HTML标记进行声明。
如： p b {color:yellow; font-size:30px;}
只针对p标记下的b标记才生效，对于p标记之外的b并不生效。
注意：典型的嵌套语句
1）.second I { color:black; } /* 只针对使用了second类的<i>标记生效 */
2）#first li { padding-left:8px; } /*针对ID为first的标记中的<li>标记生效*/
3）ul li { list-style:none;}
4）td.top, top1 strong{ font-szie:10px; } /*多重嵌套*/ - 子选择器，表示用来选择一个父元素的直接子元素，符号为”>”
如：ul.mylist>li>a{ text-decoration:none;}
<ul class=”mylist”>
<li><a href=”#”>link</a></li> /*仅对这句生效，因为用到子选择器*/
</ul>
<li><a href=”#”>link2</a></li> /*这句不起效果*/
若改为：ul.mylist>li a {. . .}, 则所有的<a>标记都生效。
三、技巧
- 普通常见的网页宽度为width:960px;
- 用div实现一行两列的布局
<div>
<div class=”left”>第一列</div>
<div class=”right”>第二列</div>
</div>
注意：1）两列的宽度之和不能大于父div的宽度；
2）让其中一列进行 float:left/right; - 用div实现一行三列的布局
<div>
<div class=”left_mid”>
<div class=”left”>第一列</div>
<div class=”mid”>第二列</div>
</div>
<div class=”right”>第三列</div>
</div>
注意：1）三列宽度之和不能大于父div的宽度；
2）控件列的float属性即可。 - 浏览器默认是超链接样式为：蓝色+下划线，点击之后为：紫色+下划线.
- 谈谈div与span标记的区别
1）div是块级元素，它包含的所有元素均会自动换行；
2）span是行内元素，它不换行。 - 关于margin和padding属性
1）若属性连起来写，则根据顺时针按上、右、下、左的顺序规则缩写；
2）当上和下、左和右的属性值一致时，可简写为：margin: 40px 50px;
3）当上下左右的属性值都一致时，可简写为：margin:60px; - 将网页中的元素居中
width:960px;
margin:0 auto; - 设置了float的div在ie6下的margin会加倍，这是ie6 的bug
解决办法：在div的样式中加上 display:inline - 解决div垂直居中的问题
vertial-align:middle
line-height:div’height - Id与class的区别
1）id不可以重复，class可以重复使用
2）id的优先级要高于class的优先级
3）id在某些情况下节约时间 - 将flash设为透明
<param name=”wmode” value=”transparent”>
