CSS循序渐进(二)字的艺术
来源:互联网 发布:淘宝小号查询网站 编辑:程序博客网 时间:2024/09/21 09:18
首先,给朋友们说说样式表关于字型的一些功能。总的说来,主要是字体(font)、大小(size)、字体粗细(Weight)、字体变形(Variant)、字体风格(Style)、修饰(Decoration)、Case(大小写)等等。下面笔者向大家详细介绍一下。请注意,本文所用的Style例子都是采用的调用外部文件的形式,且只是外部文件CSS1.CSS的内容,大家看的时候注意了。要是想使用它们,如上节所说的,在HTML文件的文件头说明部分中加入< LINK REL=STYLESHEET HREF="CSS1.CSS">就可以了。
好,下面先给大家看一个例子:
P {
text-align: left;
font-size: 25pt;
font-family: "隶书", "宋体";
letter-spacing: 3px;
color:navy;
line-height:30pt;
text-indent: .5in;
border: solid 2pt;
}
链入网页以后出来的效果如下图:
现在就对上面这段代码进行详解。首先,P就是表示是对文件中的所有< p>< /p>容器中的内容进行的定义。大括号内就是对各项属性所规定的值。对于一个定义的格式往往是:
属性:值
中间以分号隔开。
Text-align:left表示段落是居左对齐,font-size:15pt,表示字体大小为15pt,font-family:隶书,宋体 表示所采用的字体。这里要说明一下,这里使用了几种字体,并分别用逗号隔开,表示第一、第二、第三字体,也就是说如果客户机的系统内有第一种字体的话就采用它,如果没有再查看有没有第二种,第三种,倘若都没有则使用缺省字体。letter-spacing:3px就说明字间宽为3px.color:navy,则表示颜色为天蓝色,line-height:12pt表示行高为12pt(这里的行高是连同字高一起计算的)。text-indent:.5in表示段落首行的缩进的多少,这里是.5in.border:solid 1pt表示边框是宽度为1pt的实心边框。
大家对照一下图看看属性与效果之间的关系。看看写Style是不是很简单呢?有关字体和排版的属性还有几项,下面就列表向大家说明。
字体参数(Font Properties):
参数
含义
举例
Font-size
字体大小
Small,midium
Font-Style
字体风格
Normal,italic
Font-family
选用字体
宋体,fantasy
Font-weight
字体粗细
Bold,bolder
文本参数(Text Properties):
参数
含义
举例
Line-Height
行距
1.2,18pt
Text-decoration
文字装饰
underline,none
Text-transform
大小写转换
Capitalize(单词首字母大写)
Uppercase(全部大写)
Lowercase(全部小写)
Text-align
文字对齐
Left,right,center,justify
Text-indent
文字缩进
长度值,百分比值
块参数(Block-Level Formatting Properties)
参数
含义
举例
Left-margin,right-margin
留的空白
长度值,百分比值
Padding-top…
内容边框间距
长度值,百分比值
Border-width
边框宽度
长度值
Border-style
边框风格
Solid,double,groove
Border-color
边框颜色
颜色值
Width
宽度
长度值,百分比值
Float
对齐
Left,right
颜色参数(Color and Background Properties)
参数
含义
举例
Color
前景色彩
颜色值(red, #FF0000)
Background-image
背景文件
文件地址
Background-color
背景颜色
颜色值
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>- CSS 循序渐进(二)字的艺术
- CSS循序渐进(二)字的艺术
- CSS 循序渐进(一)画个瓢
- CSS循序渐进(一)画个瓢
- CSS 循序渐进(三)样式“表”秀
- CSS 循序渐进(四)表里春秋
- CSS循序渐进(三)样式“表”秀
- CSS循序渐进(四)表里春秋
- 欺骗的艺术(前言二)
- 【算法】算法的艺术(二)
- 指针的编程艺术(二)
- 编写可读性代码的艺术(二)
- 循序渐进学习使用WINPCAP(二)
- 基于 CSS 的 ASCII 艺术
- 循序渐进实现仿QQ界面(二):贴图按钮的三态模拟
- ORACLE物化视图--循序渐进MView(二) MView Log的结构与快速刷新
- 循序渐进实现仿QQ界面(二):贴图按钮的三态模拟
- vc循序渐进实现仿QQ界面(二):贴图按钮的三态模拟
- CSS循序渐进(一)画个瓢
- Oracle的表结构:纵向和横向
- 数据库MySQL公布产品生命周期计划
- 从实作标题栏按钮开始浅谈组件的制作
- 空指针与迷途指针
- CSS循序渐进(二)字的艺术
- MySQL数据库 CEO 对甲骨文既爱又恨
- 用Delphi制作个性化的菜单
- CSS循序渐进(三)样式“表”秀
- 指针、数组和函数
- win2000用户,你的“本地连接”会突然不见了吗?
- 如何学习MySQL数据库 初学者使用指南
- 六个经典的英语面试问题
- CSS循序渐进(四)表里春秋