طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش CSS – بخش پنجم

آموزش CSS

سلام و درودی دوباره بر دوستان و همراهان گرامی سایت سازان. امروز هم با آموزش CSS – بخش پنجم در خدمت شما بزرگوارن هستم و مباحثی که خواهید آموخت عبارتند از:

  • قالب بندی متن
  • تنظیمات فونت

در ابتدا می خواهم شما را با دستوراتی برای سبک دهی به متن و قالب بندی آن آشنا کنم. با من همراه باشید:

قالب بندی متن با CSS

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

منظور از قالب بندی استفاده از ویژگی هایی است که به متن ها شکل و شمایل خاصی برای زیبایی می دهد. این ویژگی ها شامل ویژگی هایی برای همتراز کردن، تغییر نحوه نمایش متن ها (مثل فونت، خط کشیدن زیر متن، تنظیم فاصله بین آنها و …) و رنگ متن هستند. در این جلسه با ویژگی های مروبوط به قالب بندی متن در CSS آشنا می شویم.

رنگ متن ها

اهمیت رنگ ها در استفاده درست و مناسب از آنها برای زیبایی هرچه تمامتر متن است. بارها در مثال های مختلف دیده اید که برای تعیین رنگ از ویژگی color استفاده کرده ایم و به سه روش به این ویژگی مقدار دادیم:

آموزش CSS – بخش پنجم

text-align

متن ها را می توان با ویژگی text-align  چپ چین، راست چین، وسط چین و یا هم تراز کرد. مقادیری که می توان به این ویژگی داد عبارتند از:  left  برای چپ چین، right برای راست چین و center برای وسط چین و مقدار justify برای همتراز کردن.

اگر جهت نوشتن متن ها (direction) از راست به چپ باشد، پیش فرض text-align  مقدار right  است. و بر عکس. اگر جهت نوشتن متن ها از چپ به راست باشد، پیش فرض text-align  مقدار left خواهد بود. اگر جهتی برای المان ها تنظیم نشود، پیش فرض مرورگرها، یعنی از چپ به راست در نظر گرفته می شود.




آموزش CSS – بخش پنجم

توجه کنید که مقدار justify  با مقدار center  متفاوت است. در justify تمام خطوط به طور منظم از سمت چپ و راست زیر هم قرار دارند و طول خطوط با هم یکسان است. اما در center  اینگونه نیست و خطوط می توانند هر اندازه ای متناسب با صفحه داشته باشند.

آموزش CSS – بخش پنجم

text-decoration

ویژگی text-decoration  برای آرایش متن استفاده می شود. مقادیری که می توان به این ویژگی داد عبارتند از: none  ، overline  ، line-through  و underline است. کاربرد و نحوه آرایش متن با این مقادیر را در مثال زیر بررسی می کنیم.

آموزش CSS – بخش پنجم

text-transform

در متون لاتین می توان بزرگ یا کوچک بودن حروف را با ویژگی text-transform  تنظیم کرد. مقادیر این ویژگی عبارتند از uppercase  (بزرگ کردن حروف  هر لغت) ، lowercase (کوچک کردن حروف هر لغت) و capitalize (بزرگ نویسی فقط حروف اول).

آموزش CSS – بخش پنجم

Text-indentation

می توان قبل از اولین خط هر پاراگراف فاصله ای قرار داد و آن را با فاصله اندکی جلوتر از خط تراز نوشت که به این کار فاصله گذاری می گوییم. با استفاده از دستور text-indentation  این فاصله را می توان تنظیم کرد:

آموزش CSS – بخش پنجم

letter-spacing

در متن های لاتین (و حتی فارسی) می توان با ویژگی letter-spacing  و یک مقدار عددی دلخواه، هر فاصله دلخواهی را بین حروف هر لغت قرار داد. مقادیر منفی را می توانیم به این ویژگی بدهیم که در این صورت حروف به هم خواهند چسبید.

آموزش CSS – بخش پنجم

line-height

این ویژگی برای تنظیم ارتفاع خطوط استفاده می شود که مقداری عددی با واحد یا بدون واحد (که در اینصورت واحد پیش فرض مرورگرها یعنی em در نظر گرفته می شود.) را می پذیرد.

آموزش CSS – بخش پنجم

در صورت تنظیم فاصله داخلی، مقدار ویژگی padding با مقدار ویژگی line-height  جمع خواهد شد.

direction

این ویژگی جهت چینش المان ها و نگارش متن ها در المان ها را با دو مقدار rtl (از راست به چپ) و ltr (از چپ به راست) تعیین می کند:

آموزش CSS – بخش پنجم

word-spacing

علاوه بر فاصله بین حروف، فاصله بین لغات را هم می توان با استفاده از ویژگی word-spacing  تنظیم کرد.

آموزش CSS – بخش پنجم

text-shadow

این ویژگی با دریافت 3 مقدار، سایه های دلخواه را در اطراف متون ایجاد می کند:

  • مقدار اول برای جابجایی سایه در راستای محور افقی
  • مقدار دوم برای جابجایی سایه در راستای محور عمودی
  • مقدار سوم برای تعیین رنگ سایه است.

و اگر بخواهیم سایه را برای متنی براداریم به ویژگی text-shadow  مقدار none می دهیم.

نحوه ایجاد سایه بدین صورت است که مرورگر هر حرف را صفر مبدا در نظر می گیرد و متناسب با عدد، سایه را به سمت چپ و یا راست، و پایین و یا بالا جابجا می کند. مقدار عدد برای سایه ها به صورت زیر است:

سایه افقی: اعداد مثبت سایه را به سمت راست و اعداد منفی سایه را به سمت چپ جابجا می کنند.

