۱٠ ترفند CSS که احتمالا تا کنون نمی دانستید!

١ - دستور کوتاه شده‌ی تنظیم فونت‌ها

برای تنظیم فونت ها در CSS احتمالا تا کنون به طریق زیر عمل می کردید:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif;

اما نیازی به استفاده از کد طولانی فوق نیست، زیرا به سادگی می توانید از کد کوتاه شده ی زیر نیز استفاده کنید:

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

روش فوق خیلی بهتر است، اما باید فقط به یک نکته توجه کنید که روش فوق فقط وقتی کار خواهد کرد که هر دو خاصیت font-family و font-size را مشخص کنید. مقدار font-family همواره باید در انتهای خط قرار بگیرد و font-size باید دقیقا قبل از font-family قرار بگیرد.

به طور خلاصه می توان چنین نوشت:

font: FONT-WEIGHT FONT-STYLE FONT-VARIANT FONT-SIZE/LINE-HEIGHT FONT-FAMILY;

نکته ی دیگر این که اگر مقادیر font-weight و font-style و font-variant را مشخص نکنید، مقادیر همه ی این ها به طور پیش فرض برابر normal است.

٢ - استفاده از دو کلاس با هم

شما می توانید به هر تگ html بیش از یک کلاس انتساب دهید به این ترتیب که در خاصیت class چند تا کلاس را به استفاده از space از هم جدا می کنید:

<p class="text side">...</p>

به این ترتیب، در css کلیه ی rule هایی که به هر یک از کلاس های موجود انتساب داده شده باشد، برای آن تگ html استفاده خواهد شد.
توجه کنید که اگر برای یکی از کلاس ها، یک css rule تعریف شده باشد و برای کلاس بعدی rule متضاد آن تعریف شده باشد، کلاسی که در html اول آمده باشد، اولویت بیشتری خواهد داشت.

٣ - مقدار پیش‌فرض border در CSS

هنگامی که border را برای یک عنصر تعریف می کنید، معمولا مقادیر width و color و style را مشخص می کنید. برای مثال دستور زیر برای شما یک حاشیه‌ی سیاه رنگ یکنواخت به قطر 1 پیکسل ایجاد می کند:

border: 3px solid #000;

ولی در دستور فوق، تنها گزینه ای که الزامی است، style است. یعنی border: solid

اگر فقط بنویسید border: solid برای سایر خصوصیات از مقدار پیش فرض استفاده خواهد شد. اما مقادیر پیش فرض، چه چیزی هستند؟
مقدار پیش فرض برای عرض حاشیه (border-width) برابر medium است که تقریبا معادل 3 الی 4 پیکسل می باشد
مقدار پیش فرض برای رنگ حاشیه (border-color) برابر رنگ متن درون حاشیه در نظر گرفته می شود.
در صورتی که مقادیر پیش فرض، برای شما مناسب است، می توانید مقدار آن ها را مشخص نکنید تا از مقدار پیش فرض استفاده شود.

۴ - کد CSS مخصوص پرینت

اکثر صفحات وب به گونه ای طراحی می شوند که برای نمایش در مانیتور کامپیوتر مناسب باشد. اما اگر تصویر صفحه ی وب را با استفاده از پرینتر بر روی کاغذ چاپ کنیم، زیاد جالب نمی شود.

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

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

برای این منظور، باید در تگ head یک فایل css جدید را برای print مشخص کنیم و باید خاصیت media را در تگ link با مقدار "print" مشخص کنیم

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

خاصیت media مشخص می کند که فایل css فوق برای چه ابزاری قابل استفاده است. screen به معنی صفحه نمایش کامپیوتر است و print به معنی پرینتر است. با استفاده از دستور فوق، زمانی که کاربر می خواهد صفحه ی وب را پرینت بگیرد، به طور خودکار از فایل css دوم استفاده خواهد شد.

اما در داخل فایل printstyle.css چه کدی بنویسیم؟ کافی است کدهایی بنویسیم که صفحه برای کاغذ بهینه شود. برای این منطور معمولا باید نوارهای کناری سایت را با استفاده از دستور display:none مخفی کنیم زیرا معمولا شامل اطلاعات مفیدی برای چاپ نمی باشند. همچنین باید رنگ زمینه ی عناصر را حذف کنیم و کلیه ی عناصر و تصاویر گرافیکی که جنبه ی تزئینی دارند را حذف کنیم و همچنین می توانیم فونت مناسب چاپ استفاده کنیم و برای سایز فونت ها هم از واحد هایی مانند pt استفاده کنیم...

۵ - تکنیک جایگذاری تصویر

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

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

<h1><img src="buy-image.gif" alt="Buy online" /></h1>

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

<h1>Buy online</h1>

برای حل این مشکل می توان از تکنیک جایگذاری تصویر با متن استفاده کرد: متن را با کد عادی html می نویسیم و سپس به کمک css تصویر را با متن جایگزین می کنیم

h1 {
  background: url(buy-image.gif) no-repeat;
  height: 100px;
  text-indent: -2000px;
} 

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

۶ - جایگزین CSS box model hack

...

٧ - موقعیت دهی یک عنصر بلوکی در وسط

برای ایجاد یک طرح با عرض ثابت در وسط صفحه، یک روش این است که کل محتویات صفحه را داخل یک <div> قرار دهید. توجه کنید که <div> یک عنصر بلوکی است.
برای قرار دادن یک عنصر بلوکی در وسط، کافی است که عرض آن را مشخص کنید و سپس margin چپ و راست آن را با مقدار auto مشخص کنید. به عنوان مثال:

div#content {
  width: 700px;
  margin: 0 auto
}

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

اما روش فوق در نسخه های قدیمی مرورگر IE کار نمی کند. برای این که این روش در تمامی مرورگر ها کار کند، می توانیم از تکنیک زیر استفاده کنیم:

body {
  text-align: center;
}
div#content {
  width: 700px;
  margin: 0 auto;
}

توجه کنید که text-align را برای عنصر body برابر center در نظر گرفتیم. به این ترتیب همه ی عناصر در وسط صفحه متمرکز می شوند. اما از آن جایی که می خواهیم عناصر در سمت چپ باشند، مجددا مقدار text-align را برای div مورد نظرمان مقدار دهی می کنیم.
به این ترتیب روش فوق در مرورگرهای قدیمی هم کار خوهد کرد.

٨ - چیدمان عمودی با CSS

چیدمان عمودی با استفاده از table ها یک روش ابلهانه بود! در جدول ها، برای این که محتوای یک خانه، به لحاظ عمودی در وسط خانه‌ی جدول قرار گیرد، می توانستیم از خاصیت vertical-align با مقدار middle استفاده کنیم.

اما این روش در یک طرح مبتنی بر CSS کار نخواهد کرد.
تصور کنید که یک منوی ناوبری در سایت دارید که ارتفاع آن به اندازه ی 2em مقدار دهی شده است. اکنون در CSS از دستور vertical-align استفاده می کنید.
اما استفاده از vertical-align هیچ تاثیری نخواهد گذاشت و متن همچنان در بالای باکس قرار خواهد گرفت!

پس چه باید کرد؟
کافی است که مقدار line-height را برابر height عنصر مورد نظر قرار دهید!
در این جا ارتفاع عنصر مورد نظر ما 2em است، لذا به سادگی کافی است که مقدار line-height را برابر 2em تنظیم کنیم و متن در وسط باکس قرار خواهد گرفت.

٩ - موقعیت دهی درون یک ظرف

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

#container {
  position: relative;
} 

از این پس، هر عنصری که در #container قرار بگیرد، موقعیت دهی آن بر اساس موقعیت ظرف نگهدارنده خواهد بود. (یعنی دیگر بر اساس کل سند صفحه ی وب موقعیت دهی نمی شود.) به عنوان نمونه کد HTML زیر را در نظر بگیرید:

<div id="container">
  <div id="navigation">...</div>
</div>

اکنون برای موقعیت دهی یک عنصر دقیقا 30px از سمت چپ و 5px از سمت بالای ظرف نگهدارنده، کافی است کد زیر را بنویسیم:

#navigation {
  position: absolute;
  left: 30px;
  top: 5px;
}

البته در این مورد خاص، شما می توانستید، با استفاده از دستور margin: 5px 0 0 30px هم همین کار را انجام دهید. با این حال در برخی شرایط، بهتر است (یا لازم است) که از موقیت دهی به شیوه ی مذکور استفاده نمایید

نکته

اگر یک عنصر به موقعیت دهی (position) مطلق (absolute) در درون یک عنصر با موقعیت دهی نسبی (relative) قرار بگیرد، مقادیر top و left و bottom و right عنصر درونی، بر اساس حاشیه ی عنصر بیرونی محاسبه خواهد شد (نه بر اساس پنجره ی مرورگر)


١٠ -

...

این مقاله ترجمه‌ی آزاد از مقاله ی زیر همراه با حذف و اضافات است:
http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml
دسته بندی‌ها: 

دیدگاه‌ها

دست شما بابت این همه زحمت درد نکنه
مفید بود :)

سلام و خسته نباشید
یه کد نوشتم که نمیتونم کاملش کنم اگه میشه کمکم کنید لطفا
میخام وقتی که موس روی کلمه میره قسمت بعدی اون که مخفی هست نمایش داده بشه
یا مثلا اگه موس روی عکس میره اونوقت نوشتش یا یه عکس دیگه زیرش یا جاش نمایش داده بشه
امیدوارم کمکم کنید

.tooltip {display:none;}
a:hover {z-index:500;display:block;width:200px;text-align:left;border:1px #FCE99E solid;background-color:#ffffff;}

نمایش جمله زیر با اشاره موس

نمایش این جمله

@ahmad ، سلام. متشکرم
روش ساده برای این کار اینه که از jQuery استفاده کنید. مثلا کد زیر را ببینید:

<!doctype html>
<html>
  <head>
    <title></title>
    <meta charset="utf8" />
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
      (function($) {
        $(function() {
          $('#clickme')
          .hover(function() {
            $('#showme').toggle()
          });
        });
      })(jQuery);
    </script>
  </head>
  <body>
    <p id="clickme" style="border: 1px solid red; background-color: pink;">
      This is some text
    </p>
    <p id="showme" style="border:1px solid green;background-color:lightgreen;display:none;">
      This text should be shown
    </p>
  </body>
</html>
I love Drupal

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

I love Drupal

سلام
ممنون از مطالب خوبتون
وب سایت شما امکان عضویت هم داره؟

من می خوام یک بلوک مادر داشته باشم و چنتا دکمه داخلش بچینم شبیه جدول.
مشکل اینجاست که ارتفاع بلوک مادر کمه و نمی خوام خودم بهش مقدار ثابت بدم می خوام همواره بر اساس بلوک های داخلش تغییر کنه
از خاصیت height:auto هم استفاده کردم ولی نشد

درود بر شما

به طور پیش فرض رفتار بلوک ها طوری است که به اندازه ی محتویات شان ارتفاع پیدا می کنند.
شما باید کد هایتان را ارسال کنید تا بتوانم دقیقا موضوع را بررسی کنم.

با این حال کد های زیر را استفاده کنید شاید برای مورد شما قابل استفاده باشد.
overflow:auto;
یا
height:auto;min-height:100%;

I love Drupal

سلام مرسی مشکل من اینه که بلد نیستم چطوری با css3 متن رو کاری کنم که متن پخش بشه و دوباره جمع بشه اگه بلدید یا تو سایت بذارید یا واسم ایمیل کنید ممنون میشم

سلام-لطفا پرینت صفحه با سی اس اس را برای من ارسال کنید که وقتی کاربر روش کلیک میکنه فقط مطلب اون پست چاپ شه نه کل وب

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

سلام.
می بایست، از کلاس مجازی :hover استفاده کنید.
در حالت hover طوری استایل دهید که به شکل مورد نظرتان در بیاد.
معمولا در این حالت میشه از transition ها و transform ها و animation ها استفاده نمود.

I love Drupal

داشتم نا امید میشدم اما اخرین قسمت به کمک اومد....عالی بود.

سلام دوست عزیز و تشکر از شما
من چند وقتی هست میخوام موردی رو ایجاد کنم هر چقدر تلاش کردم نشد که نشد
میخوام عکسی داشته باشم که وقتی موس روی اون میره مثل نوار شناور این سایت باشه https://www.gavick.com/ وقتی موس روی عکس میره کادری باز میشه و متنی کنار اون نمایش داده میشه البته میخوام متن قابلیت خوانده شدن توسط گوگل هم داشته باشه اگر هم کادری مثل این نباشه خیلی بهتره یعنی یک عکس باشه و وثتی روی اون میری عکس کنار بره و کنار اون متنی نمایش بده ؟ با تشکر فراروان از شما

سلام
از مطالب خوبتون ممنونم.
یه سوالی دارم که ممنون میشم اگر میدونید جواب بدید:
تمام تکست باکس های من در زمان کلیک (اکتیو) ،فقط در گوگل کروم ، بوردر آبی میگیرن.
من این سی اس اس رو دارم ولی جواب نمیده:

input:focus , input:active
{;border:solid 1px transparent !important}

ولی مشکل حل نمیشه.
ممنون میشم اگر راهنمایی بفرمایید.

سلام
چطور میشه یه منو رو روی منو های دیگه قرار داد
مثلا من یه منوی ثابت دارم اما وقتی میرم پایین صفحه اون منوی من میره زیر منوی فوتر :|
لطفا راهنمایی بفرمایید

سلام. از خاصیت z-index استفاده کنید و برای عنصری که می خواهید رو قرار بگیرد آن را با یک عدد مناسب تنظیم کنید.
موفق باشید

I love Drupal

با سلام و ادب
واقعا دست شما درد نکنه
متشکر از پاسخگویی شما
یه سوالی داشتم
چگونه می توان فاصله بین خطوط در نوشته های پست هایم را اصلاح کنم؟
می دونم که باید line-height رو تغییر بدم، اما بیش از ۵۰ تا line-height در قست ویرایشگر قرار داره.
کدومش رو باید تغییر بدم تا فاصله بین خطوط در نوشته های پست تغییر کنه؟
ممنون و متشکر

سلام دوست عزیز
یعنی چی بیش از ۵۰ تا line-height در قست ویرایشگر قرار داره؟
از چه ویرایشگری استفاده میکنید؟

I love Drupal

افزودن دیدگاه جدید