شیوه نامه متن و نوشته ها در زبان CSS همراه با مثال
آشنایی با شیوه نامه متن و نوشته ها در زبان CSS
در ادامه سری آموزش های زبان CSS می خواهیم در مورد انواع دستورات شیوه نامه متن و نوشته های داخل صفحات وب صحبت کنیم. شیوه نامه متن در یک صفحه ی وب جزء پرکاربردترین دستورات است که شما برای اعمال تغییرات مورد نیاز در صفحات و پاراگراف های صفحه باید به تمامی دستورات مورد نیازتان آشنا باشید.
این دستورات به سادگی قابل اجرا و دستور دهی است به طوریکه با دادن دستورات مورد نیاز برای یک متن و یا یک پاراگراف می توانید مقادیر در هر موجودیت را مشاهده کنید و یکی از آنها را انتخاب کنید.
خواهش شیوه نامه متن در CSS
به وسیله مجموعه خواص Text در CSS ،می توان ظاهر نوشته را تغییر داد . این خواص برای تغییر رنگ نوشته ، جهت چیدمان، اندازه و … متن به کار می روند.
مجموعه خواص شیوه نامه متن شامل لیست زیر می شود برای دریافت اطلاعات درباره هر خاصیت ادامه آموزش را دنبال کنید.
|
color |
text-decoration |
|
direction |
text-inednt |
|
line-height |
text-transform |
|
letter-spacing |
white-space |
|
text-align |
word-spacing |
در ادامه ی این مطلب شما را با خواص شیوه نامه متن و نوشته که در جدول فوق هست همراه با توضیحات کامل و مثال آشنا خواهیم کرد.
خاصیت color
|
خاصیت color |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
color |
نام رنگ rgb (r,g,b) عدد هگزادسیمال |
تعیین کننده رنگ نوشته است . رنگ میتواند به روش های زیر تعیین شود : نام رنگ مثل blue یا red. تعیین رنگ به وسیله تابع rgb به صورت زیر : ( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb این تابع مقدار ۳ رنگ را با هم ترکیب کرده و یک رنگ را ایجاد می کند. که مقدار رنگ توسط عددی بین ۰ تا ۲۵۵ تعیین می شود ، که هر چه عدد بزرگتر باشد میزان آن رنگ در کل رنگ بیشتر خواهد بود . Example : rgb (10,65,232) نعیین رنگ به صورت عددی ترکیبی در مبنای ۱۶ هگزادسیمال : میزان رنگ آبی میزان رنگ سبز میزان رنگ قرمز # Example : #08FF00 |
< p style= "color : blue" > This Paragraph is blue < /p > < p style= "color : #AB4588" > This is another paragrph with different color < /p >
خاصیت direction
|
خاصیت direction |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
direction |
rtl |
جهت نوشته را مشخص می کند که بر حسب زبان نوشته می تواند یکی از حالت های زیر باشد : – 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 >
خاصیت line-height :
|
خاصیت line-height |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
line-height |
معمولی normal |
به وسیله این خاصیت می توان فاصله بین خطوط را در پاراگراف تعیین کرد . برای این کار یکی از حالت های زیر را باید استفاده کرد : – normal : فاصله بین خطوط در این حالت به اندازه استاندارد و معمولی است ، که انتخاب پیش فرض است/ – number : یک عدد معمولی را تعیین می کنیم ، که این عدد در اندازه استاندارد فاصله خطوط ضرب شده و اندازه جدید را ایجاد می کند . برای مثال اگر عدد ۲ انتخاب شود ، فاصله بین خطوط ۲ برابر اندازه معمولی می شود. – length : به وسیله این خاصیت یک اندازه بر حسب واحدی مثل پیکسل ( pixel ) ، نقطه ( pt ) و … را برای فاصله خطوط تعیین می کنیم. – درصد % : به وسیله این حالت نسبت اندازه مورد نظر را به اندازه استاندارد فاصله خطوط تعیین می کنیم . برای مثال اگر ۱۵۰% تعیین شود ، اندازه خطوط ۵/۱ برابر اندازه استاندارد می شود. |
< 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 >
خاصیت letter-spacing :
|
خاصیت letter-spacing |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
letter-spacing |
معمولی normal |
برای تعیین اندازه فاصله بین حروف در نوشته استفاده می شود ، که یکی از ۲ حالت زیر می تواند باشد : – 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 >
خاصیت text-align :
|
خاصیت text-align |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
text-align |
left |
جهت چیدمان نوشته را در صفحه ، جدول ، پاراگراف و … تعیین می کند ، که یکی از حالت های زیر می تواند باشد : – 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
|
خاصیت text-decoration |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
text-decoration |
none |
از این خواص برای اعمال جلوه های تصویری به نوشته استفاده می شود که یکی از خواص زیر و یا ترکیبی از آنها را می توان استفاده کرد : – 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>
مثال ۲ : می توان به یک متن بیش از یک خاصیت text-decoration داد. به مثال زیر توجه کنید :
< p style="text-decoration: underline overline line-through" > Can you read this text ? < /p >
خاصیت text-indent :
|
text-indent |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
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 >
خاصیت text-transform :
|
text-transform |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
text-transform |
none |
از این خاصیت برای کتنرل بزرگ یا کوچک بودن حروف در نوشته استفاده می شود ، که می تواند یکی از حالت های زیر را داشته باشد : – 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
|
white-space |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
| white-space |
normal |
توسط این خاصیت می توان نحوه نمایش فاصله های خالی بین حروف و کلمات در نوشته توسط مرورگر را مدیریت کرد ، که ۳ حالت دارد : – 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 >
خاصیت word-spacing
|
word-spacing |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
word-spacing |
normal |
توسط این خاصیت می توان فاصله بین کلمات را در یک نوشته تعیین کرد ، که یکی از ۲ حالت زیر را می تواند داشته باشد : – 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 >
در این مطلب با خواص شیوه نامه متن و نوشته ها در زبان CSS آشنا شدید. در ادامه سری آموزش های سی اس اس می خواهیم شما را با سایر خواص و دستورات در طراحی وب آشنا کنیم.
