10 نکته ابتدایی در Css

مارس

بنظرم برنامه نویسی نباشه که اصلا ضرورت Css رو درک نکرده باشه یا به محشر بودن اقرار نکرده باشه امروز ده تا نکته کوچولو نوشتم

$\"\"$

1.خلاصه نویسی در Font

وقتی در مورد نوشتن Style Font در CSS بحث میشه ممکنه شما بصورت زیر تعریف کنید:

font-size: 1em;

line-height: 1.5em;

font-weight: bold;

font-style: italic;

font-varient: small-caps;

font-family: verdana,serif

این روش نسبتا طولانی هستش برای خلاصه نوشتن شما می تونید دستورات بالا رو بصورت زیر بنویسید:

font: 1em/1.5em bold italic small-caps verdana,serif

اینطوری خیلی خلاص تر شده و خوانا نیز هست .

2.دو کلاس با همدیگر

معمولا شما برای یک تگ و… از یک کلاس استفاده میکنید و به این معنی نیست که شما نمی تونید در صفت بیش از یک کلاس استفاده کنید در حقیقت شما میتوانید کلاس های بیشتری را استفاده کنید مثال:

در دستور بالا فقط یک کلاس text رو به <p> تخصیص دادیم ولی اگر بخوایم بیش از یک کلاس رو به <p> تخصیص بدیم بعد از نوشتن نام اولین کلاس یک Space میزنیم و بعد نام کلاس دیگر و می نویسیم یادتون باشه باید Space بزارید نه کاما مثال:

3.مقدار پیش فرض Border در CSS

وقتی شما یک Border رو تعریف می کنید معمولا رنگ،پهنا،Style و … مثلا border: 3px solid #000 که یه border مشکی با ضخامت px3،حالا شما تصور کنید فقط و فقط border style رو تعیین کنید بصورت زیر:

border: solid

در دستور بالا مقادیر دیگر مقدارهای پیش فرض در نظر گرفته می شود اما مقدارهای پیش فرض کدومند؟

پهنای border بصورت پیش فرض medium(برابر یا حدود 3-4 Px) هستش اما رنگش دقیقا رنگ متنی هستش که در boder هست

4.دستور !important

اکثرا تمامی دستورات Css با اولویت اجرا میشن اما اگر شما !important رو بعد از دستور css بنویسید بعد از این دستور صرف نظر میکنه از اونچه که پیش میاد این دستور برای تمامی Borwser ها بجز IE کار میکنه مثال:

margin-top: 3.5em !important; margin-top: 2em

در این دستور top-margin که برای با em 3.5 برای تمامی Browser ها بجز IE،که top-margin برابر با em2 هست این قابلیت بعضی مواقع در Relative margin میتونه براتون مفید باشه مثل همین دستور بالا که با اندکی تفاوت در IE و بقیه مرورگر ها مشاهده می کنید.(کاربرد این دستور رو زمانی درک می کنید که میخواید یک قالب رو فارسی کنید.)

5.<table> فراموش کنید و با <div> کار کنید

یکی از بزرگترین مزیت های Css استفاده از <div> بخاطر انعطاف پذیری و . … که داره هستش ما با table میتونیم جدول درست کنیم و … در حالیکه وظیفه اصلی Div فقط و فقط طراحی قالب هستش و انعطاف پذیری بیشتری نسبت به table داره وقتی از div استفاده میکنید کد کمتر،بهینه تر رو تولید میکنید همچنین با استفاده از div شما می تونید از page rank بالاتری در مورتور های جستجوگر قرار بگیرید.

6.Css Debugging Tools

برای اینکه درک بهتری از Css داشته باشین و ابزاری میخوایین که کد های Css رو ویرایش و بصورت instant preview (نمایش فوری) و بهینه بهتون نشون بده میخوام ابزاری رو معرفی کنم برای Debug کردن کدهای Css که میتونید این ابزار رو بر روی مرورگرتون نصب کنید.

7.گوشه های گرد شده در Css

برای گرد کردن گوشه های میتونید از دستور Border-radius که تمامی گوشه ها رو گرد میکنه استفاده کنید.همچنین دستورات

border-top-right-radius // گوشه بالا راست

border-top-left-radius // گوشه بالا چپ

border-bottom-right-radius // گوشه پایین راست

border-bottom-left-radius // گوشه پائین چپ

گرد کردن گوشه ها در مرورگرها دستورات مخصوص اون مرورگر رو میخواد

برای فایرفاکس

-moz-border-radius

برای کروم

-webkit-border-radius

(مرورگر اکسپلورر در نسخه های 9 و بالاتر پشتیبانی میشه).

8.IE Tweaks

تصاویر PNG در نسخه های مختلف IE ویژگی Transparancy خودش رو ندارن این نوع فایل ها Level های مختلفی دارن که باگ هایی در IE وجود داره و این تصاویر Transparancy خودشون رو حفظ کن برای اینکار از کد زیر استفاده کنید:

#regular_logo

{

background: url(‹test.png’); width:150px; height:55px;

}

/* \\ */

* html #regular_logo

{

background:none;

float:left;

width:150px;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’test.png’, sizingMethod=’scale’);

}

/* */

9.حساس بودن المان name در Css

وقتی شما از Css و XHTML باهم استفاده می کنید المان name به حروف کوچک و بزرگ حساس هست من پیشنهاد میکنم همیشه بصورت جروف کوچیک تایپ کنید همچنین در HTML و XHTML صفت کلاس و ID هردو به حروف حساس هستن

10.سعی کنید در صفحات وب از تگ <blink> استفاده نکنید و بجاش از دستور Text-decoration در Css استفاده کنید

Text-decoration:blink

$\"\"$ $\"\"$ $\"\"$ $\"\"$ $\"\"$ $\"\"$ $\"\"$ $\"\"$