#نکته_آموزشی #css

⭕ متوقف کردن تمام استایل ها

🔶️ دقت داشته باشید که از این ترفند باید خیلی کم استفاده کنید، چرا که اگر از این دستور برای هر چیزی استفاده کنید، در طولانی مدت با مشکلاتی رو به رو خواهید شد. اما در صورتی که می خواهید بخاطر یک المان خاص یک استایل CSS دیگر را نادیده بگیرید، در دستور css خود بعد از استایل!importatnt استفاده کنید. برای مثال، اگر می خواهید سرفصل های H2 در بخش خاصی از سایت بجای آبی بودن، قرمز باشد، باید از دستور یا کد CSS که در عکس بالا آمده است استفاده کنید.

🖥 @FunProGraming

#نکته_آموزشی #css

⭕ وسط چین

✅ وسط چین گول زننده است، چون به چیزی که می خواهید وسط باشد بستگی دارد. بیایید نگاهی به CSS آیتم هایی که بر اساس محتوا باید وسط باشند، بیندازیم.

🔶️ متن
متن با استفاده از text-align:center; در وسط قرار می گیرد. اگر می خواهید در یک سمت قرار گیرد، به جای وسط چین از چپ و راست استفاده کنید.

🔶️ محتوا
تگ div (یا هر المان دیگری) می تواند با اضافه کردن حالت block و استفاده از حاشیه های خودکار (auto margins) در وسط قرار بگیرد. کد دستوری CSS به شکل زیر خواهد بود.

در تصویر بالا به این علت برای عرض، مقدار «هرچیز کمتر از 100% یا anything under 100%» گذاشته شده است که اگر مقدار آن 100% باشد، در آن زمان تمام پهنا را در بر می گیرد و دیگر نیازی به وسط گذاری نبود. بهتر است یک عرض ثابت مثل 60% یا 550 پیکسل یا غیره داشته باشیم.

🖥 @FunProGraming

#نکته_آموزشی #css

⭕ تنظیم عمودی (برای یک خط متن)

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

🖥 @FunProGraming

#نکته_آموزشی #css

⭕افکت های هاور

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

✅ این دستور این چنین عمل می کند که وقتی فردی بر روی تگ سرفصل شما (h2) می رود، رنگ آن از مشکی به قرمز تغییر می کند. موضوع جالب درباره ی استفاده از :hover این است که دیگر نیازی نیست بار دیگر اندازه ی فونت را مشخص کنید (اگر نمی خواهید تغییر دهید). این دستور فقط آن چیزی که شما مشخص می کنید را تغییر می دهد.

🖥 @FunProGraming

#نکته_آموزشی #css

⭕ استفاده از دستور !important

🔶️ طراحان با تجربه، از کاربرد این دستور اطلاع دارند، اما معمولا تازه کارها، از این دستور !important در CSS بی اطلاع هستند و تعجب می کنند. با افزودن دستور !important به انتهای دستور css تان، اولویت دستور مورد نظر را نسبت به دستورات دیگر که با آن در تضاد هستند، افزایش می دهید.
در کد زیر، رنگ زمینه، به دلیل وجود !important آبی خواهد بود (و نه قرمز)

.page {
  background-color: blue !important;
  background-color: red;
}

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

🖥 @FunProGraming

#نکته_آموزشی #css

⭕ استایل دهی به لیست های مرتب به شیوه ی متفاوت Ordered list style

✅ استایل دهی به اعداد یک لیست مرتب (شماره گذاری شده) به شیوه ای متفاوت نسبت به باقی متن هریک از آیتم های لیست.
در کد زیر، همانطور که می بینید، یک فونت را برای تگ ol تعریف کرده ایم و بعد برای تگ p ی درون آن، مجددا فونت را تغییر داده ایم. به این ترتیب، استایل خود لیست (شامل اعداد لیست) با محتوای آن (که باید در درون p قرار گرفته باشد) متفاوت خواهد بود.
ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}
ol p {
  font: normal .8em Arial, Helvetica, sans-serif;
  color: #000000;
}

🖥 @FunProGraming

#نکته_آموزشی #css

⭕ استایل پر رنگ کردن تگ های acronym و abbr

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

acronym, abbr{
  border-bottom: 1px dotted #333;
  cursor: help;
}

🖥 @FunProGraming

#نکته_آموزشی #css

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

⭐ تنظیم سایز فونت به طور مناسب به 62.5% در تگ <body> باعث می شود که 1em به لحاظ سایز معادل 10px باشد. این کار به شما اجازه می دهد که به سادگی و آسانی از واحد em استفاده کنید و بدانید که معادل آن به پیکسل چقدر است.
body {
  font-size: 62.5%;
}

🖥 @FunProGraming

#نکته_آموزشی #css

⭕ پررنگ کردن فیلد های ورودی متنی

⭐ با استفاده از روش زیر می توانید فیلد های متنی که فوکوس را در اختیار دارند را highlight کنیم. البته این روش در IE کار نخواهد کرد
input[type=text]:focus, input[type=password]:focus {
  border:2px solid #000;
}

🖥 @FunProGraming

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

.
.
نظر شما چیه؟
.
Tags:
#programming #java #python #web #oop
#oopl #css #cs #developer #php #programmer #html #web #mobile #mob #flutter
#آموزش_برنامه_نویسی #سی_شارپ #جاوا #پایتون #برنامه_نویسی #طراحی_وب #طراحی_سایت #شی_گرا #شی_گرایی #اپلیکیشن