آموزش CSS – نحوه خلاصه نویسی کدهای مرتبط با font در سی اس اس (CSS) (جلسه ۱۶)

برای آن که بتوانیم تعداد کدهای خود را به حداقل برسانیم، می توانیم از خلاصه نویسی کدهای مرتبط با font در سی اس اس (CSS) استفاده کنیم. برای این منظور کدهای اچ تی ام ال (HTML) زیر را وارد مرورگر خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>This is a paragraph.</p>
   </body>
</html>

حال اقدام به نوشتن کدهای سی اس اس (CSS) می نماییم:

p {
   font:bold normal small-caps 14px/1.5 Arial, Helvetica, sans-serif;
}

همانطور که در کد فوق ملاحظه می شود، ابتدا Property یی تحت عنوان font را نوشته سپس مقادیری را یکی پس از دیگری برای آن در نظر می گیریم. نکته ای که در ارتباط با مقادیر font همواره می بایست مد نظر قرار داد این است که مقادیر این Property از ترتیب خاصی تبعیت می کنند. ابتدا می بایست font-weight را نوشت که در مثال فوق مقدار bold برای آن در نظر گرفته شده است، سپس اقدام به نوشتن font-style کرده که در کد فوق مقدار normal برای آن در نظر گرفته شده است. در ادامه کد مربوط به font-variant را نوشته که در اینجا مقدار small-caps در نظر گرفته شده است. در ادامه مقداری را برای font-size در نظر می گیریم که در این مثال مقدار ۱۴px در نظر گرفته شده است. برای آنکه line-height را مشخص کنیم می بایست یک علامت / پس از مقدار در نظر گرفته شده برای font-size قرار داده و مقدار مرتبط با line-hieght را پس از آن بنویسیم که در این مثال مقدار ۱.۵ در نظر گرفته شده است. در نهایت مقدار مرتبط با font-family را نوشته و به هر تعداد که بخواهیم فونت تعریف می کنیم که با یک کاما از یکدیگر مجزا شده اند.
همواره به خاطر داشته باشیم که کلیه Property ها صرفاً با یک فاصله از یکدیگر مجزا می شوند و به هیچ وجه نباید از کاما مابین آن ها استفاده کرد. در واقع فقط برای مجزا سازی مقادیر font-family می توان از کاما استفاده کرد. حال فایل اچ تی ام ال (HTML) خود را داخل مرورگر اجرا می کنیم:

shorthand_codes_in_css

می بینیم که کلیه کد ها اعمال شده اند.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان