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

6.استایل های لینک یا LINK STATES

طراحان معمولاً استفاده از این استایل ها را فراموش میکنند و همین مسئله باعث بروز مشکلاتی در تجربه کاربر و کارآیی میشود. :link لینک هایی را کنترل میکند که تا به حال کلیک نشده اند و :visited لینک هایی را که کلیک شده اند کنترل میکند. این به کاربر کمک میکند تا تشخیص دهد که چه بخش هایی از سایت را دیده و چه بخش هایی را هنوز ندیده است.در طول دوره Css مقدماتی و پیشرفته با pseudo-class یا کلاس های ساختگی آشنا شده‌ایم توصیه میکنم حتما با کلاس‌هاس ساختگی آشا باشید تا بتوانید در کار با Css مهارت خوبی کسب کنید.

a:link { color: blue; }
a:visited { color: purple; }

7.تغییر سایز تصاویر(RESIZE IMAGES TO FIT)

اگر میخواهید تصویر شما با تغییرات اندازه صفحه هماهنگ باشد و مقیاس پذیر باشد، راهش این است که مقدار خصوصیت max-width را 100% قرار دهید تا با تغییر سایز صفحه عکس هم با آن اندازه شود و ماکسیمم اندازه آن 100% باشد که در بدترین حالت هم از صفحه بیرون نمی زند و پهنای آن هم اندازه پهنای صفحه میشود،بر اساس کد زیر بیشترین پهنای تصویر میتواند 100% باشد و ارتفاع به صورت اتوماتیک هماهنگ با پهنا تغییر میکند.

img {
    max-width:100%;
    height:auto;
}

مطلب مرتبط:20 ترفند ضروری Css برای طراحان وب:بخش اول

8.کنترل عناصر یک بخش

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

.blog img{
    max-width:100%;
    height:auto;
}

9.فرزند مستقیم یا (DIRECT CHILDREN)

آشنایی با این مفهوم کمک زیادی در صرفه جویی در زمان میکند. از کاراکتر > برای انتخاب فرزند مستقیم یک عنصر استفاده کنید :

#footer > a

کد بالا تمامی لینک هایی که مستقیماً داخل شناسه فوتر هستند را انتخاب میکند(یعنی اگر داخل فوتریک div باشد، دیگر لینک های داخل آن div انتخاب نمی شوند). عناصر فرزندی مشخص این حالت برای استایل دادن به لیست ها بسیار کاربرد دارد. یعنی اگر میخواهید به یک آیتم مشخص از لیست اشاره کرده و فقط به آن استایل دهید میتوانید از li:nth-child() استفاده کنید:(برای آشنایی با انتخاب فرزندان عناصر در Css از دوره مقدماتی Css استفاده کنید.).

li:nth-child(2) {
    font-weight:800;
    color: blue;
    text-style:underline;
}

CSS بالا دومین آیتم در لیست را انتخاب میکند و آن را آبی، bold و underline میکند.

10.اعمال کردن CSS به چند کلاس یا SELECTOR

یکی از قابلیت های فوق‌العاده Css امکان هدف قرار دادین چندین کلاس و سلکتور یا انتخاب گر است که میتواند به توسعه  دهنده در روند توسعه و افزایش سرعت کار بسیار کمک کند.فرض کنید میخواهید یک border یکسان به اطراف تمام عکس ها، قسمت blog و sidebar اضافه کنید. نیازی نیست که یک CSS را برای هر کدام تکرار کنید. فقط کافیست هر 3 عنصر را پشت سر هم قرار دهید و با کاما از هم جدا کنید:

.blog, img, .sidebar {
    border: 1px solid #000;
}

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