یک کد ساده ولی کارآمد CSS

سلام

به احتمال زیاد شما به مشکل margin ها و padding هایی که به صورت ناخواسته به کد های HTML شما اضافه می شوند برخورد کرده اید.
این مشکل بیشتر در تگ های p، form و table دیده می شود. برای اینکه شما خیلی ساده تمامی margin ها و padding ها را برابر صفر قرار دهید، می توانید از کد CSS زیر بهره گیرید:

* {
margin: 0;
padding: 0;
}

گزینشگر (selector) * خصیصه (property) و مقدار (value) موجود را بر روی تمامی عناصر و تگ های HTML به کار می برد.
علاوه بر margin و padding شما می توانید از گزینشگر (*) جهت اعمل فونت، رنگ و … بر روی تمامی عناصر استفاده نمائید.

منبع (source)
موفق باشید

  • Share/Bookmark

خاصیت توو رفتگی سر سطر (CSS text-indent Property)

سلام

توو رفتگی سر سطر یا text-indent اصطلاحا به فاصله اولین سطر تا لبه کناری کادر گفته می شود.
در کتب درسی، روزنامه ها، مجلات و حتی سایت های اینترنتی از فاصله سر سطر جهت زیبای و خوانا شدن متن استفاده می کنند. نمونه این خاصیت در وبلاگ من + زندگی مجازی موجود است.

این خاصیت وراثتی (Inheritance) می باشد. نمونه کد CSS آن را در زیر مشاهده می کنید:

p
{
text-indent: 10%
}

p
{
text-indent: -12px
}

p
{
text-indent: 20px
}

به عنوان مثال این سطر به اندازه ۲۰ پیکسل توو رفتگی دارد.

موفق و سربلند باشید

  • Share/Bookmark

Alternate Style Sheets – استایل جایگزین

گاهی اوقات لازم است از چندین استایل برای طراحی سایت خود استفاده نمائید. مثلا با توجه به بینائی افراد استایل های مختلفی را طراحی کنید.
این کار بسیار ساده است. کافیست بعد از اضافه کردن استایل پایه با دستور زیر

<link rel="stylesheet" title="TITLE" href="URL"/>

که در آن title = عنوان دلخواه برای این استایل و href = آدرس نسبی یا مطلق این استایل می باشد، با استفاده از دستور زیر به تعداد دلخواه استایل جایگزین بسازید:

<link rel="alternate stylesheet" title="TITLE" href="URL"/>

برای سوئیچ کردن بین استایل های مختلف کافی است بعد از باز شدن صفحه حاوی استایل های جایگزین، در مرورگر فایرفاکس (FireFox) به منو View رفته و از زیر منو Page Style استایل جایگزین مورد نظر را انتخاب کنید.
(more…)

  • Share/Bookmark

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

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

  1. گزینشگر – selector
  2. خصیصه – property
  3. مقدار – value

selector {property: value}

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

  • Share/Bookmark

مقدمه ای برای CSS

CSS یا همان Cascading Style Sheets در لغت به معنی شیوه نامه های آبشاری می باشد و در دنیای طراحی وب منظور از آن زبان قالب بندی صفحه معروف به CSS است که طراحی را بسیار آسان تر نموده است.

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

شیوه نامه های inline
در این نوع دستورات لازم در کنار کد های HTML در داخل عبارت “”=style نوشته می شود. مانند زیر:

<p style="color:#aaaaaa;
font-size:12px;">inline</p>

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

<style>

<!–

–>

</style>

مانند:

<style>

<!–

p {

color:#aaaaaa;

font-size:12px;

}

–>

</style>

نکته: عبارت

<!–

بعد از

<style>

و عبارت

–>

قبل از

</style>

به این دلیل می باشد که اگر مرورگر از شیوه نامه پشتیبانی نکند، دستورات شیوه نامه به صورت توضیحات در نظر گرفته می شود(جهت جلوگیری از چاپ آنها به صورت متن).

شیوه نامه های خارجی(پیوند شده)
این شیوه نامه ها به صورت یک فایل جداگانه ذخیره شده و ساختار دستورات و ویژگی های آن مانند دو نوع قبل می باشد. اینگونه شیوه نامه ها در قالب فایلی با پسوند CSS. ذخیره می شوند.
با دستور زیر فایل شیوه نامه خارجی فراخوانی می شود(CSS URL آدرس نسبی یا مطلق فایل شیوه نامه است):

<link rel="stylesheet" href="CSS URL" type="text/css">

  • Share/Bookmark