第四部分 使用CSS设计布局
第15章 对齐
块属性内部的文本对齐方式由text-align属性控制，这个属性只对块属性有意义，内联盒子的内容没有对齐方式。尽管内联盒子自己在包围盒子内部对齐。
Text-align属性值：
Center:内容居中
Justify:文本两端对齐
Left:内容左对齐
Right:内容右对齐
关于对齐属性的代码如下：
<!--15.1.html-->
<html>
<head>
<title>image accessibility</title>
<style>
body{font-family:Arial,sans-serif;
}
p{border:1px solod #333333;
padding:0.5em;
}
#a{
text-align:left;
}
#b{text-align:justify;}
#c{text-align:right;
}
#d{text-align:center;}
</style>
<link type="text/css" rel="stylesheet" href="15.1.css">
</head>
<body>
<p id="a">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
<p id="b">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
<p id="c">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
<p id="d">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
</body>
</html>
Text-indent属性：它可以对块元素进行设置，如果应用于内联元素，它没有效果。这个属性产生的效果是缩进元素的第一行。由添加的空白空间得到该效果。
该属性的属性值：大小表示设置缩进
负的大小表示设置悬挂缩进
以下是所有段落缩进3em的规则：
P{text-indent:3em;}
<!--15.1.html-->
<html>
<head>
<title>image accessibility</title>
<style>
body{font-family:Arial,sans-serif;
}
p{border:1px solod #333333;
padding:0.5em;
}
#a{
text-align:left;
text-indent:25px;
}
#b{text-align:left;
text-indent:3em;}
#c{text-align:left;
text-indent:75%;
}
#d{text-align:left;
text-indent:-3em;
margin-left:3em;
}
</style>
<link type="text/css" rel="stylesheet" href="15.1.css">
</head>
<body>
<p id="a">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
<p id="b">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
<p id="c">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
<p id="d">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
</body>
</html>
Vertical-align属性：该属性调整内联盒子内部的垂直对齐方式，这可以用于使文本比所在行其余文本或者更低。最适用于创建上标和下标。
属性值：
Baseline:与周围文本对齐
Bottom：底端和行的底端对齐
Middle与周围文本的中线对齐
Sub 下降到下标水平
Super 上升到上标水平
text-top 与周围文本的顶端对齐
text-bottom 与周围文本的底端对齐
top 顶端和行的顶端对齐
浮动内容：
对齐内容的另一个方法是进行浮动。根据float属性的值浮动盒子，移动到一边或者到另一边。任何后面的内容以液体方式围绕它们流动，clear属性可以用来表示其余内容何时应该停止围绕浮动盒子流动。
已经对<img><table>标签使用过align属性，将浮动内容放在页面布局的一边的有经验的HTML开发人员应该熟悉这个效果。<br>标签上的clear属性已经用来控制何时浮动结束，CSS属性float,clear可以用来控制任何HTML元素，所以大大的扩展了可以设置为浮动或者停止流动的内容类型。
Float属性：
Left:盒子移动到左边，文本围绕右边流动。
Right:盒子移动 到右边，文本围绕在左边流动。
None:盒子不移动，文本不围绕它流动。
当盒子浮动时，它定位在它的包含盒子的内容部分的内部，浮动盒子保持在它的包含盒子的边距，边框和填充之内，它只是适当地移动到右边或者左边。任何其后的内容放在浮动盒子的旁边。
<!--15.3.html-->
<html>
<head>
<title>accessibility of color</title>
<style>
h1{
font-family:Verdana,sans-serif;
}
p{
font-size:large;
font-family:Arial,sans-serif;
line-spacing:1.25;
}
.pullquote{
float:left;
font-family:Verdana,sans-serif;
text-indent:0;
border:5px solod black;
padding:0.5em;
margin:0.75em;
background-color:silver;
}
.pullquote p{
margin:0;
padding:0;
}
.pullquote blockquote{
font-style:italic;
padding:0;
margin:0;
}
.pullquote img{
float:left;
}
</style>
<link type="text/css" rel="stylesheet" href="15.3.css">
</head>
<body>
<h1>donnot <em>rely</em> on color alone</h1>
<p>some web sudrs may be unable to see color--they may be blind(and use a screen reader program);they may be color-blind and unable to easily distinguish colors;or they could be using an access device,such as a cell phone,which does not display color.for this reason,the w3cs web accessibility initiative recommends that you not <em>rely</em>upon color as the<em>only</em>way of conveying infromaiton</p>
<div class="pullquote">
<img src="k.gif" alt=" ">
<p>kynn says:</p>
<blockquote>
<p>color is very<br>
userful to those<br>
who can see it</p>
</blockquote>
</div>
<p>this doesnnot mean donnot use color,on the contratr,color is very useful to those who can see it,and will help make your page understandable,what it does mean is that color and other presentational effects should not be the only way you makie something special.for example,rather than use a span ,and a color style to make something stand out,use the strong tag which yu can also style so browsers that cannot use the visual css color rule can at least know to emphasize that section perhaps by increasing the volume when reading the text out loud,for example</p>
</body>
</html>
Clear属性
要停止其后的文本围绕浮动元素流动，可以对第一个不想流动的元素设置clear属性，该元素向下移动足够远，以便它不围绕浮动盒子，通过clear属性有效增大该元素的上边距，提供足够空白越过浮动盒子。
属性值：
Both 向下移动盒子足够远，以便它不围绕浮动盒子流动。
Left 向下移动盒子足够远，以便它不围绕左浮动盒子流动
Right 向下移动盒子足够远，以便它不围绕右浮动盒子流动
None 正常浮动
第15章 对齐
块属性内部的文本对齐方式由text-align属性控制，这个属性只对块属性有意义，内联盒子的内容没有对齐方式。尽管内联盒子自己在包围盒子内部对齐。
Text-align属性值：
Center:内容居中
Justify:文本两端对齐
Left:内容左对齐
Right:内容右对齐
关于对齐属性的代码如下：
<!--15.1.html-->
<html>
<head>
<title>image accessibility</title>
<style>
body{font-family:Arial,sans-serif;
}
p{border:1px solod #333333;
padding:0.5em;
}
#a{
text-align:left;
}
#b{text-align:justify;}
#c{text-align:right;
}
#d{text-align:center;}
</style>
<link type="text/css" rel="stylesheet" href="15.1.css">
</head>
<body>
<p id="a">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
<p id="b">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
<p id="c">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
<p id="d">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
</body>
</html>
Text-indent属性：它可以对块元素进行设置，如果应用于内联元素，它没有效果。这个属性产生的效果是缩进元素的第一行。由添加的空白空间得到该效果。
该属性的属性值：大小表示设置缩进
负的大小表示设置悬挂缩进
以下是所有段落缩进3em的规则：
P{text-indent:3em;}
<!--15.1.html-->
<html>
<head>
<title>image accessibility</title>
<style>
body{font-family:Arial,sans-serif;
}
p{border:1px solod #333333;
padding:0.5em;
}
#a{
text-align:left;
text-indent:25px;
}
#b{text-align:left;
text-indent:3em;}
#c{text-align:left;
text-indent:75%;
}
#d{text-align:left;
text-indent:-3em;
margin-left:3em;
}
</style>
<link type="text/css" rel="stylesheet" href="15.1.css">
</head>
<body>
<p id="a">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
<p id="b">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
<p id="c">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
<p id="d">
always include an <tt>alt</tt> attribute on your <tt><img></tt>tag.the alt attribute should contain a short replacement for the graphic,in text.if the image itself has text,list that in alt.if the image is purely decorative and doesnnot convey any additional information,use if there is more information in the graphic than you can convey in a short alt attribute,such as the information in agraph or chart,then use the longdesc attribute to give the url of a page that descriobes the graphic in text.
</p>
</body>
</html>
Vertical-align属性：该属性调整内联盒子内部的垂直对齐方式，这可以用于使文本比所在行其余文本或者更低。最适用于创建上标和下标。
属性值：
Baseline:与周围文本对齐
Bottom：底端和行的底端对齐
Middle与周围文本的中线对齐
Sub 下降到下标水平
Super 上升到上标水平
text-top 与周围文本的顶端对齐
text-bottom 与周围文本的底端对齐
top 顶端和行的顶端对齐
浮动内容：
对齐内容的另一个方法是进行浮动。根据float属性的值浮动盒子，移动到一边或者到另一边。任何后面的内容以液体方式围绕它们流动，clear属性可以用来表示其余内容何时应该停止围绕浮动盒子流动。
已经对<img><table>标签使用过align属性，将浮动内容放在页面布局的一边的有经验的HTML开发人员应该熟悉这个效果。<br>标签上的clear属性已经用来控制何时浮动结束，CSS属性float,clear可以用来控制任何HTML元素，所以大大的扩展了可以设置为浮动或者停止流动的内容类型。
Float属性：
Left:盒子移动到左边，文本围绕右边流动。
Right:盒子移动 到右边，文本围绕在左边流动。
None:盒子不移动，文本不围绕它流动。
当盒子浮动时，它定位在它的包含盒子的内容部分的内部，浮动盒子保持在它的包含盒子的边距，边框和填充之内，它只是适当地移动到右边或者左边。任何其后的内容放在浮动盒子的旁边。
<!--15.3.html-->
<html>
<head>
<title>accessibility of color</title>
<style>
h1{
font-family:Verdana,sans-serif;
}
p{
font-size:large;
font-family:Arial,sans-serif;
line-spacing:1.25;
}
.pullquote{
float:left;
font-family:Verdana,sans-serif;
text-indent:0;
border:5px solod black;
padding:0.5em;
margin:0.75em;
background-color:silver;
}
.pullquote p{
margin:0;
padding:0;
}
.pullquote blockquote{
font-style:italic;
padding:0;
margin:0;
}
.pullquote img{
float:left;
}
</style>
<link type="text/css" rel="stylesheet" href="15.3.css">
</head>
<body>
<h1>donnot <em>rely</em> on color alone</h1>
<p>some web sudrs may be unable to see color--they may be blind(and use a screen reader program);they may be color-blind and unable to easily distinguish colors;or they could be using an access device,such as a cell phone,which does not display color.for this reason,the w3cs web accessibility initiative recommends that you not <em>rely</em>upon color as the<em>only</em>way of conveying infromaiton</p>
<div class="pullquote">
<img src="k.gif" alt=" ">
<p>kynn says:</p>
<blockquote>
<p>color is very<br>
userful to those<br>
who can see it</p>
</blockquote>
</div>
<p>this doesnnot mean donnot use color,on the contratr,color is very useful to those who can see it,and will help make your page understandable,what it does mean is that color and other presentational effects should not be the only way you makie something special.for example,rather than use a span ,and a color style to make something stand out,use the strong tag which yu can also style so browsers that cannot use the visual css color rule can at least know to emphasize that section perhaps by increasing the volume when reading the text out loud,for example</p>
</body>
</html>
Clear属性
要停止其后的文本围绕浮动元素流动，可以对第一个不想流动的元素设置clear属性，该元素向下移动足够远，以便它不围绕浮动盒子，通过clear属性有效增大该元素的上边距，提供足够空白越过浮动盒子。
属性值：
Both 向下移动盒子足够远，以便它不围绕浮动盒子流动。
Left 向下移动盒子足够远，以便它不围绕左浮动盒子流动
Right 向下移动盒子足够远，以便它不围绕右浮动盒子流动
None 正常浮动
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
