در مطلب گذشته ی آموزش CSS ، به قواعد نحوی و Syntax این زبون پرداختیم که می تونید اون مطلب رو از اینجا مطالعه کنید . پیشنهاد می کنم قبل از خوندن این مطلب حتما این مقاله رو بخونید .
در این پست قصد داریم در مورد شیوه های مختلف استفاده از CSS در درون صفحات HTML صحبت کنیم .
به طور کلی به ۳ شکل می تونید از CSS برای تعیین شیوه نمایش تگها ، در میان کدهای HTML استفاده کنید :
1- استفاده از CSS در درون تگها (inline CSS)
2- نوشتن تمامی تنظیمات CSS درون تگ Style در header صفحه اچ تی ام ال
3- نوشتن سلکتورهای CSS در فایل جداگانه و الصاق آن به صفحه HTML
1- استفاده از CSS در درون تگها (inline CSS) :
شما
می تونید تنظیمات و ویژگی های CSS رو در درون هر کدوم از تگ های Html
بیارید تا اون تنظیمات روی تگ مربوطه اعمال بشه . برای اینکار باید ویژگی
های CSS مورد نظر رو که می خواید روی تگ خاصی اعمال بشه درون ویژگی style
اون تگ بیارید .
ویژگی Style برای همه تگ های Html قابل تعریفه و به عنوان مقدار ، در درون خود میتونه چندین تا از ویژگی های CSS رو که با علامت ; از هم جدا شدند بیاره !
برای درک بیشتر از چگونگی استفاده CSS در درون تگها ، چند تا مثال براتون میارم :
● مثال ۱) فرض کنید می خواید فقط یکی از پاراگراف های توی صفحتون رنگ متنش قرمز بشه .
- تگ داشتن یک پاراگراف معمولی به شکل زیره :
حالا
ما می خوایم با استفاده از CSS درون این تگ ، رنگ متنشو قرمز کنیم . در
این صورت کد پاراگراف بالا به شکل زیر باید تغیر پیدا کنه .
style="color:red" >7Learn.com
می بینید که فقط ویژگی style به این تگ اضافه شده و به عنوان مقدار یکی از ویژگیهای CSS که رنگ متنو مشخص می کنه آورده شده ! ● مثال ۲) همون پاراگراف بالا رو می خوایم نوع فونتش رو Tahoma و اندازه فونت رو ۱۶ پیکسل کنیم . کدش مثل زیر میشه :
style="font-face:tahoma;font-size:12px;">7Learn.com
ملاحظه می کنید که همه ی تنظیمات CSS مورد نظر رو درون خود تگ و به عنوان مقدار ویژگی style
میاریم . استفاده ی به این شکل خیلی کار درستی نیست . مگر اینکه فقط در تگ
خاصی بخواید تنظیمات رو اعمال کنید و این تنظیمات در تگهای دیگه به اشتراک
گذاشته نشده باشن . اگه بخواید همه ی مواقع از این شیوه استفاده کنید
بسیاری از مزایای CSS رو که در این مقاله گفته بودیم از دست خواهید داد !
:: صفحه html ی که شامل دو پاراگراف فوق باشه به شکل زیر میشه :
7Learn.com Css Learning
style="color:red" >7Learn.com
style="font-face:tahoma;font-size:12px;">7Learn.com
برای خوندن بقیه مقاله و دریافت ورژن PDF اون به ادامه مطلب مراجعه کنید :
