CSS基础教程整理

来源：互联网发布：青年网络公开课视频编辑：程序博客网时间：2024/06/07 01:28

这里只把一些我自己还需要改进的地方发上来。

————————————————————————

1.网页不是静态的、绝对的媒体。这意味着内能伸缩变形，用户应该被允许调整自己喜欢的方式，包括字体大小和屏幕大小。

　　因为这样，建议使用"em"和"%"在font-size上（宽度和高度），相比下px不能够在大部分浏览器改变大小，所以要少用，可以用在边框的大小上。

2.css可以处理16,777,216颜色，可以使用名字、rgb值或十六进制代码。

　　有17个预先确定的颜色，它们是：
　　aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
　　olive, orange, purple, red, silver, teal, white, and yellow.
　　transparent 也是一个正确的值。

3.font-family

　　文字使用的字体，比如宋体，Times New Roman，Arial等等
　　这个属性必须详细制定，不能使用偏僻的字体，要使用安全字体（比如arial，verdana和times new roman和宋体），可以同时指定许多字体，只要使用逗号分开即可。这样的用意是，如果用户电脑里没有第一个字体浏览器可以使用后面指定的字体。这非常有用，因为不同的电脑拥有不同的字体。例子font-size: arial,helvetica，pc用户可以使用arial而苹果mac用户可以使用helvetica。
　　注意：如果字体的名称有许多单词组成，使用双引号组合，比如，font-family: "Times New Romes"。

4.左右Margin加倍的问题
　　当box为float时，IE6中box左右的margin会加倍。

5.外层box自动计算高度的问题
　　根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层最后一个box加入clear:both。
　　Opera、netscape、mozilla等不会计算外层box高度，但是微软ie6会自动计算外层高度。比如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style>
.outer {
width:600px;
background:#000;
}
.inner1 {
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
</html>

　　上面的代码在ie中有黑色的背景，但是没有正确的计算上下的margin，在inner2下面加上一个包含clear:both属性的div后，可以正确计算margin。但是firefox中仍然没有黑色背景，通常的解决办法是定义一下clear:both这个div的高度，或者插入全角空格，这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性，同时使用clear:both，这样就不会增加额外的高度了。如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style>
.outer {
width:600px;
background:#000;
overflow:auto;
}
.inner1 {
display:inline;
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
display:inline;
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="clear"></div>
</div>
</body>
</html>

　　因此，外层css要定义overflow属性，内层最后要加上clear属性。

6.居中问题
　　需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：
　　你可以这样定义使它横向居中：

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

　　但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：在外层用text-align属性。就象这样：

#outer {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

　　第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
　　因此，在有居中元素的css中，外层css要定义text-align:center属性，内层居中用margin:x auto x auto定义，并重新定义text-align。

7.　一些CSS伪类属性不被所有浏览器支持，但有四个伪类可以安全使用在链接上。

　　伪类像是指定选择器状态或关联选择器的门闩。它们的形式如：selector:pseudo class { property: value; }，在选择器和伪属性之间使用冒号。

　　link 没有点击过的链接
　　visited以点击过的链接
　　active获得焦点时的链接（比如在点击时）
　　hover 鼠标在链接上面

尽管CSS里可以省略它们，但维护不同颜色的链接对于新手是个很好的练习。由于伪类（相比hover）不是经常使用，作为公用属性是非常不幸的特性。由于这样，它不像以前那么重要，但如果为最优用户响应考虑，应该使用它。

　　传统默认，文本链接是蓝色，访问后是紫色，理论上可以使用很多不同颜色效果，但，再次，逐渐广泛使用CSS，使得链接变得不再普通，平均用户也不再认为链接必须是蓝色或紫色。

　　除了链接其他元素也可以使用hover伪类。不幸的是，ie7以下的浏览器不支持，这样有许多漂亮的效果不能在IE上实现。

8.最佳使用背景图片的位置要么是上面没有内容要么是背景非常淡，这样同样有利于减少图片大小，因为使用更少的颜色。（建议使用索引色格式，比如GIF）

9.CSS的display属性

操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式。一些由标签组成的大部分页面可以设定任何样式。浏览器默认的样式里的大部分html元素由字体样式、margin,padding组成，本质上是显示类型。

　　display属性基本上分为inline,block,和none。
　　inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
　　block元素前后换行。标题和段落元素是块元素。
　　none，意思不显示元素，在可用性上可以实现漂亮的效果，交替样式或hover效果的高级运用。

　　设定表现可以更好运用在网页制作上。

h1 {
    display: inline;
    font-size: 2em;
}
#header p {
    display: inline;
    font-size: 0.9em;
    padding-left: 2em;
}

　　设定标题h1为行元素，可以和后面的元素在同一行。

#navigation, #seeAlso, #comments, #standards {
display: none;
}

