آموزش طراحی سایت : این جلسه :ساختار نوشتاری در CSS

• ضمن عرض سلام و احترام خدمت تمامی کاربران فروم محبوب راسخون،

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

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

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

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

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

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

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

selector { property: value; }

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

table{ border :1px solid #C00; }

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

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

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

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

h1 {
   color: #36CFFF; 
}

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

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

* { 
   color: #000000; 
}

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

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

ul em {
   color: #000000; 
}

4. انتخابگر class

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

.black {
   color: #000000; 
}

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

class="black"

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

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

h1.black {
   color: #000000; 
}

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

<p class="center bold">
   This para will be styled by the classes center and bold.
</p>

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. انتخابگرهای فرزند

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

body > p {
   color: #000000; 
}

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

7. انتخابگرهای اتریبیوت

روش دیگری که با استفاده از آن می توان تگ های html را از درون فایل css استایل دهی کرد استفاده از اتریبیوت هاست. به عنوان مثال کد زیر باعث می شود همه تگ های <input> که اتریبیوت type آن ها برابر با text است مشکی شوند.

input[type = "text"]{
   color: #000000; 
}

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

• p[lang]
• همه پاراگراف های با اتریبیوت lang را هدف قرار می دهد.
• p[lang="fr"]
• همه پاراگراف های با اتریبیوت lang="fr" را هدف قرار می دهد.
• p[lang~="fr"]
• همه پاراگراف هایی که اتریبیوت  lang آن ها شامل کلمه fr می شود را هدف قرار می دهد.
• p[lang|="en"]
• همه پاراگراف هایی را هدف قرار می دهد که مقدار اتریبیوت lang آن ها یا دقیقا برابر با en است یا اینکه با en شروع می شود.

استفاده از چند دستور CSS :

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

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

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