جلسه سوم-نحوه نگارشcss

نحوه نگارشcss  و انتخابگرها (selectors):

هر کد css شامل یک انتخابگر و یک بلاک اعلان می باشد.

css

 

انتخابگرها شامل عنصر htmlای هستند که میخواهید به آن استایل دهید.

بلاک اعلان شامل یک یا چند تعریف می باشند که با سمی کالن از هم جدا شده اند.

هر تعریف درcss  شامل نام مشخصه و مقدار آن می باشد که با علامت : از هم جدا می شوند.

تعریف کدهای css همیشه با علامت ; پایان می یابد و بلوک های اعلان شده توسط آکولاد احاطه شده است.

در مثال زیر تمام تگ های <p>  در مرکز صفحه و به رنگ قرمز نمایش داده خواهند شد.

 اجرای مثال

CSS Selectors

انتخابگرهای CSS استفاده می شود برای پیدا کردن یا) انتخاب( عناصر  HTML  بر اساس نام عنصر، شناسه، کلاس، ویژگی خود، و

بیشتر.

 

انتخاب عناصر بر اساس نام عنصر

شما می توانید تمام عناصر <p> در در یک صفحه مانند این را انتخاب کنید (در این مورد، تمام تگ های <p>  در مرکز صفحه و به رنگ قرمز نمایش داده خواهند شد.)

اجرای مثال

 

 

انتخابگر Id :

انتخاب ID با استفاده از ویژگی id یک عنصر HTML  جهت انتخاب یک عنصر خاص مورد استفاده قرار می گیرد.

Id  یک عنصر باید به صورت منحصر به فرد در صفحه باشد بنابراین انتخابگرid برای انتخاب یک عنصر منحصر به فرد استفاده می شود.

برای انتخاب یک عنصر با id  مشخص کاراکتر # را نوشته سپس نام عنصر را قرار دهید.

مثال زیر بر روی عنصر با id = para1تاثیر میگذارد.

 اجرای مثال

نکته:id  نمی تواند با اعداد شروع شود.

انتخابگر class :

انتخابگر کلاس عناصر با ویژگی کلاس خاص  راانتخاب می نماید.

برای انتخاب عناصر با یک کلاس خاص ابتدا علامت . و سپس نام کلاس را قرار دهید.

در مثال زیر کلیه عناصر html با کلاس center  در وسط صفحه و به رنگ قرمز نمایش داده خواهند شد.

 اجرای مثال

شما می توانید تنها عناصرHTML  خاص موجود در کلاس را انتخاب نمایید

در مثال زیر تمام تگ های <p> موجود در کلاس center در وسط صفحه و به رنگ قرمز نمایش داده خواهند شد

 اجرای مثال

عناصرhtml  می توانند به بیش از یک کلاس اشاره نمایند.

در مثال زیر تگهای <p> هم از کلاس center استایل می پذیرد و هم از کلاس large

 اجرای مثال

 

نکته:نام کلاسها نمی توانند با اعداد شروع شوند.

گروه بندی انتخابگرها:

اگر شما عناصر html با استایل های مشابه مانند مثال زیر دارید:

بهتر است کدها را کوتاه کرده و از گروه بندی انتخابگرها استفاده نماییم و انتخابگرها را توسط کاما از هم جدا نماییم

 اجرای مثال

توضیحات در css :

توضیحات توسط مرور گرها خوانده نمی شوند و و به شما کمک می نماید در مراجعات بعدی کدها را ویرایش نمایید

توضیحات در css با علامت /* شروع و با علامت*/ به پایان می رسد

 اجرای مثال




پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code