广告广告
  加入我的最爱 设为首页 风格修改
首页 首尾
 手机版   订阅   地图  繁体 
您是第 5154 个阅读者
 
发表文章 发表投票 回覆文章
  可列印版   加为IE收藏   收藏主题   上一主题 | 下一主题   
codeboy 手机
个人文章 个人相簿 个人日记 个人地图
社区建设奖
小有名气
级别: 小有名气 该用户目前不上站
推文 x6 鲜花 x331
分享: 转寄此文章 Facebook Plurk Twitter 复制连结到剪贴簿 转换为繁体 转换为简体 载入图片
推文 x0
[HTML][教学] CSS简易教学
以下文章为转载...希望对大家有所帮助 表情

CSS简介:

  在今天,不会CSS(Casading Style Sheets 层叠样式表)的网页制作员不可以称为专业的网页制作人员。会HTML语言再学CSS并不难,因为CSS跟HTML一样也是一种标记语言,甚至很多属性都是来源于HTML。

  CSS的编辑方法同HTML一样,也可以是任何文本编辑器或网页编辑软件,还有专门用来编辑CSS的软件。 如果你写的CSS语句是当成外部样式表而在HTML文件中调用,那它的扩展名存成.css就可。假如你的网站每页使用的都是这个样式表,那么你修改这个文件就修改了整个网站的外观,所花的时间可能只要两三分钟!

■ 一点说明:

  我们在这里讲述的是CSS的一些基本使用方法,起的一个入门的作用,更详细的技巧将不作更多介绍了,这就是为什么称作「CSS不完全手册」的原因。

■ CSS使用方法:

  CSS在HTML中应用有三种方法:



第一种是包含在<head>...</head>标记里,例如:



<head>
<style type="text/css">
<!--
h1 {font-family:宋体;font-size:12pt;color=blue}
-->
</style>
</head>

<body>
<h1> 在这里使用了H1标记</h1>
</body>





第二种是行间定义,例如:



<body>
<h1 style="font-family:宋体;font-size:12pt;color=blue">这是行间定义的H1标记</h1>
</body>





第三种是外部调用样式文件,跟第一种类似,例如:



<head>
<LINK REL="stylesheet" href="sample.css">
</head>





第四种是也是导入样式文件,跟第三种类似,例如:



