css新手上路

css新手上路(1)


[ 来源：中国站长学院 | 作者：bluelove | 时间：2005-7-29 14:53:55 | 浏览：269人次 ]

收藏到新浪ViVi 收藏到365KEY 收藏到我摘 字号选择〖 大 中 小 〗/ 双击滚屏 单击停止


这一节唯一我们将要讨论的是如何用 CSS 来改变列表
前的标识。我们知道有两种列表：有序和无序。有序
列表用阿拉伯数字为标识， 无序列表用黑色小圆圈来
做标识。用 CSS 的 list-style-type 这两种列表的标
识都可以有四种选择：

无序： disc, circle, square, decimal
有序： upper-roman, lower-roman, upper-alpha, lower-alpha.
假如你想叫有序列表的标识为大小罗马字母

LI.upperroman {list-style-type: upper-roman}
请看下面的比较 disc
circle
square
decimal

大写罗马
小写罗马
大写字母
小写字母

css新手上路(2)


[ 来源： | 作者：bluelove | 时间：2005-7-29 15:24:21 | 浏览：1112人次 ]

收藏到新浪ViVi 收藏到365KEY 收藏到我摘 字号选择〖 大 中 小 〗/ 双击滚屏 单击停止


用 CSS 你不但可以改变整个网页的背景你还可以控制其他元素的的背景，比如 P，DIV 等。这一节我们将要讨论的性质有
color: 文字的颜色
background-color: 背景颜色
background-image: 背景图象
background-repeat: 重复背景图象
background-attachment: 是否冻结背景图象文字的颜色
我们用 color 可以来决定文字，周边，以及横线的颜色
P.greentext {color: green}
请看下面的例子 这一行文字的颜色是绿色的

背景的颜色
背景的颜色可以由 background-color 来控制， 比如我们想叫一些文字段落的背景颜色为浅绿色的，

