شیوه نوشتن به زبان CSS

 

یک مجموعه دستوری CSS حاوی یک انتخاب کننده ( Selector ) و یک بلاک اعلان می باشد.

شیوه نگارش به زبان CSS

 

قسمت selector به عنصر HTML ی اشاره می کند که شما می خواهید به آن سبک و استایل دهید.

قسمت بعدی که به بلاک اعلان ( Declaration Block ) مشهور است و در بین { } قرار دارد، حاوی یک یا چند اعلان CSS می باشد که هر کدام از این اعلان ها توسط سمیکالن ( ; ) از هم جدا می شوند.

هر کدام از اعلان ها حاوی نام یک خاصیت CSS و یک مقدار برای آن خاصیت هستند، که نام و مقدار بوسیله علامت کالن ( : ) یا دونقطه از یکدیگر جدا می شوند.

یک اعلان CSS همیشه بوسیله نماد سمیکالن ( ; ) به پایان می رسد و بلاک های اعلان نیز به وسیله { } در بر گرفته می شوند.

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

 

p {

    color: blue;

    text-align: center;

    border: 2px solid black;

}

انتخاب کننده های CSS یا CSS Selectors

 

انتخاب کننده های CSS برای پیدا کردن ( یا انتخاب کردن ) عناصر HTML موجود در صفحه وب بکار می روند که این پیدا کردن میتواند بر اساس نام آن عناصر، یا شناسه ID آن ها و یا شناسه Class آن ها یا مکانشان نسبت به عناصر دیگر در صفحه وب و سایر خصوصیات باشد .

 

انتخاب کننده عنصر

 

انتخاب کننده عنصر، عنصری که نام موردنظر را دارد، انتخاب می کند.

شما می توانید تمام عناصر <p> صفحه وب را مانند زیر انتخاب کرده و به آن ها استایل دلخواه بدهید.

p {
    text-align: center;
    color: red;
}

انتخاب کننده شناسه id

 

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

شناسه id یک شناسه یکتاست و به هر عنصر در صفحه وب می توان یک id منحصر به فرد داد و نمی توان از یک id برای دو یا چند عنصر استفاده کرد .

بنابراین انتخاب کننده id فقط بر اولین عنصری در صفحه وب که شناسه id موردنظر را داشته باشد تاثیر می گذارد.

برای انتخاب کردن یک عنصر با استفاده از id آن باید یک کاراکتر هش ( # ) در ابتدای نام id آورده شود.

استایل زیر عنصری که شناسه id آن برابر با mypara است ( "id="mypara) را انتخاب می کند و استایل را روی آن اجرا می کند.


#mypara {
    text-align: center;
    color: red;
}

توجه : نام id نمیتواند با عدد شروع شود. برای مثال آی دی 7day مجاز نیست.

 

انتخاب کننده شناسه class

 

انتخاب کننده class ( کلاس )، عنصر یا عناصر با کلاس موردنظر را پیدا می کند و استایل را روی آن(ها) اجرا می کند.

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

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

در مثال پایین تمام عناصری که شناسه کلاس آن ها information می باشد ( "class="information ) به رنگ سبز در می آیند و دارای قاب خواهند بود و اندازه فونتشان 20 پیکسل خواهد بود.

 

.information {

    color: green;

    border: 2px dashed red;

    font-size: 20px;

}

شما همچنین میتوانید تعیین کنید که استایل موردنظر فقط روی عنصری خاص که دارای کلاس موردنظر است اعمال شود.

در مثال زیر، استایل موردنظر فقط روی عناصر <p> که دارای کلاس information هستند اعمال می شود.

 

p.information {

    color: green;

    border: 2px dashed red;

    font-size: 20px;

}

 

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

در مثال پایین، عنصر <p> هم بوسیله کلاس center و بوسیله کلاس large استایل دهی می شود.

 

<p class="center large">This paragraph refers to two classes.</p>
توجه : نام کلاس نمی تواند با عدد شروع شود، یعنی برای مثال 24hours غلط است.
انتخاب کننده های گروهی

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

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}
بهتر است تا به صورت گروهی آن استایل را بر آن ها اعمال کنید تا حجم کدتان کمتر شود .
برای گروه بندی انتخاب کننده ها، هر انتخاب کننده را بوسیله کاما ( , ) از هم جدا کنید.
در مثال پایین کد بالا به صورت گروه بندی شده نوشته شده است :
h1, h2, p {
    text-align: center;
    color: red;
}
کامنت ها در CSS

کامنت ها برای شرح داد کد استفاده میشوند و مانند یک توضیح در لابه لای کدها آورده میشوند و هیچ تاثیری بر خود کد ندارند و مفسر CSS  ( مرورگر ) آن ها را نادیده می گیرد. کامنت ها برای این استفاده می شوند تا اگر بعدا نیاز به تصحیح کد شد، بتوان بر اساس آن کامنت فهمید که کد موردنظر چه استفاده ای دارد .
پیشنهاد می شود همیشه از کامنت ها استفاده کنید.
کامنت ها در CSS بوسیله */ شروع شده و بوسیله /* به پایان می رسند. هر چیزی که ما بین این دو علامت بیاید توسط مرورگر نادیده گرفته خواهد شد.
کامنت ها در CSS میتوانند تک خطی یا چند خطی باشند .
مثال :
p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */


اطلاعات مطلب
نویسنده :

admin

❤️ امتیازات این مطلب : 65
تعداد بازدید : 3
ارسال شده در تاریخ سه شنبه 17 مهر 1397 و ساعت 21:4
دسترسی بیشتر (ابزارهای مطلب)
نوع فونت متن :
اندازه فونت متن : (اندازه متن)
رنگ متن : (مقدار هگزادسیمال رنگ)

لینک این مطلب را در سایت خود قرار دهید :
تعداد حروف بکار رفته در متن :
اشتراک گذاری :