در این پست قصد داریم در مورد شیوه های مختلف استفاده از CSS در درون صفحات HTML صحبت کنیم .
به طور کلی به ۳ شکل می تونید از CSS برای تعیین شیوه نمایش تگها ، در میان کدهای HTML استفاده کنید :
۱- استفاده از CSS در درون تگها (inline CSS)
۲- نوشتن تمامی تنظیمات CSS درون تگ Style در header صفحه اچ تی ام ال
۳-نوشتن سلکتورهای CSS در فایل جداگانه و الصاق آن به صفحه HTML
1- استفاده از CSS در درون تگها (inline CSS) :
شما می تونید تنظیمات و ویژگی های CSS رو در درون هر کدوم از
تگ های Html بیارید تا اون تنظیمات روی تگ مربوطه اعمال بشه . برای اینکار
باید ویژگی های CSS مورد نظر رو که می خواید روی تگ خاصی اعمال بشه درون
ویژگی style اون تگ بیارید .
ویژگی Style برای همه تگ های Html قابل تعریفه و به عنوان مقدار ، در درون خود میتونه چندین تا از ویژگی های CSS رو که با علامت ; از هم جدا شدند بیاره !
برای درک بیشتر از چگونگی استفاده CSS در درون تگها ، چند تا مثال براتون میارم :
● مثال ۱) فرض کنید می خواید فقط یکی از پاراگراف های توی صفحتون رنگ متنش قرمز بشه .
- تگ داشتن یک پاراگراف معمولی به شکل زیره :
حالا ما می خوایم با استفاده از CSS درون این تگ ، رنگ متنشو قرمز کنیم . در این صورت کد پاراگراف بالا به شکل زیر باید تغیر پیدا کنه .
می بینید که فقط ویژگی style به این تگ اضافه شده و به عنوان مقدار یکی از ویژگیهای CSS که رنگ متنو مشخص می کنه آورده شده !
● مثال ۲) همون پاراگراف بالا رو می خوایم نوع فونتش رو Tahoma و اندازه فونت رو ۱۶ پیکسل کنیم . کدش مثل زیر میشه :
ملاحظه می کنید که همه ی تنظیمات CSS مورد نظر رو درون خود تگ و به
عنوان مقدار ویژگی style میاریم . استفاده ی به این شکل خیلی کار درستی
نیست . مگر اینکه فقط در تگ خاصی بخواید تنظیمات رو اعمال کنید و این
تنظیمات در تگهای دیگه به اشتراک گذاشته نشده باشن .
:: صفحه html ی که شامل دو پاراگراف فوق باشه به شکل زیر میشه :