CSS学习系列六:文本样式

最新推荐文章于 2024-09-13 18:48:07 发布

weixin_34341117

最新推荐文章于 2024-09-13 18:48:07 发布

阅读量108

点赞数

文章标签： php

原文链接：http://blog.51cto.com/suxiangjuner/284233

版权

文本样式

在css中，除了对字体设置以外，还可以为文本设置样式."字"指的是单个的字或者单词."文本"指的是由文字组成的内容.为字体设置样式只要设计字,词的样式.对文本设置样式主要是对整段文章设置格式.

1.缩进和对齐

在没有使用css之前一段文字的首行缩进都是使用空格来实现的.有了css之后,使用css的text-indent属性可以轻松达到这种目的.text-indent属性的语法代码如下:

text-indentL;ength | 百分比 | inherit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文本样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
<!--
body{font-size: 9pt;}
.a{text-indent: 20%;}
.b{text-indent: 20px;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
1、写出至少三个函数，取文件名的后缀，如文件’/as/p_w_picpath/bc.jpg’，得到 jpg或者.jpg。
2、写一个函数，算出两个文件的相对路径如 $a = ‘/a/b/c/d/e.php’; $b = ‘/a/b/12/34/c.php’; 计算出 $b 相对于 $a 的相路径
</div>
<div class="b">
1、写出至少三个函数，取文件名的后缀，如文件’/as/p_w_picpath/bc.jpg’，得到 jpg或者.jpg。
2、写一个函数，算出两个文件的相对路径如 $a = ‘/a/b/c/d/e.php’; $b = ‘/a/b/12/34/c.php’; 计算出 $b 相对于 $a 的相路径
</div>
<div class="a">
1、写出至少三个函数，取文件名的后缀，如文件’/as/p_w_picpath/bc.jpg’，得到 jpg或者.jpg。
2、写一个函数，算出两个文件的相对路径如 $a = ‘/a/b/c/d/e.php’; $b = ‘/a/b/12/34/c.php’; 计算出 $b 相对于 $a 的相路径
</div>
</body>
</html>

在第一段没有设置,所以该段的第一个文字顶着浏览器窗口边框开始显示.在第二段中设置段落首字符缩进20像素，在本例中<div>标签的父标签是<body>标签,也就是窗口大小的20%，

2.负缩进

在设置缩进的时候,不但可以设置正缩进,还可以设置负缩进，当使用负缩进的时候，段落的首字符时伸出段落以外的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文本样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
<!--
body{font-size: 9pt;}
.a{text-indent: 1%;}
.b{text-indent: -10px;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
1、写出至少三个函数，取文件名的后缀，如文件’/as/p_w_picpath/bc.jpg’，得到 jpg或者.jpg。
2、写一个函数，算出两个文件的相对路径如 $a = ‘/a/b/c/d/e.php’; $b = ‘/a/b/12/34/c.php’; 计算出 $b 相对于 $a 的相路径
</div>
<div class="b">
1、写出至少三个函数，取文件名的后缀，如文件’/as/p_w_picpath/bc.jpg’，得到 jpg或者.jpg。
2、写一个函数，算出两个文件的相对路径如 $a = ‘/a/b/c/d/e.php’; $b = ‘/a/b/12/34/c.php’; 计算出 $b 相对于 $a 的相路径
</div>
<div class="a">
1、写出至少三个函数，取文件名的后缀，如文件’/as/p_w_picpath/bc.jpg’，得到 jpg或者.jpg。
2、写一个函数，算出两个文件的相对路径如 $a = ‘/a/b/c/d/e.php’; $b = ‘/a/b/12/34/c.php’; 计算出 $b 相对于 $a 的相路径
</div>
</body>
</html>

在使用负缩进的时候,必须注意,由于文字和边框之间的间距是固定的,如果缩进过多的话就会被浏览器的边框给遮蔽掉,要解决这个问题,只能添加文字与边框之间的间距,有关padding属性在以后再说

3水平对齐

在HTML中够可以使用align属性来为<p>,<div>等标签设置文字的水平对齐方式,二在css中可以使用text-align来为所有块级元素设置水平对齐方式.所谓块级元素师指自动换行的元素,如p div h1 h2 h3 hr address等

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文本样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
<!--
body{font-size:15pt;}
.a{text-align: left;}
.b{text-align: right;}
.c{text-align: justify;}
.d{text-align: center;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="a">
1、写出至少三个函数，取文件名的后缀，如文件’/as/p_w_picpath/bc.jpg’，得到 jpg或者.jpg。
2、写一个函数，算出两个文件的相对路径如 $a = ‘/a/b/c/d/e.php’; $b = ‘/a/b/12/34/c.php’; 计算出 $b 相对于 $a 的相路径
</div>
<div class="b">
1、写出至少三个函数，取文件名的后缀，如文件’/as/p_w_picpath/bc.jpg’，得到 jpg或者.jpg。
2、写一个函数，算出两个文件的相对路径如 $a = ‘/a/b/c/d/e.php’; $b = ‘/a/b/12/34/c.php’; 计算出 $b 相对于 $a 的相路径
</div>
<div class="c">
1、写出至少三个函数，取文件名的后缀，如文件’/as/p_w_picpath/bc.jpg’，得到 jpg或者.jpg。
2、写一个函数，算出两个文件的相对路径如 $a = ‘/a/b/c/d/e.php’; $b = ‘/a/b/12/34/c.php’; 计算出 $b 相对于 $a 的相路径
</div>
<div class="d">
1、写出至少三个函数，取文件名的后缀，如文件’/as/p_w_picpath/bc.jpg’，得到 jpg或者.jpg。
2、写一个函数，算出两个文件的相对路径如 $a = ‘/a/b/c/d/e.php’; $b = ‘/a/b/12/34/c.php’; 计算出 $b 相对于 $a 的相路径
</div>
</body>
</html>

4垂直对齐

在HTML中插入图片时候,可以使用img元素的align李设置图片的垂直对齐方式,在css中vertical-align属性页可以用来设置类型的对齐方式,其语法代码如下:

6文字方式

文本流入方向

css里的direction属性可以用来设置文本流入的方向.direction属性代码

direction:ltr || rtl inhrit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文本样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
<!--
body{font-size:20px;}
.a{direction: ltr;}
.b{direction: rtl;}
.c{direction: inherit;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="a">
First Time i bady I saw your face
</div>
<div class="b">
First Time i bady I saw your face;
</div>
<div class="a">
人在江湖漂,怎么办,怎么办,怎么办;
</div>
<div class="b">
人在江湖漂,怎么办,怎么办,怎么办;
</div>
</body>
</html>

7文字方向

使用文本流入方向并没有解决从右到左的显示方式.如果要中文可以从右到左地显示,必须将direction属性与unicode-bidi属性配合使用,unicoder-bidi属性通常是使用双向运算法莱从不同的方式读取文本

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文本样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
<!--
body{font-size:20px;}
.a{direction: ltr;unicode-bidi: bidi-override;}
.b{direction: ltr;unicode-bidi: embed;}
.c{direction: rtl;unicode-bidi: bidi-override;}
.d{direction: rtl;unicode-bidi: embed;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="a">
First Time i bady I saw your face
人在江湖漂,怎么办,怎么办,怎么办;
</div>
<div class="b">
First Time i bady I saw your face;
人在江湖漂,怎么办,怎么办,怎么办;
</div>
<div class="c">
人在江湖漂,怎么办,怎么办,怎么办;
人在江湖漂,怎么办,怎么办,怎么办;
</div>
<div class="d">
First Time i bady I saw your face;
人在江湖漂,怎么办,怎么办,怎么办;
</div>
</body>
</html>

8.文字竖写

在英文和现代中文中,文字的书写方式可以从左到右从上到下横着写,二一些亚洲文字里面,

layout-flow属性

layout-flow:horizontal | vertical-udeigraohic

9空格和换行

在HTML代码里面,通常会出现很多空格与换行,

空格的处理方式

可以使用pre元素来让浏览器显示不修改源代码的排版方式.这些cs里面同样使用white-space属性完成.

white-space属性:normal || pre || nowrap || inhrit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文本样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
<!--
body{font-size:20px;}
.a{white-space: normal;}
.b{white-space: pre;}
.c{white-space: nowrap;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="a">
First Time i bady I saw your face
人在江湖漂,怎么办,怎么办,
怎么办;
</div>
<div class="b">
First Time i bady I saw your face;
人在江湖漂,怎么办,
怎么办,怎么办;
</div>
<div class="c">
人在江湖漂,怎么办,怎么办,怎么办;
人在江湖漂,怎么办,怎么办,怎么办;
</div>
\
</body>
</html>

iE对设置pre支持不是很好

10.词间换行

介绍表格时，如果设置设置了单元格宽度,但是只要该单元格宽度无法容纳其中对象,

如一个中文字,一个英文词或者一个图片的宽度大学该单元格宽度,那么该单元格将会自动调整大小,直到可以容纳该对象

如果单元格里面是文字可以用word-break来强行换行,以便可以包含单元格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文本样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
<!--
body{font-size:20px;}
.a{word-break:normal;}
.b{word-break:break-all;}
.c{word-break:keep-all;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table>
<tr>
<td width="300" class="a">
Footsearch stock pthotography ant FootAge is leading global provider of visual conten
for comerical user
</td>
<tr>
<td width="300" class="b">
是个是发生类似打开,是的电视剧佳木斯的考虑.是对方即可就,第三方健康就是的方式是个是发生类似打开,是的电视剧佳木斯的考虑.是对方即可就,第三方健康就是的方式
</td>
</tr>
</table>
<table>
<tr>
<td width="300" class="b">
Footsearch stock pthotography ant FootAge is leading global provider of visual conten
for comerical user
</td>
</tr>
<tr>
<td width="300" class="b">
是个是发生类似打开,是的电视剧佳木斯的考虑.是对方即可就,第三方健康就是的方式 .是个是发生类似打开,是的电视剧佳木斯的考虑.是对方即可就,第三方健康就是的方式
</td>
</tr>
</table>
<table>
<tr>
<td width="300" class="c">
Footsearch stock pthotography ant FootAge is leading global provider of visual conten
for comerical user
</td>
</tr>
<tr>
<td width="300" class="c">
是个是发生类似打开,是的电视剧佳木斯的考虑.是对方即可就,第三方健康就是的方式 .是个是发生类似打开,是的电视剧佳木斯的考虑.是对方即可就,第三方健康就是的方式
</td>
</tr>
</table>
</body>
</html>

NOte:word-break不是css中的标准属性,只要Ie浏览器支持该属性

11.首字与首行样式

设置一个字段里第一个字或第一行的样式,是通过二个伪元素来实现的.其中设置第一个字的样式的伪元素为:first-letter,设置第一行文字的样式的伪元素为:first-line

首字颜色使用first-letter可以设置第一段的第一个字的样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文本样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
<!--
body{font-size: 15x;}
div:first-letter{font-size: 30px;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
秦汉交替时期，漠北的匈奴崛起，在其首领冒顿单于的率领下东灭东胡,西逐月氏。至汉朝时已占有漠北及部分漠南的广大地区，形成了一个大的军事强国。人民从事牧业，逐水草而居，居住在毡帐内，不事农耕，没有城郭。人们从小就骑射，又有的是马群，因此拥有一支强大的骑兵队伍，常犯汉朝边境，使汉的边民深受掳掠之苦。刘邦时，虽天下草创，为保边境安全，亲自率领大军进行抵御。
</div>
<div>
sgj g dskg sdkg lsdglsdk gdskglsdkgsdkgdlgd gds gdsgl sk
</div>
</body>
</html>

11首行样式

使用伪元素:first-letter可以设置第一段文字中的第一个字或字母，而使用伪元素:firt-line可以设置第一行的样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文本样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
<!--
body{font-size: 15px;}
div:first-line{font-size: 30px;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
秦汉交替时期，漠北的匈奴崛起，在其首领冒顿单于的率领下东灭东胡,西逐月氏。至汉朝时已占有漠北及部分漠南的广大地区，形成了一个大的军事强国。人民从事牧业，逐水草而居，居住在毡帐内，不事农耕，没有城郭。人们从小就骑射，又有的是马群，因此拥有一支强大的骑兵队伍，常犯汉朝边境，使汉的边民深受掳掠之苦。刘邦时，虽天下草创，为保边境安全，亲自率领大军进行抵御。
</div>
<div>
sgj g dskg sdkg lsdglsdk gdskglsdkgsdkgdlgd gds gdsgl sk
</div>
</body>
</html>

12.网格

字符网格尺寸

layout-grid-char属性可以设子横向网格的大小,简单的说,就是设置每个字符格子的宽度.

layout-grid-char

行网格尺寸

layout-grid-line属性来设置行网格纵向尺寸,从效果上面来看,行网格尺寸类似于设置行高;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文本样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
<!--
body{font-size: 15px;}
.a{layout-grid-line:none}
.b{layout-grid-line:auto;}
.c{layout-grid-line:80px;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="a">
sgj g dskg sdkg lsdglsdk gdskglsdkgsdkgdlgd gds gdsgl sk
秦汉交替时期，漠北的匈奴崛起，在其首领冒顿单于的率领下东灭东胡,西逐月氏。<br>
至汉朝时已占有漠北及部分漠南的广大地区，形成了一个大的军事强国。人民从事牧业，逐水草而居，居住在毡帐内，不事农耕，没有城郭。人们从小就骑射，又有的是马群，因此拥有一支强大的骑兵队伍，常犯汉朝边境，使汉的边民深受掳掠之苦。刘邦时，虽天下草创，为保边境安全，亲自率领大军进行抵御。
</div>
<div class="b">
sgj g dskg sdkg lsdglsdk gdskglsdkgsdkgdlgd gds gdsgl sk
秦汉交替时期，漠北的匈奴崛起，在其首领冒顿单于的率领下东灭东胡,西逐月氏。<br>
至汉朝时已占有漠北及部分漠南的广大地区，形成了一个大的军事强国。人民从事牧业，逐水草而居，居住在毡帐内，不事农耕，没有城郭。人们从小就骑射，又有的是马群，因此拥有一支强大的骑兵队伍，常犯汉朝边境，使汉的边民深受掳掠之苦。刘邦时，虽天下草创，为保边境安全，亲自率领大军进行抵御。
</div>
<div class="c">
sgj g dskg sdkg lsdglsdk gdskglsdkgsdkgdlgd gds gdsgl sk
秦汉交替时期，漠北的匈奴崛起，在其首领冒顿单于的率领下东灭东胡,西逐月氏。<br>
至汉朝时已占有漠北及部分漠南的广大地区，形成了一个大的军事强国。人民从事牧业，逐水草而居，居住在毡帐内，不事农耕，没有城郭。人们从小就骑射，又有的是马群，因此拥有一支强大的骑兵队伍，常犯汉朝边境，使汉的边民深受掳掠之苦。刘邦时，虽天下草创，为保边境安全，亲自率领大军进行抵御。
</div>
</body>
</html>