آموزش 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 کد
- 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 به شما به صورت حرفه ای این مهارت ها را به شما آموزش می دهد.
دیدگاه خود را ثبت کنید
تمایل دارید در گفتگوها شرکت کنید ؟در گفتگو ها شرکت کنید!