آموزش CSS

آموزش id و class در css

آموزشی که امروز برای شما انتخاب کرده ایم ، آموزش آموزش id و class در css می باشد که قصد داریم آن را به شما آموزش دهیم.

id و  class  یکی از بخش های حیاتی و مهم در کلاس آموزش طراحی سایت می باشد که همواره پیرامون آن صحبت می کنیم و نقش بسیار حیاتی در طراحی سایت ایفا می کنند ، از این رو با ما و آموزش id و class در css  در آموزشگاه کامپیوتر پرتو همراه باشید

Css روشی است برای قالب بندی وطراحی اجزای صفحه از قبیل متن ،تصویر ،کادرها و تقریبا هر چیزی که در طراحی صفحه استفاده شده است .css  کمک می کند که بدون استفاده از کدهای html  بتوانیم ظاهر صفحات ایجاد شده را طراحی کنیم . همچنین استفاده از css  کمک می کنه که از تکرار دستورات html  که موجب کند شدن load  صفحه می شود جلوگیری نماییم .امکان دیگری این است که می توانیم با استفاده از یک فایل css  خارجی ظاهر چند صفحه را با آن طراحی کنیم .این موضوع باعث می شود که اولا تنها از یک فایل برای ظاهر چند صفحه استفاده شود و ثانیا این صفحات دارای style  یکسانی باشند .

استفاده از فایل css  خارجی باعث نمی شوند که امکان تغییر در این style  از بین برود .بلکه می توانیم ظاهر تمام صفحات را با یک تغییر کوچک در فایل css خارجی ،تغییر دهیم.

 

طریقه نوشتن کدهای css :

 

هر دستور css شامل 3 قسمت می شود : selector , property , value

 

H1 {

این دستور بیان می کند که متن نوشته شده توسط کلیه تگ های h1 ،به رنگ آبی در بیاید.           Color :blue

}

اکثر تگ های html  شامل 2 شناسه class  و id  می باشند .

 

Class = “ “                  ,       id = “ “

 

برای مثال فرض کنید می خواهیم در یک صفحه 2 نوع پاراگراف داشته باشیم ،یکی به رنگ مشکی و دیگری به رنگ قرمز .برای مشخص کردن این 2 نوع پاراگراف می توانیم از شناسه class  استفاده کنیم .

 

<p            class = “ black “ > this is a text </p> :           html کد

  1. black { : css کد

color = black

}

ما می توانیم بیش از یک class  برای تگ  html  تعریف کنیم .اما برای این کار نباید از 2 بار شناسه  class  استفاده کرد ،بلکه باید در یک شناسه class نام دو کلاس مورد نظر را با یک فاصله بیان کنیم .

: مثال

<p         class = “ red   center “ >  test  </p>

 

در نوشتن style  می توان از نوشتن نام تگ در selector  کلاس چشم پوشی کرد .در این صورت ویژگی های تعریف شده در آن کلاس بر هر تگ html که از class مربوطه در شناسه class آن استفاده شده باشد ،اثر می گذارد.

 

 

: مثال

 

.    center {

Text – align : center

 

اکنون برای هر تگی که احتیاج به این ویژگی داشته باشد ،می توانیم از این کلاس استفاده کنیم .

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

 

<p         class = “ center “ > this is a test </p>

<div      class = “ center “ > this is a test </div>

 

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

: مثال

. test {

             Border : double

           }

در زمان نمایش link  داخل تگ div به رنگ سبز می باشد و                    . test   a {

لینک بیرونی به رنگ آبی ،این موضوع به خاطر این است که    color : green

تگ a اول تحت تاثیر کلاس test  در تگ div می باشد. }

<div         class = “ test “ >

<a             href = “ # “ > link </a> </div>

<a             href = “ # “ > link </a>

 

 

بهترین کلاس آموزش html و css به شما به صورت حرفه ای این مهارت ها را به شما آموزش می دهد.

 

مقاله
آموزش id  و class در css
نام مقاله
آموزش id و class در css
خلاصه
آموزش id و class در css عنوان آموزش امروز آموزشگاه کامپیوتر پرتو می باشد.
نویسنده
منتشر کننده
آموزشگاه کامپیوتر پرتو
لوگو
0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید ؟
در گفتگو ها شرکت کنید!

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

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