`
hideto
  • 浏览: 2682402 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

精通CSS+DIV:3,用CSS设置文字效果

    博客分类:
  • CSS
阅读更多
一,文字样式
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网页样式与布局

    精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局....

    《精通CSS+DIV网页样式与布局》光盘源码

     第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟Google公司Logo   3.3 文字实例二:制作页面的五彩标题   3.4 CSS段落文字  3.5 段落实例:百度搜索   第4章 用CSS设置...

    精通css+div

    《精通CSS+Div》是一本深入探讨Web前端布局技术的专著,主要聚焦于使用CSS(层叠样式表)和Div元素进行网页设计与布局。根据提供的章节信息,我们主要关注1、2、8和10章的内容。下面将详细阐述这些章节涵盖的关键...

    精通CSS+DIV 书中实例和源代码

    总之,《精通CSS+DIV》是一本全面介绍CSS+DIV技术的教程,适合网页设计师和开发者学习,无论你是初学者还是有一定经验的开发者,都能从中受益。通过这本书的学习,你将能够熟练掌握CSS+DIV,打造出专业且具有吸引力...

    精通css+div 网页样式与布局 ppt文件

    正在学习css+div的朋友应该都知道这几本书吧,《精通css+div 网页样式与布局》还有《css设计彻底研究》这些书都非常好,现在将《精通css+div 网页样式与布局》的ppt文件传上来,这样大家就可以不用买实体书了,至于...

    精通css+div网页样式与布局

    《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript...

    《精通CSS+DIV网页样式与布局》实例源码

    《精通CSS+DIV网页样式与布局》是一本深入解析CSS(层叠样式表)和DIV(定位元素)在网页设计中的应用的专业书籍。其实例源码压缩包包含了多个实际的网页设计示例,旨在帮助读者理解和掌握如何通过CSS和DIV技术实现...

    精通CSS+DIV网页样式与布局/div/css/div+css

    精通CSS+DIV网页样式与布局 语言:中文 格式:txt 使用前请您先阅读以下条款,否则请勿使用本站提供的文件! 1) 本站不保证所提供程序的完整性和安全性。 2) 请在使用前查毒 (这也是您使用其它网络资源所必须注意...

    精通CSS+DIV配盘

    **精通CSS+DIV布局**是Web前端开发中的关键技能,CSS(层叠样式表)与HTML的DIV元素结合,能够实现复杂且响应式的网页设计。本资料包包含一系列关于这个主题的学习资源,对于想要深入理解并掌握这一技术的开发者来说...

    精通CSS+Div源代码

    《精通CSS+Div源代码》是一本面向初学者的实用教程,旨在帮助读者掌握使用CSS(层叠样式表)和Div(HTML布局容器)进行网页设计的核心技能。这本书的配套光盘包含了所有实例的源代码,使学习者能够直接查看和实践...

    精通CSS+DIV 网页样式与布局【PDF】

    《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript,Ajax,...

    精通CSS+DIV网页样式与布局(附书源码)

    本书《精通CSS+DIV网页样式与布局》显然旨在帮助读者深入理解和掌握这两项技术,以便创建美观、响应式的网页设计。以下是关于CSS和DIV的一些关键知识点: 1. **CSS简介**:CSS是一种样式表语言,用于描述HTML或XML...

    精通css+div书中实例

    《精通CSS+Div》是一本深入探讨网页设计技术的专业书籍,尤其关注如何使用CSS(层叠样式表)和Div(布局容器)来构建美观、高效且响应式的网站。CSS是网页设计的核心,它允许我们将样式与内容分离,使得网页的布局和...

    CSS精通CSS+DIV网页样式与布局

    **标题解析:**“CSS精通CSS+DIV网页样式与布局”意味着我们将深入学习如何使用CSS与HTML中的`<div>`元素来构建和美化网页布局。`<div>`元素是一个通用的容器,可以容纳其他HTML元素,通过CSS可以对这些元素进行定位...

    精通CSS与DIV资源管理及素材

    在这个名为“精通CSS与DIV资源管理及素材”的压缩包中,你将找到一系列关于这两项技术的基础知识和实践案例。 CSS是一种样式表语言,用于描述HTML或XML(包括SVG、XHTML等)文档的呈现。它控制着网页的布局,包括...

    精通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是一种样式表语言,用于描述HTML或XML(包括SVG、MathML等各种XML方言...

    《精通CSS+DIV网页样式与布局》ppt文件

    《精通CSS+DIV网页样式与布局》是一门深入解析CSS技术及其在网页设计中应用的课程。本课程主要分为三个部分,旨在帮助学习者全面掌握CSS的核心概念和实用技巧,从而实现网页的精美布局和高效设计。 第一课:初探CSS...

    精通CSS+DIV样式和布局源码

    "精通CSS+DIV样式和布局源码"是一份专为初学者设计的学习资源,旨在帮助他们理解和掌握如何使用CSS和HTML的DIV元素来创建美观且响应式的网页布局。 1. **CSS基础知识**:CSS是一种样式表语言,用于定义HTML或XML...

Global site tag (gtag.js) - Google Analytics