آموزش CSS | مقدماتی | جلسه سوم

 

سلامی سه باره! امروز جلسه سوم آموزش سی اس اس رو آغاز میکنیم. در این جلسه کد نویس در این زبان را شروع میکنیم.

امیدوارم برنامه ای که در جلسه ی قبل توصیه کردم را نصب کرده باشید. (Macromedia Dreamweaver 8) امروز بخش های و تگهای مختلفی را تعریف و برای اونها در فایل سی اس اس ویژگی هایی تعریف میکنیم.


برنامه ی ماکرو مدیا دریم ویور (Macromedia Dreamweaver) و یا نوت پد (notePad) را باز کنید و فایل style.css را باز کنید.


نکته: کد نویسی را در نوت پد کار میکنیم، چرا که ممکن است برخی دوستان با سایر برنامه ها مانند Macromedia Dreamweaver آشنایی نداشته باشند. در صورتی که از این برنامه و نظایر آن استفاده کنید، چنانچه خطایی از نظر املائی هم داشته باشید به شما کمک میکند تا متوجه آن شده و آنم را اصلاح کنید.


آغاز کار و باز کردن فایل style.css - اینگونه:

برنامه را باز کرده و از منوی File و گزینه ی Open فایل style.css که قبلا آن را ذخیره کرده ایم را باز میکنیم.

باید نوع فایل ( Files of type ) را به All Files تغییر دهیم. چرا که فایل style با پسوندِ CSS ذخیره شده است.

ابتدا در یک فایل مجزا شروع به طراحی صفحه وب سایتمان میکنیم. یادآوری: صفحه سایتتان را با پسوندِ HTML ذخیره کنید. همزمان با آن کلاس های سی اس اسِ آن را نیز تعریف خواهیم کرد.

محتویات صفحه سایتمان Index.html:

ابتدا در صفحه ی HTML (منظور همان صفحه ی سایتمان است که ازین به بعد آن را با نام index.html میخوانیم) یک کلاس برای تگ body به نام دلخواه (در اینجا bodystyle) تعریف میکنیم.

سپس در فایل Style.css ویژگی های این کلاس را تعریف میکنیم.

برای تعریف کلاس در css باید قبل از نام آن نقطه ( . ) بگذاریم و برای تعریف آی دی از علامت شارپ ( # ) قبل از آن استفاده میکنیم. به مثال ها توجه کنید:

class:

    .bodystyle

    .tablestyle

    .index

    .header

    .right

......

ID:

    #index

    #tablestyle

    #menu

    #footer

و .....

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

حال کلاسی را که برای بادی تعیین کردیم را با css توصیف میکنیم. ویژگی های که برای تگها توسط کلاس و آی دی تعریف میکنیم باید بین آکولاد قرار گیرند. هر ویژگی باید به نقطه ویرگول ختم شود.

طبق استاندارها هر مشخصه در سی اس اس در سه بخش تعریف میشود:

selector {property: value;}
selector نام کلاس و یا آی دی است
property مشخصه یا ویژگی مورد نظر
value مقداری که برای آن مشخصه تعریف میکنیم

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

.bodystyle{ کدهای سی اس اس در اینجا قرار میگیرند }

selector {property: value;}

.bodystyle{ background-color: #D8D4C9; }

در اینجا به سادگی کلاسی به نام bodystyle تعیین و رنگ زمینه ی آن را به رنگی با کدِ D8D4C9 درآوردیم.

توجه داشته باشید که اگر علامت شارپ (# ) در ابتدای یک کلمه در خارج از آکولاد باشد به عنوان آی دی شناسائی میشود. در اینجا قبل از کدِ رنگ از این علامت استفاده کرده ایم. اما این به معنای تعریف آی دی نیست، بلکه باید همیشه قبل از شماره رنگ از علامت شارپ (# ) استفاده کنیم. در غیر اینصورت رنگ شناسایی نشده و در صفحاتمان اعمال نمیشود.

این کد را در فایل سی اس اس (style.css) بنویسید و آن را ذخیره کنید.

.bodystyle{ background-color: #D8D4C9; }

صفحه index.html را هم که برای تگِ بادیِ آن یک کلاس به نام bodystyle تعریف کرده اید ذخیره کنید. حال با استفاده از مرورگر وب (Internet Explorer ویا Fire Fox ویا ....) صفحه ای که تاکنون طراحی کرده اید را به نمایش در آورید. (با استفاده از File > Open و یا دوبار کلیک زدن بر روی فایلِ index.html)

کدهایی که تاکنون نوشته ایم به این صورت خواهند بود:

و پس از اینکه در مرورگر صفحه index.html را باز کردیم به این صورت است:

چند مشخصه دیگر هم معرفی میکنم تا بتوانید برای جلسه بعد آماده تر باشید.

 متن را راست چین میکند

text-align:right;

کل صفحه را از راست به چپ میچیند، حتی اسکرولر را هم به سمت چپ منتقل خواهد کرد

direction:rtl;

تعدادی فونت را تعریف میکنیم که در صورت عدم وجود اولی در کامپیوتر بازدیدکننده سایتمان از دومی و به همین ترتیب سوی و .. را استفاده میکند

font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

اندازه سایز فونت (قلم) برای متن هایی که در تگِ مورد نظرمان قرار میگیرند. به جای pt میتوانید از px هم که به معنای pixle است استفاده کنید. اما ممکن است کاربرانی که وضوح تصویر بالایی دارند نتوانند متن را در اندازه واقعی ببینند. میتوان به جای 9 از هر اندازه ای که میخواهید استفاده کنید. این اندازه ی قلم است.

font-size: 9pt;

برای تعریف رنگ زمینه از این ویژگی استفاده میکنیم. D8D4C9 کد رنگ است. کد رنگ ها را میتوانید با برنامه هایی مانند

Adobe Photoshop و یا Macromedia Dreamweaver کدها را بدست آورید. کدها نهاتا 6 کارکتر هستند. به عنوان مثال 000000 بیانگر رنگ مشکی و FF0000 قرمز و .... میباشند.

background-color: #D8D4C9;

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

line-height: 25px;

دوستانِ علاقه مند میتوانند نمونه کارهایی را طراحی کنند و به آدرس ایمیل من بفرستند تا با هم و با رفع ایراداتشان بتوانیم CSS را به طور کاملتری یاد بگیریم.

تکلیف: طراحی یک صفحه و استفاده از ویژگی هایی که در اینجا معرفی شده اند.

آدرس ایمیل: قسمت موضوع نامه را Hamkelasi درج کنید.

در جلسه ی بعد ویژگی های بیشتری معرفی و مورد استفاده قرار خواهند گرفت.

-----------------------------------------------------

جلسه اول

جلسه دوم

مشتاقانه منتظر نظرات ، سوالات و پیشنهاداتتان هستم