ترفندهای جالب و کاربردی 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 به کارگیری فرمایید و از تصویر برای نمایش متن غربت نمایید. این سبب می گردد که سرعت لود کاغذ ی وب بالا برود و همچنین کاغذ ی وب بیشتر قابل دسترس باشد (از جمله برای افراد نا بینا با استفاده از مرورگر های برگه خوان)
با این موقتا، بعضی وقتها ممکن می باشد بخواهید به جای متن از تصویر استفاده نمائید. از جمله فرض فرمائید که در بالای همه صفحات سایتتان، عبارت “خرید آنلاین” وجود داراست و شما می خواهید که این عبارت را با یک فونت خیلی خاص نمایش دهید که هیچ مرورگری از آن تامین نمی کند.
درینوضعیت، احتمالا صرفا آیتم ای که وجود دارااست این میباشد که به جای متن فوق، یک تصویر قرار دهید.
یک طرز واضح این خواهد بود که به صورت پایین عمل فرمایید:
ترفندهای جالب و کاربردی 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 به کارگیری فرمایید و از تصویر برای نمایش متن غربت نمایید. این سبب می گردد که سرعت لود کاغذ ی وب بالا برود و همچنین کاغذ ی وب بیشتر قابل دسترس باشد (از جمله برای افراد نا بینا با استفاده از مرورگر های برگه خوان)
با این موقتا، بعضی وقتها ممکن می باشد بخواهید به جای متن از تصویر استفاده نمائید. از جمله فرض فرمائید که در بالای همه صفحات سایتتان، عبارت “خرید آنلاین” وجود داراست و شما می خواهید که این عبارت را با یک فونت خیلی خاص نمایش دهید که هیچ مرورگری از آن تامین نمی کند.
درینوضعیت، احتمالا صرفا آیتم ای که وجود دارااست این میباشد که به جای متن فوق، یک تصویر قرار دهید.
یک طرز واضح این خواهد بود که به صورت پایین عمل فرمایید:
خطاها رایج در طیبندی پستها