معرفی ترفندهای کاربردی css
1- کار با پوزيشن ABSOLUTE
اگر ميخواهيد محل قرار گرفتن يک عنصر را در صفحه دقيقاً تغيين کنيد و تحت کنترل داشته باشيد ميتوانيد از پوزيشن absolute استفاده کنيد. اگر مرورگرتان را به عنوان يک جعبه در نظر بگيريد، با پوزيشن absolute دقيقاً ميتوانيد مشخص کنيد که عنصر مورد نظرتان در کجاي جعبه قرار بگيرد. از ويژگي هاي top، right، bottom و left به همراه پيکسل استفاده کنيد تا مکان قرارگيري آبجکت را مشخص نماييد.
2- کاراکتر * به همراه يک SELECTOR
قرار دادن کاراکتر * در کنار يک selector ، تمامي عناصر آن selector را انتخاب ميکند. براي مثال، اگر اگر کاراکتر ستاره را در کنار تگ p قرار دهيد به اين شکل *p و به آن مقداري CSS دهيد، اين CSS ها به تمام تگ هاي p اعمال خواهند شد.
3- کاربرد IMPORTANT!
اين دستور بايد به ميزان کم و با دقت استفاده شود زيرا استفاده بيش از حد آن باعث بروز مشکلاتي در طولاني مدت ميشود. اگر ميخواهيد style اي را به عنصري که خودش در حال حاضر داراي style هست اختصاص دهيد و اصطلاحاً آن style را تحميل کنيد ميتوانيد از !important استفاده کنيد.
4- CENTER کردن عناصر
Center کردن عناصر نياز به دقت دارد زيرا بسته به نوع عنصر طريقه center کردن آن هم متفاوت است.
عنصر متني به وسيله text-align:center ، وسط نويس ميشود. اگر ميخواهيد راست نويس يا چپ نويس شود، به جاي کلمه center ، right يا left را قرار دهيد.
عناصر ديگر يک div يا هر عنصر ديگري با اضافه کردن خصوصيت block و auto کردن margin ، center ميشود .
5- ALIGNMENT عمودی
اين کار را حتما در کد CSS يک منو استفاده خواهيد کرد، شک نکنيد. به اين وسيله متن را در راستاي عمودي تنظيم کرده و در وسط قرار ميدهيد. تنها کافيست مقادير height و line-height را يکسان قرار دهيد.
6- افکت های HOVER
اين افکت ها در سايت براي دکمه ها، لينک ها، آيکون ها و … استفاده ميشوند. با اضافه کردن :hover به يک selector ميتوانيد تعيين کنيد که با آمدن موس روي آن عنصر برخي style هايش تغيير کند.
7- افکت TRANSITION
اگر ميخواهيد در زمان hover افکت تغيير رنگ به سرعت اتفاق نيفتد ميتوانيد از خصوصيت transition استفاده کنيد. در اين حالت تغيير به صورت تدريجي و در يک مدت زمان مشخص اتفاق مي افتد.
8- استايل های لينک
طراحان معمولاً استفاده از اين استايل ها را فراموش ميکنند و همين مسئله باعث بروز مشکلاتي در تجربه کاربر و کارآيي ميشود. :link لينک هايي را کنترل ميکند که تا به حال کليک نشده اند و :visited لينک هايي را که کليک شده اند کنترل ميکند.
اين به کاربر کمک ميکند تا تشخيص دهد که چه بخش هايي از سايت را ديده و چه بخش هايي را هنوز نديده است.
9- تغيير سايز تصاوير
اگر ميخواهيد تصوير شما با تغييرات اندازه صفحه هماهنگ باشد و مقياس پذير باشد، راهش اين است که مقدار خصوصيت max-width را ???% قرار دهيد تا با تغيير سايز صفحه عکس هم با آن اندازه شود و ماکسيمم اندازه آن ???% باشد که در بدترين حالت هم از صفحه بيرون نمي زند و پهناي آن هم اندازه پهناي صفحه ميشود.
10- کنترل عناصر يک بخش
اگر ميخواهيد براي مثال تصاوير موجود در يک قسمت خاص مثلاً بلاگ را هدف قرار دهيد، از يک کلاس blog به همراه تگ مورد نظر استفاده کنيد.
با اين کار فقط تصاوير موجود در قسمت blog انتخاب ميشوند و تأثيري بر روي تصاوير بخش هاي ديگر ندارد.
11- فرزند مستقيم
آشنايي با اين مفهوم کمک زيادي در صرفه جويي در زمان ميکند. از کاراکتر > براي انتخاب فرزند مستقيم يک عنصر استفاده کنيد :
12- عناصر فرزندي مشخص
اين حالت براي استايل دادن به ليست ها بسيار کاربرد دارد. يعني اگر ميخواهيد به يک آيتم مشخص از ليست اشاره کرده و فقط به آن استايل دهيد ميتوانيد از ()li:nth-child استفاده کنيد:
13- اعمال کردن CSS به چند کلاس يا SELECTOR
فرض کنيد ميخواهيد يک border يکسان به اطراف تمام عکس ها، قسمت blog و sidebar اضافه کنيد. نيازي نيست که يک کد CSS را براي هر کدام تکرار کنيد. فقط کافيست هر ? عنصر را پشت سر هم قرار دهيد و با کاما از هم جدا کنيد:
14- ;BOX-SIZING: BORDER-BOX
اين خصوصيت در کد CSS يک خصوصيت محبوب بين طراحان وب ميباشد زيرا مشکلات مربوط به padding و ساختار را حل ميکند.
وقتي به عنصري padding اضافه ميکنيد به ميزان آن padding به پهناي آن عنصر اضافه ميشود براي جلوگيري از اين مسئله ميتوان از ;box-sizing:border-box استفاده کرد.
15- کد :BEFORE
به کمک اين selector ميتوانيد يک عنصر را انتخاب کرده و قبل آن محتوا قرار دهيد. فرض کنيد در وب سايتتان ميخواهيد قبل از هر تگ h2 يک متن مشخص قرار دهيد:
16- کد :AFTER
اين selector هم محتوا را به بعد از يک عنصر مشخص اضافه ميکند. در اين مثال بعد از هر پاراگراف عبارت Read more… اضافه ميشود.
17- کد CONTENT
همانطور که در مثال هاي بالا ميبينيد، content خصوصيتي است که عنصري را جايگذاري ميکند. بيشترين کاربرد اين خصوصيت براي قرار دادن فونت آيکون ها در يک مکان مشخص ميباشد. در صورت قرار دادن متن در content بايد ان را داخل ” ” بگذاريد.
18- CSS RESET
در واقع CSS reset به معني تنظيم يک سري خصوصيت هاي استاندارد براي نمايش دادن درست سايت در مرورگرهاي مختلف ميباشد.
19- سبک دادن به لينک های تماس
اگر لينکي داريد که با کليک بر روي آن تماس حاصل ميشود، ممکن است در استايل دادن به آن با روش هاي معمول دچار مشکل شويد. ميتوانيد از کد CSS زير براي اين کار استفاده کنيد:
امیدوارم از خوندن این مقاله کاربردی لذت برده باشید
صالح کریمی
دیدگاه کاربران
ثبت دیدگاه
برای ثبت نظر، ابتدا وارد شوید.
حمیدرضا اسلامی
👏👏👏👏