一,文字样式
1,字体
p {font-family: 黑体,Arial,宋体,sans-serif;}
浏览器按先后顺序查找字体,如果这些字体都没有,则使用浏览器默认字体显示
2,大小
# 绝对大小物理单位(与分辨率无关)
p.inch {font-size: 0.5in;}
p.cm {font-size: 0.5cm;}
p.mm {font-size: 4mm;}
p.pt {font-size: 12pt;}
p.pc {font-size: 2pc;}
# 绝对大小关键字(不同浏览器效果不同)
p.one {font-size: xx-small;}
p.two {font-size: x-small;}
p.three {font-size: small;}
p.four {font-size: medium;}
p.five {font-size: large;}
p.six {font-size: x-large;}
p.seven {font-size: xx-large;}
# 相对大小(与分辨率和父标记有关)
p.one {font-size: 15px;}
p.one span {font-size: 200%;} # 父标记的200%
p.two {font-size:30px;}
p.two span {font-size:0.5em;} # 父标记的0.5
3,颜色
h1 {color: blues;}
h2 {color: #00f;}
h3 {color: #0000ff;}
h4 {color: rgb(0,0,255);}
h5 {color: rgb(0%,0%,100%);}
4,粗细
h1 span {font-weight: lighter;}
span.one {font-weight: 100;}
span.two {font-weight: 200;}
span.three {font-weight: normal;}
5,斜体
h1 {font-style: italic;}
h1 span {font-style: normal;}
p {font-style: oblique;}
6,下划线、顶划线和删除线
p.one {text-decoration: underline;}
p.two {text-decoration: overline;}
p.three {text-decoration: line-through;}
p.four {text-decoration: blink;}
7,英文字母大小写
p.one {text-transform: capitalize;}
p.two {text-transform: uppercases;}
p.three {text-transform: lowercase;}
二、段落样式
1,水平对齐
p.left {text-align: left;} /*左对齐*/
p.right {text-align: right;} /*右对齐*/
p.center {text-align: center;} /*居中对齐*/
p.justify {text-align: justify;} /*两端对齐*/
2,垂直对齐
td.top {vertical-align: top;}
td.bottom {vertical-align: bottom;}
td.middle {vertical-align: middle;}
span.zs {vertical-align: 10px;}
span.fs {vertical-align: -10px;}
3,行间距和字间距
p.one {line-height: 8pt;} /*绝对数值行间距*/
p.two {line-height: 1.5em;} /*相对数值行间距*/
p.three {letter-spacing: -2pt;} /*绝对数值字间距*/
p.four {letter-spacing: .5em;} /*相对数值字间距*/
4,首字放大
p {font-size: 15px;}
p span.first {
font-size: 60px;
float: left;
padding-right: 5px;
font-weight: bold;
font-family: 黑体;
color: blue
}
分享到:
相关推荐
精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局....
第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一:模拟Google公司Logo 3.3 文字实例二:制作页面的五彩标题 3.4 CSS段落文字 3.5 段落实例:百度搜索 第4章 用CSS设置...
《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar
精通css+div 1,2,8,9,10章
正在学习css+div的朋友应该都知道这几本书吧,《精通css+div 网页样式与布局》还有《css设计彻底研究》这些书都非常好,现在将《精通css+div 网页样式与布局》的ppt文件传上来,这样大家就可以不用买实体书了,至于...
精通CSS+DIV网页样式和布局 5个完整网站的CSS+DIV布局和美化方案
《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript...
精通CSS+DIV网页样式与布局 语言:中文 格式:txt 使用前请您先阅读以下条款,否则请勿使用本站提供的文件! 1) 本站不保证所提供程序的完整性和安全性。 2) 请在使用前查毒 (这也是您使用其它网络资源所必须注意...
《精通CSS+DIV网页样式与布局》实例源码.rar
精通css+div样式和布局源码.rar精通css+div样式和布局源码.rar精通css+div样式和布局源码.rar精通css+div样式和布局源码.rar
CSS+DIV网页样式与布局 精通CSS+DIV网页样式与布局
精通CSS+DIV网页样式与布局(附书源码)
《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript,Ajax,...
精通CSS+DIV光盘文件 精通CSS+DIV光盘文件 精通CSS+DIV光盘文件
精通CSS+DIV网页样式与布局完整源代码
2.1.2 类别选择器 2.1.3 ID选择器 2.2 选择器声明 2.2.1 集体声明 2.2.2 选择器的嵌套 2.3 CSS的继承 2.3.1 父子关系 2.3.2 CSS继承的运用 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 ...
精通CSS+Div一书的配套光盘,里面都是源代码,适合于初学者
网页,精通CSS+DIV网页样式与布局,精通CSS+DIV精通CSS+DIV
精通CSS+DIV网页样式与布局
精通CSS+DIV网页样式与布局完整版