استایل برای متن (آموزش CSS جلسه سوم)
با سلام و نام و یاد خدا جلسه سوم از آموزش زبان CSS در مِستر آموز را شروع می کنیم.
این جلسه درباره نحوه استایل دهی به متن می باشد. برای استایل دهی به متون چند خصوصیت وجود دارند که همه آن ها را می خواهیم بررسی کنیم.
color
direction
line-height
letter-spacing
text-align
text-decoration
text-inednt
text-transform
white-space
word-spacing
با استفاده از این خاصیت ها می توانیم به دلخواه متن و جمله های خود را تغییر دهیم. برای توضیح هر کدام با ما همراه باشید.
COLOR:
این خاصیت برای رنگ دادن به متن نوشته استفاده می شود. و به سه روش می توان به آن رنگ داد:
1- استفاده از نام رنگ. (مانند Black ، Blue و یا هر چیز دیگری )
2-تعیین رنگ به وسیله کد rgb.
این کد مخفف رنگ های اصلی red green blue می باشد. و با 3 رقم مقدار دهی می شود. اگر می خواهیم رنگ مشکلی بدهیم باید مانند زیر بنویسیم:
color:rgb(0,0,0);
از 0 تا 255 برای تعیین رنگ باید عدد وارد کنیم. برای وارد کردن رنگ سفید هر سه را 255 وارد کنید.
3- نعيين رنگ به صورت عددی ترکيبی در مبنای 16 هگزادسيمال
این روش نیز از سه رنگ اصلی قرمز ، سبز و آبی استفاده می کنید. ولی این روش از اعداد 0 تا 9 و حروف A تا F مقدار دهی می شود. به طوری که برای رنگ مشکی از مقدارهای 0 و برای رنگ سفید از مقدار های F باید استفاده کنیم. لازم به ذکر است که قبل از مقدار دهی باید از علامت ” # ” استفاده کنیم.
color:#000000;
کد بالا برای رنگ مشکی است. همچنین می توانید از ترکیب اعداد و حروف برای خلق رنگ ها استفاده کنید. مانند:
color:#92A9CF;
برای استفاده از رنگ برای نوشته مثال زیر را ببیند:
<html
<head>
<style>
.name {
color:#30F;
}
</style>
head>
<body>
<p class="name">This is Text</p>
</body>
</html>
نتیجه:
direction:
این خاصیت در CSS جهت نوشته را تعیین می کند که بر حسب زبان نوشته می تواند يکی از دو حالت rtl و ltr به معنی right to left و left to right می باشند.
rtl : راست به چپ . برای زبان هايي مثل فارسی که جهت آنها از راست به چپ است.
ltr: به معنی چپ به راست است و برای زبان های لاتین استفاده می شود.
مثال:
<body>
<p style=" color:red; direction:rtl;" >
.برای زبان فارسی جهت نوشته بايد از راست به چپ باشد
</p >
<p style="color:#AB4588; direction:ltr;" >
But for english it must be left to right !
</p >
</body>
خروجی:
line-height:
این خاصیت برای فاصله انداختن بین خطوط یک پاراگراف استفاده می شود. و با 4 حالت مقدار دهی می شود:
normal: این مقدار، پیش فرض این خصوصیت است. که بصورت استاندارد و معمولی می باشد.
number با عدد: برای فاصله انداختن بین خطوط از عدد نیز می توان استفاده کرد. مثلا عدد 2 را اگر بگذاریم فاصله بین خطوط 2 برابر اندازه معمولی می شود.
length یا اندازه: این خاصیت برحسب واحدی مثل پیکسل (pixel)، نقطه (pt) و… را برای فاصله خطوط تعیین کنید.
% درصد: حالت آخر مقدار دهی برای این خاصیت درصد % است. مثلا اگر 150% را وارد کنیم، فاصله بین خطوط 5/1 برابر اندازه استاندارد می شود.
مثال زیر را ببینید:
<p style= "color:blue; line-height:2; "> In this paragrph line height is 2 . <br /> In this paragrph line height is 2 . <br /> In this paragrph line height is 2 . <br /> </p > <p style= "color:#AB4588; line-height:12px; "> In this paragrph line height is 12px . <br /> In this paragrph line height is 12px . <br /> In this paragrph line height is 12px . <br /> </p > <p style= "color:rgb(0%,100%,0%); line-height:150%; "> In this paragrph line height is 150% . <br /> In this paragrph line height is 150% . <br /> In this paragrph line height is 150% . <br /> </p >
خروجی:
letter-spacing:
این خاصیت برای فاصله انداختن بین حروف در نوشته ها است. با 2 حالت مقدار دهی می شود:
normal: این خصوصیت فاصله را با حالت عادی و استاندارد نشان می دهد. حالت پیش فرض.
length: با کمک این خصوصیت می توان فاصله های متفاوتی را ایجاد کرد. با 2 مقدار پیکسل (pixel ) و نقطه (pt) مقدار دهی می شود.
مثال زیر را ببینید:
<p style="color:Blue; letter-spacing:normal" > Letter spacing in this paragraph is normal . </p > <p style="color:Green; letter-spacing:5pt" > Letter spacing in this paragraph is 5pt . </p >
خروجی:
نکته:
این خصوصیت فقط برای زبان های لاتین کاربرد دارد.
text-align:
از این خصوصیت برای چیدمان نوشته ها در صفحه ، جدول ، پاراگراف و … استفاده می شود. با حالتهای left ، right ، center و justify که به ترتیب وسط ، راست ، چپ و از دو سمت تراز مقدار دهی می شود.
به مثال زیر دقت کنید:
<p style="color:Blue; text-align:center" > This paragraph is aligned from center. </p> <p style="color:Green; text-align:left" > This paragraph is aligned from left . </p> <p style="color:Red; text-align:right" > This paragraph is aligned from right . </p>
خروجی:
text-decoration
این خاصیت جهت اعمال جلوه های تصویری به نوشته ها استفاده می شود. که از مقادیر زیر می توان استفاده کرد.
none : این حالت نوشته را به صورت ساده و بدون هيچ جلوه ای نمايش می دهد. که انتخاب پيش فرض است .
underline : زیر نوشته خط می کشد، یا به اصطلاح نوشته را خط زير دار نمايش می دهد.
overline : این برعکس حالت قبل و یک خط بالای نوشته می کشد.
line-through : این حالت روی نوشته را خط می کشد.
به مثال زیر دقت کنید:
<p style="color:blue" > This is a paragraph <br> <span style="text-decoration:none" > This part is none </span> <br> <span style="text-decoration:underline" > This part is underline </span> <br> <span style="text-decoration:line-through" > This part is line through </span ><br> <span style="text-decoration:overline" > This part is overline </span ><br> </p>
خروجی:
نکته:
می توان به يک متن بيش از يک خاصيت text-decoration داد . به مثال زير توجه کنيد:
<p style="text-decoration:underline overline line-through" > Can you read this text? </p>
خروجی:
text-inednt
با این خاصیت می توان ميران تو رفتگی و نقطه شروع اولين خط از يک پاراگراف را تعیین کرد. با يکی از دو حالت زير می توان تعيين کرد:
length: این حالت بر حسب واحدی مثل پيکسل ( pixel ) ، نقطه ( pt ) و يا سانتيمتر ( cm ) تعيين می کند.
درصد % : بر حسب % درصد نسبت به عنصر مادر يا حالت استاندارد تعيين می کنيم.
<p style="color: blue; text-indent: 5cm" > Indent of this paragraph is 5cm . </p> <p style="color: Green; text-indent: 18pt" > Indent of this paragraph is 18pt . </p> <p style="color: Red; text-indent: 20%" > Indent of this paragraph is 20% . </p>
خروجی:
text-transform
برای بزرگ و کوچک کردن حروف از این خاصیت استفاده می کنیم.
none: این حالت پیش فرض و بصورت استاندارد و عادی است.
capitalize: این حالت اولين حرف کليه کلمات متن به صورت بزرگ نمايش داده می شوند.
uppercase: برای بزرگ کردن حروف کليه کلمات متن از این حالت استفاده می کنیم.
lowercase: اين حالت نیز برای کوچک کردن کلیه حروف می باشد.
به مثال زیر دفت کنید:
<p style="color:blue; text-transform:capitalize; " > Words of this paragraph is capitalized . </p> <p style="color:Green; text-transform:uppercase; " > All of the words of this paragraph is uppercase . </p> <p style="color:Red; text-transform:lowercase; " > All of the words of this paragraph is lowercase . </p>
خروجی:
white-space
نحوه نمایش فاصله های خالی بین حروف و کلمات در نوشته توسط مرورگر را می توان با این خاصیت کنترل کرد.
normal : حالت پيش فرض است. و بصورت استاندارد می باشد.
pre : در صورتی که از این حالت استفاده کنید، نوشته دقیقا همانطوری که کاربر در فضای کد نویسی می نویسد در مرورگر نمایش داده می شود. عملکرد اين خاصيت همانند عملکرد تگ < pre > در HTML است.
nowrap : اين حالت اجازه نمی دهد نوشته و متن شکسته شود و به هیچ عنوان به خط بعدی نمی رود ، مگر به يک تگ <br /> برسد .
مثال برای حالت pre را با هم بررسی می کنیم:
<p style="color:blue" >
This is normal paragraph ,
brower ignor white space .
</p>
<p style="color:Green; white-space: pre" >
This paragraph
is shown in the way
that it is .
</p>
خروچی:
word-spacing
اين خاصيت برای تعیین فاصله بين کلمات استفاده می شود.
normal : حالت پيش فرض است.
length :با اين حالت می توان يک اندازه را بر حسب واحدی مثل پيکسل يا نقطه ، برای فاصله بين حروف تعيين کرد.
<p style="color: Green" > This is normal paragraph , space between words is standard . </p> <p style ="color: Red; word-spacing: 8px" > Word spacing in this paragraph is 8px . </p> <p style="color: blue; word-spacing: 15pt" > Word spacing in this paragraph is 15pt . </p>
خروجی:
موفق و پیروز باشید.