P.greenbg {background-color: #CCEFCC}
请看下面的例子

这一行的背景颜色是浅绿色的

背景的图象
我们不但可以给整个网页加个背景图象，我们还可以给其中一个元素加个背景图象，比如说我们给 P 的背景加上天空的背景

P.sky {background-image: url(../image/sky.jpg)}
请看下面的例子

给元素背景加颜色或加图象使得我们能自由的强调一些我们想让大家注意的文字。而没有 CSS 我们只能改变整个网页的背景颜色或图象

我们不但可以决定是否给背景加图象， 还可以确定是否让这个图象重复以及在哪个方向重复。比如我们只让图象在整个网页的竖直方向重复我们就可以去掉左边有个图象条的效果。

body {background-image: url(../image/cdbk009a.jpg);
background-repeat: repeat-y}
background-repeat 可以有这些可能值：no-repeat, repeat-x, repeat-y

我们还可以用 background-attachment 来决定当别人浏览你的网页的是否让背景图象随着内容一起滚动。比如我们如果不让背景图象动，

body {background-image: url(../image/cdbk009a.jpg);
background-attachment: fixed}
这个性质挺有意思的。 如果你的背景图象是你自己网页的logo， 你想让它固定在中间不动， 用这个性质可以达到这个效果

css新手上路(3)


[ 来源： | 作者：bluelove | 时间：2005-7-29 15:28:56 | 浏览：749人次 ]

收藏到新浪ViVi 收藏到365KEY 收藏到我摘 字号选择〖 大 中 小 〗/ 双击滚屏 单击停止


这一节我们将讨论如何用 CSS 来控制网页中文字定位, 这些性质是

line-height: 行距
text-align: 向那个方向看齐
vertical-align: 向上还是向下看齐
text-indent: 段落第一行空格
text-transform: 字母的大小写
text-decoration: 给文字加装饰, 比如下滑线
行距
我们有时候可能会想把行距加大点使得文字看的清楚一些. CSS
中的 line-height 可以取得这种调节

P.double {line-height: 2}
请看下面的比较. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的.

这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的.

你要让 line-height 等于 3 的话, 那行距就更大了.

看齐
一般来说我们都是向左边看齐. 但有的时候也有其他的选择,
比如说向右边看齐.

P.right {text-align: right}
P.center {text-align: center}
P.justify {text-align: justify}
请看下面的比较. 这 一 行 左 边 看 齐

这 一 行 右 边 看 齐

这 一 行 在 中 间

text-align 可以有 left, right, center, 和 justify

段落的首行空格
如果我们想让第一行的开头空几格, 可以用 text-indent, 比如

P {text-indent: 1cm}
请看下面的例子. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米.

字母的大小写
这个性质显然跟中文没关系, 但如果我们要处理英文, 你可以
用 text-transform 来改变英文的大小写. 比如, 让每个字的
第一个字母大写

P.capitalize {text-transform: capitalize}
P.up {text-transform: uppercase}
P.low {text-transform: lowercase}
请看下面的比较. All the words' first letter have been capitalized in this line

All the letters are uppercase in this line

All the letters are lowercase in this line

文字的装饰
就是在文字上加下滑线, 或中间加条线的. 比如

P.underline {text-decoration: underline}
P.line-through {text-decoration: line-through}
请看下面的比较. Underline line

line-through line

其实最常用的是我们想去掉联接下面的下滑线.

A {text-decoration: none}

css新手上路(4)


[ 来源： | 作者：bluelove | 时间：2005-7-29 15:31:06 | 浏览：607人次 ]

收藏到新浪ViVi 收藏到365KEY 收藏到我摘 字号选择〖 大 中 小 〗/ 双击滚屏 单击停止


这一节我们将讨论如何用 CSS 来控制元素中字体的形状, 大
小, 风格.

字形
CSS 用来控制字形的性质是 font-family. 你可以用它来决定任何一个元素中文字的字形. 比如

P.v {font-family: Verdana}
H2.a {font-family: arial}
This H2's font is "Times New Roman"
This paragraph is using "Verdana" font

有的时候， 你所给的字体浏览器不见得有，你可以多给几种比如

P {font-family: Verdana, Forte, "Times New Roman"}
上面这个定义可以使得浏览器先用Verdana, 如果没有就用Forte...
记住每个字形之间要用逗号隔开.

大小
用来控制字体大小的性质是 font-size 比如

P.f12 {font-size: 12pt}
P.f18 {font-size: 18pt}
This paragraph's font is 12pt

This paragraph's font is 18pt

你可以自己慢慢调整字体的大小直到满意为止. 一般来说, 字
体的大小没什么限制, 但 500 以下比较安全.

斜体
如果想让字体成为斜体, 要用 font-style 性质, 比如

P {font-style: italic}
This paragraph's font is italic

加重
用 font-weight 来调节文字的粗细, 比如

P.bold {font-weight: bold}
This paragraph's font is normal

This paragraph's font is bold

font-style 的可能的值是 lighter, normal, bold, bolder

我们只介绍在 Netscape 和 IE 上都通用的性质. 下一节我们讨
论文字的定位.

css新手上路(5)


[ 来源： | 作者：bluelove | 时间：2005-7-29 15:33:39 | 浏览：576人次 ]

收藏到新浪ViVi 收藏到365KEY 收藏到我摘 字号选择〖 大 中 小 〗/ 双击滚屏 单击停止


上一节开始我们讨论 CSS (Cascading Style Sheet) 的基础.
告诉你有三种 Selector. 但只介绍了其中的 HTML selector.
这一节我们把三种都详细介绍给你

HTML selector
class selector:
ID selector:
HTML selector
HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如
你用 CSS 定义了它们, 在整页中, 这个 Tag 的性质就按照你
的定义来显示了. HTML selector 的语法如下

tag {property:value}
比如我们想叫 H1 的颜色是红的

H1 {color: red}
这里还要告诉你 CSS 的一个特点, 它可定义好几个 selector
在一个 rule 里. 比如

H1, H2, TD {color: red}
这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色.

Class selector
Class selector 有两种, 一种叫相关 class selector, 它跟一
个 HTML 的 tag 有关系. 它的语法是

tag.Classname {property:value}
比如我们想叫一些而不是全部 H2 的颜色是红的

This is H2

This is red H2

This is H2
This is red H2

第二种是独立 class selector . 它可被任何 HTML tag 所应用.
它的语法如下

.Classname {property:value}
假如我们有下面这个定义

.blueone {color: blue}
那么我们可以把他应用到不同的 Tag 当中去. 比如

Blue H2

Blue paragraph

Blue H2
Blue paragraph

显然 class selector 给了我们更多的自由.

ID selector
ID selector 其实跟独立 class selector 的功能一样. 而区别
在于它们的语法和用法不同, 以及对于 Javascript 操纵 HTML
元素有帮助. 它的语法如下

#IDname {property:value}
假如我们有下面的定义

#yelowone {color: yellow}
我们可以运用这个定义到任何的有同样 ID 名字的 tag, 比如

text here

text here

你可能觉得既然 ID selector 和独立 class selector 功能一
样, 为什么两者都存在呢. 如果你知道用 CSS-P 来定位的话,
你就明白它们的区别了. 有 ID 的 HTML 元素可以被 CSS-P
和 JavaScript 来操纵

到现在为止, 你已经大概知道如何来写 CSS 的定义了, 下面
七节我们将会告诉你如何用 CSS 来操纵或修改

字体
文字间的空间
列表
颜色
背景
Margin
位置

css新手上路(6)


[ 来源： | 作者：bluelove | 时间：2005-7-29 15:35:59 | 浏览：1094人次 ]

收藏到新浪ViVi 收藏到365KEY 收藏到我摘 字号选择〖 大 中 小 〗/ 双击滚屏 单击停止


这一节我们讨论如何用 CSS 来控制四周的空格以及边框
的设定

元素周边的空格 margin
性质 margin 可被用来决定周边的空格， 假如我们想让整
个网页在左边有 5em 但让标题没有任何空格

BODY {margin: 5em}
H3 {margin: -5em}
H3 的负值 -5em 抵销了 BODY 5em 的空格。

另外我们还可以分别用 margin-left, margin-right, margin-top,
和 margin-bottom 来设定 左，右，上，下的空格

元素内部周边的空格 padding
初看起来这个性质跟 margin 好象一样。 其实它们之间有
很大的区别。margin 的空格是相对于其他的元素所空的，
而 padding 是在元素的周边和内部的内容所空的空格。在
下面的例子，我们用有背景颜色的 TABLE 来让你注意这
个性质

TABLE.pad {padding: 5mm; background-color: #CCEFCC}
Petersen was arrested in a modest apartment building in Studio City, Calif., which he had been sharing with three other people. The Marshals entered the apartment using a key provided by the building's manager. When they entered, the Marshals said, they
found Petersen alone -- sitting on his bed and using his laptop computer.

我们同样可以用 padding-left, padding-right, padding-top, 和
padding-bottom 来分别控制左，右，上，下的元素内部
的周边空格。

元素边框的宽度
我们可以用 border-width 性质来调节边框的宽度。 比如

P.width5 {border-width: 1px}
这个 P 元素的边框宽度是 1 px

你可以用 border-left-width, border-right-width, border-top-width,
和 border-bottom-width 来分别决定左，右，上，下边的宽度

元素边框的颜色
我们可以用 border-color 性质来调节边框的颜色。 比如

P.colorred {border-color: red}
这个 P 元素的边框的颜色是红色的

元素边框的形态
我们可以用 border-style 性质来调节边框的形态。 比如

P.inset {border-style: inset, border-width: 5px}
这个 P 元素的边框的形态是 inset

这个 P 元素的边框的形态是 outset

这个 P 元素的边框的形态是 double

这个 P 元素的边框的形态是 groove

这个 P 元素的边框的形态是 ridge

CSS超级技巧大放送(1)


[ 来源：中国站长学院 | 作者：风未起时 | 时间：2005-5-13 10:24:46 | 浏览：656人次 ]

收藏到新浪ViVi 收藏到365KEY 收藏到我摘 字号选择〖 大 中 小 〗/ 双击滚屏 单击停止


一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。

二.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

三.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如：

div#content { /* declarations */ }
fieldset.details { /* declarations */ }

可以写成

#content { /* declarations */ }
.details { /* declarations */ }

这样可以节省一些字节。

CSS超级技巧大放送(2)


[ 来源：中国站长学院 | 作者：风未起时 | 时间：2005-5-13 10:25:57 | 浏览：354人次 ]

收藏到新浪ViVi 收藏到365KEY 收藏到我摘 字号选择〖 大 中 小 〗/ 双击滚屏 单击停止


五.默认值
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：

* {
margin:0;
padding:0;
}

六.不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。

七.最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

Update: Lorem ipsum dolor set

在CSS文件中，你已经定义了元素p，又定义了一个classupdate

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

CSS超级技巧大放送(3)


[ 来源：中国站长学院 | 作者：风未起时 | 时间：2005-5-13 10:27:01 | 浏览：276人次 ]

收藏到新浪ViVi 收藏到365KEY 收藏到我摘 字号选择〖 大 中 小 〗/ 双击滚屏 单击停止


八.多重class定义
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。

.one{width:200px;background:#666;}
.two{border:10px solid #F00;}

在页面代码中，我们可以这样调用

<div class=one two></div>

这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

九.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>Item 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li>
</ul>
</div>

这段代码的CSS定义是：

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

你可以用下面的方法替代上面的代码

<ul id=subnav>
<li> <a href=#> Item 1</a> </li>
<li class=sel> <a href=#> Item 1</a> </li>
<li> <a href=#> Item 1</a> </li>
</ul>

样式定义是：

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

CSS超级技巧大放送(4)


[ 来源：中国站长学院 | 作者：风未起时 | 时间：2005-5-13 10:27:51 | 浏览：271人次 ]

收藏到新浪ViVi 收藏到365KEY 收藏到我摘 字号选择〖 大 中 小 〗/ 双击滚屏 单击停止


十.不需要给背景图片路径加引号
为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：

background:url(images/***.gif) #333;

可以写为

background:url(images/***.gif) #333;

如果你加了引号，反而会引起一些浏览器的错误。

十一.组选择器(Group selectors)
当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

例如：定义所有标题的字体、颜色和margin，你可以这样写：

h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：

h1 { font-size:2em; }
h2 { font-size:1.6em; }

十二.用正确的顺序指定链接的样式
当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是LVHA，你可以记忆成LoVe HAte(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。

如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。

CSS超级技巧大放送(5)


[ 来源：中国站长学院 | 作者：风未起时 | 时间：2005-5-13 10:28:50 | 浏览：269人次 ]

收藏到新浪ViVi 收藏到365KEY 收藏到我摘 字号选择〖 大 中 小 〗/ 双击滚屏 单击停止


十三.清除浮动
一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》

十四.横向居中(centering)
这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：

<!-- 你的布局这里开始 -->
你可以这样定义使它横向居中：

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

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

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

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

CSS超级技巧大放送(6)


[ 来源：中国站长学院 | 作者：风未起时 | 时间：2005-5-13 10:29:35 | 浏览：246人次 ]

收藏到新浪ViVi 收藏到365KEY 收藏到我摘 字号选择〖 大 中 小 〗/ 双击滚屏 单击停止


十五.导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url(main.css);

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

@import main.css;

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

十六.针对IE的优化
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法

(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
html>body p {
/* 定义内容 */
}

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
/* declarations */
}

(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：
/* */
* html p {
declarations
}
/* */
2.条件注释(conditional comments)的方法

另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

<!--[if IE]>
<link rel=stylesheet type=text/css href=ie.css />
<![endif]-->



[ 来源：中国站长学院 | 作者：风未起时 | 时间：2005-5-13 10:30:17 | 浏览：310人次 ]

收藏到新浪ViVi 收藏到365KEY 收藏到我摘 字号选择〖 大 中 小 〗/ 双击滚屏 单击停止


十七.调试技巧：层有多大？
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：

selector1,
selector2 {
property:value;
}

当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。

空格和换行有助与阅读。