سایه عمودی: اعداد مثبت سایه را به پایین و اعداد منفی سایه را به سمت بالا جابجا می کنند.

در مثال زیر سایه دادن را با هم تمرین می کنیم:

آموزش CSS – بخش پنجم

دوستان عزیز می توانید در مرورگر با کلیک راست بر روی متن Text Shadow از منوی ظاهر شده گزینه inspect را انتخاب کنید. حال در قسمت دستورات CSS مقادیر دستور text-shadow  را تغییر دهید و همزمان تغییرات را مشاهده نمایید.

آموزش CSS – بخش پنجم

white-space

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

آموزش CSS – بخش پنجم

آموزش CSS – بخش پنجم

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

آموزش CSS – بخش پنجم

vertical-align

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

آموزش CSS – بخش پنجم

text-overflow

اگر متن یک المان طولانی باشد که مجبور باشیم مقداری از آن را پنهان کنیم، با استفاده از این ویژگی می توان نشانه ای (مثلا سه نقطه) در قسمت قابل مشاهده متن قرار داد تا کاربر متوجه ادامه دار بودن متن شود.

آموزش CSS – بخش پنجم

توجه کنید که دو ویژگی overflow (برای تعیین وضعیت محتوای اضافه هر المان) و white-space  باید تنظیم شوند تا بتوان از ویژگی text-overflow  استفاده کرد.

حالا بیایید ببینیم چط.ری می توان تنظیمات دلخواهی را بر روی فونت ها اعمال کرد:

تنظیمات فونت با CSS

در ادامه این جلسه با ویژگی هایی از CSS آشنا می شویم که از طریق آن ها می توان نوع فونت، میزان برجستگی، اندازه و در کل هر سبک دلخواهی را برای فونت ها انتخاب کرد.

font-family

با استفاده از این ویژگی می توان نوع فونت را تعیین کرد. مرورگر مقادیر این ویژگی را بررسی می کند و اولین فونتی را که پشتیبانی کند، انتخاب می کند.

در انتخاب فونت دقت داشته باشید که اگر نام فونت چند قسمتی باشد مانند iran sans، باید در علامت نقل قول قرار بگیرد.

آموزش CSS – بخش پنجم

font-style

این ویژگی معمولا برای کج نویسی متن ها استفاده می شود و سه مقدار normal ، italic  و oblique  را دریافت می کند.

آموزش CSS – بخش پنجم

font-size

با استفاده از این ویژگی می توان اندازه فونت ها را تنظیم کرد. در تعیین اندازه فونت ها دقت لازم را داشته باشید تا اندازه ها به گونه ای نباشند که یک پاراگراف اندازه ای برابر با یک سرصفحه داشته باشد و یا برعکس.

مقادیر ویژگی font-size  به دو دسته تقسیم زیر تقسیم می شوند:

مقادیر مطلق: که مقدار ثابتی را برای فونت تنظیم می کند و به کاربر اجازه تغییر اندازه فونت از طریق تنظیمات مرورگر را نمی دهد.

مقادیر نسبی: این مقادیر که اندازه فونت را نسبت به دیگر المان ها تنظیم می کنند، به کاربر اجازه تغییر اندازه فونت به میزان دلخواه را می دهند.

به مثال زیر توجه فرمایید:

آموزش CSS – بخش پنجم

در این مثال اندازه فونت ها مطلق هستند و کاربر برای تغییر اندازه فونت باید بزرگنمایی را تغییر دهد.

انداز های نسبی با واحد های em و یا درصد تعیین می شوند و همانطور که گفته شد کاربر می تواند از منوی تنظیمات مرورگر اندازه را تغییر دهد. W3C نیز استفاده از این واحد را توصیه کرده است.

  • هر 16px برابر با 1em است.
  • نسخه های قدیمی اینترنت اکسپلورر فونت های با واحد em را به درستی نمایش نمی دهند و ممکن است متن را با اندازه بیشتر و یا کمتر از مقدار تعیین شده نمایش دهند. برای رفع این مشکل اندازه فونت body را 100% و اندازه فونت المان های صفحه را با واحد em تنظیم می کنیم.



آموزش CSS – بخش پنجم

font-weight

ویژگی font-weight  میزان برجستگی فونت را تنظیم می کند:

آموزش CSS – بخش پنجم

تنظیمات فونت را نیز می توان در یک خط خلاصه کرد. بدین منظور از ویژگی font استفاده می کنیم و مقادیری که دریافت می کند به ترتیب زیر می باشد:

  • اگر دو ویژگی font-size  و font-family  تنظیم نشوند دیگر ویژگی اثر داده نخواهند شد. همچنین در صورت عدم تعیین مقدار برای هر ویژگی، مقدار پیش فرض در نظر گرفته می شود.
  • ویژگی font-variant  تعیین می کند که حروف متون لاتین به صورت بزرگ نوشته شوند یا نه.

آموزش CSS – بخش پنجم

با استفاده از ویژگی های توضیح داده شده در این جلسه خواهید توانست محتوای متنی را به دلخواه سبک دهی نمایید.

دوستان عزیزم آموزش CSS – بخش پنجم را نیز در اینجا به پایان می رسانم. امیدوارم که مطالب ارائه شده در این جلسه نیز رضایت شما کاربران گرامی را جلب کرده باشد. در قسمت دیدگاه ها می توانید علاوه بر نظرات و پیشنهادات، سوالات خود در زمینه مطالب این جلسه را با کارشناسان سایت سازان مطرح نمایید.

در جلسه ششم آموزش CSS مطالب مهمی را آموزش خواهم داد. همراه من باشید.

برقرار باشید و سبز.

نوشته های مرتبط