آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

خواص مقدماتی 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)
عدد هگزادسيمال
تعيين کننده رنگ نوشته است . رنگ میتواند به روش های زير تعيين شود :
  1. نام رنگ مثل blue يا red .
  2. تعيين رنگ به وسيله تابع rgb به صورت زير :
    ( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb
    اين تابع مقدار 3 رنگ را با هم ترکيب کرده و يک رنگ را ايجاد می کند .که مقدار رنگ توسط عددی بين 0 تا 255 تعيين می شود ، که هر چه عدد بزرگتر باشد ميزان آن رنگ در کل رنگ بيشتر خواهد بود .

    Example : rgb (10,65,232)

  3. نعيين رنگ به صورت عددی ترکيبی در مبنای 16 هگزادسيمال :
    ميزان رنگ آبی ميزان رنگ سبز ميزان رنگ قرمز #

    Example : #08FF00


مثال 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 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 :

خاصيت 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.
< /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 :

خاصيت 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 this part is line through

خروجی
نکته : می توان به يک متن بيش از يک خاصيت 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 .

خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