خواص مقدماتی CSS
متن و نوشته Text :
به وسيله مجموعه خواص Text در CSS ، می توان ظاهر نوشته را تغيير داد . اين خواص برای تغيير رنگ نوشته ، جهت چيدمان ، اندازه و ... متن به کار می روند .
مجموعه خواص text شامل ليست زير می شود و برای دريافت اطلاعات درباره هر خاصيت به ادامه مطلب مراجعه نمائید.
| color direction line-height letter-spacing text-align |
text-decoration text-inednt text-transform white-space word-spacing |
در ادامه مجموعه خواص مختلف CSS برای متن را همراه با مثال های عملی مشاهده خواهيد کرد :
خاصيت color :
| خاصيت color | ||
| نام خاصيت | نوع خاصيت | شرح |
| color | نام رنگ rgb (r,g,b) عدد هگزادسيمال |
تعيين کننده رنگ نوشته است . رنگ میتواند به روش های زير تعيين شود :
|
| مثال color | |
| < 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 :
| خاصيت direction | ||
| نام خاصيت | نوع خاصيت | شرح |
| direction | rtl ltr |
جهت نوشته را مشخص می کند که بر حسب زبان نوشته می تواند يکی از حالت های زير باشد : - rtl : راست به چپ . برای زبان هايي مثل فارسی که جهت آنها از راست به چپ است . - ltr : چپ به راست . برای زبان هايي مثل انگليسی که جهت آنها از چپ به راست است . |
| مثال direction | |
| < 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 :
| خاصيت line-height | ||
| نام خاصيت | نوع خاصيت | شرح |
| line-height | معمولی normal عدد number اندازه length درصد % |
به وسيله اين خاصيت می توان فاصله بين خطوط را در پاراگراف تعيين کرد . برای اين کار يکی از حالت های زير را بايد استفاده کرد : - normal : فاصله بين خطوط در اين حالت به اندازه استاندارد و معمولی است ، که انتخاب پيش فرض است . - number : يک عدد معمولی را تعيين می کنيم ، که اين عدد در اندازه استاندارد فاصله خطوط ضرب شده و اندازه جديد را ايجاد می کند . برای مثال اگر عدد 2 انتخاب شود ، فاصله بين خطوط 2 برابر اندازه معمولی می شود . - length : به وسيله اين خاصيت يک اندازه بر حسب واحدی مثل پيکسل ( pixel ) ، نقطه ( pt ) و ... را برای فاصله خطوط تعيين می کنيم . - درصد % : به وسيله اين حالت نسبت اندازه مورد نظر را به اندازه استاندارد فاصله خطوط تعيين می کنيم . برای مثال اگر 150% تعيين شود ، اندازه خطوط 5/1 برابر اندازه استاندارد می شود . |
| مثال line-height | |||
| < 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 12px .
|
In this paragrph line height is 150% .
|
خروجی |
خاصيت letter-spacing :
| خاصيت letter-spacing | ||
| نام خاصيت | نوع خاصيت | شرح |
| letter-spacing | معمولی normal اندازه length |
برای تعيين اندازه فاصله بين حروف در نوشته استفاده می شود ، که يکی از 2 حالت زير می تواند باشد : - normal : فاصله بين حروف در اين حالت به اندازه استاندارد و معمولی است ، که انتخاب پيش فرض است . - length : به وسيله اين خاصيت يک اندازه بر حسب واحدی مثل پيکسل ( pixel ) ، نقطه ( pt ) و ... را برای فاصله بين حروف تعيين می کنيم . |
| مثال letter-spacing | |
| < 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 :
| خاصيت text-align | ||
| نام خاصيت | نوع خاصيت | شرح |
| text-align | left right center justify |
جهت چيدمان نوشته را در صفحه ، جدول ، پاراگراف و ... تعيين می کند ، که يکی از حالت های زير می تواند باشد : - left : جهت چيدمان نوشته از سمت چپ است . - right : جهت چيدمان نوشته از سمت راست است . - center : جهت چيدمان نوشته از سمت وسط است . - justify : نوشته را از هر دو سمت راست و چپ تراز می کند . اين حالت زمانی تاثير دارد که طول خط از عرض عنصر در بر گيرنده آن بيشتر است . |
| مثال letter-spacing | |
|
< p style="color: Blue; text-align : center" >
|
کد |
|
This paragraph is aligned from center . This paragraph is aligned from left . This paragraph is aligned from right . |
خروجی |
خاصيت text-decoration :
| خاصيت text-decoration | ||
| نام خاصيت | نوع خاصيت | شرح |
| text-decoration | none underline overline line-through |
از اين خواص برای اعمال جلوه های تصويری به نوشته استفاده می شود که يکی از خواص زير و يا ترکيبی از آنها را می توان استفاده کرد : - none : نوسشته به صورت ساده و بدون هيچ جلوه ای نمايش داده می شود که انتخاب پيش فرض است . - underline : نوشته به صورت خط زير دار نمايش داده می شود . - overline : نوشته به صورتی که يک خط در بالای آن کشيده شده ، نمايش داده می شود . - line-through : نوشته به صورتی که يک خط از وسط آن گذشته است ، نمايش داده می شود . |
| مثال text-decoration | |
| < 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 |
خروجی |
| نکته : می توان به يک متن بيش از يک خاصيت text-decoration داد . به مثال زير توجه کنيد : | |
| < p style="text-decoration: underline overline line-through" > Can you read this text ? < /p > |
کد |
|
Can you read this text ? |
خروجی |
خاصيت text-indent :
| text-indent | ||
| نام خاصيت | نوع خاصيت | شرح |
| text-indent | length درصد % |
به وسيله اين خاصيت ميران تو رفتگی و نقطه شروع اولين خط از يک پاراگراف را به يکی از دو حالت زير می توان تعيين کرد : - length : ميزان رفتگی را بر حسب واحدی مثل پيکسل ( pixel ) ، نقطه ( pt ) و يا سانتيمتر ( cm ) تعيين می کنيم . - درصد % : ميزان تورفتگی را بر حسب درصد نسبت به عنصر مادر يا حالت استاندارد تعيين می کنيم . |
| مثال text-decoration | |
| < 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 :
| text-transform | ||
| نام خاصيت | نوع خاصيت | شرح |
| text-transform | none capitalize uppercase lowercase |
از اين خاصيت برای کتنرل بزرگ يا کوچک بودن حروف در نوشته استفاده می شود ، که می تواند يکی از حالت های زير را داشته باشد : - none : نوشته به صورت استاندارد و همانطوری که کاربر وارد کرده است ، نمايش داده می شود . - capitalize : در اين حالت ، اولين حرف کليه کلمات متن به صورت بزرگ نمايش داده می شوند . - uppercase : در اين حالت ، حروف کليه کلمات متن به صورت بزرگ نمايش داده می شوند . - lowercase : در اين حالت ، حروف کليه کلمات متن به صورت کوچک نمايش داده می شوند . |
| مثال text-decoration | |
| < 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 :
| white-space | ||
| نام خاصيت | نوع خاصيت | شرح |
| white-space | normal pre nowrap |
توسط اين خاصيت می توان نحوه نمايش فاصله های خالی بين حروف و کلمات در نوشته توسط مرورگر را مديريت کرد ، که 3 حالت دارد : - normal : در اين حالت فاصله خالی بين کلمات توسط مرورگر ناديده گرفته شده و حداکثر يک فاصله خالی بين کلمات نمايش داده می شود ، که حالت پيش فرض است . - pre : در اين حالت نوشته با همان قالب بندی که توسط کاربر در صفحه وارد شده ، نمايش داده خواهد شد . عملکرد اين خاصيت همانند عملکرد تگ < pre > در HTML است . - nowrap : در اين حالت نوشته و متن به هيچ عنوان شکسته نشده و به خط بعدی نمی رود ، مگر به يک تگ < br / > برسد . |
| مثال white-space | |
< 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 :
| word-spacing | ||
| نام خاصيت | نوع خاصيت | شرح |
| word-spacing | normal length |
توسط اين خاصيت می توان فاصله بين کلمات را در يک نوشته تعيين کرد ، که يکی از 2 حالت زير را می تواند داشته باشد : - normal : فاصله بين کلمات به اندازه استاندارد و طبيعی است ، که انتخاب پيش فرض است . - length : توسط اين خاصيت می توان يک اندازه را بر حسب واحدی مثل پيکسل يا نقطه ، برای فاصله بين حروف تعيين کرد . |
| مثال word-spacing | |
| < 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 . |
خروجی |
مثال : همچنين می توان به يک متن نيز رنگ پس زمينه داد ، به مثال زير توجه کنيد :
| Example | |
| < 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 . |
خروجی |
منبع: دنیای فناوری با حساس کامپیوتر
