CSS教程(6):实例学习CSS如何控制网页文本

2016-02-19 23:55 0 1 收藏

今天图老师小编要向大家分享个CSS教程(6):实例学习CSS如何控制网页文本教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

本CSS教程主要讲解网页文字实例:1、设置文本颜色,2、设置文本的背景颜色,3、规定字符间距。

1、设置文本颜色

本例演示如何设置文本的颜色。

html
head
style type="text/css"
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
/style
/head
body
h1这是 header 1/h1
h2这是 header 2/h2
p这是一个段落。/p
/body
/html

2、设置文本的背景颜色

本例颜色如何设置部分文本的背景颜色。本文来自于网页教学网WebjxCom

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

html
head
style type="text/css"
span.highlight
{
background-color:yellow
}
/style
/head
body
p
span class="highlight"这是文本。/span 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 span class="highlight"这是文本。/span
/p
/body
/html

3、规定字符间距

本例演示如何增加或减少字符间距。

html
head
style type="text/css"
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
/style
/head
body
h1This is header 1/h1
h4This is header 4/h4
/body
/html

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160219/1630877.html

延伸阅读
标签: Web开发
在div+css布局中,一般都这样来整体构架的: div id="header"/div div id="center"/div div id="footer"/div 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: div id="header" div id="title"这里是网站的标题/div div...
标签: Web开发
自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层div。 盒模型主要定义四个区域:内容(content)、内边框距(padding)、边框(border)和外边距(margin)。 对于初学者,经常会搞不清楚margin,padding之间的层次、关...
气泡对话框在网页中经常用于说明提示等功能,可以形象生动的现实一些需要用户注意的文字与内容,本文介绍仅用CSS来实现这种简单的网页效果。 气泡状文本框,是一种很生动的网页设计手段。 它可以用来表示用户的发言。 也可以用来作为特定信息的提示符。 DVD租借网站Netflix,还用它显示碟片的详细信息。 制作CSS气泡框的传统方法...
标签: Web开发
1. position:static 所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。 一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。 #div-1 { position:static;} 2. position:relative 如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文...
标签: Web开发
在进行DivCSS布局时,需要对文本进行控制,我们在webjx.com以前的文章中,也讲过这方面的知识,今天系统的向大家介绍一下。CSS中控制换行的四种属性。 一、white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例。 语法: white-space : normal | pre | nowrap 取...

经验教程

892

收藏

64
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部