WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

样式表(CSS)学习(一)

更新时间:2005-12-30 19:13 作者:45IT收集点击:

什么是 CSS 以及它的功能 

关于CSS((Cascading StyleSheets)有多种译法,我们暂且把CSS叫串接样式表吧,以下简称样式表,它能对网页的样式诸如整体布局、字体、颜色、背景和其它文图效果实现更加精确的控制,使其达到统一的显示效果. 具体说它的优点主要有以下几点: 

实现了格式和结构分离。 
你将拥有对页面布局的超强控制能力。 
在所有浏览器和平台之间的兼容性。 
只通过修改一个文件就改变大量页面样式, 大大方便网页的更新及维护。 
加快页面的访问速度。 
web页面更加友好 
CSS 所能改变的页面性质如下: 
字体 
文字间距 
列表 
颜色 
背景 
Margin 
位置 
CSS 的定义 
CSS 的每一条定义都有如下的形式 

  selector {property:value; property:value; ...}

selector: 第一种是 HTML 的 tag, 比如 P, BODY, A 等等,第二种叫 class, 第三种叫 ID. 
property: 就是那些将要被修改的性质, 比如 color,font-size... 
value: 给 property 的值, 比如给 color 的可以是red 
请看下面的一个典型定义 

  A {color: red}

用这条定义所有的联接都变成红色的了. 一般来说我们把所有的定义全包括在 STYLE 元素里面放到 HEAD 里面. 请试验下面的网页:


<HTML>
<HEAD>
  <STYLE>
    A {color: red}
    P {background-color:blue; color:white}
  </STYLE>
</HEAD>
<BODY>
  <A href="http://www.hermes.com.cn">海脉信息咨询</A>
  <P>看一下这一段文字的颜色和背景颜色效果.</P>
</BODY>
</HTML>

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

  tag {property:value}

比如我们想叫 H1 的颜色是红的 

  H1 {color: red}

CSS 的一个特点是, 它可定义好几个 selector在一个 rOLe 里.如: 

  H1, H2, TD {color: red}

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

Class selector 

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

  tag.Classname {property:value}

比如我们想叫一些而不是全部 H1 的颜色是红的 

  H1.redone {color: red}

<H1 class="redone">红色</H1>
<H1>不是红色</H1>

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

  .Classname {property:value}

假如我们有下面这个定义 

  .blueone {color: blue}

那么我们可以把他应用到不同的 Tag 当中去. 比如 

<H1 class="blueone">蓝色的题目</H1>
<P class="blueone">蓝色的段落</P>




欢迎咨询/

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容