　　上面的代码可以使用在打印样式里，比如在导航使用，可以在打印时不显示导航这些无关紧要的东西。

　　display:none和visibility:hidden;的不同在于display:none完全取消元素的显示，visibility:hidden保持元素位置但视觉上的内容不可见。例如，如果3的第二段设置为display:none，第一段将仅跟在第三段，如果设置为visibility:hidden，段落间就会空出。

表格

　　明白表格相关的表现属性值最好的方法想象html表格。table是最初的表现，你可以使用table-row模拟table-cell模拟td。

　　display属性更进一步，可以通过使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。现在可以直接使用columns构建表格，比在html中使用行构建快速。

　　最后，inline-table设定表格前后不换行。

　　使用CSS表格会严重损害可用性。HTML应该用来传递语意，所以如果你有表格数据，那可以使用HTML表格。使用CSS表格仅仅会产生糟糕的数据如果没有CSS数据将不可读。

其他表现形式

　　list-item列表项目，就像期待HTML里的li元素。它们需要嵌套在元素里面显示。
　　run-in元素的表现形式由它的父元素决定。IE和Mozilla都不支持。
　　compat根据上下阿文决定表现形式，同样IE和Mozilla都不支持。
　　maker仅仅使用在:before和:after伪元素，设定content属性的表现。content属性默认表现就是maker，所以它只有在覆盖原来属性时才有用。
　　content属性，它的默认就是maker，所以只有在覆盖原来属性时使用。

10.CSS网页布局Page Layout

你需要把网页的每个部分看成独立的块，你可以绝对或相对定位块。

Positioning 定位

　　positon属性可以指定元素为absolute,relative,static或是fixed。
　　static是元素默认属性，按HTML出现的先后顺序。
　　relative比较像static，但元素可以使用top,right,bottom和left设定初始属性。
　　absolute把元素从HTML里面拉出，一切由它自己决定，在这里，绝对定位元素可以使用top,right,bottom,left定位在任何地方。
　　fixed行为像absolute，但它绝对定位的元素参照浏览器窗口与网页没有关系。所以，理论上，fixed元素可以固定在屏幕上当页面滚动时。为什么说是理论上的？因为IE7以下的浏览器不支持。

11.CSS的At-Rules@规则

At-rules分装不同的CSS规则，应用在特定场合。

Importing

　　import@规则引用另外的样式。例如，如果你想添加另外样式到现在的样式，可以这样：
　　@import url(addonstyles.css);
　　这很像使用link元素连接CSS到HTML，本质上说有一个内容样式像下面：
　　<style type="text/css" media="all">@import url(monkey.css);</style>
　　这是为了照顾老版本浏览器，比如Netscape4不支持@规则所以不能链接样式表，已经构建好标签的HTML页面会失去样式表提供的功能。

Media types

　　media@规则应用内容使用特定媒体，比如打印，例如：

@media print {
    body {
        font-size: 10pt;
        font-family: times new roman, times, serif;
    }
    #navigation {
        display: none;
    }
}

　　媒体形式：
　　all，所有媒体。
　　aural，言语合成器。
　　handheld，移动设备
　　print，打印
　　projection，投影
　　screen，电脑屏幕
　　你还可以使用braille,embossed,tty或者tv。
　　注意：说了这么多，IE只支持all,screen和print。

Charachter sets 字符设定

　　charset@规则简单设定外部样式里的编码。它出现在样式的最上面例如@charset "ISO-8859-1";

Font faces 字体外观

　　font-face@规则用来详细描述字体，可以在CSS里嵌入外部字体。
　　它需要font-family描述符引用字体，它的值可以是字体的名称或是新命名一个。嵌入一个字体，使用src描述符。其他添加到font-face@规则里的描述符将影响正在使用的内含字体，例如如果你添加font-weight: bold粗体到@规则，font-family的src只能运用到带有font-family属性的选择器里，而且选择器里font-weight属性同样设置成bold。
　　看下面例子：

@font-face {
    font-family: somerandomfontname;
    src: url(somefont.eot);
    font-weight: bold;
}
p {
    font-family: somerandomfontname;
    font-weight: bold;
}

