首 页 编程技术 网页设计 软件频道 系统维护 网络安全 范文大全 站长专区
首 页 编程技术 网页设计 软件频道 系统维护 网络安全 范文大全 站长专区
设为首页
加入收藏
联系我们
首 页 | ASP技术 | PHP技术 | NET技术 | JSP技术 | AJAX | C++ | JavaScript | HTML | | 布局配色 | MSSQL | MySQL | Access
DreamWeaver | FrontPage | Flash | PhotoShop | Firework | CorelDraw | 操作系统 | 办公软件 | 网络营销 | 搜索引擎 | 站长专区 | 服务器 | 范文大全 | 安全
首页 >> 新闻系统 >> 网页设计 >> css >> 正文
CSS基本属性
发布日期:[08-06-14 10:40:12] 点击次数:[]
从CSS的基本语句就可以看出,属性是CSS非常重要的部分。熟练掌握了CSS的各种属性将会是您编辑页面更加得心应手。下面我们就借助一些实例来讲解。

  1、 字体属性

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

字体属性

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

不同样式的字体  

  第一行只是采用了“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> 此代码产生的效果是这样的(如下图):

leaf字体1

  这段代码定义了“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下的颜色和背景都有哪些属性吧(如下表):

颜色和背景属性

  我们还是举个例子吧。比如上一节讲到的“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”的字体显示效果是这样的(如下图):

leaf字体

  怎么样,是不是比光是

9 7 3 1 2 3 4 5 4 8 :
上一篇:
下一篇:

热点文章

· 基于B/S体系结构开发应用系统
· 相框专家为婚纱照快速添加精美边
· 使用AJAX技术构建更优秀的Web应用
· 精细绘制矢量风格的啤酒瓶盖
· 鼠年知运 2008年编程语言运势抢先
· Windows Server 2008新功能影响应
· asp.net常用的函数表
· Sql Server数据库占用CPU的解决方
· SQL Server 触发器
· 在ASP中轻松实现记录集分页显示
· SCA,软件开发的3G时代
· 利用AJAX技术提高搜索引擎排名
· 浅谈网上教学的实践与探索
· 八种方法最短时间让人知道你的网
· 个人站点提高访问量谋略

搜索引擎

网站留言 | 友情连接 | 广告服务 | 版权申明 | 合作伙伴 | 法律声明 | 人员招聘 | 网站简介 | 联系我们 | About Us
站内所有资源均收集于互联网,其版权属原作者所有。 E吧-中国IT门户欢迎你的光临!
赣ICP备07501208号