اینجا هستید :
خانه آموزش های طراحی وبسایت آموزش CSS شیوه نامه متن و نوشته ها در زبان CSS همراه با مثال

شیوه نامه متن و نوشته ها در زبان CSS همراه با مثال

آشنایی با شیوه نامه متن و نوشته ها در زبان 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

مثال : در ادامه مثالهایی رو از خصوصیت color مشاهده می کنید.

خاصیت direction

خاصیت direction

نام خاصیت

نوع خاصیت

شرح

direction

rtl
ltr

جهت نوشته را مشخص می کند که بر حسب زبان نوشته می تواند یکی از حالت های زیر باشد :

rtl : راست به چپ : برای زبان هایی مثل فارسی که جهت آنها از راست به چپ است.

ltr : چپ به راست : برای زبان هایی مثل انگلیسی که جهت آنها از چپ به راست است.

مثال : در ادامه مثالهایی رو از خصوصیت direction مشاهده می کنید.

خاصیت line-height :

خاصیت line-height

نام خاصیت

نوع خاصیت

شرح

line-height

معمولی normal
عدد number
اندازه length
درصد %

به وسیله این خاصیت می توان فاصله بین خطوط را در پاراگراف تعیین کرد . برای این کار یکی از حالت های زیر را باید استفاده کرد :

normal : فاصله بین خطوط در این حالت به اندازه استاندارد و معمولی است ، که انتخاب پیش فرض است/

number : یک عدد معمولی را تعیین می کنیم ، که این عدد در اندازه استاندارد فاصله خطوط ضرب شده و اندازه جدید را ایجاد می کند . برای مثال اگر عدد ۲ انتخاب شود ، فاصله بین خطوط ۲ برابر اندازه معمولی می شود.

length : به وسیله این خاصیت یک اندازه بر حسب واحدی مثل پیکسل ( pixel ) ، نقطه ( pt ) و … را برای فاصله خطوط تعیین می کنیم.

درصد % : به وسیله این حالت نسبت اندازه مورد نظر را به اندازه استاندارد فاصله خطوط تعیین می کنیم . برای مثال اگر ۱۵۰% تعیین شود ، اندازه خطوط ۵/۱ برابر اندازه استاندارد می شود.

مثال : در ادامه مثالهایی رو از خصوصیت line-height مشاهده می کنید.

خاصیت letter-spacing :

خاصیت letter-spacing

نام خاصیت

نوع خاصیت

شرح

letter-spacing

معمولی normal
اندازه length

برای تعیین اندازه فاصله بین حروف در نوشته استفاده می شود ، که یکی از ۲ حالت زیر می تواند باشد :

normal : فاصله بین حروف در این حالت به اندازه استاندارد و معمولی است ، که انتخاب پیش فرض است.

length : به وسیله این خاصیت یک اندازه بر حسب واحدی مثل پیکسل ( pixel ) ، نقطه ( pt ) و … را برای فاصله بین حروف تعیین می کنیم.

مثال : در ادامه مثالهایی رو از خصوصیت letter-spacing مشاهده می کنید.

خاصیت text-align :

خاصیت text-align

نام خاصیت

نوع خاصیت

شرح

text-align

left
right
center
justify

جهت چیدمان نوشته را در صفحه ، جدول ، پاراگراف و … تعیین می کند ، که یکی از حالت های زیر می تواند باشد :

left : جهت چیدمان نوشته از سمت چپ است.

right : جهت چیدمان نوشته از سمت راست است.

center : جهت چیدمان نوشته از سمت وسط است.

justify : نوشته را از هر دو سمت راست و چپ تراز می کند . این حالت زمانی تاثیر دارد که طول خط از عرض عنصر در بر گیرنده آن بیشتر است.

مثال : در ادامه مثالهایی رو از خصوصیت text-align مشاهده می کنید.

خاصیت text-decoration

خاصیت text-decoration

نام خاصیت

نوع خاصیت

شرح

text-decoration

none
underline
overline
line-through

از این خواص برای اعمال جلوه های تصویری به نوشته استفاده می شود که یکی از خواص زیر و یا ترکیبی از آنها را می توان استفاده کرد :

none : نوسشته به صورت ساده و بدون هیچ جلوه ای نمایش داده می شود که انتخاب پیش فرض است.

underline : نوشته به صورت خط زیر دار نمایش داده می شود.

overline : نوشته به صورتی که یک خط در بالای آن کشیده شده ، نمایش داده می شود.

line-through : نوشته به صورتی که یک خط از وسط آن گذشته است ، نمایش داده می شود.

مثال ۱ : در ادامه مثالهایی رو از خصوصیت text-decoration مشاهده می کنید.
مثال ۲ : می توان به یک متن بیش از یک خاصیت text-decoration داد. به مثال زیر توجه کنید :

خاصیت text-indent : 

text-indent

نام خاصیت

نوع خاصیت

شرح

text-indent

length
درصد %

به وسیله این خاصیت میران تو رفتگی و نقطه شروع اولین خط از یک پاراگراف را به یکی از دو حالت زیر می توان تعیین کرد :

length : میزان رفتگی را بر حسب واحدی مثل پیکسل ( pixel ) ، نقطه ( pt ) و یا سانتیمتر ( cm ) تعیین می کنیم.

درصد % : میزان تورفتگی را بر حسب درصد نسبت به عنصر مادر یا حالت استاندارد تعیین می کنیم.

مثال : در ادامه مثالهایی رو از خصوصیت text-indent مشاهده می کنید.

خاصیت text-transform :

text-transform

نام خاصیت

نوع خاصیت

شرح

text-transform

none
capitalize
uppercase
lowercase

از این خاصیت برای کتنرل بزرگ یا کوچک بودن حروف در نوشته استفاده می شود ، که می تواند یکی از حالت های زیر را داشته باشد :

none : نوشته به صورت استاندارد و همانطوری که کاربر وارد کرده است ، نمایش داده می شود.

capitalize : در این حالت ، اولین حرف کلیه کلمات متن به صورت بزرگ نمایش داده می شوند.

uppercase : در این حالت ، حروف کلیه کلمات متن به صورت بزرگ نمایش داده می شوند.

lowercase : در این حالت ، حروف کلیه کلمات متن به صورت کوچک نمایش داده می شوند.

مثال : در ادامه مثالهایی رو از خصوصیت text-transform مشاهده می کنید.

خاصیت white-space

white-space

نام خاصیت

نوع خاصیت

شرح

white-space

normal
pre
nowrap

توسط این خاصیت می توان نحوه نمایش فاصله های خالی بین حروف و کلمات در نوشته توسط مرورگر را مدیریت کرد ، که ۳ حالت دارد :

normal : در این حالت فاصله خالی بین کلمات توسط مرورگر نادیده گرفته شده و حداکثر یک فاصله خالی بین کلمات نمایش داده می شود ، که حالت پیش فرض است.

pre : در این حالت نوشته با همان قالب بندی که توسط کاربر در صفحه وارد شده ، نمایش داده خواهد شد . عملکرد این خاصیت همانند عملکرد تگ < pre > در HTML است.

nowrap : در این حالت نوشته و متن به هیچ عنوان شکسته نشده و به خط بعدی نمی رود ، مگر به یک تگ < br / > برسد.

مثال : در ادامه مثالهایی رو از خصوصیت white-space مشاهده می کنید.

خاصیت word-spacing

word-spacing

نام خاصیت

نوع خاصیت

شرح

word-spacing

normal
length

توسط این خاصیت می توان فاصله بین کلمات را در یک نوشته تعیین کرد ، که یکی از ۲ حالت زیر را می تواند داشته باشد :

normal : فاصله بین کلمات به اندازه استاندارد و طبیعی است ، که انتخاب پیش فرض است.

length : توسط این خاصیت می توان یک اندازه را بر حسب واحدی مثل پیکسل یا نقطه ، برای فاصله بین حروف تعیین کرد.

مثال : در ادامه مثالهایی رو از شیوه نامه متن و خصوصیت word-spacing مشاهده می کنید.
در این مطلب با خواص شیوه نامه متن و نوشته ها در زبان CSS آشنا شدید. در ادامه سری آموزش های سی اس اس می خواهیم شما را با سایر خواص و دستورات در طراحی وب آشنا کنیم.

درباره نویسنده

مدیریت علاقه دارم در زمینه آموزش های مباحث کامپیوتری و نرم افزاری هر دانش و تجربه ای دارم با کاربران عزیز به اشتراک بزارم... ♥
منتظر نظرات خوب شما هستیم!

هنوز هیچ دیدگاهی وجود ندارد

    • سلام , مهمان