آشنایی با ساختار نوشتاری CSS

کدهای css نیز مانند سایر زبان های برنامه نویسی دارای یک ساختار نوشتاری هستند. این ساختارها و قواعد ، توسط مرورگرها تفسیر شده و در نهایت بر روی نمایشگر کاربر نشان داده می شوند.

ساختار کدهای CSS برای استایل دهی به صفحات وب از سه بخش اصلی به شرح زیر تشکیل می شود:

انتخابگر (selector): هر دستور css با یک انتخابگر آغاز می شود. انتخابگر ها مشخص می کنند که دستورات css قرار  است بر کجا اعمال شوند.

ویژگی (property): ویژگی مشخص می کند که قرار است چه ویژگی ای را به سند html اضافه کنید. از ویژگی های css می توان به رنگ نوشته، رنگ زمینه و… اشاره کرد.

مقدار (value): مقدار به ویژگی های css نسبت داده می شود. به عنوان مثال ویژگی رنگ زمینه می تواند مقدار قرمز را بگیرد.

در نهایت ساختار نوشتن کدهای css به صورت زیر است:

selector { property: value; }

به عنوان مثال اگر بخواهیم برای تگ

، در css ، خطوط حاشیه تعریف کنیم به صورت زیر عمل می کنیم:

table{ border :1px solid #C00; }

در مثال بالا table انتخابگر، border ویژگی و 1px solid #C00 مقدار نسبت داده شده به ویژگی border است.

اما انتخابگرها انواع متفاوتی دارند که بسته به شرایط و تصمیم کدنویس می توان از آن ها استفاده کرد. در ادامه به برسی انواع انتخابگرها می پردازیم.

1. انتخابگرهای نوعی  :

این انتخابگرها از همان نوعی هستند که در مثال بالا از آن استفاده کردیم. با استفاده از این انتخابگرها می توانیم تعیین کنیم که به عنوان مثال همه تگ های h1 به رنگ ارغوانی نمایش داده شوند.

h1 {
   color: #36CFFF;
}

2. انتخابگرهای سراسری:

این نوع انتخابگر ها به تمام صفحه html اعمال می شوند. در بعضی مواقع به جای اینکه یک تگ خاص را انتخاب کنیم با استفاده از انتخابگر سراسری * که به معنای همه تگ ها می باشد استایل های مد نظر را به تمامی صفحه وب اعمال می کنیم. به عنوان مثال کد زیر باعث می شود تمامی نوشته ها در صفحه وب مشکی شوند.

آموزش css | کلیک سایت

* {
   color: #000000;
}

3. انتخابگرهای نسلی

فرض کنید که شما می خواهید یک استایل تنها در صورتی به یک تگ اعمال شود که آن تگ داخل یک تگ دیگری قرار داشته باشد در اینصورت باید از انتخابگرهای نسلی استفاده کنید. همانطور که در مثال زیر می بینید استایل تنها در صورتی به تگ اعمال می شود که داخل تگ

قرار گرفته باشد.

ul em {
   color: #000000;
}

4. انتخابگر class

شما همچنین می توانید استایل ها را بر مبنای اتریبیوت class نیز تعریف کنید. به این ترتیب هر تگی که آن کلاس را داشته باشد بر طبق کدهای مربوط به همان کلاس استایل دهی می شود. به عنوان نمونه تکه کد CSS زیر را در نظر بگیرید:

.black {
   color: #000000;
}

کد بالا باعث می شود هر تگی که دارای اتریبیوت

class=”black”

باشد نوشته هایش مشکی شود.

اگر بخواهیم استایل ها را شرطی هم کنیم ، می توانیم. به عنوان مثال اگر بخواهیم کاری کنیم که از بین تگ های h1 تنها آن هایی که دارای کلاس black هستند مشکی شوند مطابق مثال زیر عمل می کنیم.

h1.black {
   color: #000000;
}

همچنین این امکان وجود دارد که تگ ها بیش از یک کلاس اعمال کرد مانند مثال زیر:

   This para will be styled by the classes center and bold.

5. انتخابگر ID

شما می توانید استایل ها را بر مبنای اتریبیوت id نیز تعریف کنید. به این ترتیب برای یک نام id استایل ها را در css وارد کرده و تگی که دارای اتریبیوت id با آن نام باشد، استایل ها بر رویش اعمال خواهند شد. در زیر مثالی زیر این مورد را می بینید:

#black {
   color: #000000;
}

 کد بالا باعث می شود تگی که دارای اتریبیوت id=”black” است رنگ متنش مشکی شود.

انتخابگرهای id را نیز می توان مانند انتخابگر های کلاس به صورت خاص تر و مشروط نوشت که در ادامه نمونه ای از آن را مشاهده می کنید:

h1#black {
   color: #000000;
}

اما قدرت واقعی انتخابگرهای id موقعی نمایان می شود که از آن ها به عنوان مبنای انتخابگرهای نسلی استفاده کنیم. به مثال زیر توجه کنید.

#black h2 {
   color: #000000;
}

این کد باعث می شود همه تگ های h2 که درون تگ با اتریبیوت id=”black” قرار دارند به رنگ مشکی نمایش داده شوند.

6. انتخابگرهای فرزند

پیش تر در آموزش html | کلیک سایت ، انتخابگرهای نسلی به شما معرفی شدند. حالا ، نوع دیگری از انتخابگر ها را به شما معرفی می کنیم که بسیار به انتخابگرهای نسلی شباهت دارند اما یک تفاوت کاربردی با آن ها دارند. به مثال زیر توجه کنید:

body > p {
   color: #000000;
}

تکه کد بالا باعث می شود همه تگ های

به رنگ مشکی نمایش داده شوند به این شرط که فرزند مستقیم تگباشند یعنی مستقیما در داخل تگآمده باشند. اگر در داخل تگیک تگ