مقادیر مربوط به واحد ها

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

p { font-size: 0.234in; } /* استفاده از مقدار اعشاری*/
p { font-size: -1px; } /* استفاده از مقدار منفی */

این نکته را در نظر داشته باشید که اگر یک یا چند فاصله قبل از واحد اندازه گیری وجود داشته باشد یا اینکه هیچ نوع واحد اندازه گیری برای یک ویژگی مشخص نشده باشد قانون نوشته شده کار نخواهد کرد؛ البته در مورد مقدار صفر (0) نیازی نیست که واحد اندازه گیری ذکر شود:

p { font-size: 1ex; } /* صحیح است */
p { font-size: 0; } /* صحیح است */
p {font-size: 0ex; } /* صحیح است */
p { font-size: 1 ex; } /* اشتباه است چون بین مقدار و واحد اندازه گیری فاصله وجود دارد */
p { font-size: 1; } /* اشتباه است چون واحد اندازه گیری مشخص نشده است */

هر زمانی که کد css نوشته شده توسط شما دارای اشکالی باشد، مرورگر آن قطعه ازکد را نادیده می گیرد. و سایر کدهای نوشته شده صحیح، اعمال خواهند شد، یعنی خطایی روی نمی دهد که باعث شود صفحه شما دچار مشکل شود. البته ممکن است ظاهر صفحه شما آنطوری که شما انتظارش را داشته اید نباشد!

واحد های اندازه گیری در css

هنگامی که برای نوشتن قانون نیاز به واحد اندازه گیری برای مقدار یک ویژگی داشته باشید، برای این کار روش های مختلفی وجود دارد:
واحد های اندازه گیری مطلق
واحد های اندازه گیری مطلق مربوط به طول عبارتند از سانتی متر (cm)، میلیمتر (mm)، و اینچ (in). اگرچه به نظر می رسد که بدون در نظر گرفتن رزولوشن (resolution) صفحه نمایش همه این واحدهای اندازه گیری طول با یکدیگر برابر هستند، اما این مساله همیشه قابل اعتماد نیست! چون معمولا مرورگرهای وب اندازه دقیق نمایشگر رسانه مورد استفاده را نمی دانند.

.one-cm { font-size: 1cm; }
.one-mm { font-size: 1mm; }
.one-in { font-size: 1in; }

در اصل از این نوع واحد اندازه گیری باید زمانی استفاده کنیم که دقیقا اندازه رسانه ای که قرار است محتوا بر روی آن نمایش داده شود مشخص باشد؛ مثلا فرض کنید که یک محتوا را می خواهیم دقیقا برای چاپ بر روی یک کاغذ با اندازه خاص آماده کنیم. این روش برای نمایش اطلاعات بر روی صفحه نمایش (screen) ابزار مختلف توصیه نمی شود، چون اندازه صفحات نمایش مختلف با یکدیگر بسیار تفاوت دارند.
واحد های اندازه گیری بر اساس مقادیر تایپی (Typographical)
اگر با فرایند صفحه بندی و تایپ آشنایی داشته باشید می دانید که دو واحد اندازه گیری برای تایپ فونت ها وجود دارد: points (pt) و picas (pc). بر اساس تعریف، هر اینچ شامل 72 پوینت است و هر 12 پوینت برابر با یک pica است. مثل واحدهای اندازه گیری مطلق، این نوع واحد های اندازه گیری هم برای رسانه های چاپی بسیار مناسب هستند و بهتر است در صفحات نمایش از آنها استفاده نکنیم.

.one-point { font-size: 1pt; }
.one-pica { font-size: 1pc; }

واحدهای اندازه گیری نسبی (Relative)
واحد های اندازه گیری نسبی مربوط به طول، شامل پیکسل (px) و درصد (%) هستند. منظور از درصد، نسبت اندازه به اندازه ویژگی والد همان عنصر(parent element) است. اندازه یک پیکسل به اندازه فیزیکی پیکسل بر روی نمایشگر کاربر بستگی دارد.

.one-pixel { font-size: 1px; }
.one-pica { font-size: 1%; }

در نوشتن کدهای css برای نمایش محتوا بر روی صفحه نمایش دستگاه کاربر، دو واحد پیکسل و درصد از پرکاربردترین واحدهای اندازه گیری هستند. پیکسل ها اندازه های مشخص و ثابت هستند و بنابراین به شما این اجازه را می دهند که کنترل کامل و دقیق بر روی اندازه محتوای قابل نمایش بر روی صفحه نمایش داشته باشید.
از طرف دیگر، می توان از واحد درصد برای مشخص کردن اندازه متن استفاده کرد به خاطر اینکه معمولا می خواهیم که اندازه متن قابل تنظیم باشد، چون این مساله مخصوصا در ابزارهایی که دارای صفحه نمایش کوچک هستند مساله مهمی است.
اما در زمانی که متن قسمتی از طراحی شما به حساب می آید و باید تناسب دقیق با سایر محتوای صفحه داشته باشد، می توان از واحد اندازه گیری پیکسل استفاده کرد (تا کنترل کاملی بر روی اندازه فونت ها داشته باشیم). مرورگرهای وب مدرن معمولا به ما این امکان را می دهند که بتوانیم در تمام قسمت صفحه زوم انجام دهیم، در این حالت می توانیم از واحد پیکسل استفاده کنیم که کنترل بیشتری بر روی محتوا داشته باشیم. توجه داشته باشید که در صفحه های نمایش که دارای رزولوشن خیلی بالا هستند، هر پیکسل در مورد قوانین css به عنوان پیکسل های چندگانه (multiple pixels) صفحه نمایش ارائه می شوند. به عنوان مثال در صفحه های نمایش نوع Retina در سیستم Appleتمام اندازه های پیکسل به صورت دو برابر اندازه واقعی محاسبه می شوند.
واحد های اندازه گیری مربوط به فونت ها
دو واحد اندازه گیری دیگر نیز وجود دارند که به صورت نسبی هستند: em-height (em) و ex-height (ex).
em-height مثل font-size عمل می کند.ex-hight تقریبا به اندازه نصف font-size است.

.one-ex { font-size: 1ex; }
.one-em { font-size: 1em; }

مثل درصد، واحد em-heightیک واحد نسبی خوب است که معمولا برای تعیین کردن اندازه فونت ها در صفحه وب استفاده می شود. با هر دو این واحدهای اندازه گیری می توان به کاربر این اجازه را داد که خودش اندازه فونت ها را انتخاب کند و این نوع واحد ها برای خواندن متن در دستگاه های با صفحات نمایش کوچک تر مناسب تر هستند.
درcss3 دو واحد اندازه گیری دیگر نیز ارائه می شود: rem و ch. واحد اندازه گیری root em-heightیا همان (rem) اندازه فونت را نسبت به اندازه فونت عنصر ریشه خود در ساختار اچ تی ام ال، مشخص می کند. از این واحد می توان به جای em استفاده کرد؛ با این کار می توان از تغییر اندازه فونت بر اساس تغییراتی که در اندازه فونت والد ایجاد می شود جلوگیری کرد.

.one-rem { font-size: 1rem; }

واحد اندازه گیری Character unit (ch) عرض کاراکتر صفر (0) را برای فونت اندازه گیری می کند. از این واحد اندازه گیری می توان برای تعریف عرض کادری (box) که متن در آن قرار می گیرد استفاده کرد چون این واحد اندازه گیری تقریبا متناسب با تعداد کاراکترهایی است که در داخل آن جعبه قرار گرفته اند.

/* عرض های مشابه */

00000

در هنگام استفاده از واحد های rem و ch دقت کنید که مروگرهای وب در نسخه های خاصی از این دو واحد اندازه گیری پشتیبانی می کنند. البته واحد rem در نسخه های بیشتری از مروگرهای وب پشتیبانی می شود.
واحدهای اندازه گیری viewport
عرض دید (vw) و ارتفاع دید (vh) اجازه می دهد که عناصری که توسط آن مشخص شده اند بر اساس ناحیه دید (viewpoint) اندازه دهی شوند، منظور از viewpoint قسمت قابل دیدن سند در پنجره مرورگر است، یعنی همان قسمتی از صفحه وب، که کاربر آن را در صفحه نمایش خود مشاهده می کند. هر واحد یک درصد از نمای فعلی را نشان می دهد.

width: 50vw; /* 50% of viewpoint width  */
height: 25vh; /* 25% of viewpoint height */

در واحد اندازه گیری viepoint دو واحد دیگر نیز وجود دارد، vmin و vmax که این دو واحد در واقع بیشترین و کمترین اندازه های viewpoint را برمی گردانند.

width: 1vmin; /* 1vh یا 1vw, هرکدام که کوچک تر باشند */
width: 1vmax; /* 1vh یا  1vw,  هرکدام که بزرگ تر باشند */

در هنگام استفاده از این واحد های اندازه گیری توجه داشته باشید که نسخه های خاصی از مرورگرها از این واحد ها پشتیبانی می کنند، پس باید از این واحدهای اندازه گیری با دقت بیشتری استفاده کنید.

رنگ ها در داخل دستورات css

از رنگها همه جا استفاده می کنیم، در اصل زندگی بدون رنگ خیلی عجیب و بی مزه خواهد بود! حتما در داخل فایل های اچ تی ام ال هم نیاز داریم که با رنگ ها کار کنیم و عناصر مختلف را با رنگ های متفاوت نمایش دهیم. در داخل دستورات css روش های مختلفی برای مشخص کردن رنگها وجود دارد، که آن را به 3 دسته تقسیم بندی می کنیم:

1. استفاده از یک رنگ با یک نام خاص؛ مثل red
2. یک مقدار بر اساس مقادیر RGB مثل: rgb(255,0,0)
3. یک مقدار بر اساس مبنای 16، مثل: #ff0000

نشانه گذاری رنگ بر اساس نام
به راحتی می توان یک رنگ را بر اساس نام تعریف شده برای آن رنگ مشخص کرد:

p { color: red; } /* رنگ پاراگراف قرمز خواهد بود */

رنگ های مورد استفاده در اچ تی ام ال و css شامل 140 رنگ استاندارد هستند که تقریبا همه مرورگرها از آن پشتیبانی می کنند؛ رنگهایی مثل white, lime, olive... .
نشانه گذاری رنگ بر اساس مقادیر هگزادسیمال
برای دسترسی به مجموعه رنگها به صورت کامل می توان مقادیر R, G, B را به صورت مجزا مشخص کرد. هر قسمت از سه جزء رنگی ذکر شده(r, g, b) شامل یک عدد دو رقمی هگزادسیمال(مبنای 16) است، و تمام عدد شش رقمی با پیشوند # مشخص می شود. هگزادسیمال یعنی اعداد مبنای شانزده، بنابراین اعداد مجاز شامل 0 الی 9 و حروف A الی Fخواهند بود. هر مجموعه red-green-blue می تواند در بازه 00 الی FF باشند، یا همان 0-255 در نشانه گذاری مبنای 10 (اعداد عادی). بر این اساس به طور کلی 16 میلیون رنگ وجود دارند:

p { color: #FF0000; } /* red:255, green:0, blue:0 */

ممکن است این روش مشخص کردن رنگ ها پیچیده به نظر بیاید، البته که هست! اما در عین حال دقیق ترین و موجزترین روش ارائه رنگ ها است و از طرف دیگر همه مرورگرها از آن پشتیبانی می کنند– پس می تواند به عنوان بهترین روش برای تعیین رنگها از آن استفاده کرد. یک راه ساده برای به دست آوردن مقدار هگزادسیمال رنگ مورد نظر شما، استفاده از یک نرم افزار طراحی گرافیک مثل فوتوشاپ (Photoshop) است؛ با چنین نرم افزارهایی می توانید به راحتی مقادیر هگزادسیمال مورد نظر خود را پیدا کنید و کد مربوط به هر عدد را کپی کنید و در داخل فایل css خود از آن استفاده کنید.
این نکته را هم در نظر داشته باشید که مقادی مبنای 16 نسبت به کوچک و بزرگ بودن حروف حساس نیستند.
نشانه گذاری رنگ بر اساس مقادیر rgb
تابع rgb() مقدار رنگ را بر اساس سه مقدار رنگ های قرمز (r)، سبز (g)، و آبی(b) مشخص می کند. مقدار مربوط به هر کدام از رنگ ها می تواند عددی بین 0 تا 255 یا بر اساس درصد باشد.

p { color: rgb(255, 0, 0); }
p { color: rgb(100%, 0%, 0%); }

نشانه گذاری بر اساس مقادیر rgb از نظر دقت همانند نشانه گذاری بر اساس مقادیر هگزادسیمال است. معمولا برای طراحان روش هگزادسیمال بیشتر ترجیح داده می شود، به خاطر اینکه روش هگزادسیمال کوتاه تر است و به راحتی می توان مقادیر هگزا را در یک مرحله از یک نرم افزار طراحی گرافیک کپی کرد– برای رنگ های rgb باید عدد مربوط به هر رنگ را جداگانه کپی کرد.
با استفاده از مقادیر مشابه برای سه گزینه r, g, b می توانیم سایه های خاکسری را ایجاد کنیم. مثلا rgb(0,0,0) یعنی رنگ سیاه و rgb(128,128,128) سایه میانی خاکستری و rgb(255,255,255) رنگ سفید است.
توجه داشته باشید که در css3دو روش دیگر نیز وجود دارند: HSL و RGBa که بعدا این دو روش نیز توضیح داده خواهند شد.

انتخاب کننده ها به صورت کلاس یا نشان گر (class, id selector)

ما انتخاب کننده های از نوع کلاس یا نشان گر را برای تعریف قوانینی استفاده می کنیم که فقط به یک قطعه انتخاب شده از کدهای اچ تی ام ال اعمال می شوند (قطعه ای که با استفاده از نام کلاس یا نشانگر – id – مشخص شده است). این نوع انتخاب کننده ها به ما این امکان را می دهند که یک عنصر خاص اچ تی ام ال، یا گروهی از عنصرها را انتخاب و سبک دهی کنیم بدون اینکه سایر نمونه های مربوط به آن عنصر را دستکاری کنیم.
انتخاب کننده از نوع کلاس (Class selector)
در این نوع انتخاب کننده (Selector) یک کلاس تعریف می کنیم و اعلان یا اعلان های مورد نظر خود را در داخل این کلاس می نویسیم. قوانین نوشته شده در داخل کلاس فقط به محتوای عناصری اعمال می شود که صفت کلاس (class attribute) در آنها هم نام با نام کلاس تعریف شده باشد. برای اسم گذاری این نوع انتخاب کننده، علامت نقطه (.) می گذاریم و پس از آن نام کلاس را می نویسیم. این نوع انتخاب کننده کلاس می توانید یک کلاس عمومی باشد که می توان قوانین آن را به تمام عناصر اچ تی ام ال اعمال کنیم.

/* می توان این کلاس را با همین نام مشخص شده 
به هر کدام از عناصر اچ تی ام ال نسبت داد */
.myClass{}

انتخاب کننده نوع کلاس را می توان به شیوه ای نوشت که قوانین شیوه نامه فقط به یک عنصر خاص از اچ تی ام ال نسبت داده شود؛ برای این کار ابتدا نام عنصر اچ تی ام ال مورد نظر خود را می نویسیم، سپس یک علامت نقطه (.) می گذاریم و پس از آن نام کلاس را می نویسیم. با این کار محتوای تمام عناصر مشابه داخل فایل (مثلا تمام عناصر پاراگراف که صفت کلاس در آنها با نام myClass مشخص شده است) بر اساس دستورات نوشته شده سبک دهی می شوند:

/* قوانین نوشته شده در این قسمت به محتوای همه عناصر 
پاراگراف که صفت آی دی آنها هم نام با این کلاس باشد اعمال خواهد شد. */
p.myClass {}

چند مثال در مورد استفاده از انتخاب کننده های کلاس
مثلا فرض کنید قسمتی از یک متن را که در داخل یک نوع خاص از عناصر اچ تی ام ال قرار دارد می خواهیم با رنگ خاصی مشخص کنیم اما نمی خواهیم تمام محتوای داخل سایر عناصر مشابه رنگشان تغییر کند. یعنی مثلا فرض کنید می خواهیم محتوای درون عنصر <p> را در مواردی با رنگ سبز مشخص کنیم ولی نمی خواهیم محتوای تمام عناصر <p> دارای رنگ سبز باشند؛ برای اینکار ابتدا یک کلاس عمومی (general class) با نام دلخواه خود ایجاد می کنیم:

.msg { color: green; }

قانون نوشته شده در بالا مشخص می کند هر عنصری که صفت کلاس (class attribute) در آن با مقدار msg مشخص شده باشد دارای چنین سبکی خواهد بود (رنگ متن آن سبز رنگ خواهد بود).

<p class=”green”>متن داخل این تگ ها دارای رنگ سبز خواهد بود.</p>

اما ما می توانیم یک کلاس ویژه هم تعریف کنیم (specific class)؛ در این حالت قانون نوشته شده در این نوع از کلاس فقط به همان عنصری که مشخص شده است اعمال می شود. یعنی اگر نام این کلاس را به عنصری غیر از عنصر مشخص شده نسبت دهیم، سبک دهی محتوای آن عنصر تغییری نخواهد کرد. این کار باعث می شود هر شخصی که شیوه نامه را مطالعه می کند به راحتی بفهمد که این دستور در کدام قسمت از محتوا اعمال می شود:

p.warn { color: red; }

برای اینکه یک کلاس ویژه را به یک عنصر نسبت دهیم، مثل کلاس های عمومی عمل می کنیم، البته مسلما کلاس ویژه فقط در مورد عنصری اعمال می شود که برای آن تعریف شده است.

<p class=”warn”>محتوای داخل این قسمت با رنگ قرمز مشخص می شود.</p>

شما می توانید بیشتر از یک کلاس را به یک عنصر نسبت دهید. برای این کار باید بین نام کلاس ها یک فاصله قرار دهید. این کار باعث می شود قابلیت تطبیق پذیری کلاس ها بسیار افزایش پیدا کند:

<p class="style1 style2"></p>

نکته: این مساله را در نظر داشته باشید که نباید نام کلاس با یک عدد شروع شود.
انتخاب کننده از نوع نشانگر id
انتخاب کننده از نوع نشانگر (id selector)برای سبک دهی یک عنصر خاص با نشانگر خاص استفاده می شود. در واقع قوانین نوشته شده در این نوع شیوه نامه، فقط به عنصری اعمال می شود که صفت id در داخل آن هم نام با این نوع انتخاب کننده باشد. و البته مسلما یک نشانگر در داخل یک فایل اچ تی ام ال باید منحصر به فرد باشد و از یک نام تکراری برای نشانگرهای مختلف استفاده نکنیم.

 
این نوع انتخاب کننده تا حدود زیادی شبیه به انتخاب کننده از نوع کلاس است، با این تفاوت که برای نامگذاری آن به جای علامت نقطه (.) از علامت پوند یا hash (#) استفاده می کنیم و نام این نوع انتخاب کننده در صفت id نوشته می شود در حالی که نام انتخاب کننده از نوع کلاس در داخل صفت class نوشته می شود. همانند انتخاب کننده از نوع کلاس، این نوع انتخاب کننده نیز یک نوع انتخاب کننده عمومی است که به صورت بالقوه می توان آن را به تمامی عناصر اچ تی ام ال اعمال کرد. این نوع از انتخاب کننده یک شناساگر منحصر به فرد (unique identifier) برای عنصر مربوط به خود در داخل سند تعریف می کند:

/*دستورات نوشته شده در این شیوه نامه به عنصری 
اعمال می شود که دارای صفت آی دی هم نام با این انتخاب کننده باشد */
#newid {}

مثل انتخاب کننده های نوع کلاس، می توان انتخاب کننده نوع نشانگر را نیز به نوعی تعریف کنیم که فقط به یک عنصر خاص اچ تی ام ال اعمال شود. با این وجود به خاطر اینکه فقط باید یک عنصر با یک آی دی خاص وجود داشته باشد، این ویژگی اضافی اغلب غیر ضروری به نظر می رسد و از لحاظ منطقی نیز نیازی به این کار نداریم.

/* دستورات این شیوه نامه به یک عنصر پاراگراف 
با صفت ای دی مشابه نام این انتخاب کننده اعمال می شود. */
p#newid {}

در تعیین نام نشانگرها نیز مثل کلاس ها باید توجه داشته باشیم که در ابتدای نام آنها از عدد استفاده نکنیم.
چند مثال در مورد انتخاب کننده از نوع نشانگر
انتخاب کننده ای که در مثال زیر ایجاد کرده ایم و از نوع نشانگر است فقط و فقط بر روی یک عنصر اچ تی ام ال که صفت id آن هم نام انتخاب کننده است اثر می گذارد. بنابراین از این نوع انتخاب کننده می توانیم زمانی به جای انتخاب کننده از نوع کلاس استفاده کنیم که می خواهیم یک شیوه خاص را فقط و فقط بر روی یک عنصر خاص از محتوای اچ تی ام ال خود اعمال کنیم.

#err { color: red; }

همانطور که قبلا نیز گفتم، یک قانون انتساب شده به یک نشانگر فقط بر روی همان نشانگر اعمال می شود. از آنجا که صفت id یک صفت منحصر به فرد است، هر انتخاب کننده از نوع نشانگر فقط بر روی یک عنصر از محتوای صفحه اثر می گذارد.

<p id="err">محتوای این قسمت با رنگ قرمز مشخص می شود.</p>

گروه بندی کردن قوانین

برای اینکه شیوه نامه هایی که ایجاد می کنیم را بتوانیم به آسانی و با سرعت ویرایش کنیم می توانیم قوانین مشابه را در یک گروه قرار دهیم (گروه بندی کنیم - grouping). با استفاده از گروه بندی می توانیم مجموعه ای از قوانین مربوط به یکدیگر را مشخص کنیم. به عنوان مثال اگر بخواهیم برای دو نوع تیتر (h1, h2) به صورت همزمان سبکی را تعیین کنیم که رنگ متن قرمز و پسزمینه آن مشکی باشد می توانیم این کار را به چهار روش انجام دهیم:
قوانین به صورت گروه بندی نشده
هر قانون را می توانیم به صورت جداگانه بنویسیم؛ با این کار می توانیم هر سیک را به صورت جداگانه به عنصر انتخاب شده اعمال کنیم:

h1{ color: red; }
h1 { background: black; }
h2{ color: red; }
h2 { background: black; }

انتخاب کننده های گروه بندی شده
می توانیم انتخاب کننده ها (selector) را با یکدیگر گروه بندی کنیم، برای این کار چند انتخاب کننده که مورد نظرمان هستند را می نویسیم و بین انتخاب کننده ها از علامت ویرگول استفاده می کنیم. با این کار اعلان به تمام انتخاب کننده هایی که انتخاب کرده ایم اعمال می شود:

h1, h2 {color: red;}
h1, h2 { background: black; }

اعلان ها به صورت گروه بندی شده
اعلان ها را می توان با یکدیگر گروه بندی کرد؛ برای این کار فقط لازم است بین اعلان ها علامت نقطه ویرگول قرار دهید. در مثال زیر برای اینکه کدها، ظاهر بهتر و قابل درک تری داشته باشند، هر اعلان را در یک خط جداگانه قرار داده ایم:

h1{
color: red;
background: black;
}
H2{
color: red;
background: black;
}

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

h1, h2{
color: red; 
background: black; 
}

هرجا که امکان داشته باشد باید قوانین به صورت گروه بندی شده نوشته شوند؛ این کار باعث می شود که فایل مربوط به شیوه نامه ها کوتاه و مختصر شود؛ در نتیجه عملکرد سایت شما هم بهتر خواهد شد، چون کوتاه تر بودن قوانین یعنی کوچک ترو در نتیجه کم حجم تر شدن فایل شیوه نامه؛ این مساله باعث می شود که زمان بارگذاری فایل شیوه نامه کوتاه تر شود. همچنین باعث می شود که ویژگی های مورد نظر شما فقط در یک محل نوشته شوند، و در نتیجه ویرایش کدها نیز در آینده آسان تر خواهد شد.

استفاده از فاضاهای خالی (space)

منظور از فضاهای خالی یعنی فاصله، تب (فشار دادن کلید tab بر روی صفحه کلید کامیپیوتر یا فضای معادل آن)، و خط جدید. شما می توانید به راحتی شیوه نامه هایی که می نویسید را با استفاده از فضاهای خالی سازماندهی کنید تا بهتر و راحت تر خوانده شوند. مثلا می توانید در داخل یک قانون، هر اعلان را در یک خط جدید بنویسید که کدهای شما خوانا تر شوند؛ با این کار ظاهر کدهای شما بهتر می شود و البته مرورگر نیز در خواندن کدهای شما دچار مشکلی نخواهد شد:

.menu{
color: red:
margin: 1px;
}

نکته مهم:
توجه کنید که بین مقدار یک ویژگی و واحد اندازه گیری مربوط به آن فاصله وجود نداشته باشد. مثلا margin: 1 px; غلط است چون بین 1 و px فاصله وجود دارد. این قطعه کد باید به این صورت نوشته شود: margin: 1px;

نوشتن توضیحات در داخل فایل های css

توضیحات یکی از قسمت های مهم در هر زبان برنامه نویسی است. برای نوشتن توضیحات در داخل دستورات css از شیوه نشانه گذاری زبان C استفاده می شود (/* */). هر چیزی که مابین /* و */ قرار بگیرد توسط مرورگر وب نادیده گرفته می شود، حتی اگر دستورات css شما وارد خط بعدی شوند. یعنی دو خط زیر نیز به عنوان توضیح درنظر گرفته می شود:

/*یک توضیح
چند خطی */

کاربرد اصلی توضیحات این است که به شما به عنوان ایجاد کننده دستورات و یا افراد دیگری که به کدهای شما دسترسی دارند این امکان را می دهد که در آینده به صورت واضح تر و دقیق تر بدانید که این دستورات برای چه کاری نوشته شده اند. مسلما در دراز مدت مقدار کدهایی که می نویسید افزایش پیدا می کند و شاید در آینده خودتان هم ندانید که یک قسمت از دستورات را دقیقا برای چه کاری نوشته اید! اما در این موارد توضیح به شما کمک می کند که بدانید دقیقا چه کاری را انجام داده اید.
توضیحات خوب و به جا قابلیت خوانایی کدهای شما را افزایش می دهند و از طرف دیگر شما می توانید متاداده های مورد نظر خودتان را داخل کدهای خود اضافه کنید، مثلا نام و مشخصات خودتان را می توانید به راحتی با استفاده از توضیحات در داخل کدهای خود قرار دهید:

/*
*هر نوع متاداده ای که خودتان صلاح می دانید داخل فایل اضافه کنید
*/
/*** عنوان یک بخش خاص از کدهای شما ***/
P {color: red;} /* این دستور رنگ محتوای داخل تگ های پاراگراف را قرمز می کند */

همچنین می توانید از توضیحات برای زیباتر کردن و خواناتر کردن کدهای خود استفاده کنید. مثلا کدهای خود را به چند قسمت مختلف (از لحاظ موضوعی) تقسیم بندی کنید و با استفاده از توضیحات برای هر قسمت یک عنوان دلخواه و مشخص انتخاب کنید.
توجه داشته باشید که با استفاده از توضیحات می توان به صورت موقتی یک یا چند اعلان یا تمامی قانون مربوط به یک شیوه نامه را به صورت موقت غیرفعال کرد:

p{ /* color: white; */}

یک مثال عملی

حالا که مطالب اولیه در مورد css و نحوه استفاده از شیوه نامه ها را یاد گرفتیم، بیایید به صورت عملی یک مثال کوچک را بررسی و امتحان کنیم. همانطور که گفته شد کدهای css که به آنها قانون (rule) می گوییم، مجموعه ای از کدهای دستوری متنی هستند که می توانیم آنها را داخل یک فایل اچ تی ام ال یا خارج یک فایل اچ تی ام ال قرار دهیم. برای ایجاد فایل css این مثال از یک ویرایشگر متن بسیار ساده استفاده می کنیم: Notepad. برای بازکردن نرم افزار Notepad در کامپیوتر من که از ویندوز 7 استفاده می کنم باید به این آدرس رفت: Start> All Programs> Accessories> Notepad
حالا که یک فایل جدید Notepad باز شد، کدهای زیر را کپی کنید و داخل فایل Notepad بچسبانید و فایل را با نام cssStyle.css یا هر نام دلخواه دیگر ذخیره کنید. به پسوند .css توجه کنید، این فایل حتما باید با پسوند .css ذخیره شود. کدهای نمونه:

p {font-family: "B Yekan"; font-size: 12px; text-align: right;}

نگران کدهای بالا نباشید، اگر دقیقا نمی دانید این ویژگی ها و مقدارها دقیقا چه کاری انجام می دهد فقط آنها را کپی کرده و در داخل فایل css خود قرار دهید. در آینده با همه این ویژگی ها آشنا خواهید شد. البته نام هر ویژگی و مقدار آن تا حدود زیادی نحوه عملکرد آن را مشخص می کند. حالا نوبت به ایجاد فایل اچ تی ام ال می رسد. برای ایجاد فایل اچ تی ام ال نیز از Notepad استفاده می کنیم. یک فایل خالی دیگر ایجاد می کنیم و کدهای زیر را داخل آن قرار می دهیم. اچ تی ام ال نسخه 5 به ما کمک می کند که تگ های اچ تی ام ال فایل ما بسیار ساده و کوتاه باشند:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<link href="cssStyle.css" rel="stylesheet" type="text/css">
<title>فایل نمونه</title>
</head>
<body>
<p>یک متن نمونه</p>
</body>
</html>

حالا فایل بالا را ذخیره می کنیم و یک نام دلخواه با پسوند .html به آن می دهیم. فقط توجه داشته باشید به خاطر اینکه در داخل کدهای بالا از فونت های فارسی استفاده کرده ایم، در نرم افزار Notepad در قسمت Encoding گزینه UTF-8 را انتخاب کنید که فونت های فارسی ما به درستی نمایش داده شوند. توجه داشته باشید که باید فایل cssStyle.css دقیقا در همان پوشه ای قرار داشته باشد که فایل اچ تی ام ال شما قرار دارد تا فایل اچ تی ام ال بتواند فایل شیوه نامه را پیدا کند (به خاطر اینکه آدرس این فایل را در داخل تگ link به این شکل تعریف کرده ایم). خروجی فایل بالا متنی خواهد بود که متن داخل تگ <p> با فونت B Yekan و با اندازه 12 پوینت و به صورت راست چین نمایش داده می شود.

استفاده از کدهای css

برای استفاده از کدهای cssدر داخل یک فایل اچ تی ام ال سه روش وجود دارد:

1. استفاده از یک شیوه نامه در داخل فایل اچ تی ام ال(Internal style sheet)
2. استفاده از شیوه نامه به صورت درون خطی (Inline style sheet)
3. استفاده از یک شیوه نامه خارج از فایل اچ تی ام ال (External style sheet)

یک شیوه نامه که در داخل یک فایل اچ تی ام ال نوشته می شود، فقط به محتویات همان فایل اعمال خواهد شد، و شیوه نامه ای که به صورت درون خطی (inline) نوشته می شود فقط به همان عنصری اعمال می شود که در داخل آن نوشته شده است، و از یک شیوه نامه که به صورت فایل جدا و خارج از فایل های اچ تی ام ال صفحات وب سایت نوشته شده است، می توان به صورت بالقوه در تمام صفحات وب سایت استفاده کرد.
شیوه نامه های درونی (داخل فایل اچ تی ام ال –Internal style sheet)
همانطور که از نام این نوع از شیوه نامه مشخص است، این نوع شیوه نامه ها در داخل یک فایل اچ تی ام ال نوشته می شوند، و از این نوع شیوه نامه ها زمانی استفاده می کنیم که بخواهیم یک صفحه خاص، سبک دهی مخصوص به خود را داشته باشد. در این حالت با استفاده از عنصر <style> کدهای قوانین مربوط به شیوه نامه خود را در قسمت بالای صفحه اچ تی ام ال و مابین عناصر <head> می نویسیم. عنصر <style>در برگیرنده قوانین مربوط به شیوه نامه ما است و باید صفت (attribute) نوع (type)در این عنصر با مقدار text/css مقداردهی شود:

<style type=”text/css”>
p {color: black;}
</style>

همانطور که در بالا مشاهده می کنید می توانیم ما بین عناصر <style> به هر تعداد انتخاب کننده (Selector) و بلوک های اعلان (Declaration) مربوط به آن را بنویسیم.
شیوه نامه های درون خطی (Inline style)
ما می توانیم با استفاده از صفت style (style attribute) یک سبک را به یک عنصر خاص نسبت دهیم که به این حالت، سبک درون خطی گفته می شود. style یک صفت عمومی است که می توانیم آن را به تمام تگ های آغازین اچ تی ام ال نسبت دهیم. مقداری که به این صفت می دهیم همان مقدار مربوط به بلوک اعلان است که باید بین بلوک های اعلان مختلف از علامت نقطه ویرگول استفاده کنیم. مسلما در اینجا دیگر نیازی به انتخاب کننده (selector) نیست، به خاطر اینکه، همان تگ اچ تی ام ال که این صفت به آن اعمال شده به عنوان انتخاب کننده در نظر گرفته شده است:

<p style=”color: red; text-align: right;”>استفاده از شیوه نامه به صورت درون خطی</p>

مسلما به عنوان یک برنامه نویسی حرفه ای وب سایت، نباید در طراحی صفحات وب سایت خود یا دیگران از چنین روشی استفاده کنید! این روش فلسفه وجود css را تا حدودی زیر سوال می برد. ما از css برای این استفاده می کنیم که تا حد امکان محتوا را از ظاهر (سبک بندی ظاهری) جدا کنیم؛ در حالی که این شیوه (درون خطی) محتوا را با سبک بندی ظاهری آن تلفیق می کند و همین کار باعث می شود که در آینده انجام تغییرات در شیوه نامه ها کاری مشکل و پیچیده شود. از این روش فقط زمانی استفاده کنید که می خواهید اثر یک یا چندین سبک را بر روی قسمتی از محتوای وب سایت خود به صورت سریع مشاهده کنید (در مرحله طراحی)، پس از آن هنگامی که به شیوه نامه مورد نظر خود رسیدید، کدهای مربوط به آن را در یک فایل خارجی شیوه نامه ذخیره کنید.
شیوه نامه های خارجی (External style sheet) – فایل های css در خارج از فایل اچ تی ام ال رایج تریج و البته بهترین شیوه استفاده از شیوه نامه های آبشاری، قرار دادن کدهای مربوط به آن در یک فایل خارجی است. قوانین مربوط به شیوه نامه ها در داخل یک فایل متنی با پسوند .cssمجزا ذخیره می شوند. سپس در قسمت سرصفحه فایل اچ تی ام ال، با استفاده از تگ <link> با فایل css مورد نظر خود ارتباط برقرار کرده و آن را وارد می کنیم.
تگ <link> دارای سه صفت (attribute) است. صفت rel که مخفف relationship است باید با مقدار stylesheet مقدار دهی شود. صفت type که از نوع متا است و اختیاری نیز هست، باید با مقدار text/css مقداردهی شود. با استفاده از صفت href نیز لینک مربوط به فایل css خارجی مقدار دهی می شود (یعنی آدرس فایل خارجی .css):

<linkrel=”stylesheet” type=”text/css” href=”cssFile.css”>

همیشه ترجیح بر این است که از فایل های خارجی css استفاده کنید، چون این روش محتوا را کاملا از سبک دهی ظاهری آن جدا می کند. این روش به ما کمک می کند که یک ظاهر یکپارچه برای همه صفحات وب سایتمان ایجاد کنیم و از طرف دیگر برای ایجاد تغییرات ظاهری در صفحات وب سایتمان فقط کافی است محتوای فایل css را ویرایش کنیم تا تمام تغییرات اعمال شده در همه صفحات وب سایت دیده شود.
البته این روش برای افزایش سرعت باز شدن صفحات وب سایت ما نیز مفید است؛ به خاطر اینکه فایل های css که به صورت خارجی طراحی شده اند فقط برای اولین باری که کاربر، یک صفحه از وب سایت ما را باز می کند دانلود شده و بر روی دستگاه کاربر ذخیره می شود (cache). این فرایند باعث می شود که در دفعات بعد یا در بازدید از سایر صفحات وب سایت، دیگر فایل مربوط به شیوه نامه ها دانلود نشود و در نهایت باعث افزایش سرعت مرور صفحات ما توسط بازدید کننده خواهد شد.

ساختار قانون (rule) در نوشتن فایل های css

معمولا کدهای css در داخل یک فایل جداگانه، حاوی شیوه نامه ها (style sheet) نوشته می شوند که شامل فهرستی از قوانین (rules) است. به عنوان مثال برای نوشتن یک قانون برای اینکه رنگ تمام محتویات یک عنصر پاراگراف (p) به رنگ قرمز نمایش داده شود باید به این شیوه عمل کرد:

p {color: red;}

قانونی که در بالا نوشته شده است شامل دو قسمت است: یک انتخاب کننده (selector) و یک بلوک اعلان (declaration). انتخاب کننده یا selector به یک عنصر اچ تی ام ال اشاره می کند که قرار است قانون نوشته شده به آن اعمال شود. با این روش می توان هر کدام از عناصر اچ تی ام ال (تگ های اچی تی ام ال) را به عنوان انتخاب کننده معرفی کرد. در واقع انتخاب کننده css برای این استفاده می شود که عناصر اچ تی ام ال را بر اساس نام عنصر، id، نام کلاس، خصوصیت (attribute)، و چیزهای دیگر را انتخاب(select) یا پیدا (find) کند. بلوک اعلان همیشه ما بین آکولاد (}{) قرار می گیرد. در بلوک اعلان مشخص می کنیم که چه سبکی به عناصر انتخاب شده اعمال شود. در این بلوک می توان یک یا بیشتر از یک اعلان را قرار داد. در هر اعلان یک ویژگی سبک وجود دارد که بعد از آن علامت دونقطه قرار می گیرد و سپس یک مقدار معتبر برای آن ویژگی قرار می دهیم (هر کدام از این مقادیر قوانین مربوط به خود را دارند که در آینده به آنها اشاره خواهد شد). در انتهای هر اعلان یک علامت نقطه ویرگول قرار می دهیم (اعلان ها را با استفاده از علامت نقطه ویرگول از هم جدا می کنیم)، و سپس اعلان بعدی را می نویسیم؛ البته می توان در انتهای آخرین اعلان از نقطه ویرگول استفاده نکرد:

P {color: red; background: black }

همانطور که گفتم گذاشتن نقطه ویرگول انتهایی واجب نیست اما بهتر است که عادت کنیم این نقطه ویرگول را نیز بنویسیم، این کار باعث می شود که اگر در آینده خواستیم به انتهای یک اعلان، اعلان دیگری را اضافه کنیم، ناخواسته نقطه ویرگول را فراموش نکنیم. سعی کنید یک قاعده کلی دیگر را هم رعایت کنید: در هنگام نوشتن کدهای css تمام حروف را با حروف کوچک بنویسید، هرچند تمام ویژگی ها و انتخاب کننده ها نسبت به بزرگی و کوچکی حروف حساس نیستند (این روش باعث می شود کدهای ما ساختار ظاهری بهتر و یک دست تری داشته باشند ).
به طور خلاصه می توان گفت که یک قانون سبک شامل انتخاب کننده و اعلان است که در اعلان یک یا بیشتر از یک قسمت شامل ویژگی: مقدار (property: value) قرار می گیرد.