گروه مقاله : CSS
تاريخ انتشار : 1394/02/01 - 12:53
كد :208
.
Color :
در ابتدا از خصوصیت رنگ شروع می کنیم . در این جا نیز می توانیم رنگ را به 3 روش
-
از طریق نام رنگ
-
از طریق مقدار HEX
-
از طرق مقدار rgb
توسط کد زیر به متن خود بدهیم.
نکته : طبق استاندارد W3C زمانی که از خاصیت color برای متن استفاده می کنید حتما باید برای آن عنصر از خاصیت background-color هم استفاده نمایید.
در این حالت اگر نمی خواهید هیچ رنگی به پس ضمینه بدهید، می توانید مقدار این خصوصیت را برابر transparent (بی رنگ) قرار دهید.
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
h1 {
color: #58a59f;
}
p.ex {
color: rgb(0,0,255);
}
</style>
</head>
<body>
<h1>h1 color : #58a59f</h1>
<p>p color : inherit body</p>
<p class="ex">p color : inherit ex class - rgb(0,0,255)</p>
</body>
</html>
Text-align :
این خاصیت دارای 3مقدار right ,center ,left ,justify می باشد که توسط هر کدام از آنها می توانید متن را راست چین ، وسط چین ، چپ چین و یا justify نمایید.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
p.pright {
text-align: right;
}
p.pleft {
text-align: left;
}
p.pjustify {
text-align: justify;
}
</style>
</head>
<body>
<h1>text-center</h1>
<p class="pright">text-right</p>
<p class="pleft">text-left</p>
<p class="pjustify">
text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify
</p>
</body>
</html>
Text-decoration :
اگر دقت کرده باشید وقتی از تگ a برای لینک دادن استفاده می کنید، به صورت پیش فرض، مقادیری که داخل این تگ قرار دارند به صورت زیر خط دار نمایش داده می شوند. برای ناپدید کردن این خط از دستور زیر استفاده می کنیم :
این شناسه علاوه بر مقدار none همچنین می تواند مقادیر overline , line-through, underline را در بر داشته باشد.واضح است که از خاصیت underline برای عناصری غیر از تگ a استفاده می شود.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
.link {
text-decoration: none;
}
</style>
</head>
<body>
<h1>overline</h1>
<h2>line-through</h2>
<h3>underline</h3>
<a href="sargonco.com" class="link">none</a>
<a href="sargonco.com">a tag</a>
</body>
</html>
Text-transformation :
اگر بخواهیم متن داخل عنصر مورد نظر تماما با حروف بزرگ نوشته شود مقدار شناسه text-transform را برابر uppercase، اگر بخواهیم تماما با حروف کوچک نوشته شود برابر با lowercase و در صورتی که بخواهیم حرف اول تمام کلمه ها بزرگ باشد برابر capitalize قرار می دهیم.
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">This is some text >>> uppercase</p>
<p class="lowercase">This is some text >>> lowercase</p>
<p class="capitalize">This is some text >>> capitalize</p>
</body>
</html>
Text indentation :
با استفاده از این دستور شما می توانید مشخص کنید که اولین خط از یک متن از کجا شروع شود.
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html>