شیوه نامه ها (راهنمای html)

در فصول 3 و 4 صفحات ساده ای را طرح کردید و به شیوه طراحی سایت در HTML آشنا شدیددر این فصل ها مثال های صفحات ساده ای طراحی شدند ،فاصله سطرها در مرورگر بسیار زیاد بوده است.آیا فکر کردید که چگونه می توان فاصله سطرها را کم کرد؟ آیا روش تنظیم حاشیه متنها را می دانید؟ آیا میدانید که چگونه باید رنگها وفونتهایی را برای کل متن موجود در صفحه تعیین کنید؟این موارد و بسیاری از موارد دیگر مربوط به صفحه آرایی متنها را می توان با استفاده از فناوری شیوه نامه انجام داد. شیوه نامه توسط مؤسسه W3C  پذیرفته شده اولین نسخه آن به نام  نسخه بعدی آن به نام CSS2ارائه شده اند. به طور کلی می توان گفت که شیوه نامه برای قالب بندی و صفحه آرایی صفحات وب به کار می رود. قبل از استفاده از شیوه نامه ها، برای صفحه آرایی صفحات وب از تصاویر گرافیکی استفاده می شد که بسیار وقتگیر بوده است.

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

انواع شیوه نامه ها
شیوه نامه ها را به سه روش می توان به صفحات وب اعمال کرد. یک روش این است که شیوه نامه ها فقط برای یک دستور مورد استفاده قرار گیرند که آنها را شیوه نامه دستوری می نامند. بنابراین حوزه عمل شیوه نامه های دستوری در یک دستور است. برای اعمال شیوه نامه های دستوری از صفت STYLE استفاده می شود. در ادامه مثالهایی را خواهید دید روش دیگر استفاده از شیوه نامه ها این است که اثر آنها در یک صفحه وب باشد. این شیوه نامه را شیوه نامه صفحه ای می نامند. برای این شیوهنامه از دستورات <STYLE > و <STYLE/> استفاده می شود. این دستور در یک فایل HTML بین دستورات < HTML > و < BODY که قرار می گیرد. یعنی دستورات شیوهنامهها در بین دو دستور <STYLE> و <STYLE/> قرار دارد.
سومین روش استفاده از شیوهنامهها این است که آنها را در یک فایل جداگانه قرار داد و اسناد HTML از آن فایل استفاده کنند. این شیوهنامه را شیوه نامه خارجی می نامند. پسوند فایلی که حاوی شیوه نامه ها است، CSS می باشد. هر فایل HTML می تواند با استفاده از یک پیوند به این فایل مراجعه و از شیوهنامه های موجود در ان استفاده نماید. در دستورات HTML دیدید که برای تعیین مقادیر خواص، از علامت مساوی استفاده می شود و مقادیر در داخل کوتیشن قرار میگیرند. اما برای تعیین خواص شیوه نامه ها، آنها را در داخل آکولاد ({}) قرار می دهیم و مقادیر آنها را با کولن (:) تعیین می کنیم. به عنوان مثال، اگر font-family یک خاصیت شیوه نامه باشد، برای تعیین مقدار آن به صورت زیر عمل می شود:

{font-family : Helvetica}

برای تعیین چند خاصیت، باید آنها را با از هم جدا کرد:

{font-family : Helvetica , font-size : 2 inch}

خواص شیوه نامه
تاکنون با اهداف شیوه نامه و روشهای استفاده از شیوه نامه (دستوری، صفحه ای و خارجی) آشنا شدید. اما در این بخش می آموزیم که خواص مربوط به شیوهنامه ها کدامند و چگونه مقدار می گیرند. خواص شیوه نامه ها را می توان به دسته های زیر تقسیم کرد: 

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

خواص مربوط به فونتها برای تعیین خانواده فونت ، سبک، اندازه و شکل فونت مورد استفاده قرارمی گیرند. علاوه براین، می توان قواعد مربوط به رنگ، زمینه، حاشیه بندی و فاصله گذاری ترکیب کنید تا اثر متنی زیبایی را در صفحه ایجاد کنید.
خاصیت font-family. این خاصیت برای تعیین خانواده فونت به کار می رود. مقدار آن می تواند یک فونت خاص مثل Arial یا خانواده کلی مثل Scan Serif باشد. براساسی استاندارد CSS1، خانواده های کلی زیر باید در مرورگرهایی که از CSS1 پشتیبانی میکنند وجود داشته باشد:

(Times مثل)Serif
(Helvetica مثل) Scan-Serif a
(Zaff-Chancery J.) Cursive
(Westorn مثل) Fantasy
(Courier مثل) Monospace

همانند دستور < FONT> ، وقتی از چند خانواده فونت استفاده می کنید، باید آنها را به ترتیب اولویت بنویسید و آنها را با کاما از هم جدا کنید. استفاده از چند خانواده فونت به این دلیل صورت می گیرد که اگر بر روی کامپیوتری یک خانواده فونت موجود نبود، از خانواده دیگری استفاده شود. دستور est {font-family:Arial,scans-serif موجب می شود تا از خانواده فونت Arial استفاده گردد و در صورت عدم وجود این خانواده در یک کامپیوتر، از خانواده SCanS-Serif استفاده می شود.
خاصیت font-size. با استفاده از این خاصیت می توان اندازه نسبی یا واقعی فونت را تعیین کرد. اندازه فونت را با استفاده از کلمات x-smallو xx-smallوxx-large , X-large و large و medium , smal یا کلمات نسبی مثل larger و Smaller تعیین کرد. علاوه بر این، اندازه فونت بر حسب ۵ واحد قابل بیان است: تعداد نقاط (مثل12:font-size)، تعداد پیکسلها (مثل font-size:30px)، اینچ (مثلا font-size:2inch)، سانتیمتر مثال (font-size:2cm) و درصد (مثل %200:font-size). وقتی اندازه فونت برحسب درصد بیان میشود، نسبت به اندازه پیش فرض آن سنجیده خواهد شد. دستورات زیر را ببینید:

{font-size : 18pt}
{font-size : larger}
{font-size : 200%}

خاصیت font-style. این خاصیت برای تعیین سبک فونت به کار میرود که می تواند مقادیر normal، italitیا Oblique را بپذیرد. سبک Oblique مشابه سبک italic است ولی مرورگر خودش سعی کند میزان اریب بودن متن را تعیین کند:

{font-style : oblique}
{font-style : normal}

خاصیت font-weight. این خاصیت، وزن فونت یا میزان تاریکی آن را تعیین میکند. مقادیر این خاصیت از ۱۰۰ تا ۹۰۰ با افزایشی ۱۰۰ است. از کلمات کلیدی نیز می توان استفاده کرد: bolder ، bold و lighter. بعضی از g- extra-bold gbold , demi-bold , medium | demi-light .light , extra-light g.... 5 CL5 jl LA S... استفاده می کنند. چون خاصیت خانواده فونت نیز می تواند مقدار bold را بپذیرد، برای جلوگیری از اشتباه بهتر است از مقادیر عددی استفاده شود:

{font-weight : bolder}
{font-weight : 900}

خاصیت font-variant. این خاصیت، شکل خاصی از فونت تعیین شده یا فونت پیش فرضی را انتخاب می کند. دو شکلی که فعلا پشتیبانی می شود عبارتند از small-caps و normal .مقدار small-caps حرف بزرگ را په شکل کو چکی نمایش میدهد و normalکار خاصی انجام نمیدهد:

{font-variant : small-caps} 

خاصیت فونت. این خاصیت، یک روش دقیق برای تعیین تمام خواص فونت با یک خاصیت STYLE است. یکی از صفات خاصیت font برابر با line-height است که فاصله بین دو سطر از متن را مشخص میکند صفات فونت می توانند با فاصله از هم جدا شوند. به جز line-height که با font-size به کار میرود و با اسلشی (/) از آن جدا می گردد. شکل کلی قاعده فونت به صورت زیر است:

font : font-style font-variant font-weight font-size/line-hight font-family

نمونه ای از کاربرد خاصیت فونت به صورت زیر است:

{font;italic small-caps 600 18pt/24pt "Arial, Helvetica")

خواصں رنگ و زمینه
خواص گوناگونی برای کنترل رنگها و زمینه ها در یک سند HTML وجود دارد. با استفاده از شیوه نامه می توان ناحیه های مختلفی با رنگ زمینه و تصاویر ایجاد کنید. شیوه نامه CSS1 سه شکل از مشخصات رنگ پشتیبانی می کند.
reen . Gray , Fushia • Blue : Black . Aqua lui Le U4 < «- leg: - نام رنگ، کلمات کلیدی Yellow , White Teal, Silver . Red, Purple. Olive . Navy . Marron Lime
مقادیر مبنای ۱۶ . از ۶ رقم به شکل RRGGBB استفاده می شود. مثلاً #0000FF رنگ آبی ...-  رنگ سفید #FFFFFF
مقادیر RGB. فرمت RGB به صورت (rgb(R, G, Bنمایش داده می شود که G ، R و B در بازه0 تا ۲۵۵ هستند. اغلب مرورگرها از این فرمت رنگ پشتیبانی نمی کنند.
خاصیت color. این خاصیت برای تعیین رنگ متن مورد استفاده قرار می گیرد. مثالهای زیر را ببینید:

{color : green}
{color:#FF0088}
{color : #OfD}

خاصیت background-color. این خاصیت، رنگ زمینه یک دستور را مشخص می کند. مقدار فرضی آن none است و هر محتویاتی بر روی آن قابل نمایش است. این وضعیت با کلمه کلیدی transparent نیز مشخص می شود. این خاصیت همراه با خاصیت Color قابل استفاده است.

مقالات مرتبط به طراحی سایت :

تنظیم تصویر در صفحه وب (راهنمای html)
چند رسانه ای در وب ( راهنمای html)
خواص لیستها(راهنمای html)
خواص فاصله گذاری(راهنمای html)
خواص مرز کادرها (راهنمای html)
خواص شیوه نامه ها (راهنمای html)
شیوه نامه ها (راهنمای html)
اسکریپت و نقشه های تصویری(راهنمای html)
ایجاد نقشه تصویری کاربر(راهنمای html)
تصاویر و پیوند(راهنمای html)
قرار دادن تصویر در صفحه وب(راهنمای html)
پیوند در HTML (راهنمای جامع html)