آموزش CSS – جلسه دوم

نویسنده: فرزاد ربیعی
تاریخ: 2012 - 02 - 16
دسته بندی: CSS طراحی سایت

برای اینکه متوجه شوید CSS چقدر در طراحی یک سایت تاثیر دارد، می توانید مثال زیر را تمرین کنید(در این مثال می خواهیم یک سایت را بدون CSS ببینیم).
یک سایت را در مرورگرتان باز کنید( به دلیل سازگاری مناسب و امکانات بیشتر از مرورگر firefox استفاده می کنم). من برای نمونه سایت yahoo.com را باز می کنم. سپس در منوی اصلی، view / page style را از Basic Page Style به No Style تغییر دهید. می توانید ببینید که چگونه کل سایت به هم می ریزد و جذابیتش را از دست می دهد. به غیر از این به دلیل جابجایی متن ها، لینک ها و مطالب را به سختی پیدا می کنیم.
کار با CSS
سینتکس یا کدهای CSS خیلی پیچیده نیستند ولی باید دقت کرد که در جای مناسب به کار گرفته شوند. همچنین اولویت بندی آن ها مهم است. به حروف بزرگ و کوچک حساس نیست ولی برای یک دست شدن کدها، بهتر است همه را با حروف کوچک بنویسیم. البته هنگامی که شما با برنامه هایی نظیر Microsoft expression یا … کار می کنید، این امکان را به شما می دهند که با وارد کردن اولین حرف کد، بقیه کد را به شما نمایش دهد و شما از میان آیتم هایی که نشان داده شده، کد مورد نظرتان را انتخاب کنید(مانند شکل زیر).

همانطور که در جلسه قبل گفتم، می توان CSS را در سه حالت به کار برد:inline، document و external. به دلیل خوانایی، تفکیک و کار منطقی بهتر است از CSS های external استفاده کرد. پس ابتدا یک صفحه html ایجاد کنید (نام این فایل مهم نیست، ولی اسمهایی که برای صفحه اصلی سایت در نظر می گیرید، بهتر است یکی از اسامی زیر باشد: index.html، default.html، main.html) این صفحه شامل کدهای زیر است:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 <title>my first page</title>
 <link rel=”stylesheet” type=”text/css” href=”first.css”/>
 </head>
 <body>
 <p>first paragraph</p>
 <p>second paragraph</p>
 </body>
 </html>

حال باید یک فایل CSS هم بسازیم تا در آن کدهای CSS را بنویسیم. درون این فایل فرمت ها به شکل زیر تعریف می شوند:

 p {
 color:red; font-size:12px;
 }

می دانیم در html، p مخفف پاراگراف است. به p و مانند آن مثل h1 تا h6 و … selector می گویند. با این تعریف selector، هر جایی که در فایل html، تگ p به کار رفته باشد، فرمتی که ما برایش در اینجا تعریف می کنیم اعمال می شود. بعد از هر selector، یک { } داریم. داخل این آکولاد، فرمتمان را می نویسیم. ابتدا ویژگی) property (را می نویسیم سپس یک : می نویسیم و حال مقدار (value) را می نویسیم. در اینجا ویژگی همان color (رنگ) بوده و در مقدار red (رنگ قرمز) را نوشتیم. در انتهای هر دستور، یک ; نوشته و دستور بعدی را شروع می کنیم.
مانند دیگر زبان ها، می توان برای CSS توضیحات (comment)نوشت. متنی که داخل /* */ قرار می گیرد، از دید مرورگر حذف می شود. می توانیم برای خوانایی بهتر کدهای CSS، از آن استفاده کنیم.

 p {
 /*برای اعمال رنگ و اندازه فونت */
 color:red; font-size:12px;
 }

بعد از save فایل بالا (باز هم نام فایل مهم نیست، من آن را با نام first.css ذخیره می کنم)، باید این فایل را به html لینک بدهیم. پس در index.html بعد از تگ meta این خط را می نویسیم.


<link rel=”stylesheet” type=”text/css” href=”first.css” />

روبروی آیتم href، باید مسیر فایل CSS را بدهیم. چون در اینجا هر دو فایل index.html و first.css در یک پوشه بودند، پس مستقیم آدرس فایل را نوشتیم.
حال باید فایل index.html را در مرورگر ببینید. اگر مراحل را درست اجرا کرده باشید، دو متن first paragraph و second paragraph را با فونت ۱۲ پیکسل و رنگ قرمز خواهید دید که شکل زیر خروجی خواهد بود.


می توانید دو فایل index.html و first.css را از لینک زیر دانلود کنید.

css-2

برچسب: - - - -

مطالب مرتبط

درباره ی

در زمینه CSS، ASP.Net و شبکه (MCITP) فعالیت میکنم

۲ نظر به “آموزش CSS – جلسه دوم” ثبت شده است

  1. asal گفت:
    آوریل 7, 2012 در 6:22 ب.ظ

    عااااااااااااااااالی ی ی ی ی ی ی ی ی ی ی ی ی………….بود. خیلی راحت یاد گرفتم. اگه میشه فیلمای آموزشی ام واسمون بذارید تا سطح یادگیری بره بالاتر.ممنون.

    • فرزاد ربیعی گفت:
      آوریل 8, 2012 در 7:53 ب.ظ

      اتفاقا برای سایت در نظر داریم که فیلمهای آموزشی هم تهیه کنیم که بیشتر به دلیل مشکلات زمانی هنوز نتوانستیم این کار را انجام دهیم.