آموزش مقدماتیCSS، جلسه اول

در این قسمت قصد داریم آموزش Css  را به صورت مقدماتی شروع کنیم . تا پایان آموزش همراه ما باشید .

Css  چیست ؟

Css (cascading style shit)  به زبان ساده ، زبانی است که توصیف کنید المان ها یHtml  چگونه در صفحه وب نمایش داده شوند .

چندین روش برای نوشتن css ها وجود دارد :

  • Css های داخلی که داخل تگ style  نوشته می شود (این تگ در header نوشته میشود)
  • بصورت در خط (inline) که توسط صفت style در خود المان نوشته میشود (به آموزش Html مراجعه نمایید)
  • بصورت فایل خارجی

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

قانون کلی نوشتن کدها در Css  به صورت زیر است :

آموزش css

 

که selector ها همان المان های Html هستند و Declaration  ها همان استایل ها .

هر اعلان css  شامل دو بخش ویژگی و نام آن ویژگی است که با سمیکولون (;)  از هم جدا می شوند.

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

هر selector یا انتخابگر شامل نام المان، id ،class، نام صفت های آن باشد.

در مثال  بالا منظور ما از p  کل تگ های <p>  است که داریم و تمام پاراگراف های موجود در صفحه با رنگ قرمز و در وسط صفحه نمایش داده خواهند شد .

انتخاب با id

هر تگ Html میتواند صفتی به نام id  داشته باشد. ما نمیتوانید از یک id  با نام همانند بیش از یکبار استفاده کنیم .

<h2 id=”test”>This is test</h2>
}test#
;Color : green
{

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

انتخاب با class

هر تگ Html  میتواند صفتی با نام classc داشته باشد و میتوان  یک کلاس با یک نام را چندین بار در تگ های دیگر استفاده کرد . در css  کلاس ها با  (.)  تشخیص داده میشوند .

<p class=”test1”></p>

<h3 class=”test1”></h3>

}test1.

;  Background-color : yellow

{

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

نکته مهم : هرگز نام یک Class  و id  را با عدد شروع نمیشود .

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

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 */

, , , , , , ,

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست