ترفندهای CSS
ترفندهای CSS
گویش CSS یک کدام از دیدنی ترین گویش های برنامه نویسی میباشد که تا بحال با آن عمل خواهید کرد. ترفندهای CSS نادر نیستند و هرکسی بسته به نیاز و ذوق وسلیقه خودش می‌تواند آن ها را انتخاب نماید و بکار بگیرد.
ترفندهای CSS که در این مکان خوا هیم گفت ممکن است تابحال آن‌ها‌را ندیده باشید و آنان کار نکرده باشید.
هرچند ممکن هست عده ای که حرفه‌ای خیس میباشند با این کدها آشنا باشند اما سعی ما بر این است که کدنویسی به گویش بی آلایش باشد و برای طراحی سایت با ما همراه شوید. هرکسی بتواند به راحتی با کدهای اپ نویسی آشنا خواهد شد.
محرمانه آموزش های سی اس اس (CSS)
گردهمایی اولیه : شناخت با CSS و کاربرد آن در ساخت سایت
گردهمایی دوم : شناخت با کیفیت استعمال از CSS در صفحه ها اینترنت
گردهمایی سوم : یادگرفتن ساختار نحوی دستورها CSS در کدنویسی صفحه ها اینترنت
گردهمایی چهارم : شناخت بی نقص با تعیین گرهای CSS به گویش معمولی
نشست پنجم : معرفی ترفندهای کد CSS مهم و کاربردی در طراحی سایت
گرد هم آیی ششم : آیین نامه متن و نوشته ها در لهجه CSS همدم با نمونه
نشست هفتم : نحوه عمل با خواص background در زبان CSS همدم با نمونه
گردهمایی هشتم : کار با خواص border در لهجه CSS یاور با مثال کدها
نشست نهم : شناخت با خاصیت font هنگام فعالیت با متن در لهجه CSS
گردهمایی دهم : معرفی یکسری ترفند CSS اثرگذار و کاربردی که به کارتان می آید
بیشتر بخوانید و بدانید!
معرفی ترفندهای کد CSS اصلی و کاربردی در طراحی وب
معرفی ترفندهای CSS کاربردی
١ – امر کوتاه گردیده‌ی تهیه فونت‌ها
در صدر او‌لین آیتم از ترفندهای 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 میباشد.
٢ – به کارگیری از دو کلاس با هم
از ترفندهای CSS دیگر این میباشد که شما میتوانید به هر تگ html بیشتراز یک کلاس انتساب دهید بدین ترتیب که در خواص class یکسری تا کلاس را به استعمال از space از هم قطع میکنید:
مطالب مرتبط
معرفی یکسری ترفند CSS موثر و کاربردی که به کارتان میاید
معرفی یک سری ترفند CSS اثرگذار و کاربردی که به کارتان میاید
شناخت با خاصیت font هنگام عمل با متن در لهجه CSS
شناخت با خاصیت font هنگام کار با متن در گویش CSS
...
براین اساس، در css تمامی ی rule هایی که به هر کدام از کلاس های مو جود انتساب داده گردیده باشد، برای آن تگ html استعمال شود.
اعتنا فرمائید که در صورتی برای یکی کلاس ها، یک css rule تمجید گردیده باشد و برای کلاس آینده rule متضاد آن تعریف گردیده باشد، کلاسی که در html نخستین آمده باشد، حق تقدم بیشتری خواهد داشت.
٣ – مقدار پیش‌فرض border در CSS
وقتی که border را برای یک عنصر تعریف‌و‌تمجید می کنید، معمولا مقادیر width و color و style را معین میکنید. از جمله امر ذیل برای شما یک کناره‌ی مشکی رنگ یکنواخت به قطر ۱ پیکسل ایجاد کرد می نماید:
border: 3px solid #000;
البته در ارتباط فوق، صرفا مورد ای که الزامی میباشد، style می باشد. یعنی border: solid
در شرایطی‌که صرفا بنویسید border: solid برای بقیه مختصات از مقدار پیش فرض مصرف شود. ولی مقادیر پیش فرض، چه چیزی میباشند؟
مقدار پیش فرض برای پهنا کناره (border-width) موازی medium میباشد که نسبتاً معادل ۳ الی ۴ پیکسل میباشد
مقدار پیش فرض برای رنگ کناره (border-color) موازی رنگ متن باطن کناره در نظر گرفته میگردد.
در‌صورتی‌که که مقادیر پیش فرض، برای شما مطلوب است، می توانید مقدار آنها را معین نکنید تا از مقدار پیش فرض استفاده شود.
معرفی گویش اپ نویسی Cobol | مهم ترین امکان های لهجه Cobol
۴ – کد CSS مخصوص پرینت
اکثر صفحه های اینترنت به طوری پیاده سازی می‌شوند که برای اکران در مانیتور کامپیوتر مطلوب باشد. البته در‌صورتی‌که تصویر کاغذ ی اینترنت را با استفاده از پرینتر بر روی برگه چاپ کنیم، زیاد دیدنی نمیشود.
معمولا خوب میباشد که در هنگام چاپ یک برگه ی اینترنت، تنها مطالب اصلی آن چاپ خواهد شد و همینطور نیازی به جلوه های گرافیکی و رنگ آیتم و … وجود ندارد. پهنا برگه می بایست با پهنا کاغذ سازگار باشد و از فضای شیت به صورت باصرفه مصرف شود و …
چهت نیل به‌این مقصود، اکثرا سایت ها، صفحاتی را به صورت منحصربه‌فرد برای پرینت پیاده سازی می کنندو به این معنی که هر برگه یا این که نوشته‌ی علمی را در یک ورژن ی جداگانه برای پرینت هم تهیه می نمایند.
ولی شیوه دیگری هم وجود دارد و آن این میباشد که کدهای css متفاوتی را برای پرینت بنویسیم.
برای این خواسته، باید در تگ head یک فایل css جدید را برای print معلوم کنیم و بایستی خواص media را در تگ link با مقدار “print” مشخص کنیم.
خواص media معلوم می نماید که فولدر css فوق برای چه ابزاری قابل استعمال میباشد. screen در معنای صفحه اکران کامپیوتر است و print در معنای پرینتر است. با به کار گیری از امر فوق، وقتی که کاربر میخواهد برگه ی اینترنت را پرینت بگیرد، به صورت اتومات از فایل css دوم استفاده شود.
ولی در درون فولدر printstyle.css چه کدی بنویسیم؟ کافی است کدهایی بنویسیم که صفحه برای برگه بهینه شود. برای این منطور معمولا می بایست نوارهای کناری وبسایت را با به کار گیری از فرمان display:none نهفته کنیم چون معمولا مشتمل بر داده ها مفیدی برای چاپ نمی باشند.
همینطور می بایست رنگ آیتم ی ارکان را حذف کنیم و کلیه ی موادتشکیل دهنده و تصاویر گرافیکی که جنبه ی دکوری دارند را حذف کنیم و همینطور می‌توانیم فونت مطلوب چاپ استفاده کنیم و برای سایز فونت ها هم از واحد هایی مانند pt استفاده کنیم…
۵ – تکنیک جایگذاری تصویر
از ترفندهای CSS دیگر این میباشد که همواره توصیه می شود که برای اکران متن، از کد معمولی html استفاده کنید و از تصویر برای اکران متن هجران نمائید. این منجر می‌شود که سرعت بارگذاری صفحه ی اینترنت بالا برود و همینطور برگه ی اینترنت بیشتر قابل دسترس باشد (برای مثال برای اشخاص نا بینا با به کارگیری از مرورگر های شیت خوان)
با این فعلا، گه گاه ممکن هست بخواهید به مکان متن از تصویر استعمال فرمائید. برای مثال فرض نمایید که در بالای همگی صفحه ها سایتتان، عبارت “خرید آنلاین” وجود دارد و شما میخواهید که‌این عبارت را با یک فونت خیلی خاص اکران دهید که هیچ مرورگری از آن جانبداری نمی نماید.
در‌این‌حالت، احتمالا فقط گزینه ای که وجود داراست این است که به مکان متن فوق، یک تصویر قرار دهید.
یک شیوه بدیهی این خواهد بود که به طور ذیل شغل نمایید:
[ پنجشنبه 8 دی 1401 ] 13:32 ] [ محمد صادقی ]
[ ]