కోర్సు సమయక్రమం

CSS అధునాతన పాఠ్యక్రమం

CSS ఫ్రేమ్ మోడల్

CSS పోజిషనింగ్

CSS సెలెక్టర్స్

ఎక్సిస్ కోర్సులు

కోర్సు సిఫారసులు:

CodeW3C.com పంపకం

CSS టెక్స్ట్

ముందుపాటి పేజీ CSS బ్యాక్గ్రౌండ్
తదుపరి పేజీ CSS ఫాంట్

CSS టెక్స్ట్ అట్రిబ్యూట్స్ టెక్స్ట్ ప్రకటనను నిర్వచిస్తాయి.

టెక్స్ట్ అట్రిబ్యూట్ ద్వారా, మీరు టెక్స్ట్ రంగు, చిహ్న అంతరం, టెక్స్ట్ ఆయాళ్యం, టెక్స్ట్ ఇండెంట్ మొదలైన వివిధ ప్రభావాలను మార్చవచ్చు.

ప్రింట్ టెక్స్ట్

వెబ్ పేజీలోని ప్యారాగ్రాఫ్లకు మొదటి వరుస కుదించేది, ఇది అత్యంత వినియోగించబడే టెక్స్ట్ ఫార్మాటింగ్ ప్రభావం ఒకటి.

CSS అనేది సరఫరా చేస్తుంది టెక్స్ట్-ఇండెంట్ అట్రిబ్యూట్ఈ అట్రిబ్యూట్ టెక్స్ట్ స్కూప్పింగ్ సులభంగా చేస్తుంది.

ఈ టెక్స్ట్-ఇండెంట్ అట్రిబ్యూట్ వినియోగించినప్పుడు, అన్ని ఎలిమెంట్స్ మొదటి వరుస కుదించిన ఒక నిర్దిష్ట పొడవును సాధ్యపడుతుంది, దీనిలో పొడవు మానికి లోపం కాదు.

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

p {text-indent: 5em;}

注意：సాధారణంగా, అన్ని బ్లాక్ బ్రేక్ విండోలను text-indent ఉపయోగించవచ్చు, కానీ ఈ లక్ష్యాన్ని లైన్ విండోలపై అనుపయోగించవచ్చు లేదా రిప్లేసింగ్ అనేది లేదా అనుబంధ విండోలపై అనుపయోగించవచ్చు కాదు. కానీ ఒక బ్లాక్ బ్రేక్ విండో (ఉదాహరణకు ప్రాగ్రాఫు) యొక్క మొదటి వరుసలో ఒక చిత్రాన్ని ఉంచినప్పుడు, చిత్రం మొదటి వరుస తో కలిసి తరలించబడుతుంది.

సలహా:ఒక లైన్ ఇన్క్లైన్ అనేది ఉండాలి కానీ లైన్ విండో అనేది కాదు అనేది ఉండాలి, లేదా లైన్ విండో లేదా అనుబంధ విండోలను సృష్టించడానికి కుడి లేదా అంతర్భాగం ఉపయోగించవచ్చు.

నిరాకరించడం ఉపయోగించడం

text-indent ని నిరాకరించడం ద్వారా కూడా సెట్ చేయవచ్చు. ఈ టెక్నిక్ తో, అనేక ఆసక్తికరమైన ప్రభావాలను సాధించవచ్చు, ఉదాహరణకు "సస్పెండ్ ఇన్క్లైన్" అనేది అనగా ప్రాతిపదికన మిగిలిన భాగం కుడి పక్కన మొదటి వరుస సస్పెండ్ అవుతుంది:

p {text-indent: -5em;}

కానీ text-indent ని నిరాకరించడం లో జాగ్రత్త వహించండి, ఒక ప్రాగ్రాఫుని ని నిరాకరించినప్పుడు, మొదటి వరుస ప్రాతిపదికన కుడి బ్రౌజర్ విండో బెయిల్ పరిధిని అధిగమించవచ్చు. ఈ దృశ్యపరమైన సమస్యను నివారించడానికి, నెగెటివ్ ఇన్క్లైన్ కు ఒక మెరుగును లేదా అంతర్భాగం లేదా కుడి మెరుగును సెట్ చేయండి:

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

శతలభిన్నాలను ఉపయోగించడం

text-indent అన్ని పొడవు యూనిట్లను ఉపయోగించవచ్చు, మరియు శతలభిన్నాలను ఉంచవచ్చు.

శతలభిన్నాలు ఇన్క్లైన్ ప్రాతిపదికన ఉంటాయి. లేదా మాటలు, ఇన్క్లైన్ వాల్యూస్ ను 20% గా సెట్ చేసినప్పుడు, ప్రభావిత ప్రతిపాదనలో మొదటి వరుస తన ప్రాతిపదికన ప్రాతిపదికన ప్రాతిపదికన ఉంటుంది.

ఈ ఉదాహరణలో, ఇన్క్లైన్ వాల్యూస్ ప్రాతిపదికన ప్రాతిపదికలో ఉంది, అది 100 పిక్సెల్స్ అవుతుంది:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

పాటించడం

text-indent అటువంటి వాల్యూస్ పాటించవచ్చు, దయచేసి చూడండి ఈ టాగులు:

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>this is a paragragh.</p>
</div>
</div>

ఈ టాగులలోని ప్రాగ్రాఫులు కూడా 50 పిక్సెల్స్ గా ఇన్క్లైన్ అవుతాయి, ఇది ఐడి 'inner' వాల్యూస్ యొక్క ఇన్క్లైన్ వాల్యూస్ ను ఉంటాడు.

水平对齐

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

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

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

సలహా:బ్లాక్ క్లాస్ లేదా టేబల్ ఉపాంగాలను మధ్యకే పెట్టడానికి, ఆ ఉపాంగాలపై తగిన పైనేజ్ మరియు కుడినేజ్ అంతరాలను సరిగ్గా అందించడం ద్వారా చేయవచ్చు.

text-align:center మరియు <CENTER>

మీరు చెప్పేది వంటి, text-align:center మరియు <CENTER> ఉపాంగాలు ఒకే విధంగా పని చేస్తాయి అని భావించవచ్చు, కానీ వాటిలో అనేక వ్యత్యాసాలు ఉన్నాయి.

<CENTER> కాకుండా ప్రవచనాన్ని కాకుండా పూర్తి ఉపాంగాన్ని మధ్యకే పెట్టుతుంది. text-align ఉపాంగం ఉపాంగం యొక్క మధ్యకే పెట్టడాన్ని నియంత్రించదు, మరియు ప్రవచనాన్ని మాత్రమే ప్రభావితం చేస్తుంది. ఉపాంగం స్వయంగా ఒక ప్రాంతం నుండి మరొక ప్రాంతానికి కదలదు, మరియు మాత్రమే ప్రవచనం ప్రభావితం అవుతుంది.

justify

చివరి స్థాయి అని ప్రాంతాలలో ప్రవచనం అనే అట్టికేయం ఉంది.

ద్వంద్వ ప్రాంతాలలో ప్రవచనంలో, పదాల మధ్య మరియు అక్షరాల మధ్య అంతరాలను సరిగ్గా సరిచేయడానికి ప్రయత్నిస్తారు. మీరు కానిసరిగా గమనించారు, ద్వంద్వ ప్రాంతాలలో ప్రవచనం ప్రింటింగ్ రంగంలో చాలా వినియోగం చెందబడుతుంది.

గమనిక: ద్వంద్వ ప్రాంతాలలో ప్రవచనం ఎలా విస్తరించబడుతుందో యూజర్ ఏజెంట్ (కాదు CSS) నిర్ణయిస్తుంది. వివరాలను తెలుసుకోవడానికి, దానిని చూడండి CSS text-align అట్టికేయం పేజీ.

పద అంతరం

word-spacing అట్టికేయంపదాలు (పదాలు) మధ్య ప్రామాణిక అంతరాలను మార్చవచ్చు. అప్రమేయంగా normal విలువ మరియు 0 విలువలు సమానంగా ఉంటాయి.

word-spacing అట్టికేయం ఒక పోసిటివ్ లేదా నెగ్యటివ్ ప్రమాణాకార విలువను అంగీకరిస్తుంది. ఒక పోసిటివ్ ప్రమాణాకార విలువను అందిస్తే, పదాల మధ్య అంతరాలు పెంచబడతాయి. word-spacing ని నెగ్యటివ్ విలువకు అందిస్తే, దానిని దగ్గరగా పెట్టబడుతుంది:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
ఈ పేరాగ్రాఫ్ ఉంది. పదాల మధ్య అంతరాలు పెంచబడతాయి.
</p>
<p class="tight">
ఈ పేరాగ్రాఫ్ లో పదాల మధ్య అంతరాలు తగ్గించబడతాయి.
</p>

ప్రత్యామ్నాయంగా TIY: పదాల అంతరాన్ని పెంచండి లేదా తగ్గించండి (పద అంతరం)

注释：CSS లో 'పదం' (word) యొక్క నిర్వచనను మరింత బాగా అర్థం చేసుకునేందుకు పరిశీలించండి CSS word-spacing లక్షణం సూచనా పుట.

అక్షర అంతరం

letter-spacing లక్షణంword-spacing తో వ్యత్యాసం ఉంది, అక్షర అంతరం అక్షరలు లేదా అక్షరాల మధ్య అంతరాన్ని మారుస్తుంది.

word-spacing లక్షణంతో సమానంగా, letter-spacing లక్షణంలో అన్ని పొడవులు ఉన్నాయి. అప్రమేయ పదం సాధారణం (ఇది letter-spacing:0 తో సమానం). ఇన్పుట్ పొడవు విలువలు అక్షరాల మధ్య అంతరాన్ని పెంచుతుంది లేదా తగ్గిస్తుంది:

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

ప్రత్యామ్నాయంగా TIY: అక్షరాల అంతరాలను నియంత్రించండి

అక్షరాల మార్పు

text-transform లక్షణంటెక్స్ట్ పెదవును నియంత్రించడానికి ఈ లక్షణంలో 4 విలువలు ఉన్నాయి:

none
uppercase
lowercase
capitalize

అప్రమేయంగా none ఉపయోగించడం టెక్స్ట్ పై ఏ మార్పునూ చేయదు, మూల పత్రంలో ఉన్న ప్రాచుర్యం ఉంది. అర్థానికి, uppercase మరియు lowercase పూర్తి పెద్ద అక్షరాలను మరియు పూర్తి చిన్న అక్షరాలను మార్చుతాయి. చివరగా, capitalize కేవలం ప్రతి పదం మొదటి అక్షరాన్ని పెద్ద అక్షరంగా మార్చుతుంది.

ఈ లక్షణం ఒక లక్షణంగా చూస్తే సమానంగా ఉండవచ్చు, కానీ మీరు హెచ్1 మూలకాలను అప్రయత్నంగా చేయడానికి తీసుకున్నప్పుడు ఈ లక్షణం చాలా ఉపయోగపడుతుంది. హెచ్1 మూలకాల పరిణామాలను ఒకొకొకటి మార్పుచేయకుండా, text-transform ఉపయోగించి ఈ మార్పును చేపట్టగలరు:

h1 {text-transform: uppercase}

text-transform ఉపయోగించడంలో రెండు పక్షాల ప్రయోజనాలు ఉన్నాయి. మొదటిది, ఈ మార్పును చేపట్టడానికి సరళమైన నియమాన్ని రాయాలి, హెచ్1 మూలకం స్వయంగా మార్పులు చేయకుండా. రెండవగా, మీరు తర్వాత అన్ని హెచ్1 మూలకాల మీద మళ్ళించడానికి నిర్ణయించినట్లయితే, ఈ మార్పును సులభంగా చేపట్టగలరు.

ప్రత్యామ్నాయంగా TIY: టెక్స్ట్ లో అక్షరాల పెదవును నియంత్రించండి

టెక్స్ట్ అలంకరణ

ముందుగా మేము చర్చించాము 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;}

ఇచ్చిన నియమాలకు పట్టుబట్టి, అన్ని క్లాస్ వాల్యూ స్ట్రికెన్ గా ఉన్న h2 ఎలమెంట్స్ కు ఒకే పారాలోపం అలంకరణ ఉంది, కానీ అండర్లైన్ లేదా ఓవర్లైన్ లేవు, ఎందుకంటే text-decoration విలువలు సమాంతరంగా కలపబడకుండా పునఃస్థాపించబడతాయి.

విరాళ్ళ నిర్వహణ

white-space లక్షణంఇది యూజర్ ఏజెంట్ కు స్రోత డాక్యుమెంట్ లో విరాళ్ళు, వాక్యం పంక్తులు మరియు టాబ్ అక్షరాల నిర్వహణను ప్రభావితం చేస్తుంది.

ఈ లక్షణాన్ని ఉపయోగించడం ద్వారా, బ్రౌజర్ అక్షరాల మధ్య మరియు పాఠ పంక్తుల మధ్య విరాళ్ళ నిర్వహణను ప్రభావితం చేయవచ్చు. కొంతమేరకు, అప్రమేయ XHTML నిర్వహణ విరాళ్ళ నిర్వహణను పూర్తి చేసింది: ఇది అన్ని విరాళ్ళను ఒక స్పేస్ గా కలపబడింది. కాబట్టి ఈ మేరకు టాగ్లు ఇచ్చినట్లయితే, వెబ్ బ్రౌజర్ లో ప్రదర్శించబడినప్పుడు, అక్షరాల మధ్య ఒక స్పేస్ మాత్రమే ప్రదర్శించబడుతుంది, మరియు కేంద్రంలోని ఎలమెంట్స్ లో కాని వాక్యం పంక్తులను పరిగణనలోకి తీసుకోకుండా ఉంటాయి:

This paragraph has many spaces in it.

可以用以下声明显式地设置这种默认行为：

p {white-space: normal;}

上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。

实例 TIY ：white-space: normal

值 pre

不过，如果将 white-space 设置为 pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像 XHTML 的 pre 元素一样；空白符不会被忽略。

如果 white-space 属性的值为 pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个 pre 元素。

实例 TIY ：white-space: pre

注意：经测试，IE 7 以及更早版本的浏览器不支持该值，因此请使用非 IE 的浏览器来查看上面的实例。

值 nowrap

与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。

ఇన్స్టాన్స్ TIY: white-space: nowrap

వాల్యూస్ pre-wrap మరియు pre-line

CSS2.1 వాల్యూస్ pre-wrap మరియు pre-line ప్రవేశపెట్టింది, ఇది పురాతన వెర్షన్స్ లో లేదు. ఈ వాల్యూస్ పనితీరు సృష్టికర్తలకు వెయిట్ స్పేస్ హాండ్లింగ్ మరింత మంచి నియంత్రణ అవకాశం కల్పిస్తుంది.

ఇఫ్ ఎలిమెంట్ యొక్క white-space సెట్ చేయబడినాయి pre-wrap, అప్పుడు అది లోని టెక్స్ట్ వెయిట్ స్పేస్ సిక్వెన్స్ నిర్వహించబడుతుంది, కానీ టెక్స్ట్ లైన్స్ సాధారణంగా మార్పు చేస్తాయి. ఈ విలువను సెట్ చేసినప్పుడు, సోర్స్ టెక్స్ట్ లోని లైన్ సెపరేటర్స్ మరియు తయారు చేసిన లైన్ సెపరేటర్స్ కూడా నిర్వహించబడతాయి. pre-line ప్రీ-వాప్ కి విపరీతంగా, అది సాధారణ టెక్స్ట్ లో వంటిగా వెయిట్ స్పేస్ సిక్వెన్స్ లను మెరుగుపరచడానికి ప్రయత్నిస్తుంది, కానీ లైన్ సెపరేటర్స్ నిర్వహిస్తుంది.

实例 TIY ：white-space: pre-wrap

实例 TIY ：white-space: pre-line

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

总结

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

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

文本方向

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

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

注释：对于行内元素，只有当 unicode-bidi అంశంdirection అంశం ప్రాధాన్యతను వాడి లేదా bidi-override విలువను అమర్చినప్పుడు మాత్రమే ఆపాదించబడుతుంది.

direction అంశంలో రెండు విలువలు ఉన్నాయి: ltr మరియు rtl. అధికారికంగా, ప్రమాణబద్ధమైన విలువ లియర్‌టో రైట్ ఉంటుంది మరియు వినియోగదారులు మార్గాన్ని వాస్తవానికి ఎడమ నుండి కుడికి ప్రదర్శించడానికి వాడతారు. మరియు కుడి నుండి ఎడమకు ప్రదర్శించడానికి rtl విలువను వాడాలి.