خواص مقدماتی CSS
متن و نوشته Text :
به وسيله مجموعه خواص Text در CSS ، می توان ظاهر نوشته را تغيير داد . اين خواص برای
تغيير رنگ نوشته ، جهت چيدمان ، اندازه و ... متن به کار می روند .
مجموعه خواص text شامل ليست زير می شود و برای دريافت اطلاعات درباره هر خاصيت روی
نام آن کليک کنيد :
در ادامه مجموعه خواص مختلف CSS برای متن را همراه با مثال های عملی مشاهده خواهيد
کرد :
|
نام خاصيت
|
نوع خاصيت
|
شرح
|
|
color
|
نام رنگ
rgb (r,g,b)
عدد هگزادسيمال
|
تعيين کننده رنگ نوشته است . رنگ میتواند به روش های زير تعيين شود :
- نام رنگ مثل blue يا red .
- تعيين رنگ به وسيله تابع rgb به صورت زير :
( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb
اين تابع مقدار 3 رنگ را با هم ترکيب کرده و يک رنگ را ايجاد می کند .که مقدار رنگ
توسط عددی بين 0 تا 255 تعيين می شود ، که هر چه عدد بزرگتر باشد ميزان آن رنگ در کل
رنگ بيشتر خواهد بود .
Example : rgb (10,65,232)
- نعيين رنگ به صورت عددی ترکيبی در مبنای 16 هگزادسيمال :
ميزان رنگ آبی ميزان رنگ سبز ميزان رنگ قرمز #
Example : #08FF00
|
< p style= "color : blue" >
This Paragraph is blue
< /p >
< p style= "color : #AB4588" >
This is another paragrph with different color
< /p >
|
|
This Paragraph is blue
This is another paragrph with different color
|
|
نام خاصيت
|
نوع خاصيت
|
شرح
|
|
direction
|
rtl
ltr
|
جهت نوشته را مشخص می کند که بر حسب زبان نوشته می تواند يکی از حالت های زير باشد
:
- rtl : راست به چپ . برای زبان هايي مثل فارسی که جهت آنها از راست به چپ است .
- ltr : چپ به راست . برای زبان هايي مثل انگليسی که جهت آنها از چپ به راست است .
|
< p style= "color : blue ; direction : rtl" >
. برای زبان فارسی جهت نوشته بايد از راست به چپ باشد
< /p >
< p style= "color : #AB4588 ; direction : ltr"
>
But for english it must be left to right !
< /p >
|
|
برای زبان فارسی جهت نوشته بايد از راست به چپ باشد .
But for english it must be left to right !
|
|
نام خاصيت
|
نوع خاصيت
|
شرح
|
|
line-height
|
معمولی normal
عدد number
اندازه length
درصد %
|
به وسيله اين خاصيت می توان فاصله بين خطوط را در پاراگراف تعيين کرد . برای اين کار
يکی از حالت های زير را بايد استفاده کرد :
- normal : فاصله بين خطوط در اين حالت به اندازه استاندارد و معمولی است ، که انتخاب
پيش فرض است .
- number : يک عدد معمولی را تعيين می کنيم ، که اين عدد در اندازه استاندارد فاصله
خطوط ضرب شده و اندازه جديد را ايجاد می کند . برای مثال اگر عدد 2 انتخاب شود ، فاصله
بين خطوط 2 برابر اندازه معمولی می شود .
- length : به وسيله اين خاصيت يک اندازه بر حسب واحدی مثل پيکسل ( pixel ) ، نقطه
( pt ) و ... را برای فاصله خطوط تعيين می کنيم .
- درصد % : به وسيله اين حالت نسبت اندازه مورد نظر را به اندازه استاندارد فاصله خطوط
تعيين می کنيم . برای مثال اگر 150% تعيين شود ، اندازه خطوط 5/1 برابر اندازه استاندارد
می شود .
|
< p style= "color : blue ; line-height: 2 " >
In this paragrph line height is 2 .
In this paragrph line height is 2 .
In this paragrph line height is 2 .
< /p >
< p style= "color : #AB4588 ; line-height: 12px " >
In this paragrph line height is 12px .
In this paragrph line height is 12px .
In this paragrph line height is 12px .
< /p >
< p style= "color : green ; line-height: 150% " >
In this paragrph line height is 150% .
In this paragrph line height is 150% .
In this paragrph line height is 150% .
< /p >
|
|
In this paragrph line height is 2 .
In this paragrph line height is 2 .
In this paragrph line height is 2 .
|
In this paragrph line height is 12px .
In this paragrph line height is 12px .
In this paragrph line height is 12px .
|
In this paragrph line height is 150% .
In this paragrph line height is 150% .
In this paragrph line height is 150% .
|
|
نام خاصيت
|
نوع خاصيت
|
شرح
|
|
letter-spacing
|
معمولی normal
اندازه length
|
برای تعيين اندازه فاصله بين حروف در نوشته استفاده می شود ، که يکی از 2 حالت زير
می تواند باشد :
- normal : فاصله بين حروف در اين حالت به اندازه استاندارد و معمولی است ، که انتخاب
پيش فرض است .
- length : به وسيله اين خاصيت يک اندازه بر حسب واحدی مثل پيکسل ( 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 >
|
|
Letter spacing in this paragraph is normal .
Letter spacing in this paragraph is 5pt .
|
|
نام خاصيت
|
نوع خاصيت
|
شرح
|
|
text-align
|
left
right
center
justify
|
جهت چيدمان نوشته را در صفحه ، جدول ، پاراگراف و ... تعيين می کند ، که يکی از حالت
های زير می تواند باشد :
- 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 >
|
|
This paragraph is aligned from center .
This paragraph is aligned from left .
This paragraph is aligned from right .
|
|
نام خاصيت
|
نوع خاصيت
|
شرح
|
|
text-decoration
|
none
underline
overline
line-through
|
از اين خواص برای اعمال جلوه های تصويری به نوشته استفاده می شود که يکی از خواص زير
و يا ترکيبی از آنها را می توان استفاده کرد :
- none : نوسشته به صورت ساده و بدون هيچ جلوه ای نمايش داده می شود که انتخاب پيش
فرض است .
- underline : نوشته به صورت خط زير دار نمايش داده می شود .
- overline : نوشته به صورتی که يک خط در بالای آن کشيده شده ، نمايش داده می شود .
- line-through : نوشته به صورتی که يک خط از وسط آن گذشته است ، نمايش داده می شود
.
|
< p style="color: blue" >
This is a paragraph
< span style="text-decoration: underline" > This part is
underline < /span >
and < span style="text-decoration: overline" > this part
is overline < /span >
and < span style="text-decoration: line-through" > this
part is line through < /span >
< /p >
|
|
This is a paragraph This part is underline
and this part is overline
and this part is line through
|
< p style="text-decoration: underline overline line-through"
>
Can you read this text ?
< /p >
|
|
Can you read this text ?
|
|
نام خاصيت
|
نوع خاصيت
|
شرح
|
|
text-indent
|
length
درصد %
|
به وسيله اين خاصيت ميران تو رفتگی و نقطه شروع اولين خط از يک پاراگراف را به يکی
از دو حالت زير می توان تعيين کرد :
- 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 >
|
|
Indent of this paragraph is 5cm .
Indent of this paragraph is 18pt .
Indent of this paragraph is 20% .
|
|
نام خاصيت
|
نوع خاصيت
|
شرح
|
|
text-transform
|
none
capitalize
uppercase
lowercase
|
از اين خاصيت برای کتنرل بزرگ يا کوچک بودن حروف در نوشته استفاده می شود ، که می تواند
يکی از حالت های زير را داشته باشد :
- 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 >
|
|
Words of this paragraph is capitalized .
All of the words of this paragraph is uppercase .
All of the words of this paragraph is lowercase .
|
|
نام خاصيت
|
نوع خاصيت
|
شرح
|
|
white-space
|
normal
pre
nowrap
|
توسط اين خاصيت می توان نحوه نمايش فاصله های خالی بين حروف و کلمات در نوشته توسط
مرورگر را مديريت کرد ، که 3 حالت دارد :
- normal : در اين حالت فاصله خالی بين کلمات توسط مرورگر ناديده گرفته شده و حداکثر
يک فاصله خالی بين کلمات نمايش داده می شود ، که حالت پيش فرض است .
- pre : در اين حالت نوشته با همان قالب بندی که توسط کاربر در صفحه وارد شده ، نمايش
داده خواهد شد . عملکرد اين خاصيت همانند عملکرد
تگ < pre > در HTML است .
- nowrap : در اين حالت نوشته و متن به هيچ عنوان شکسته نشده و به خط بعدی نمی رود
، مگر به يک تگ < br / >
برسد .
|
< 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 >
|
|
This is normal paragraph , brower ignor white space .
This paragraph
is shown in the way
that it is .
|
|
نام خاصيت
|
نوع خاصيت
|
شرح
|
|
word-spacing
|
normal
length
|
توسط اين خاصيت می توان فاصله بين کلمات را در يک نوشته تعيين کرد ، که يکی از 2 حالت
زير را می تواند داشته باشد :
- 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 >
|
|
This is normal paragraph , space between words is standard .
Word spacing in this paragraph is 8px .
Word spacing in this paragraph is 15pt .
|
مثال : همچنين می توان به يک متن نيز رنگ پس زمينه داد ،
به مثال زير توجه کنيد :
< p style="background-color: Green" >
This paragraph has a background color .
< span style="background-color: Yellow" > And this part is yellow . < /span
>
< /p >
|
|
This paragraph has a background color . And this
part is yellow .
|