۱۳۸۵/۰۵/۱۷

نحوه نگارش دستورات css

دستورات css از 3 قسمت تشکیل می شوند:

  1. گزینشگر - selector

  2. خصیصه - property

  3. مقدار - value


selector {property: value}



گزینشگر یک تگ html و یا یک عنصر مانند گروه است. خصیصه نیز قسمتی از کد html است که می تواند مقداری را به خود اختصاص دهد. مانند خصیصه align که مربوط به نحوه قرار گرفتن متن، عکس و ... است. مقدار هم که مشخص کننده چگونگی خصیصه است.



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


  • اگر مقدار که می خواهید به خصیصه اختصاص دهید بیش از یک کلمه (دارای فاصله (white space)) باشد، باید از علامت کوتیشن(') یا دابل کوتیشن(") استفاده کنید.


p, a, table {font:'Times New Roman', Times, serif}





  • در صورت نیاز به دادن چند ویژگی به یک خصیصه، باید ویژگی ها را با استفاده از سمی کولون (نقطه ویرگول ";") از هم جدا کنید.


  • برای خواناتر شدن کد های css می توانید از خطوط جدید و فاصله (white space) استفاده کنید.



p
{
text-align: center;
color: black;
font-family: arial
}



گزینشگر گروه بندی شده
منظور از گروه بندی مقدار دهی یک خصیصه به گروهی از تگ ها می باشد. در زیر ما خصیصه رنگ تمامی هدر ها را برابر سبز قرار دادیم:

h1,h2,h3,h4,h5,h6
{
color: green
}



گزینشگر کلاس بندی شده
در حالت کلی 2 نوع کلاس بندی وجود دارد. یکی کلاس بندی یک تگ خاص و دیگری کلاس بندی عمومی.
کلاس بندی یک تگ خاص
در این حالت بعد از اسم تگ یک نقطه گذاشته و سپس نام کلاس را می نویسیم (نام کلاس را به دلخواه خود انتخاب می کنیم. فقط باید توجه داشته باشیم که نام های مناسب بگزینیم تا کدهایی خوانا داشته باشیم). مانند کلاس center برای تگ پاراگراف (p) که تنها برای تگ پاراگراف قابل استفاده می باشد.

p.center {text-align: center}



کلاس بندی عمومی
در این حالت، کلاس برای تمامی تگ ها قابل استفاده می باشد. و نحوه تعریف آن بدین صورت است که یک نقطه می نویسیم و بعد از آن نام کلاس را وارد می کنیم. مانند کلاس عمومی center در زیر:

.center {text-align: center}




گزینشگر با ID
در این حالت ابتدا باید برای تگ مورد نظر خود یک آی دی تعریف کنید. مانند آی دی para برای پراگراف در زیر :

<p id="para"></p>



سپس برای تعریف کدهای css آن با قرار دادن یک علامت # و سپس وارد کردن نام آی آن خصیصه های دلخواه را به آن بدهید:

#para {text-align: right}




چند نکته

  1. توجه داشته باشید که برای هر تگ html فقط از یک کلاس می توانید استفاده کنید.


  2. تمامی موارد بالا در داخل تگ استایل تعریف می شوند. برای استفاده از آنها در صورتی که از حالت گروه بندی یا گزینشگر ID نیاز به انجام کار خاصی نیست. ولی اگر از حالت کلاس بندی (چه عمومی و چه برای یک تگ خاص) استفاده کرده باشید، باید در داخل تگ html خود خصیصه class را برابر نام کلاس مورد نظر خود قرار دهید. مانند:

    <p class="right"></p>





  3. نام کلاس و نام آی دی را با عدد شروع نکنید! زیرا بعضی از مرورگرهای وب مانند فایرفاکس، کلاس و آی دی هائی که نام آنها با عدد شروع شده باشد را نادیده می گیرند.

۱ نظر: