注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

浩瀚星云

上善若水 厚德载物<学习版>

 
 
 

日志

 
 

三、CSS属性(一)  

2008-05-30 17:25:12|  分类: ASP(过时) |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  从CSS的基本语句就可以看出,属性是CSS非常重要的部分。熟练掌握了CSS的各种属性将会是您编辑页面更加得心应手。下面我们就借助一些实例来讲解。

  1、 字体属性

  这是最基本的属性,您经常都会用到。它主要包括以下这些属性:

三、CSS属性(一) - brain - 百年孤独

  光看表格是不是有些难懂,不要紧,我们来看一个用表格中的属性定义的字体样式(如下图):

三、CSS属性(一) - brain - 百年孤独  

  第一行只是采用了“font-family”属性,代码是这样的:

  <p style=“font-family:lucida console”>hongen</p>

  这行代码定义了“hongen”将以“lucida console”的字体显示;

  第二行font-family为默认值,而是定义了“font-style”属性为“italic”斜体,代码如下:

  <p style=“font-style:italic”>hongen</p>

  第三行font-family为默认值,font-style为“oblique”,另外还定义了“font-weight”属性为“bold”,“font-size”属性为24pt(缺省情况下为absolute size绝对大小)代码如下:

  <p style=“font-style:oblique;font-weight:bold;font-size:24pt”>hongen</p>

  最后一行只是在第三行定义的基础上又增添了“font-variant”属性为“small-caps”(小体大写),代码如下:

  <p style=“font-style:oblique;font-weight:bold;font-size:24pt;        font-variant:small-caps”>hongen</p>

  值得注意的是:“font-variant”属性值“small-caps”在指定的小体大写字体不存在的时候,CSS将用大写字母代替所有的小写字母。

  可能您会问:定义一个字体怎么有那么长的代码呢?其实字体属性中还一个“font”属性,可以实现简便定义。我们来看下面这段代码:

  <p style=“font:italic small-caps bold 36pt,GlitzyCurl”>Leaf</p> 此代码产生的效果是这样的(如下图):

三、CSS属性(一) - brain - 百年孤独

  这段代码定义了“leaf”的字体为GlitzyCurl,并且是斜体、小体大写、粗体、36号字。这段代码等同于:

  <p style=“font-style:italic;font-variant:small-caps;font-weight:   bold;font-size:36pt;font-family:GiltzyCurl”>Leaf</p>

  怎么样,是不是精简了许多。

  但需要注意的是:如果您用<font>属性直接定义,一定要注意属性值的排放顺序。  它的排放规则是按照“font-style”、“font-variant”、“font-weight”、“font-size”、“font-family”的顺序,其中没有定义的以默认值显示。

  其实我们习惯上还是不用FONT属性来统一定义,因为分开来定义的代码虽然很长,但是看上去很直观,让人一看就知道定义的内容是什么。

  说一点遗憾之处吧,就是CSS对中文字体的支持可能不是很好。


2、颜色和背景属性

  您总不希望自己的页面处于黑白世界吧。如果给用<font>属性定义的文本添上颜色是不是会更好呢?

  下面我们就讲一下CSS的颜色和背景属性。先来看一下CSS下的颜色和背景都有哪些属性吧(如下表):

三、CSS属性(一) - brain - 百年孤独

  我们还是举个例子吧。比如上一节讲到的“LEAF”字体,我们在其中加入颜色属性,在<style>再加入以下代码:

  color:rgb(204,82,28);

  background-img:url(ss01038.jpg);

  background-repeat:no-repeat;margin-right:15em

  //*设置前景色的rgb值为(204,82,28),您也可以用颜色的英文名称直接定义;

  设置背景图案的地址;设置背景图案不重复显示;另外还设置了页边距margin属性

  ,这个我们以后再讲*//

  加入代码后“Leaf”的字体显示效果是这样的(如下图):

三、CSS属性(一) - brain - 百年孤独

  怎么样,是不是比光是定义<font>属性显得更加漂亮了。当然您也可以简便的定义background属性(象定义font属性那样),下面我告诉一下您background属性的书写格式:

  属性:background 属性值:<background-color>||<background-image>||     <background-repeat>||<background-attacement>||<background-position>

  也就是说,使用background属性可以一次定义前面讲到的一切有关背景的属性,包括背景色、背景图案等等。因此,上面定义“leaf”颜色属性中有关背景的代码可以写成这样: “background:url(ss01038.jpg)no-reapeat”

  好了,至于颜色和背景属性的功能,您自己也可以去试一试。下一节我们将介绍CSS的文本属性。


 

3、文本属性

  ※定义间距

  前面说了如何用CSS定义字体、颜色和背景属性,那么定义好的文本我们怎么对它进行排版呢?

  下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表:

三、CSS属性(一) - brain - 百年孤独

  我们可以从表中看到在这里可以定义文本的文字间距、字母间距、装饰、对齐方式、缩进方式和行高等属性。 举个例子来看看吧。比如下面这段文字(如左下图):

三、CSS属性(一) - brain - 百年孤独 三、CSS属性(一) - brain - 百年孤独

  我们对这段文字加上文本属性重新排版,排版后的效果如右上图所示。

  我们看到经过文本属性处理的文本字与字之间多了间距,行与行之间多了行高,对齐方式变成了两端对齐,并且段首又多缩进了两格。这是怎样实现的呢?很简单,只是在html中加了如下的代码:

  <p style=“letter-spacing:1em;text-align:justify;text-indent:

  4em;line-height:17pt”>……</p>

  //*letter-spacing设置了字间距为1em,其中1em为一个长度单位;text-align设

  置了对齐方式为两端对齐;indent设置了缩进格为4em;line-height设置了行高为

  17pt*//

  从上面的例子,我们可以看出利用CSS的文本属性可以方便的对页面中的文本进行排版。下一节我将向您介绍文本的Text-decoration属性的一个小应用。


※装饰超链接

  网页默认的链接方式是这样的:未访问过的链接是蓝色文字并带蓝色的下划线,访问过的超级链接是深紫色的文字并带深紫色的下划线。如果您所有的网页都是这种样式,是不是很单调呢?

  其实,利用文本属性中的Text-decoration属性就可以实现对超链接的修饰。我们先看下面的这段代码:

  <html>

   <title>link css</title>

   <head>

   <style>

   <!--

   //*定义伪类元素(a:),大括号内定义了前景色属性和文本装饰属性,

   hover加上‘font-size’属性目的是让鼠标激活链接时改变字体*//

   a:link{color:green;text-decoration:none}

   //*未访问时的状态,颜色为绿色(green),文本装饰属性(text-decoration)值

   为没有(none)*//

   a:visited{color:red;text-decoration:none}

   //*访问过的状态,颜色为红色(red),文本装饰属性值为没有*//

   a:hover{color:blue;text-decoration:overline;font-size:20pt}

   //*鼠标激活的状态,颜色为蓝色(blue), 文本装饰属性值为上划(overline),

   字体大小为20pt*//

   -->

   </style>

   </head>

   <body>

   <p style=“font-family:行书体;font-size:18pt”>

   <a href=“http://www.hongen.com”>未访问的链接</a></p>

   //*加链接,显示三种不同状态,并且定义了链接文本的字体和大小*//

   <p> <a href=“http://www.hongen.com”>访问过的链接</a></p>

   <p> <a href=“http://www.hongen.com”>鼠标激活的链接</a></p>

   </body>

   </html>

  您如果想看上述代码的效果,请点击这里

  我们从例子中看到没有访问过的链接以绿色显示,并且去掉了下划线;而访问过的链接以红色且没有下划线显示;另外,当鼠标激活链接时,链接以蓝色显示,并且加上了上划线。这种效果是怎么实现的呢?它除了运用了文本属性中的text-decoration属性,而且采用了伪类元素。

  通过上面的代码注释,相信您应该对伪类元素有一个大概认识。实际上我们用到的这种伪类应当称之为“锚伪类”,它规定了链接不同状态下的效果。

  怎么样,是不是很简单的就可以实现动态链接的效果,赶紧自己动手试一试吧!下一节我将向您介绍“容器”属性。


4、“容器”属性

  ※边距属性

  听起来是不是很有趣,什么叫“容器”属性呢?CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。

  您想,网页中的内容肯定是都需要“装”进这个“容器”里。“容器”属性是CSS中非常重要的一种属性,我们将分类进行学习。

  先来看一下边距属性的详细列表:

三、CSS属性(一) - brain - 百年孤独

  和font属性一样,表中的四个属性可以用一个属性一次。边距顺序是上、右、下、左。我们还是用定义边距属性前后的两个例子来看一下吧。请看下面的这幅图:

三、CSS属性(一) - brain - 百年孤独

  我们看到上图是没有加上边距属性的效果,而下图则在<head>中加入了如下代码:

  body{margin:1em 2em 3em 4em}

  //*定义文本的上、右、下、左的边距分别为1、2、3、4em*//

  产生的效果如下图所示:

三、CSS属性(一) - brain - 百年孤独

  定义了边距后的页面,无论您怎么改变窗口的大小,它都会按照您定义好的边距样式显示。

  如果在margin里有缺失的属性,则按照顺序依次排列。比如:

  body{margin:1em 3em} 上面这段代码的含义是:body的上、右边距为1、3em。

  下一节我将向您介绍填充距属性。


※填充距属性

  本节我将向您介绍填充距属性。我们先来看一下填充距的属性列表:

三、CSS属性(一) - brain - 百年孤独

  首先我们得先了解什么叫填充距,它与边距有什么差别呢?填充距指的是文本边框与文本之间的距离。

  这样讲是不是有些难懂,由于填充距属性与margin一样,都有一个一次定义的属性:padding,所以我们举个例子,看一下到底什么叫填充距,请看下图:

三、CSS属性(一) - brain - 百年孤独

  我们看到上图中红框圈住的地方就是填充距起作用的部分。实际上上图的效果只是在上一节例子的<head>中把下面这段代码加入到Body定义的margin后面:

  padding:1em 2em 3em 4em

  从上可以看出,红框标记外的部分属于margin属性在起作用。

  下一节将向您介绍边框属性。


※边框属性

  本节我们来看一下种类繁多的边框属性,先来看一下属性列表:

三、CSS属性(一) - brain - 百年孤独

   是不是看上去很多,其实应用起来很方便。

   只要灵活的运用一次定义的属性就会方便很多。其实还有一个一次设置所有边框的宽度、样式和颜色属性的border属性,但是border只能使四条边框的属性值是一样的。我们现在来给前面的例子设置一个5像素宽、双边框并且是紫色的边框(如下图):

三、CSS属性(一) - brain - 百年孤独

  这就是在<head>中定义<p>的属性,代码如下:

  P{border:5px double purple}//*定义了四条边框为一样的值*//

  您还可以找一段文本自己多尝试一下其他的边框属性,看看还有什么效果。下一节将向您介绍一下“容器”属性的其他属性,您将能欣赏到图文混排的效果。


  评论这张
 
阅读(25)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017