آموزش CSS

آموزش CSS

  • آموزش CSS

  • آموزش ساختار id در CSS

  •   آموزش ساختار 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>

 

 

دانلود “آموزش CSS” %D8%A2%D9%85%D9%88%D8%B2%D8%B4-CSS.pdf – Downloaded 27 times –

 

0 پاسخ ها

سوال خود را مطرح نمایید

در صورت تمایل در بحث شرکت کنید
در صورت تمایل از راهنمایی رایگان ما استفاده کنید!!

پاسخ دهید

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