样式表(CSS)学习(一)_电脑软硬件应用网_国内最受关注的计算机应用解决中心

首页·电脑学院·电脑故障·操作系统·硬件教程·局域网技术·QQ技巧·网络安全·办公软件· 数据库

导航·设计学院·图像处理·网页设计·软件教程·服务器技术·笔记本·专家装机·网络编程·在线问答

当前位置：电脑软硬件应用网 > 设计学院 > 网页设计 > 正文

样式表(CSS)学习(一)

样式表(CSS)学习(一)

2005-12-30 19:13:58　　文/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}

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

.Classname {property:value}

假如我们有下面这个定义

.blueone {color: blue}

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

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

服务器租用、托管；域名注册；虚拟主机
江湖、聊天室租用；程序开发，网站建设
欢迎咨询http://nicchina.com/
QQ：30196310

上一篇文章： DHTML学习(八)

下一篇文章：样式表(CSS)学习(二)

最新热点		最新推荐		相关文章
				页面自动跳转的几种实现方法网站内容的四种分类形式或多或少的… 如何指定规范网页？rel="canonical" 浅谈网站评论体系设计的不足之处网页中“上一篇”“下一篇”设计思考网页设计进度指示器帮助用户预测步骤网页用户体验:网页注册表单设计分析网页设计常出现8大问题网页设计的形象思维归纳彻底去掉动易内容页顶部的“改变图片…