<head>
<style type="text/css">
<!--
@import url(http://www.yourname...yle.css);
-->
</style>
</head>



■ 分类:

  CSS真是伟大,能化一为万。假如你有几段文字,每一段都要这样:将第一行设成黄色,第二行设成红色,第三行设成蓝色,第四行设成绿色……其实这很容易做到。你在CSS中如下为每一行定义一个类。

  P.first {color:yellow} P.second {color:red} P.third {color:blue} P.fourth {color:green} 依次定义下去。在你的HTML代码中就是这样使用以上的定义类。 <P class=first>这里是第一行,使用的是class=first</p> <P class=secont>这里是第二行,使用的是class=secont</p> <P class=third>这里是第三行,使用的是class=third</p> <P class=fourth>这里是第四行,使用的是class=fourth</p>

■ 更灵活的分类:

  在上面我们定义的类是前面都有一个 P,也就限定了这个类只限于<P>标记使用。如果我们在定义的时候去掉 P, 但 . 仍然要。比如:.first {color:yellow},这样定义的类更加灵活,可应用于任何HTML标签,例如:
  <h2 class=first >在H2标记中使用class=first</h2>



■ 选择符 ID:

  其实CLASS只是一个类的选择符,另一个选择符 ID 具有同样的功能。不过使用ID选择符的类定义的时候要将 . 换成 # ,使用时要在类别名上加上引号。

H1 #001 {color:red}
#002 {color:blue}
使用:

<H1 ID="#001"> H1标记使用#001类</H1>

<H3 ID="#002"> H3标记使用#002类</H1>

<P ID="#002"> P标记使用#002类</H1>
■ FONT-FAMILY属性:

  每部机器上都装有多种字体,浏览器会使用默认的字体浏览网页,比如简体中文版WINDOWS汉字默认是宋体,英文默认是ARIAL。 使用FONT-FAMILY属性则可以规定浏览器用什么字体解读网页。

■ FONT-FAMILY语法实例:
h2 {font-family:times,impact,sans-serif}

说明如下:

  helvetica是浏览器首先寻找的字体名称,如果有就使用它。在helvetica字体没有找到的情况下,则会寻找impact字体,如果找到就使用它。如果以上两种字体都没有找到,则指示浏览使用sans-serif(通用字体)。在你不能保证你列出的字体浏览者一定会安装时,将一种通用字体加在字体列表中是一种好的做法。因此我们提倡使用最基本的字体制作网页,比如中文用宋体,英文用ARIAL,这样使得你的网页不会因为浏览器没能使用合适的字体解读而变样。

■ 其它相关内容:

通用字体有以下几类,其中cursive和fantasy不被NC支持:
"serif"(比如Times);
"sans-serif"(比如Helvetica);
"cursive"(比如Comic Sans);
"fantasy"(比如Western);
"monospace"(比如Courier)
其他使用事项:
如果一种字体的名称中有空格,如"Times New Roman",在CSS语句中要用引号包含该字体。
例:Body {font-family:"Times New Roman",serif}
如果该语句已在双引号里,则字体名降级为单引号。
例:<P style="font-family:'Times New Roman',serif">
如果该语句包括其它CSS规则,字体说明应放在最后。
例:H2 {color:red;margin:10px;font-family:"Times New Roman",serif}




■ 继承:

  继承:就是在子元素没有定义样式的情况下,它将采用上一级元素的样式定义。

  优先级:根据继承来理解优先级也就容易。最近的样式优先级最高。 比如:

  CSS在<heda>声明 I{font-family:impact};

  但在HTML语句中又如下定义:<P> 要显示的文字在<I><font face="Times">这里</font></I></P> 在此例中样式表要求用IMPACT字体,而FONT标记要求用TIMES字体,最终浏览器使用的会是TIMES。作为CSS标准制定者,要求将CSS优先,他们认为像以上的例子中应该用IMPACT字体。可以浏览器产商照顾使用者的旧习惯,使用了FONT标记中的字体,尽管FONT已不被提倡。

  ■ 更好的方法--关联:

  我并讲不出抛弃FONT标记的理由,只知道这是潮流。显然CSS提供更好的方法避免你在像上面的例子一样使用FONT标记,那就是: 关联。 可以在HEAD部分的CSS定义中加入如下行: P I {font-family:times} /*P和I之间的空格不能少*/

  在HTML中: <P>要显示的文字在<I>这里</I></p>

  虽然你没有使用FONT FACE,但根据HEAD部分的CSS定义,P标记里的I标记使用的字体一定是TIMES。要提起注意的是那行CSS样式只作用于P标记里的I标记。

■ 大小控制方法:

  以下是控制文字大小的三种方法:

使用大小单位,pt(点),px(像素),em,及其他单位;
使用关键字(xx-small,x-small,small,medium,large,x-large,xx-large);
使用比例参数(150%等)。
例如:



p {font-size:12pt};
p {font-size:large};
p {font-size:200%};
■ 字体风格:
斜体 p {font-style:italic};
粗体 p {font-weight:bold};
  在字重的设定方面,还有lighter(更轻)和bolder(更重),还可以使用数字100,200到900最重。
  字体风格和字重都有一个共同的参数normal,一旦设为normal也就取消了字重和风格设置。




■ FONT-VARIANT:

  FONT-VARIANT 可以将正常文字尺寸缩小一半后转为大写:

h2 {font-variant:small-caps}
■ TEXT-TRANSFORM:
  完全控制字母大小写:

全部大写:h2 {text-transform:uppercase};
全部小写:h2 {text-transform:lowercase};
单词第一个字母大写:h2 {text-transform:capitalize};
取消所有设定:h2 {text-transform:none};
■ TEXT-DECORATION:
  哪天你突发奇想,希望链接没有下划线,现在你可以做到:

文字下划线:A:link{text-decoration:underline};
文字上划线:A:link{text-decoration:overline};
文字删除线:A:link{text-decoration:line-through};
文字闪烁:A:link{text-decoration:blink};
不要任何效果:A:link{text-decoration:none}
■ 字间距:

  利用字间距属性word-spacing,可以调整单词间的距离。

h2 {word-spacing:5pt}
■ 字母间距:
  利用字母间距属性letter-spacing,可以调整单词中每个字母间的距离。

h2 {letter-spacing:10pt};
■ 行高:
  与字距不同的是行距line-height,它调整的是行与行间垂直方向的距离,有三种方法设置:

数值:h3 {font-size:12pt; line-height:2};/*此处line-height=2x12pt=24pt */
长度单位:h3 {font-size:12pt; line-height:24pt};
比例:h3 {font-size:12pt; line-height:200%};
  无论是字距或字母间距或行距都有一个共同的参数:normal,一旦设为normal就是要浏览器使用默认值。




■ 水平对齐:

  利用文字对齐属性text-align,可以控制段落的水平对齐:

h2 {text-align:center}
h2 {text-align:left}
h2 {text-align:right}
  这项属性可作用于<P>,<h1>-<h6>,<blockquote>和<ul>标记。



■ 垂直对齐:
  利用垂直对齐属性vwrtical-align,可以控制对像(包括文字或图形)相对于母体的垂直位置:

h2 {vertical-align:top}
h2 {vertical-align:text-top}
h2 {vertical-align:bottom}
h2 {vertical-align:text-bottom}
h2 {vertical-align:baseline}
h2 {vertical-align:middle}
h2 {vertical-align:sub}/*上标*/
h2 {vertical-align:super}/*下标*/
  这些属性具体对齐效果如何,希望大家自已去试验。



■ 首行缩进:
  首行缩进text-indent,在文档排版中经常用到:

h3 {text-indent:24pt};




连结有问题请来信,我会尽快修正~^^
通报时请附上是"哪一篇失效"...这样我才能去修正~麻烦各位好心人士了~

[连结失效通报][ 网页.伺服.程式 讨论区]
----------------------在世界中心呼喊爱情----------------------
深深思念一个人的时候,我们不知不觉的地活在世界的中心...
献花 x0 回到顶端 [楼 主] From:未知地址 | Posted:2004-12-28 12:02 |
Kilian
个人头像
个人文章 个人相簿 个人日记 个人地图
终身成就奖
知名人士
级别: 知名人士 该用户目前不上站
推文 x4 鲜花 x387
分享: 转寄此文章 Facebook Plurk Twitter 复制连结到剪贴簿 转换为繁体 转换为简体 载入图片

CSS在<heda>声明 I{font-family:impact};

heda - 是 head 吗?

还有, DW 做的 CSS 把 } 放在第二行, 是否语言的传统形式罢?


