آموزش css

[hostime]

static

این ویژگی در حقیقت مشخص می کند که عنصر مربوطه باید در محلی که کد آن نوشته شده نمایش داده شود. وقتی که از این ویژگی استفاده می کنیم ویژگیهای top, left, bottom, right کاربردی ندارند.
این ویژگی به صورت پیش فرض از طرف مرورگر برای صفحه مورد استفاده قرار می گیرد.

[hostime]

fixed

چون اینترنت اکسپلورر بیشتر از سایر مرورگرها مورد استفاده قرار می گیرد و از ویژگی fixed در CSS پشتیبانی نمی کند زیاد به این ویژگی نمی پردازیم. اما در هر صورت ویژگی جالبی است. در اینجا فقط به ذکر یک مثال بسنده می کنیم:
در این مثال از ویژگی position:fixed برای تعیین موقعیت یک DIV استفاده می کنیم:

<div style="position:fixed; top:50%; float:right">اگر با مرورگر netscape یا مرورگرهایی مثل firefox و opera از این صفحه بازدید کنید محتویات این div در میانه صفحه و سمت راست آن به نمایش در می آیند.</div>

اگر می خواهید ببینید این ویژگی چگونه کار می کند لینک زیر را با یکی از مرورگرهای Opera, Netscape یا Firefox مشاهده کنید و صفحه را با استفاده از اسکرول بار به بالا و پایین ببرید:

استفاده از ویژگی position:fixed ( لینک در پنجره جدید باز می شود ).

[hostime]

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

همانطور که می دانید با وجود اینکه برخی از عناصر در صفحه با هم تفاوت دارند، از یک تگ HTML برای ایجاد آنها استفاده می شود.برای مثال برخی از این عناصر را که از تگ <input> در به وجود آوردن آنها استفاده می شود می توانید در زیر مشاهده کنید:

<"input type="text>
کادرهای متنی که در فرمها استفاده می شود.

<"input type="checkbox>
چک باکس هم با استفاده از تگ <input> به وجود می آید.

<"input type="radio>
در ساختن دکمه های رادیو هم از همان تگ استفاده می شود.

<"input type="button>
این تگ در ساختن هم استفاده می شود.

<"input type="submit>
برای ساختن دکمه ارسال فرم هم از تگ <input> استفاده می شود.

که در ادامه بیشتر توضیح خواهم داد.

[hostime]

وارد کردن CSS در تگهای HTML با استفاده از شناسه Style

ساده ترین راه برای افزودن استایل به یک صفحه استفاده از شناسه style در تگهای HTML است.
برای افزودن استایل به یک تگ باید عبارت " "=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( " ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید.

<div style="property:value">

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

<div style="color:green">متن داخل DIV </div>

مطلب بعدی...

[hostime]

استفاده از استایل خارجی برای طراحی صفحات HTML

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

div { font-family:Arial }
.redtext { color:red }

حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته باشید که پسوند فایل باید css. باشد. ).

[hostime]

تغییر موقعیت عناصر صفحه با استفاده از CSS

position

ویژگی position به ما اجازه می دهد تا تعیین کنیم که آیا می خواهیم موقعیت یک عنصر در صفحه مشخص شود یا نه. اگر می خواهیم آن عنصر موقعیت مشخصی داشته باشد موقعیت عنصر را در صفحه تعیین می کند. چندین مقدار را می توان برای این ویژگی قرار داد. در اینجا می توانید این مقادیر را با کمی توضیح در مورد هر کدام ببینید:

[camelian77]

واقعا عالی هست آموزش شما. خیلی چیز ها رو یاد گرفتم. ادامه بدید!

[hostime]

top

این ویژگی موقعیت یک عنصر را از بالای صفحه تعیین می کند.( ویژگیهای top, left, bottom, right بیشتر زمانی مورد استفاده قرار می گیرند که برای یک عنصر ویژگی position تعیین شده باشد. )
در مثال قبل همانطور که ملاحظه می کنید از ویژگی top:65px استفاده شده است که این ویژگی معین می کند که DIV با فاصله 65 پیکسل از بالای پنجره مرورگر به نمایش در می آید.
مقداری که برای ویژگیهای top, bottom, left, right در نظر گرفته می شود به صورت می تواند باشد. یا به صورت عددی در واحد پیکسل که در این صورت باید پس از عدد مربوطه از حروف اختصاری px استفاده شود یا به صورت درصد که پس از عدد با ید از علامت درصد (%) استفاده شود.

[hostime]

bottom

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

[hostime]

left

این ویژگی موقعیت عنصر را از سمت چپ پنجره مرورگر تعیین می کند.
در مثال زیر از ویژگیهای bottom و left برای همان DIV مثال قبل استفاده می کنیم:

<div style="position:absolute; bottom:65px; left:20px; border:double #0033cc; width:350px; color:#ffff00; background-color:#33cccc; height: 40px;">این div در موقعیت تعیین شده در کد آن نمایش داده می شود.</div>