آموزش استایل ها در HTML

CSS چیست؟

CSS مخفف عبارت انگلیسی Cascading style sheets است که به معنای صفحات استایل آبشاری می باشد. دلیل این که به آن صفحات آبشاری می گویند این بوده که دستورات اعمال شده روی هر عنصر، روی فرزندان آن عنصر هم اعمال می شوند. CSS خیلی کارآمد است و می تواند طرح چندین وب سایت را همزمان کنترل کند.

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

استفاده از CSS

CSS می تواند به سه روش به سندهای HTML اضافه شود:

• Inline - با استفاده از ویژگی style در عنصرهای HTML
• Internal  - با استفاده از عنصر < style > در قسمت < head >
• External  - با استفاده از عنصر < link > برای لینک کردن یک فایل خارجی CSS

شناخته شده ترین روش برای اضافه کردن CSS این است که استایل ها را در فایل های خارجی CSS نگه دارید. در هر صورت، در این آموزش ما از روش های inline و internal استفاده می کنیم، چون که این روش ها برای آموزش و نشان دادن کد های صفحه مناسب تر است و همچنین برای امتحان کردنشان برای خودتان آسان تر می باشد.

Inline CSS

Inline CSS برای اعمال کردن یک استایل منحصر به فرد به یک عنصر HTML به کارمی رود. مثال زیر رنگ متن عنصر < h1 > را روی آبی تنظیم کرده و رنگ عنصر < p > را روی قرمز تنظیم می کند:

در این مثال مشاهده می کنید که اگر به عنصر HTML مثلا تگ h1 ، یک Inline CSS اضافه کنیم، این استایل، فقط و فقط به آن عنصر اعمال خواهد شد و به روی عناصر صفحه تاثیری نخواهد داشت.

Internal CSS

یک internal CSS به منظور تعریف استایل برای یک صفحه HTML به کار می رود. یک internal CSS در بخش < head > و درون عنصر < style > تعریف می شود. مثال پایین رنگ تمام عنصرهای < h1 > (در آن صفحه) را به آبی تنظیم می کند و رنگ تمام عنصرهای < p > را به قرمز تبدیل می کند. همچنین، صفحه با رنگ پس زمینه (powderblue) نمایش داده می شود:

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

External CSS

یک External CSS برای تعریف کردن استایل تعداد زیادی از صفحات HTML به کار می رود. برای استفاده کردن از External CSS، یک لینک از آن را در بخش < head > هر صفحه HTML قرار دهید:

در این مثال، همان عملیات مثال قبلی انجام شد، با این تفاوت که به جای internal css از external css استفاده شده و تمام کدهای css از تگ head به فایل styles.css انتقال پیدا کرده اند. مزیت این روش این است که ما می توانیم فایل HTML را خیلی تمیزتر نگه داریم و از استایل های موجود در فایل styles.css برای چندین صفحه HTML استفاده کنیم. برای این کار کافی است که فایل styles.css را به چندین صفحه متصل کنیم.

External CSS می تواند در هر ادیتور متنی که می خواهید نوشته شود. فایل نباید شامل هیچ کد HTML باشد، و باید با فرمت .css ذخیره شده باشد. مثال زیر یک فایل "styles.css" را نشان می دهد:

رنگ، فونت و سایز در CSS

در ادامه تعدادی از مشخصه های متعارف را در CSS نشان می دهیم.

مشخصه ی color رنگ متن را تعریف می کند.

مشخصه ی font-family فونت متن را تعریف می کند.

مشخصه ی font-size سایز متن را تعریف می کند.

نتیجه تغییرات بالا به شکل زیر است:

حاشیه در CSS

مشخصه border یک حاشیه دور یک عنصر HTML تعریف می کند. شما می توانید میزان ضخامت، شکل و رنگ این حاشیه را در مشخصه border تغییر دهید و متناسب با برنامه خودتان شخصی سازی کنید.

نکته: می توانید تقریبا برای تمام عنصرهای HTML یک حاشیه تعریف کنید.

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

Padding در CSS

مشخصه ی padding یک فاصله بین متن و حاشیه تعریف می کند. Padding در حقیقت فاصله بین متن درون یک عنصر را با لبه های آن عنصر تنظیم می کند. شما می توانید با استفاده از دستور padding فاصله بین متن و حاشیه را از بالا، پایین، چپ و راست تنظیم کنید.

که نتیجه آن به شکل زیر است:

Margin در CSS

مشخصه ی Margin یک فاصله بیرون حاشیه تعریف می کند. درحقیقت margin فاصله بیرونی بین دو عنصر کنار هم را مشخص می کند و این فاصله را می توان با استفاده از دستور margin ، از بالا، پایین، چپ و راست تعریف کرد.

که نتیجه آن به شکل زیر خواهد بود:

لینک به External CSS

External CSS ها می توانند با یک URL کامل یا یک مسیر مرتبط به صفحه ی فعلی قابل دسترسی باشند. مثال زیر از یک URL کامل برای لینک دادن به فایل CSS استفاده می کند:

مثال زیر به یک فایل CSS که در پوشه html وب سایت فعلی قرار گرفته است لینک می شود:

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