آموزشگاه پایگاه دانش شبکه برنامه نویسی گرافیک لینوکس ویندوز آفیس
به دوره آموزش CSS خوش آمدید
کارآموزان عزیز سلام
در دوره آموزشی CSS ، چگونگی تغییر سبک و ظاهر صفحه های وب را یاد خواهیم گرفت. CSS مکمل زبان HTML در طراحی صفحات وب میباشد و برای پوشش برخی کمبود های زبان HTML بوجود آمده است.
لازم به یادآوری است برای آموزش زبان CSS ، آشنایی اولیه با زبان HTML مورد نیاز است. برای این منظور درصورتی که با این زبان آشنا نیستید ، میتوانید به بخش آموزش HTML در سایت پایگاه دانش در لینک زیر مراجعه نمایید.
http://www.itdanesh.com/category/html
CSS مخفف واژه Cascading Style Sheets و به معنی “الگوهای آبشاری” است.
cascading به ویژگی CSS درخصوص اعمال یک استایل بر روی استایل دیگر در ظاهر صفحه وب اشاره دارد و منظور از Style Sheets ، کنترل ظاهر و حالت سند HTML است.
همانطور که اشاره شد، HTML و CSS دست در دست هم یک صفحه وب را بوجود می آورند. HTML ساختار صفحه وب را ایجاد میکند و CSS نحوه نمایش عناصر HTML را تعریف میکند.
CSS به شما اجازه میدهد تا بتوانید استایل های مورد نظرتان را بر روی عناصر صفحات وب اعمال نمایید.
اصلی ترین ویژگی CSS آن است که به شما اجازه میدهد تا محتوی وب را از تنظیمات ظاهری جدا نمایید و این ویژگی کمک زیادی به طراحی حرفه ای تر صفحات وب می نماید. استفاده به تنهایی از HTML در ایجاد صفحات وب توسعه آنها را بسیار سخت خواهد کرد.
روشهای پیاده سازی
InLine CSS: در این روش یک استایل منحصر به فرد بر روی یک عنصر از صفحه اعمال میگردد. در این روش مشخصات ظاهری عنصر مورد نظر بعنوان ویژگی style ثبت میگردد.
مثال زیر نحوه پیاده سازی یک پاراگراف با بکگراند خاکستری و متن سفید نمایش میدهد.
|
1 2 3 |
<p style="color:white; background-color:gray;"> This is an example of inline styling. </p> |
Embedded/Internal CSS: در این روش خاصیت های مورد نظر درون تگ style و در قسمت head سند HTML نوشته می شود. در این روش خاصیت های تعریف شده بر روی تمام عناصر مورد نظر ما اعمال میگردد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <style> p { color:white; background-color:gray; } </style> </head> <body> <p>This is my first paragraph. </p> <p>This is my second paragraph. </p> </body> </html> |
External CSS: با استفاده از این روش ، تمام دستورات زبان CSS ، درون یک فایل متنی با پسوند css. ذخیره میشود. سپس این فایل CSS با استفاده از تگ link به فایل HTML متصل میشود. تگ link درون قسمت head قرار داده می شود.
به مثال زیر دقت کنید.
محتوای فایل HTML
|
1 2 3 4 5 6 7 8 |
<head> <link rel="stylesheet" href="example.css"> </head> <body> <p>This is my first paragraph.</p> <p>This is my second paragraph. </p> <p>This is my third paragraph. </p> </body> |
محتوای فایل CSS
|
1 2 3 4 |
p { color:white; background-color:gray; } |
در بخش بعد با selector, property و value آشنا خواهید شد
با ما همراه باشید
لطفا سوالات خود را از طریق لینک زیر در انجمن سایت آموزشگاه پایگاه دانش از ما بپرسید
