Jadua la mafunzo

Mafunzo ya juu ya CSS

• Kitabu cha Kipenzi cha CSS
• Kinyume cha CSS
• Muundo wa Kuzingatia cha CSS
• Muundo wa Kuzingatia cha Kivinjili cha CSS
• Mwongozo wa Chaguo cha Kivinjili cha CSS
• Chaguo cha ID cha CSS
• Chaguo cha Class cha CSS
• Muundo wa CSS
• Mabaki ya Mabaki ya CSS
• Mabaki ya Matukio ya CSS
• Fonti ya CSS
• Mifungo ya CSS

Mfumo wa kiwango cha CSS

• Muundo wa Kifungo cha Kifungo cha CSS
• Mabaki ya Nje ya Kifungo cha CSS
• Mabaki ya Kifungo cha CSS
• Mabaki ya Nje ya Kifungo cha CSS
• Kufungua Mabaki ya Nje ya Kifungo cha CSS

Mchakato wa uenezi wa CSS

• Muundo wa Kufungua Kifungo cha CSS
• Kufungua Kifungo cha Kina cha Kifungo cha CSS
• Kufungua Kifungo cha Kina cha Kifungo cha CSS
• Kufungua Kifungo cha Kina cha Kifungo cha CSS

Mchakato wa chaguo cha CSS

• Chaguo cha Kifungo cha Kifungo cha CSS
• Kufungua Chaguo cha Kifungo cha CSS
• Kivinjili cha Chaguo cha Class cha CSS
• Kivinjili cha Chaguo cha ID cha CSS
• Kivinjili cha Chaguo cha Mafungo cha CSS
• Chaguo cha Mabaki wa Mabaki wa Kivinjili
• Chaguo cha Mabaki wa Mabaki wa Kivinjili
• Chaguo cha Wengine wa Mabaki wa Mabaki wa Kivinjili

Makala ya chaguo

Mnamo kuzingatia:

• Kizaziwa cha CodeW3C.com

Tabia za matukio ya CSS zinaweza kufafanua uenezi wa matukio.

Kwa tabia za matukio, inaweza kubadilisha rangi ya matukio, kusaidia kwa kina cha herufi, kusimamia matukio, kumweka uharibifu wa matukio, na vitu vingine vya vifaa.

Kuzingatia matukio ya kuzingatia

Kuweka uharibifu wa kwanza wa mawendo ya Web, hii ni tabia ya muhimu sana ya muundo wa matukio.

CSS inaandika Tabia ya text-indentTabia hii inarudisha kufanya uharibifu wa matukio.

Kwa kutumia tabia ya text-indent, kila kipengele cha kwanza cha kila kitu kinaweza kuwekwa kwenye uharibifu kwa umboaji wa uangalifu, tena inaweza kuwa namba zilizopunguzwa.

这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：

p {text-indent: 5em;}

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

使用负值

text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：

p {text-indent: -5em;}

不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

p {text-indent: -5em; padding-left: 5em;}

使用百分比值

text-indent 可以使用所有长度单位，包括百分比值。

百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。

Kwenye mafano hii, ukifupishwa ni 20% ya kipenzi cha kina, i.e. 100 mita:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>hii ni paragragh</p>
</div>

Kuwa na mafano

Mfano wa text-indent inaweza kuwakilika, inafikia kwenye kipenzi hiki:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>hii ni paragragh.</p>
</div>
</div>

Mafupi ya kwenye kipenzi hiki kina kufupishwa 50 mita, hii ni kwa sababu kipenzi hiki kinaonekana kwa kumwambaa ukifupishwa wa kipenzi cha id ya inner.

水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。

提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

text-align:center 与

您可能会认为 text-align:center 与

Uharibifu wa herufi

Mfano wa word-spacingInaweza kubadilisha uharibifu wa herufi (kinga) kati ya herufi. Kimaadili yake inayotumiwa ni normal, inayofanana na kumingiliana na 0.

Mfano wa word-spacing unaingia katika ukubwa wa umbo au ukizi wa umbo. Ikiwa iningia katika ukubwa wa umbo, herufi huzingatia kwa kina. Kuingia katika ukizi wa umbo, herufi huzingatia kwa kina:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Hii ni mawili. Umasikio wa kati ya herufi kwa herufi kwa uharibifu hupungua.


This is a paragraph. The spaces between words will be decreased.

实例 TIY ：增加或减少单词间距（字间隔）

注释：如需深入理解 CSS 对“字”（word）的定义，请访问 CSS word-spacing 属性参考页。

字母间隔

letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。

与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量：

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
This is header 1
This is header 4

实例 TIY ：规定字符间距（字母间隔）

字符转换

text-transform 属性处理文本的大小写。这个属性有 4 个值：

• none
• uppercase
• lowercase
• capitalize

默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。

作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改：

h1 {text-transform: uppercase}

使用 text-transform 有两方面的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身。其次，如果您以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。

mifano TIY: Kusimamia kikomo cha kilele cha matukio

mumtazama wa matukio

kisha tunavyovya text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。

text-decoration 有 5 个值：

• none
• underline
• overline
• line-through
• blink

不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：

a {text-decoration: none;}

注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。

还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线，则规则如下：

a:link a:visited {text-decoration: underline overline;}

不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来。

处理空白符

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：

<p>This     paragraph has    many
    spaces           in it.</p>

Inaweza kutumia ujumbe huo kwa kumielekea uadilifu wa kuzingatia kusoma wa kawaida:

p {white-space: normal;}

Majukumu yaliyotumika inasababisha browser kusoma barua kama kuna kusoma. Ikiwa uadilifu huu inaweza kufikia, barua za kusasa (kwa sababu ya kusoma) zinaonekana kama barua za kusoma, na barua za kusoma zaidi kama barua zilizotumika zinaonekana kama barua za kusoma.

Mfano TIY: white-space: normal

Uadilifu wa pre

Hata hivyo, ikiwa uadilifu wa white-space ni pre, kifaa cha kuzingatia kusoma ambao uadilifu huu unaathirisha, uadilifu wa barua zilizotumika unaweza kutokea kama kifaa cha kuzingatia kusoma ya XHTML; barua zilizotumika hazitafutuliwa.

Ikiwa uadilifu wa white-space ni pre, browser inaangalia barua za kuzingatia kusoma zaidi, tena na barua. Kwa kiasi kikubwa, kwa kiasi kikubwa tu, kila kifaa kinaweza kuelekea kama kifaa cha kuzingatia kusoma.

Mfano TIY: white-space: pre

注意：Kwa ujumbe wa matokeo, IE 7 na version zaidi kama zile zake hazikubali uadilifu huu, kwa hivyo tafadhali tumia browser zingine zingine kwa kuangalia mifano yaliyotumika.

Uadilifu wa nowrap

Uadilifu wa kina ni nowrap, unapunguza barua za kuzingatia kusoma katika kifaa, kama inafikia br kina. Kuongeza nowrap katika CSS inatokana na HTML 4 kama <td nowrap> kusababisha kifaa cha kuzingatia kusoma kumiliki uadilifu wa barua zilizotumika, lakini uadilifu wa white-space inaweza kutumiwa kwa kila kifaa.

Mfano TIY: white-space: nowrap

Uadilifu wa pre-wrap na pre-line

CSS2.1 ilianzisha uadilifu wa pre-wrap na pre-line, ambao haikubaliwa katika version ya CSS zaidi kama zile za zamani. Majukumu ya uadilifu huu ni kumpenda watu wa kurejea kusoma kwa kumiliki uadilifu wa barua zilizotumika.

Ikiwezi kama uadilifu wa white-space uweze kuwa pre-wrap, harufu ya kifaa cha kuzingatia kusoma kimekubali barua zilizotumika, lakini barua inayotumiwa inaendelea kuandaa. Ikiwa uadilifu huu uweze kuwa kwamba, barua za kusasa na barua za kuzingatia kusoma zimekubaliwa. pre-line inatokana na pre-wrap, inasababisha barua zilizotumika kuwa kama barua ya kuzingatia kusoma, kama kimejengwa kwa barua zilizotumika, lakini inakubali barua za kusasa.

实例 TIY ：white-space: pre-wrap

实例 TIY ：white-space: pre-line

注意：我们在 IE7 和 FireFox2.0 浏览器中测试了上面的两个实例，但是结果是，值 pre-wrap 和 pre-line 都没有得到很好的支持。

总结

下面的表格总结了 white-space 属性的行为：

文本方向

如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。

direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。

注释：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

michaguzi ya matanganyika ya CSS

Kifaa cha Kifaa cha Kifaa

Mafaa ya Kitabu cha Mafaa ya CSS

Mafaa ya Mafaa ya CSS

Mafaa ya Mafaa ya CSS

Mafaa ya CSS

Makampuni ya Mafaa