استفاده از CSS در HTML بخش نهم

نویسنده: نویسنده 19 نوامبر 2019 مشاهده:

استفاده از CSS در HTML بخش نهم

CSS = رنگ ها و سبک ها

ساخت ظاهر گرافیکی HTML با استفاده از CSS

اصطلاح CSS در واقع مخفف عبارت (Cascading Style Sheets) به معنای شیوه نامه های آبشاری است.

برای خواباندن حروف متن از تگ <i> استفاده می شود. این تگ خصوصیت خوابانده کردن (Italic) را تعریف می کند بدون آن که اهمیت مضاعفی از لحاظ رتبه بندی در متن به آن بدهد.

دستورات مربوط به ساخت ظاهر محتوای صفحه را می توان به سه روش به سند HTML افزود:

در خط (Inline) – در این روش از ویژگی style در تگ های HTML استفاده می شود.
داخلی (Internal) – در این روش از تگ <style> برای افزودن دستورات در المان <head> سند HTML استفاده می شود.
خارجی (External) – در این روش از فراخوانی یک فایل دیگر به داخل سند HTML استفاده می شود.

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

نحوه ی نوشتن CSS

ساختار و روش نوشتن یک کد CSS که برای تغییر ظاهر کد های HTML استفاد می شود به شکل زیر است:

مقدار : خصوصیت ;مقدار:خصوصیت } المان }

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

در صورتی که بیش از یک خصوصیت را بخواهید برای یک المان تغییر دهید باید از سمیکالن (;) برای جدا سازی خصوصیات (دستورات CSS) استفاده نمایید.

ظاهرسازی در خط (Inline CSS)

تغییر ظاهر به روش ظاهرسازی در خط تنها برای مواردی باید استفاده شود که بخواهید یک المان (تگ) HTML خاص را به صورت مستقل و بدون وابستگی به سایر تگ ها تغییر شکل و ظاهر دهید.

برای تغییر ظاهر به روش ظاهرسازی در خط از ویژگی style درون المان (تگ) استفاده می شود.

در مثال زیر تگ عنوان به تنهایی با استفاده از ویژگی style تغییر رنگ داده می شود:

مثال

<h1 style=“color:red”>این یک عنوان با رنگ قرمز است</h1>

ظاهرسازی داخلی (Internal CSS)

استفاده از CSS داخلی می تواند باعث ایجاد یک سبک کلی برای تمام المان های داخل صفحه شود و یا به یک الان خاص اشاره کرده و تنها موجب تغییر ظاهر آن تگ شود.

برای نوشتن CSS داخلی از تگ <style> استفاده می کنیم. این تگ را می توان داخل المان <head> سند HTML قرار داد:

ظاهرسازی خارجی (External CSS)

ظاهرسازی به روش خارجی بسیار ایده آل است چون از کدهای CSS بارگذاری شده در تمام صفحات HTML استفاده می شود و نیازی نیست برای هر صفحه و یا برای هر المان از هر صفحه جداگانه ظاهرسازی با نوشتن کدهای تکراری هر بار بازنویسی شود.

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

برای فراخوانی فایل CSS خارجی درون سند HTML از تگ تنهای <link> استفاده می کنیم. این تگ را می توان داخل المان <head> سند HTML قرار داد: