طراحی سایت

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

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

درین‌وضعیت‌، احتمالا تنها آیتم ای که وجود دارد این می باشد که به جای متن فوق، یک تصویر قرار دهید.

یک روش واضح این خواهد بود که به صورت زیر فعالیت کنید: