اینجا هستید :
خانه آموزش های طراحی وبسایت آموزش CSS معرفی چند ترفند CSS مفید و کاربردی که به کارتان می آید

معرفی چند ترفند CSS مفید و کاربردی که به کارتان می آید

معرفی چند ترفند CSS مفید و کاربردی که به کارتان می آید

در این مطلب همراه شما هستیم با مجموعه ای از چند ترفند CSS مفید که می توانید هنگام کار با صفحات وب و استایل دهی از آنها استفاده کنید.

این ترفندها همراه با کدهایی که در ادامه خواهد آمد برای شما گذاشته شده است تا از آنها برای پروژه های خود استفاده کنید.

همراه با کدنویسی به زبان ساده باشید با ۲۲ ترفند CSS مفید و کاربردی که مطمئنا به کارتان خواهد آمد.

سری آموزش های سی اس اس (CSS)

۲۲ ترفند CSS کاربردی

ممکن است که برخی از این ترفند ها آشنا باشید برای هم برای یادآوری و هم برای کسانی که در این زمینه اطلاعاتی نداشته اند مفید خواهد بود.

١ – تغییر رنگ متن در حالت انتخاب شده

شما به کمک CSS می توانید رنگ متن صفحات وب را در حالت انتخاب شده مشخص کنید. این ترفند CSS دست کم در مرورگر های جدید نظیر safari و firefox کار می کند.

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

٢ – جلوگیری از جهش اسکرول فایرفاکس

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

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

در صورتی که می خواهید اسکرول همواره در فایرفاکس نمایان باشد، می توانید از دستور و ترفند CSS زیر استفاده کنید:

٣ – شکستن صفحات و رفتن به صفحه ی بعد هنگام پرینت

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

به کمک CSS می توانید محل شکسته شدن صفحات و رفتن به صفحه ی بعد در هنگام پرینت را کنترل کنید.

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

۴ – استفاده از دستور important!

طراحان با تجربه، از کاربرد این دستور اطلاع دارند، اما معمولا تازه کارها، از این دستور important! در CSS بی اطلاع هستند و تعجب می کنند.

با افزودن دستور important! به انتهای دستور css تان، اولویت دستور مورد نظر را نسبت به دستورات دیگر که با آن در تضاد هستند، افزایش می دهید.

در کد زیر، رنگ زمینه، به دلیل وجود important! آبی خواهد بود (و نه قرمز)

کاربرد روش فوق وقتی است که شما یک css rule می نویسید، اما متوجه می شوید که هیچ تاثیری ندارد! دلیل این مسئله احتمالا این است که یک دستور دیگر با اولویت بالاتر وجود دارد که اثر دستور شما را خنثی می کند.

برای این که دستور شما اولویت بالا تری داشته باشد و اثر دستورات دیگر را خنثی کند، می توانید از important! استفاده کنید.

۵ – ارتفاع حداقل که در تمامی مرورگر ها کار می کند.

متاسفانه مرورگر Internet Explorer دستور min-height در CSS را درک نمی کند و لذا نمی توان با دستور فوق، ارتفاع حد اقل را در IE مشخص نمود.

برای حل این مشکل می توانید از ترفند CSS زیر استفاده کنید.

۶ – مشخص کردن لینک هایی که در پنجره ی جدید باز می‌شوند.

کد و ترفند CSS زیر سبب می شود که لینک هایی که در پنجره ی جدید باز می شوند، را با استایل ویژه نمایان می کند. به این ترتیب، بازدیدکنندگان سایت، قبل از این که بر روی لینک کلیک کنند، می دانند که این لینک در یک پنجره یا تب جدید باز خواهد شد

در کد فوق چند نکته وجود دارد که خوب است به آنها توجه کنید:

به انتخابگر a[target=”_blank”] توجه کنید. در CSS می توان تگ های html را بر اساس مقادیر خواص آن ها فیلتر کرد. برای این منظور همانطور که می بینید، مقدار خواص را در درون [] قرار می دهیم.

در این دستور لینک هایی که دارای خاصیت target=”_blank” هستند را انتخاب کرده ایم. یعنی لینک هایی که در یک تب جدید باز می شوند.

به کلاس کاذب :before و :after توجه کنید. این دو کلاس، تگ خاصی را هدف نمی گیرند، بلکه فقط یک نقطه ی خالی در قبل یا بعد تگ مربوطه را انتخاب می کنند.

به دستور content در CSS توجه کنید. به کمک دستور content می توان یک کاراکتر یا یک متن را در قبل یا بعد از یک تگ قرار داد. توجه کنید که دستور content فقط زمانی قابل استفاده است که از کلاس کاذب :after و یا :before استفاده شده باشد.

در کد فوق، ما یک علامت ۲۷۹C که به صورت یک فلش نمایش داده می شود در قبل و بعد لینک ها قرار داده ایم.

۷ – استایل دهی به لیست های مرتب به شیوه ی متفاوت

معرفی چند ترفند CSS مفید و کاربردی که به کارتان می آیداستایل دهی به اعداد یک لیست مرتب (شماره گذاری شده) به شیوه ای متفاوت نسبت به باقی متن هریک از آیتم های لیست.

در کد زیر، همانطور که می بینید، یک فونت را برای تگ ol تعریف کرده ایم و بعد برای تگ p ی درون آن، مجددا فونت را تغییر داده ایم.

به این ترتیب، استایل خود لیست (شامل اعداد لیست) با محتوای آن (که باید در درون p قرار گرفته باشد) متفاوت خواهد بود.

۸ – استفاده از حروف بزرگ در اولین حرف مقاله

معرفی چند ترفند CSS مفید و کاربردی که به کارتان می آید
شما می توانید حرف اول مقاله تان را همانند روزنامه ها و مجلات، بزرگ کنید! برای ایجاد این جلوه، می توانید از کلاس کاذب :first-letter استفاده کنید.

۹ – شفافیت به گونه ای که در تمام مرورگر ها کار کند

گرچه CSS 3 خاصیت جدید opacity را برای شفافیت معرفی کرده است، اما همه ی مرورگرها از آن پشتیبانی نمی کنند. این یک ترفند CSS برای شفافیت در همه ی مرورگرها می باشد

۱۰ – حذف اسکرول عمودی در textarea ها در IE

مرورگر Internet Explorer بدون توجه به ارتفاع متن، یک اسکرول عمودی به کادر های متنی textarea اضافه می‌کند. با استفاده از روش زیر می توانید مشکل فوق را برطرف نمایید

١۱ – حذف حاشیه از لینک های فعال

برخی از مرورگر ها مانند فایرفاکس و IE دور لینک هایی که کاربر کلیک می کند، یک حاشیه ی نقطه چین نمایش می دهند. این یک ویژگی مفید است و به این ترتیب، کاربر می تواند بفهمد که روی کدام لینک کلیک کرده است و یا در حال حاضر فوکوس بر روی کدام لینک قرار دارد. با این حال، این ویژگی گاها باعث زشت شدن لینک می شود. برای حذف این حاشیه می توانید از کد زیر استفاده کنید:

١۲ – جلوگیری از مخفی شدن عناصر در IE

گاهی اوقات مرورگر IE به شیوه ی خاصی رفتار می کند و سبب می شود که برخی عناصر مخفی شوند. و هنگامی که با موس چیزی را انتخاب می کنیم، مجددا عناصر مخفی شده، ظاهر می شوند.

این مشکل به سبب برخی باگ ها در IE به هنگام برخورد با عناصر شناور (float) به وجود می‌آید. این مشکل با افزودن دستور position: relative به عناصری که مخفی می شوند، قابل حل می باشد.

١۳ – آیکون های خاص بر اساس خواص

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

به این روش شما می توانید آیکون های متفاوتی را به لینک هایی که به یک فایل pdf یا یک فایل word اشاره می کنند انتساب دهید و کاربر قبل از این که کلیک کند، می داند که مقصد این لینک، فایل pdf است یا تصویر است یا …

١۴ – نشانگر pointer در CSS

با استفاده از خاصیت cursor می توانید شکل اشاره گر موس را تغییر دهید. مقدار cursor: pointer سبب می شود که اشاره گر موس شبیه دست (مانند لینک ها) بشود.

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

١۵ – با حروف درشت نوشتن متن

برای این که کلیه ی حروف یک متن با استفاده از حروف بزرگ نمایش داده شود، می توانید از دستور text-transform استفاده کنید. این دستور معمولا برای نمایش دادن عنوان صفحات مفید است.

