آموزش CSS - قسمت 2

در جلسه قبل با کلیت CSS  آشنا شدیم ، در این قسمت به چگونگی نوشتن کدهای CSS  می پردازیم و ساختار کدهای CSS را مورد بررسی قرار می دهیم.

در ساختار همه کدهای CSS  ، سه قسمت وجود دارد که عبارتند از :  a selector, a property and a value

که به این شکل نوشته می شود :

selector {property:value}

در قسمت selector عناصر یا همان Element  های HTML  قرار می گیرد ، یادتونه که همه Element  های HTML  با تگ شروع می شدند.

در قسمت property ، آن مشخصه ای قرار می گیرد که شما می خواهید آن را تغییر دهید ، شاید بپرسید خوب چه صفاتی را می شود تغییر داد ؟

کلا هر مشخصه (Attribute) که بتواند مقدار بگیرد ، قابل تغییر است .

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

p
{
text-align:center;
color:black;
font-family:arial
}

خوب ما اومدیم و برای تگ پاراگرافمون نحوه چینش ، رنگ و نوع فونت آن را مشخص کردیم .

همچنین می توانیم  برای چندین تگ یک دسته مشخصه تعریف کنیم :

h1,h2,h3,h4,h5,h6
{
color:green
}

با این تعریف همه تگ هایی که ما برای Header ها استفاده می کنیم ، رنگشان سبز می شود.

و اما قسمت اصلی CSS و پرکاربردترین قسمت آن ، یعنی Class

The class Selector

در کدهای CSS ما می توانیم هر چند کلاس که نیاز داریم تعریف کنیم و در مواقع نیاز از آن ها ، با صدا زدن آن ها استفاده کنیم.

با کلاس ما می توانیم برای Element های یکسان ، مشخصه های مختلف تعریف کنیم.

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

p.right {text-align:right}
p.center {text-align:center}

نحوه تعریف کلاس  ؟

چگونه یک کلاس تعریف کنیم ؟

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

مثلا من می خواهم یک کلاس به نام  anticom  درست کنم  و برای آن مشخصه های زیر را قرار بدم :

1-       نوع فونت

2-       پهنای آن

3-       رنگ پس زمینه آن

4-       نحوه چینش

anticom.

{

background-color: #000000;

font-family: tahoma;

width: 200px;

;text-align: center

{

 در قسمت بالا دو کلاس را برای پاراگراف هامون تعریف کردیم ،

حالا به چه شکلی از کلاس هایی که تعریف کردیم ، استفاده کنیم ؟

برای استفاده فقط کافیه در قسمت هایی از کدمون که به آن کلاس نیاز داریم  ، آن را به روش زیر صدا بزنیم :

<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>

دیدید به همین راحتی ، فقط در داخل تگ <p> عبارت :  class=” “  را قرار می دهیم و در بین علامت نقل قول نام کلاس مورد نظرمون را قرار می دهیم .

یه سوال ..!!

به نظر شما ، می تونیم از کلاس p.right  یا کلاس p.center  در تگی به  غیر از تگ <p> استفاده کنیم ؟

در جواب باید بگم ، نه .... نمی تونیم

چون در حقیقت ما یک زیر کلاس تعریف کردیم و نه یک کلاس مستقل ، به این صورت که مابرای نام گذاری کلاسمون ابتدا P قرار دادیم و بعد نام کلاسمون را نوشتیم .

با این کار عملا ما این کلاس را فقط به پاراگراف محدود کردیم .

ولی به مثال زیر توجه کنید :

.center {text-align:center}

 این کلاس دیگر یک زیر کلاس نیست و محدود به تگ  خاص یا کلاس خاص دیگری نیست و کاملا مستقل است .

و ما می توانیم از آن در هر قسمت و تگی که نیاز دازیم استفاده کنیم .

به این صورت :

<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>

همین طور که می بینید ما از کلاس center  هم در تگ <p> و هم در تگ <h1> استفاده کردیم .

با ما باشید .................... همه با هم ، برای هم