W3School-CSS 文本实例
CSS 文本实例
CSS 实例
- CSS 背景实例
CSS 文本实例- CSS 字体(font)实例
- CSS 边框(border)实例
- CSS 外边距 (margin) 实例
- CSS 内边距 (padding) 实例
- CSS 列表实例
- CSS 表格实例
- 轮廓（Outline） 实例
- CSS 尺寸 (Dimension) 实例
- CSS 分类 (Classification) 实例
- CSS 定位 (Positioning) 实例
- CSS 伪类 (Pseudo-classes)实例
- CSS 伪元素 (Pseudo-elements)实例
01设置文本颜色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>01设置文本颜色</title>
<style type="text/css">
body {
background-color: #C7FFEC;
color: #536D8A;
}
h1 {
color: #D6BCFF;
}
p.mm {
color: #AD9876;
}
</style>
</head>
<body>
<h1>我是heading 1。</h1>
<p>我是一个段落。</p>
<p class="mm">我是另外一个定义了"mm"类的段落。</p>
</body>
</html>
02设置文本的背景颜色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>02设置文本的背景颜色</title>
<style type="text/css">
body {
background-color: #C7FFEC;
}
span.highlight {
background-color: #81FF38;
}
</style>
</head>
<body>
<p>
<span class="highlight">这是文本。</span> 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 <span class="highlight">这是文本。</span>
</p>
</body>
</html>
03规定字符间距
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>03规定字符间距</title>
<style type="text/css">
body {
background-color: #C7FFEC;
}
h1 {
letter-spacing: -0.5em;
}
h4 {
letter-spacing: 20px;
}
</style>
</head>
<body>
<h1>我是标题1，This is header 1。</h1>
<h4>我是标题4，This is header 4。</h4>
</body>
</html>
04使用百分比设置行间距
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>04使用百分比设置行间距</title>
<style type="text/css">
body{
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151205145324174-1406078733.gif);
color: #008A83;
}
p.big{line-height: 200%;}
p.small{line-height: 90%;}
span.highlight{background-color: #D8B36E;}
</style>
</head>
<body>
<p>
<span class="highlight">这个段落是标准行高。</span>
<br /> When you are old and grey and full of sleep,
<br /> 当你老了，头发花白，睡意沉沉，
<br /> And nodding by the fire，take down this book,
<br /> 倦坐在炉边，取下这本书来，
<br /> And slowly read,and dream of the soft look,
<br /> 慢慢读着，追梦当年的眼神,
<br /> Your eyes had once,and of their shadows deep;
<br /> 你那柔美的神采与深幽的晕影。
</p>
<p class="small">
<span class="highlight">这个段落的行高较小。</span>
<br /> How many loved your moments of glad grace,
<br /> 多少人爱过你昙花一现的身影，
<br /> And loved your beauty with love false or true,
<br /> 爱过你的美貌，以虚伪或真情，
<br /> But one man loved the pilgrim Soul in you,
<br /> 惟独一人曾爱你那朝圣者的心，
<br /> And loved the sorrows of your changing face;
<br /> 爱你哀戚的脸上岁月的留痕。
</p>
<p class="big">
<span class="highlight">这个段落的行高较大。</span>
<br /> And bending down beside the glowing bars,
<br /> 在炉罩边低眉弯腰，
<br /> Murmur,a little sadly,how Love fled,
<br /> 忧戚沉思，喃喃而语，
<br /> And paced upon the mountains overhead,
<br /> 爱情是怎样逝去，又怎样步上群山，
<br /> And hid his face amid a crowd of stars.
<br /> 怎样在繁星之间藏住了脸。
</p>
</body>
</html>
05使用像素值设置行间距
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>05使用像素值设置行间距</title>
<style type="text/css">
body{
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151205145324174-1406078733.gif);
color: #008A83;
}
p.big{line-height: 30px;}
p.small{line-height: 10px;}
span.highlight{background-color: #D8B36E;}
</style>
</head>
<body>
<p>
<span class="highlight">这个段落是标准行高。</span>
<br /> When you are old and grey and full of sleep,
<br /> 当你老了，头发花白，睡意沉沉，
<br /> And nodding by the fire，take down this book,
<br /> 倦坐在炉边，取下这本书来，
<br /> And slowly read,and dream of the soft look,
<br /> 慢慢读着，追梦当年的眼神,
<br /> Your eyes had once,and of their shadows deep;
<br /> 你那柔美的神采与深幽的晕影。
</p>
<p class="small">
<span class="highlight">这个段落的行高较小。</span>
<br /> How many loved your moments of glad grace,
<br /> 多少人爱过你昙花一现的身影，
<br /> And loved your beauty with love false or true,
<br /> 爱过你的美貌，以虚伪或真情，
<br /> But one man loved the pilgrim Soul in you,
<br /> 惟独一人曾爱你那朝圣者的心，
<br /> And loved the sorrows of your changing face;
<br /> 爱你哀戚的脸上岁月的留痕。
</p>
<p class="big">
<span class="highlight">这个段落的行高较大。</span>
<br /> And bending down beside the glowing bars,
<br /> 在炉罩边低眉弯腰，
<br /> Murmur,a little sadly,how Love fled,
<br /> 忧戚沉思，喃喃而语，
<br /> And paced upon the mountains overhead,
<br /> 爱情是怎样逝去，又怎样步上群山，
<br /> And hid his face amid a crowd of stars.
<br /> 怎样在繁星之间藏住了脸。
</p>
</body>
</html>
06使用数值来设置行间距
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>06使用数值来设置行间距</title>
<style type="text/css">
body{
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151205145324174-1406078733.gif);
color: #008A83;
}
p.big{line-height: 2;}
p.small{line-height: 0.5;}
span.highlight{background-color: #D8B36E;}
</style>
</head>
<body>
<p>
<span class="highlight">这个段落是标准行高。</span>
<br /> When you are old and grey and full of sleep,
<br /> 当你老了，头发花白，睡意沉沉，
<br /> And nodding by the fire，take down this book,
<br /> 倦坐在炉边，取下这本书来，
<br /> And slowly read,and dream of the soft look,
<br /> 慢慢读着，追梦当年的眼神,
<br /> Your eyes had once,and of their shadows deep;
<br /> 你那柔美的神采与深幽的晕影。
</p>
<p class="small">
<span class="highlight">这个段落的行高较小。</span>
<br /> How many loved your moments of glad grace,
<br /> 多少人爱过你昙花一现的身影，
<br /> And loved your beauty with love false or true,
<br /> 爱过你的美貌，以虚伪或真情，
<br /> But one man loved the pilgrim Soul in you,
<br /> 惟独一人曾爱你那朝圣者的心，
<br /> And loved the sorrows of your changing face;
<br /> 爱你哀戚的脸上岁月的留痕。
</p>
<p class="big">
<span class="highlight">这个段落的行高较大。</span>
<br /> And bending down beside the glowing bars,
<br /> 在炉罩边低眉弯腰，
<br /> Murmur,a little sadly,how Love fled,
<br /> 忧戚沉思，喃喃而语，
<br /> And paced upon the mountains overhead,
<br /> 爱情是怎样逝去，又怎样步上群山，
<br /> And hid his face amid a crowd of stars.
<br /> 怎样在繁星之间藏住了脸。
</p>
</body>
</html>
07对齐文本
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>07对齐文本</title>
<style type="text/css">
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151205221342736-660016724.jpg);
color: #CE790E;
}
h1 {text-align: center;}
h2 {text-align: left;}
h3 {text-align: right;}
</style>
</head>
<body>
<h1>我居中</h1>
<h2>我居左</h2>
<h3>我居右</h3>
</body>
</html>
08修饰文本
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>08修饰文本</title>
<style type="text/css">
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151206101318236-1435797598.jpg);
}
h1 {text-decoration: overline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: underline;}
h4 {text-decoration: blink;}
a {text-decoration: none;}
</style>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<a>我是一个链接</a>
</body>
</html>
09缩进文本
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>09缩进文本</title>
<style type="text/css">
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151206115736205-1795690586.jpg);
color: #EAF786;
}
p {text-indent: 1cm;}
</style>
</head>
<body>
<p>
一切都是命运，一切都是烟云，一切都是没有结局的开始，一切都是稍纵即逝的追寻，一切欢乐都没有微笑，一切苦难都没有泪痕，一切语言都是重复，一切交往都是初逢，一切爱情都在心里，一切往事都在梦中，一切希望都带着注释，一切信仰都带着呻吟，一切爆发都有片刻的宁静，一切死亡都有冗长的回声。
</p>
</body>
</html>
10控制文本中的字母
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>10控制文本中的字母</title>
<style type="text/css">
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151206130923799-1455440074.jpg);
color: #1D4218;
}
h1 {text-transform: uppercase;}
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
p.capitalize {text-transform: capitalize;}
</style>
</head>
<body>
<h1 class="uppercase">Come here and take a lesson from the lovely lemon tree.</h1>
<p class="uppercase">Come here and take a lesson from the lovely lemon tree.</p>
<p class="lowercase">Come here and take a lesson from the lovely lemon tree.</p>
<p class="capitalize">Come here and take a lesson from the lovely lemon tree.</p>
</body>
</html>
11在元素中禁止文本折行
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11在元素中禁止文本折行</title>
<style type="text/css">
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151206145148049-841538240.jpg);
}
p {white-space: nowrap;}
</style>
</head>
<body>
<p>
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
</p>
</body>
</html>
12增加单词间距
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>12增加单词间距</title>
<style type="text/css">
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151206145148049-841538240.jpg);
}
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
</style>
</head>
<body>
<p class="spread">Those were such happy times.</p>
<p class="tight">Those were such happy times.</p>
</body>
</html>
CSS文本实例总结：
W3School-CSS 文本实例的更多相关文章
- CSS文本实例
CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等.#############################CSS 文本属性属 ...
- CSS 文本实例
1.设置文本的颜色 color:red; color:#00ff00 color:rgb(0,0,255) 2.增加或减少字符间距 letter-spacing:-0.5em letter-spaci ...
- CSS 文本
CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化 ...
- CSS 文本、字体、链接
CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化 ...
- CSS 文本字体颜色设置方法(CSS color)
CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...
- CSS：CSS 文本格式
ylbtech-CSS:CSS 文本格式 1.返回顶部 1. CSS 文本格式 文本格式 This text is styled with some of the text formatting pr ...
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...
- 第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...
- css文本格式详解
一.css文本主体内容: 二.css文本详解: 1.文本缩进 语法: text-indent:<length>|<percentage> 默认值为0. 属性值详解: < ...
随机推荐
- RecyclerView和PullToRefreshListView的对比
项目中上拉刷新和下拉加载一直都是比较常见的:以前一般都是重写ListView或直接用PullToRefreshListView的框架:最近尝试用RecyclerView来实现下拉加载上拉刷新也是不错的 ...
- EasyUI-加载完Html内容样式渲染完成后显示
等待页面的css样式加载完毕,Html内容加载完毕,样式生成后再进行展示,避免一开始加载内容后,逐渐渲染样式造成的不良视觉效果,增强用户体验. 新增base-loading.js文件,代码如下 //获 ...
- Web-Nginx配置
#运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; ...
- static的用法
首先,看看变量的存储: int global ; int main() { int stackStore ; int heapStore* = (int *)malloc(sizeof(int)); ...
- js的动态加载、缓存、更新以及复用（一）
使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些 ...
- FormatJS – 让你的 Web 应用程序国际化
FormatJS 是一个模块化的集合,保护各种 JavaScript 国际化库,例如格式化数字,日期和字符串.它包括一组建立在 JavaScript 的国际内置插件和全行业的国际化标准,再加上一套集成 ...
- 2015年最佳的15个 Node.js 开发工具
Node.js 越来月流行,这个基于 Google V8 引擎建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.在本文中,我们列出了2015年最佳的15个 Node.js 开发工具.这些工具 ...
- 【javascript激增的思考02】模块化与MVC
前言 之前我们遇到了这么一个项目,也就是我们昨天提到的,有很多的小窗口的,昨天说的太抽象了,今天我们再来理一理什么是小窗口(后面点说下),当时由于js有一点复杂,我自己也装B跟风用了一下传说中MVC! ...
- 浅谈TypeScript
TypeScript为JavaScript的超集(ECMAScript6), 这个语言添加了基于类的面向对象编程.TypeScript作为JavaScript很大的一个语法糖,本质上是类似于css的l ...
- jQuery原型方法.pushStack源码分析
这次分析的方法跟前面不同,虽然pushStack也是原型方法之一,但是我们几乎从不用在页面调用,在参考手册里面也没有这个方法的使用说明,但是这个方法还是非常重要的,在使用很多jQuery的其他方式都会 ...