١۶ – حروف درشت کوچک

با استفاده از دستور زیر، می توانید کلیه ی حروف متن مورد نظر را با استفاده از حروف بزرگ (capital) بنویسید اما سایز حروف هر کلمه نسبت به حرف اول آن کلمه کوچک تر خواهد بود (small caps)

۱۷ – پررنگ کردن فیلد های ورودی متنی

با استفاده از روش زیر می توانید فیلد های متنی که فوکوس را در اختیار دارند را highlight کنیم. البته این روش در IE کار نخواهد کرد

۱۸ – حذف حاشیه ی تصویر لینک شده

در زیر لینک های تصویری (تصاویری که در درون لینک قرار گرفته باشند) یک حاشیه ی آبی رنگ زشت نمایش داده می شود.

بهتر است که این حاشیه ی زائد را برای همه ی لینک های تصویری حذف کنیم و اگر مورد خاصی را خواستیم با حاشیه نمایش دهیم، مجددا حاشیه را به آن اضافه کنیم. برای این منظور، از دستور زیر استفاده می کنیم:

۱۹ – مرتب سازی فرم ها بدون استفاده از جدول

معرفی چند ترفند CSS مفید و کاربردی که به کارتان می آیدآن زمانی که برای استایل دهی و مرتب سازی فرم ها از جدول ها استفاده می شد، گذشت.

CSS به شما اجازه می دهد که فرم های قابل دسترس ایجاد کنید که دارای طرحی مشابه جدول باشند اما از جدول به هیچ عنوان در آن ها استفاده نشده باشد.

برای این منظور از تگ <label> استفاده می کنیم.

با استفاده از تگ label می توانیم مطمئن شویم که دسترسی پذیری فرم بیشتر خواهد شد.

در زیر یک نمونه کد HTML و CSS مربوطه برای ایجاد یک فرم بدون استفاده از جدول آمده است و می توانید از آن به عنوان الگو برای طراحی فرم هایتان استفاده کنید:

کد HTML

کد CSS

به خاصیت for در تگ label توجه کنید. for در واقع id ی عنصری است که این label برای آن تهیه شده است.

label ها برچسب هایی هستند که برای کادر های متنی و … در صفحه قرار می گیرند. باید با خاصیت for مشخص کنیم که این label برای کدام عنصر می باشد.

٢۰ – انتخاب یک سایز پایه‌ی مناسب برای صفحه

تنظیم سایز فونت به طور مناسب به ۶۲٫۵% در تگ <body> باعث می شود که ۱em به لحاظ سایز معادل ۱۰px باشد. این کار به شما اجازه می دهد که به سادگی و آسانی از واحد em استفاده کنید و بدانید که معادل آن به پیکسل چقدر است.

٢۱ – پر رنگ کردن تگ های acronym و abbr

تگ acronym برای نوشتن علامات اختصاری سرنام کلمات مفید است و تگ abbr برای نوشتن کلمات اختصاری می باشد.

تگ های acronym و abbr اطلاعات مفیدی را برای کاربران، مرورگرها و موتور های جستجو فراهم می کنند. اما بیشتر مرورگرها، به جز فایرفاکس، این تگ ها را به طور متفاوتی نمایش نمی دهند.

در زیر ترفند CSS برای highlight کردن تگ های acronym و abbr آمده است.

٢۲ – بازنشانی CSS توسط Eric Meyer

قطعه کد CSS زیر کلیه ی مقادیر پیش فرض مرورگر را بازنشانی می کنند و سبب می شود که کدهای css شما در تمامی مرورگر به گونه ی یکسان کار کند و ناسازگاری مرورگر ها را خنثی می کند.

خب در پایان این مطلب با ۲۲ ترفند CSS مناسب برای طراحی صفحات سایت های خود آشنا شدید. امیدواریم برای شما مفید باشد.

درباره نویسنده

مدیریت علاقه دارم در زمینه آموزش های مباحث کامپیوتری و نرم افزاری هر دانش و تجربه ای دارم با کاربران عزیز به اشتراک بزارم... ♥
منتظر نظرات خوب شما هستیم!

هنوز هیچ دیدگاهی وجود ندارد

    • سلام , مهمان