expression web 视频教程第九节 格式菜单[3] 样式

文字部分：
expression web 视频教程第九节 格式菜单[3] 样式

级联样式 在演示文件cssdemo里面有具体的说明

 

CSS教学『选择器运用』

 
基础中我们有提到何谓选择器，例如：table{font-size:9pt}里面的table就称为选择器，就是选用table(表格)在{}里定义样式，这个选择器当然你可以自己设定为别的名称，让网页指定的地方来使用，或者你想每行用不同的文字颜色或不同的表格颜色，没问题，用自定义选择器一定让你更容易掌握。

　 

种类一：CLASS="名称"
■选择器文字运用范例1：看范例效果 

<style type=text/css>
<!--
.123{
color : #cc6699 ; /*文字色彩*/
font-size : 9pt /*文字大小*/
}
.456{
color : #336699 ; /*文字色彩*/
letter-spacing : 3pt;/*字距*/
font-size : 9pt /*文字大小*/
}
-->
</style>
</head><body>
□<p class="123">这里的文字是粉色,9pt的大小</p>
□<p class="456">这里的文字是蓝色,9pt字的距离4pt的大小</p>
　 

■选择器窗体、表格运用范例2：看范例效果

<style type=text/css>
<!--
.789{
background-color: #edcbdc;/*背景色彩*/
color : #ffffff ; /*文字色彩*/
font-size : 9pt ;/*文字大小*/
border: 1px solid #cc6699 ;/*框线大小及色彩*/
}
.ABC{ 
background-color: #336699; /*背景色彩*/
color: #ffffff; /*文字色彩*/
font-size: 9pt; /*文字大小*/
border: 1px solid #000000;/*框线大小及色彩*/
}
-->
</style></head><body> 
<input class="789" type="text" name="T1" size="20" value="这里是窗体">
<table class="ABC" width="182"> 
<td>这里是表格</td> 
</table>

　 

种类二：ID="名称"
还有一种方式就是使用ID，其实这跟上方的意思是相同的，CLASS选择器是在前方加上小数点，不同的是ID是在前方加上#，来看下面的范例：(你可以试试看是不是跟选择器文字运用范例1结果是一样的) 

<style type=text/css>
<!--
#123{
color : #cc6699 ; /*文字色彩*/
font-size : 9pt /*文字大小*/
}
#456{
color : #336699 ; /*文字色彩*/
letter-spacing : 3pt;/*字距*/
font-size : 9pt /*文字大小*/
}
-->
</style>
</head><body>
□<p ID="123">这里的文字是粉色9pt的大小</p>
□<p ID="456">这里的文字是蓝色9pt字的距离4pt的大小</p>

字体的效果

字体样式里面的个个项目：介绍

语法：
font-variant : normal | small-caps 
取值：

normal  :　 默认值。正常的字体
small-caps  :　 小型的大写字母字体

说明：
设置或检索对象中的文本是否为小型的大写字母。
IE4.0将此属性的 small-caps 处理为大写字母的较小尺寸。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 fontVariant 。

 

语法：
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 
取值：

normal  :　 默认值。正常的字体。相当于 400 。声明此值将取消之前任何设置
bold  :　 粗体。相当于 700 。也相当于 b 对象的作用
bolder  :　 比 normal >粗
lighter  :　 比 normal >细
100  :　 字体至少像 200 那样细
200  :　 字体至少像 100 那样粗，像 300 那样细
300  :　 字体至少像 200 那样粗，像 400 那样细
400  :　 相当于 normal 
500  :　 字体至少像 400 那样粗，像 600 那样细
600  :　 字体至少像 500 那样粗，像 700 那样细
700  :　 相当于 bold 
800  :　 字体至少像 700 那样粗，像 900 那样细
900  :　 字体至少像 800 那样粗

说明：
设置或检索对象中的文本字体的粗细。
作用由用户端系统安装的字体的特定字体变量映射决定。系统选择最近的匹配。也就是说，用户可能
看不到不同值之间的差异。
IE4.0仅仅支持 normal 和 bold 值。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 fontWeight 。 

==================

text-decoration : none || underline || blink || overline || line-through 
取值：

none  :　 默认值。无装饰
blink  :　 闪烁
underline  :　 下划线
line-through  :　 贯穿线
overline  :　 上划线

text-transform : none | capitalize | uppercase | lowercase 
取值：

none  :　 默认值。无转换发生
capitalize  :　 将每个单词的第一个字母转换成大写，其余无转换发生
uppercase  :　 转换成大写
lowercase  :　 转换成小写
● 基于 ID 的样式旁将显示红点。 
演示
● 基于类的样式旁将显示绿点。
● 基于元素的样式旁将显示蓝点。 演示 

dsfsdfsdfsdfsdsfdsdsdfdsdf 所有的p标签都是带下划线
级联样式旁将显示黄点。看代码里面效果
  在各种颜色的点周围将显示一个圈以标记当前网页中所使用的样式。
  导入的外部级联样式表旁将显示 @ 符号。

下载地址

发布网站 http://www.sr521.com  http://hi.baidu.com/sr521

td {
 border: thick ridge #00FF00;
}
expression web 视频教程第九节 格式菜单[3] 样式
大家好，由于样式的内容很多 我尽量给大家多讲些
1级联样式 在演示文件cssdemo里面有具体的说明 看操作
为了节省时间 我就让大家直接看例子。
这个样式使用了字体的所有参数
我给大家一一解释
1是字体类型 如宋体等
2字体大小
3看见效果吧 字体的磅值
4字体样式
看演示 我就不打字了
我给大家解释一些其他的参数
这些基本上是字体的所有属性
下一次 我给大家介绍 其他的属性
谢谢大家支持 多提

posted on 2007-03-02 10:23  水源  阅读(638)  评论(0)  编辑  收藏  举报

导航