　　如上面的例子，段落里的字体将是somefont的字体（如果p选择器没有font-weight: bold，那字体就不是somefont）
　　嵌入字体还凑合着用，因为Mozilla浏览器不支持也没有计划添加这个功能。只有IE有分寸的支持，但这也不是说可以直接使用，IE浏览器嵌入字体，你还需要微软WEFT软件，它提供Truetype字体转换成压缩的OpenType字体（只有这个你才能使用URI指定）。由于这个限制（显得非常复杂）兼容性，最好不要使用系统没有的字体。

Pages

　　page@规则服务页面媒体，是个高级方式应用于打印媒体样式。它定义了页面块，在盒模型上扩展，所以你可以定义单一页面的大小和表现。
　　应用page@规则有许多规定，比如没有padding和border，而且也不上我们说的电脑屏幕，所以pixels和ems单位不被允许使用。
　　有许多特定属性可以使用，比如size，可以设定portrait纵向,landscape横向,auto自动或长度。marks属性可以用来定义裁剪标志

@page {
    size: 15cm 20cm;
    margin: 3cm;
    marks: cross;
}

页面媒体里的伪标签

　　有三种伪标签用来链接特定page@规则，如下形式：@page :pseudo-class {stuff}。
　　:first应用到页面媒体里的第一页
　　:left和:right应用到左边和左边页面。这可能用在指定有非常大margin的左边页面和有非常大margin的右边页面。
　　还有一些页面@规则，比如page-breaks页面中断和named pages页面命名，但这些@规则在浏览器里很难工作，你也许浪费了许多时间阅读这篇文章，不过这些都是不错的想法。

12.CSS的伪元素Pseudo Elements

伪元素吸附在选择上和pseudo classes伪类很像，像这样selector:pseudoelement{property: value;}。有四种方式。

First letters and First lines 首字母和首行

　　first-letter伪元素作用到元素的第一个字母，first-line作用到元素的顶行。你可以，例如为段落创建一个drop caps和首行加粗。

p:first-letter {
    font-size: 3em;
    float: left;
}

p:first-line {
    font-weight: bold;
}

Before and after 前后

　　before和after用来联系content属性不使用HTML确定一个元素的内容位置。
　　content属性值可以是：open-quote,close-quote,no-open-quote,no-close-quote，在引号标记里关闭任何字符串或使用url(imagename)图片。

blockquote:before {
    content: open-quote;
}
blockquote:after {
    content: close-quote;
}
li:before {
    content: "POW: "
}
p:before {
    content: url(images/jam.jpg)
}

　　听起来不错吧，可惜大部分用户不能体会到before或after的效果，因为IE不支持。

13.CSS的优先级特性Specificity

　如果同个元素有两个或以上冲突的CSS规则，浏览器有一些基本的规则来决定哪一个非常特殊而胜出。
　　它可能不像其它那么重要，大部分案例你不需要担心冲突，但大型而且复杂的CSS文件，或有很多CSS文件组成的，可能产生冲突。
　　选择器一样的情况下后面的会覆盖前面的属性。比如：

p { color: red; }
p { color: blue; }

　　p元素的元素将是蓝色，因为遵循后面的规则。
　　然而，你不可能经常用相同的选择器冲突达到目的，当你使用嵌套选择器，合理的冲突来了。比如：

div p { color: red; }
p { color: blue; }

　　也许你看起来p元素在div元素里面的颜色是蓝色，就像后面p元素的规则，但是第一个选择器的特性却是红色。基本上，一个选择器越多特性，样式冲突的时候将显示它的样式。
　　一组嵌套选择器的实际特性可以计算出来。基本的，使用ID选择器的值是100，使用class选择器的值是10，每个html选择器的值是1。它们加起来就可以计算出特性的值。

　　p的特性是1（一个html选择器）
　　div p的特性是2（两个html选择器）
　　.tree的特性是10（1个class选择器）
　　div p.tree的特性是1+1+10=12，（两个html选择器，一个class选择器）
　　#baobab的特性是100（1个ID选择器）
　　body #content .alternative p的特性是112（两个html选择器，一个ID选择器，一个类选择器）

　　按照上面的规则，div p.tree的特性比div p高，body #content .alternative p又比它们两个都高。

----这应该算是伪原创吧。是我看了52CSS的文章后把自己不是很熟的一些东西摘抄了过来。-----