文本样式
在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/image/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/image/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/image/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/image/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/image/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/image/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/image/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/image/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/image/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/image/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>
12设置输入法状态
ime-mode属性是一个很有意思的属性,可以用来控制输入法状态.比如用户注册的网页,要求用户名必须使用英文,可以禁用本地输入法状态,
ime-mode;auto || active || inactive || disabled
- <!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{ime-mode:auto;}
- .b{ime-mode:active;}
- .c{ime-mode:inactive;}
- .d{ime-mode:disabled;}
- -->
- </style>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- </head>
- <body>
- <input type="text" class="a" size="50" value="不影响输入法"/><br/>
- <input type="text" class="b" size="50" value="激活本地输入法"/><br/>
- <input type="text" class="c" size="50" value="激活非本地语言输入法"/><br/>
- <input type="text" class="d" size="50" value="禁止使用输入法"/>
- </body>
- </html>