【总结——关于CSS样式表的基础知识】

写在前面：大三了，人老了，呆在学校的时间也不长了，暑假要开始走进社会的大熔炉磨练自己了。曾经的读书方式是把知识点记录在纸上，看着用过的本子一天天的厚起来心里就会有一种莫名的兴奋，可现在马上就要离开学校了，又不能带很多东西，古人有云“出门千里不带书”，所以我就把平时积累的一些东西再次整理一下，做一个总结，一来加深印象，二来与人分享，何乐而不为！各位大虾如果感觉这些知识太基础，so easy，还望海涵，口下留情！

一、使用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”>

写在后面：就整理这么一点知识就花费了1个多小时，看来得提高自己的效率了。哦，对了，昨天晚上看了一部电影《机械公敌》，个人感觉非常精彩，讲的是关于2035年机器人控制人类的事儿。有兴趣的同学可以watch一下！

posted on 2011-06-25 22:48 Frank.Fan 阅读(2511) 评论(13) 编辑收藏举报