|
|
DHTML----CSS学习 |
| Author:咖啡虫 PublishTime:2005-7-21 |
什么是 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
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
用这条定义所有的联接都变成红色的了. 一般来说我们把所有的定义
全包括在 STYLE 元素里面放到 HEAD 里面.
HTML selector
HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定义了它们, 在整页中, 这个 Tag 的性质就按照你的定义来显示了. HTML selector 的语法如下
tag {property:value}
比如我们想叫 H1 的颜色是红的
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
CSS 的一个特点是, 它可定义好几个 selector在一个 rule 里.如:
H1, H2, TD {color: red}
这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色.
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
Class selector
Class selector 有两种, 一种叫相关 class selector, 它跟一个 HTML 的 tag 有关系. 它的语法是
tag.Classname {property:value}
比如我们想叫一些而不是全部 H1 的颜色是红的
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
第二种是独立 class selector . 它可被任何 HTML tag 所应用.它的语法如下
<b>.Classname {property:value}</b>
假如我们有下面这个定义
.blueone {color: blue}
那么我们可以把他应用到不同的 Tag 当中去. 比如
</p>
<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可以=不同的样式
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
字形与大小
CSS 用来控制字形的性质是 font-family,控制字体大小的性质是 font-size. 比如
H1, H2, P {font-family: 楷体;font-size: 9pt}
CSS 允许你给 font-family 多于一个以上的字形,使得用户浏览器按顺序检测和使用字体,每个字形之间要用逗号隔开. 比如
[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
|
|
| | |