献花 x0 回到顶端 [1 楼] From:加拿大温哥华 | Posted:2004-12-31 12:14 |
cwei
数位造型
个人文章 个人相簿 个人日记 个人地图
初露锋芒
级别: 初露锋芒 该用户目前不上站
推文 x0 鲜花 x13
分享: 转寄此文章 Facebook Plurk Twitter 复制连结到剪贴簿 转换为繁体 转换为简体 载入图片
文章表情
感谢啰
这样可以对css较了解一点了


献花 x0 回到顶端 [2 楼] From:台湾中华电信 | Posted:2005-03-04 08:42 |
wudm
数位造型
个人文章 个人相簿 个人日记 个人地图
小人物
级别: 小人物 该用户目前不上站
推文 x0 鲜花 x9
分享: 转寄此文章 Facebook Plurk Twitter 复制连结到剪贴簿 转换为繁体 转换为简体 载入图片

不错的教学
最近在玩无名小站 在研究css
谢谢大大分享


My Mini City 有空帮我点一下吧
http://wudmforum.m...ty.com/
献花 x0 回到顶端 [3 楼] From:台湾中华电信 | Posted:2005-12-18 21:51 |
sinmpinty
数位造型
个人文章 个人相簿 个人日记 个人地图
小有名气
级别: 小有名气 该用户目前不上站
推文 x1 鲜花 x11
分享: 转寄此文章 Facebook Plurk Twitter 复制连结到剪贴簿 转换为繁体 转换为简体 载入图片

感谢提供简易教学,最近要教css的作业,现在对css有比较的认识了!


献花 x0 回到顶端 [4 楼] From:台湾中华电信 | Posted:2006-06-24 00:40 |

首页  发表文章 发表投票 回覆文章
Powered by PHPWind v1.3.6
Copyright © 2003-04 PHPWind
Processed in 0.079346 second(s),query:16 Gzip disabled
本站由 瀛睿律师事务所 担任常年法律顾问 | 免责声明 | 本网站已依台湾网站内容分级规定处理 | 连络我们 | 访客留言