آموزش مقدماتی CSS

CSS چیست؟

CSS مخفف (Cascading Style Sheets) که معادل آن در زبان فارسی شیوه نامه آبشاری گفته می شود. آموزش CSS به زبان ساده واستفاده از آن این امکان را به ما میدھد که بتوانیم با نوشتن یک سری دستورات نظم عمومی به کل سند HTML خود بدهیم و بدون استفاده از جداول ، عناصر را دقیقا در جایی که می خواھیم قرار دھیم.

ساختار CSS :

در ساختار دستورات CSS ، یک دستور شامل یک انتخاب و یک بلوک اعلان می باشد:

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

انتخابگرهای  CSS:

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

المان های(عناصر) انتخاب کننده :

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

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

انتخاب شناسه در CSS:

روش دیگری که برای تعریف استایل وجود دارد استفاده از id است. در هرصفحه نباید بیش از یک بار از هر ID استفاده شود. اگر بیش از یک بار از یک  id استفاده شود کارایی صفحه تغییری نمی کند ولی صفحه اعتبار خود را از دست می دهد. سلکتور id با علامت # مشخص می شود.

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

انتخاب کلاس در CSS :

انتخاب  کننده  کلاس ،المان هایی  با ویژگی کلاس خاص انتخاب می کند . برای انتخاب المان هایی با یک کلاس خاص، باید از نقطه (.) در ادامه نام آن کلاس استفاده کرد. در مثال زیر، همه عناصر HTML با کلاس  ” center ” به رنگ قرمز و تراز وسط قرار بود:

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

در آموزش CSS به زبان ساده به شما می آموزیم که چگونه  می توانید مشخص کنید یک المان خاص HTML از یک کلاس خاص تاثیر بپذیرد. مانند مثال زیر:

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

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

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

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 :

کامنت ها برای توضیح کد استفاده می شود و می تواند به شما در زمان ویرایش کدها کمک کند. برای مثال به شما کمک می کند که تاریخ آخرین ویرایش خود را بدانید. توضیحات با / * را شروع می شود و با * / پایان می رسد.

p {
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is
a multi-line
comment */

منبع : www.w3schools.com