DHTML----CSS学习 - 达人(咖啡虫)

2005/07/21 | DHTML----CSS学习
类别(web standard) | 评论(0) | 阅读(76) | 发表于 22:58: 什么是 CSS 以及它的功能

我们暂且把CSS叫样式表吧,因为它能很轻松地改变网页的样式,即HTML 元素的显示方式,使其达到统一
的显示效果. CSS 所能改变的性质如下:

[list]字体
文字间距
列表
颜色
背景
Margin
位置
CSS 的定义

CSS 的每一条定义都有如下的形式

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

selector: 第一种是 HTML 的 tag, 比如 P, BODY, A 等等,第二种叫 class, 第三种叫 ID.
property: 就是那些将要被修改的性质, 比如 color,font-size...
value: 给 property 的值, 比如给 color 的可以是red
<style type="text/css">  </style> <a herf="#">Away from you =love</a>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

HTML selector

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

tag {property:value}
比如我们想叫 H1 的颜色是红的

<style type="text/css">  </style> <h1> 天空还在下雨<br> 心情或阴或晴<br> 风是凉的<br> 月却不见了踪影<br> 或许是爱着的<br> 却是空的<br> 或许是死了的 <br> 却感觉呼吸的<br> </h1> </h1>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
CSS 的一个特点是, 它可定义好几个 selector在一个 rule 里.如:

H1, H2, TD {color: red}
这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色.
<style type="text/css"> H1,h2,TD{color:ff0000} </style> <table> <tr> <td> 我一直想去爱的！ < /td> </tr> <tr> <td> 可是上天不给我这个机会 </td> </tr> <tr> <td> 我可以去争取的 </td> </tr> <tr> <td> 但我选择等待 </td> </tr> </table> <h1>上面全是胡说</h1>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
Class selector

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

tag.Classname {property:value}
比如我们想叫一些而不是全部 H1 的颜色是红的

<style type="text/css"> H1.redone{color:ff0000} </style> <h1 class="redone">人面桃花</h1> <h1>谁是谁的归宿</h1>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
第二种是独立 class selector . 它可被任何 HTML tag 所应用.它的语法如下

<b>.Classname {property:value}</b>
假如我们有下面这个定义

.blueone {color: blue}
那么我们可以把他应用到不同的 Tag 当中去. 比如

</p>
<h1 class="blueone">蓝色的题目</h1>
<p class="blueone">蓝色的段落

<style type="text/css"> .blueone {color: blue}</style> <h1 class="blueone">突然对身边的人失去了语言</h1> <p class="blueone">我不想表达，也不渴望去表达，我在这一天突然失去了一切语言。
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

ID selector

ID selector 其实跟独立 class selector 的功能一样. 而区别在于它们的语法和用法不同, 以及对于 javascript 操纵 HTML元素有帮助. 如果你用 CSS-P 来定位, 有 ID 的 HTML 元素可以被 CSS-P和javascript 来操纵.它的语法如下

#IDname {property:value}
假如我们有下面的定义

#yelowone {color: yellow}
我们可以运用这个定义到任何的有同样 ID 名字的 tag, 比如

<span ID="yellowone">text here</span>
[个人经验]
同一个ID号只能被一个样式定义，而class可以=不同的样式

<style type="text/css"> #yelowone {color: yellow} </style> <span ID="yellowone">生命之重，有谁能承担的起！担不起也的往前</span>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

字形与大小

CSS 用来控制字形的性质是 font-family,控制字体大小的性质是 font-size. 比如

H1, H2, P {font-family: 楷体;font-size: 9pt}
CSS 允许你给 font-family 多于一个以上的字形,使得用户浏览器按顺序检测和使用字体,每个字形之间要用逗号隔开. 比如

<style type="text/css">  </style> <h1>生命之重</h1><br> <h2>有谁能承担的起！</h2> <p>担不起也的往前
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

字形与大小

CSS 用来控制字形的性质是 font-family,控制字体大小的性质是 font-size. 比如

H1, H2, P {font-family: 楷体;font-size: 9pt}
CSS 允许你给 font-family 多于一个以上的字形,使得用户浏览器按顺序检测和使用字体,每个字形之间要用逗号隔开. 比如

H1, H2, P {font-family: 楷体, 黑体, 宋体}
斜体

如果想让字体成为斜体, 要用 font-style 性质, 比如

P {font-style: italic}
加重

用 font-weight 来调节文字的粗细, 比如

P {font-weight: bold}
font-style 的可能的值是 lighter, normal, bold, bolder; 0

http://kafeichong.5d.cn/

评论Comments