جلسه 1: نحو و انتخابگرهای CSS
مجموعه دستورات CSS شامل یک انتخابگر و یک بلوک اعلان هستند. به شکل زیر دقت کنید:
انتخابگر، به عنصری HTML اشاره می کند که می خواهید به آن خاصیتی بدهید.
بلوک اعلان حاوی یک یا چند اعلان است، یک انتخاب گر می تواند چندین خاصیت داشته باشد. این خاصیت ها دارای مقداری هستند که در یک بلوک اعلان یا بین {کروشه باز و بسته} قرار می گیرند و با سیمی کالن (;) از همدیگر جدا می شوند.
در مثال زیر تگ <P> یک انتخاب گر، color و text-align خاصیت هایی هستند که میخواهیم به این انتخاب گر نسبت دهیم، red و center نیز مقادیری هستند که این خاصیت ها به خود می گیرند.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>مثبت 1</p>
<p>دنیای علم و فناوری</p>
</body>
</html>
نتیجه دستورات فوق مقادیر زیر است. همانطور که میبینید ما به انتخاب گر <p> دو خاصیت نسبت داده ایم. خاصیت اول یعنی color با مقدار red; رنگ متن را به قرمز تغییر می دهد و خاصیت دوم یعنی text-align با مقدار center; متن را در مرکز قرار می دهد.
مثبت 1
دنیای علم و فناوری
انتخابگرهای CSS برای انتخاب عناصر HTML بر اساس نام عنصر،id یا شناسه، کلاس، صفت و غیره استفاده می شوند.
انتخاب عناصر HTML بر اساس نام عنصر
برای انتخاب عناصر HTML مورد نظر و دادن خاصیت به آن، شما می توانید از نام عنصر استفاده کنید همانند مثال فوق که از نام آن انتخاب گر یعنی تگ <P> استفاده کردیم.
انتخاب عناصر HTML بر اساس id یا شناسه
شما همچنین می توانید برای انتخاب عناصر HTML از id یا شناسه استفاده کنید.
شناسه برای انتخاب یک عنصر منحصر به فرد استفاده می شود، این موضوع رو مد نظر داشته باشید که id فقط برای یک عنصر استفاده می شود و نمی شود از یک نام id برای چند عنصر HTML استفاده کرد. id منحصر به فرد و برای یک عنصر است.
برای دادن شناسه به یک عنصر HTML کافیست از id استفاده کنید. بدین صورت: “id=”demo
برای دادن خاصیت به عنصر با شناسه مورد نظر در CSS، کافیست در ابتدای نام شناسه از شارپ(#) استفاده کنید.
بدین صورت: demo#
برای این که انتخاب عناصر HTML رو بر اساس شناسه و id به خوبی درک کنید به مثال زیر دقت کنید:
<!DOCTYPE html>
<html>
<head>
<style>
#text1{
color: red;
text-align: center;
}
#text2{
text-align: center;
}
</style>
</head>
<body>
<p id="text1">مثبت 1</p>
<p id="text2">دنیای علم و فناوری</p>
</body>
</html>
نتیجه به صورت زیر است:
همانطور که می بینید ما فقط به محتوای تگ <p> با شناسه “text1” که متن “مثبت 1” می باشد خاصیت رنگ با مقدار “قرمز” نسبت داده ایم.
مثبت 1
دنیای علم و فناوری
انتخاب عناصر HTML بر اساس کلاس
برخلاف قوانینی که برای id وجود دارد، برای کلاس، این قوانین وجود ندارند و شما می توانید از یک نام کلاس برای چندین عنصر HTML استفاده کنید و استایل دلخواهتون رو به همه ی آنها نسبت دهید.
برای دادن یک کلاس به یک عنصر HTML کافیه از class استفاده کنید. بدین صورت: “class=”demo
همچنین برای دادن خاصیت به عنصر یا عناصر با کلاس مورد نظر در CSS، کافیست در ابتدای نام کلاس از نقطه(.) استفاده کنید.
بدین صورت: demo.
به مثال زیر توجه کنید:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="text">مثبت 1</h1>
<p class="text">دنیای علم و فناوری</p>
</body>
</html>
نتیجه به صورت زیر است:
مثبت 1
دنیای علم و فناوری
در دستورات CSS ممکن است شما زمانی نیاز داشته باشید تا خواص یکسانی را به گروهی از عناصر HTML اختصاص دهید، برای اینکار نیاز نیست شما یک یه یک عناصر را بنویسید و به آنها خاصیت بدهید، فقط کافیست عناصر را با استفاده از کاما “،” کنار هم بنویسید و به همه ی آنها در یک بلوک اعلان، خاصیت بدهید.
به مثال زیر توجه کنید تا این مطلب رو به خوبی درک کنید:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>مثبت 1</h1>
<h2>دنیای علم و فناوری</h2>
<p>آموزش نحو ها در سی اس اس</p>
</body>
</html>
نتیجه بصورت زیر است:
مثبت 1
دنیای علم و فناوری
آموزش نحوها در css
نوشتن توضیحات در CSS
گاهی شما نیاز دارید در قسمتی از دستورات خود توضیحاتی رو وارد کنید، تا بعدا در هنگام ویرایش کدها به راحتی به کد مد نظرتون برسید.
در ج توضیحات در CSS با /* شروع می شود و با */ به پایان می رسد. کامنت ها توسط مرورگر ها و کامپایلرها نادیده گرفته می شوند.
همانطور که در مثال زیر می بینید، بایستی به نحو زیر توضیحات رو به دستورات CSS اضافه کنید. این توضیحات در خروجی نمایش داده نخواهند شد.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
/* توضیحات تک خطی */
color: red;
}
/* توضیحات
چند
خطی*/
</style>
</head>
<body>
<h1>مثبت 1</h1>
<h2>دنیای علم و فناوری</h2>
<p>آموزش نحو ها در سی اس اس</p>
</body>
</html>
