مرجع طراحی سایت حرفه ای

استایل های لینک و پیوند
طراحان معمولاً استعمال از این استایل ها را فراموش میکنند و همین زمینه سبب بروز مشکلاتی در تجارب استفاده کننده و کارآیی میگردد. :link لینک و پیوند هایی را در دست گرفتن میکند که تا به اکنون کلیک نشده اند و :visited پیوند هایی را که کلیک گردیده اند در اختیار گرفتن میکند. این به استفاده کننده امداد میکند تا تشخیص دهد که چه قسمت هایی از وب سایت را چشم و چه نصیب هایی را هنوز ندیده میباشد که میتواند به بهینه سازی تارنما و ارتقاء ترافیک طراحی سایت در مشهد یاری دهد.

۸. تغییر‌و تحول سایز تصاویر
در شرایطی که می خواهید تصویر شما با تغییرات اندازه ورقه هماهنگ باشد و مقیاس پذیر باشد، راهش این میباشد که مقدار ویژگی max-width را ۱۰۰% قرار دهید تا با تغییر تحول سایز ورقه عکس هم با آن اندازه گردد و ماکسیمم اندازه آن ۱۰۰% باشد که در بدترین شرایط هم از ورقه خارج نمی زند و پهنای آن متساوی پهنای کاغذ می گردد:

مبتنی بر کد بالا بیشترین پهنای تصویر می تواند ۱۰۰% باشد و طول به طور اتومات هماهنگ با عرض عوض می شود.

۹. در اختیار گرفتن موادتشکیل دهنده یک قسمت
در‌حالتی که می خواهید مثلا تصاویر جانور در یک بخش خاص به عنوان مثالً وب لاگ را غرض قرار دهید، از یک کلاس blog به یار و همدم تگ متبوع به کارگیری نمایید. با این عمل تنها تصاویر جانور در بخش blog تعیین می‌شوند و تأثیری بر روی تصاویر قسمت های دیگر ندارد:

۱۰. فرزند بی واسطه
شناخت با این معنی یاری متعددی در صرفه جویی در طی میکند. از کاراکتر > برای گزینش فرزند بی واسطه یک عنصر استعمال نمایید :

کد بالا کلیه پیوند هایی که مستقیماً باطن شناسه فوتر می باشند را گزینش میکند(یعنی در‌حالتی که درون فوتریک div باشد، دیگر پیوند های درون آن div گزینش نمی‌شوند).
موادتشکیل دهنده فرزندی مشخص و معلوم
این موقعیت برای استایل دادن به لیست ها بسیار کاربرد دارااست. یعنی در صورتی‌که می‌خواهید به یک مورد معلوم از لیست اشاره کرده و صرفا به آن استایل دهید می توانید از li:nth-child() به کارگیری فرمایید:

CSS بالا دو‌مین آیتک در لیست را گزینش میکند و آن را آبی‌رنگ، bold و underline میکند.

۱۱. اجرا کردن CSS به چندین کلاس یا این که SELECTOR
فرض فرمایید می‌خواهید یک border یکسان به فضا مجموع عکس ها، نصیب blog و sidebar اضافه نمایید. نیازی وجود ندارد که یک CSS را برای هر مورد تکرار فرمایید. صرفا کافیست هر ۳ عنصر را متوالی قرار دهید و با کاما از هم مستقل فرمائید:

۱۲. BOX-SIZING: BORDER-BOX;
این ویژگی در CSS یک ویژگی دوست داستنی دربین طراحان اینترنت هست چون ایرادات مرتبط با padding و ساختار را حل میکند. هنگامی به عنصری padding اضافه می‌کنید به واحد سنجش آن padding به پهنای آن عنصر اضافه می گردد برای خودداری از این موضوع میتوان از box-sizing:border-box; به کار گرفت.

۱۳. :BEFORE
به امداد این selector می‌توانید یک عنصر را گزینش کرده و پیشین آن محتوا قرار دهید. فرض نمائید در اینترنت سایتتان می‌خواهید پیش از هر تگ h۲ یک متن معین قرار دهید:

این selector بسیار کارآمد می‌باشد به خصوص برای فونت آیکون ها بنابراین می‌توانید آیکون ها را پیش از موادسازنده معلوم قرار دهید.

۱۴. :AFTER
این selector هم محتوا را به پس از یک عنصر معلوم اضافه میکند. در‌این نمونه بعداز هر جمله عبارت Read more… اضافه می‌شود.

۱۵. CONTENT
همانگونه که در نمونه های بالا می بینید، content خصوصیتی میباشد که عنصری را جایگذاری میکند. بیشترین کاربرد این ویژگی برای قرار دادن فونت آیکون ها در یک جای مشخص و معلوم هست. در شکل قرار دادن متن در content بایستی ان را باطن " " بگذارید.

۱۶. CSS RESET
در واقع CSS reset در معنای تهیه چند ویژگی های استاندارد برای اکران دادن صحیح وب سایت در مرورگرهای گوناگون هست.

۱۷. مدل دادن یه پیوند های تماس
درصورتی که لینکی دارید که با کلیک بر روی آن تماس نتیجه ها میگردد، ممکن میباشد در استایل دادن به آن با طرز های معمول مبتلا نقص‌ گردید. می توانید از CSS تحت برای این فعالیت به کار گیری فرمائید:

استایل های لینک و پیوند
طراحان معمولاً استعمال از این استایل ها را فراموش میکنند و همین زمینه سبب بروز مشکلاتی در تجارب استفاده کننده و کارآیی میگردد. :link لینک و پیوند هایی را در دست گرفتن میکند که تا به اکنون کلیک نشده اند و :visited پیوند هایی را که کلیک گردیده اند در اختیار گرفتن میکند. این به استفاده کننده امداد میکند تا تشخیص دهد که چه قسمت هایی از وب سایت را چشم و چه نصیب هایی را هنوز ندیده میباشد که میتواند به بهینه سازی تارنما و ارتقاء ترافیک طراحی سایت در مشهد یاری دهد.

۸. تغییر‌و تحول سایز تصاویر
در شرایطی که می خواهید تصویر شما با تغییرات اندازه ورقه هماهنگ باشد و مقیاس پذیر باشد، راهش این میباشد که مقدار ویژگی max-width را ۱۰۰% قرار دهید تا با تغییر تحول سایز ورقه عکس هم با آن اندازه گردد و ماکسیمم اندازه آن ۱۰۰% باشد که در بدترین شرایط هم از ورقه خارج نمی زند و پهنای آن متساوی پهنای کاغذ می گردد:

مبتنی بر کد بالا بیشترین پهنای تصویر می تواند ۱۰۰% باشد و طول به طور اتومات هماهنگ با عرض عوض می شود.

۹. در اختیار گرفتن موادتشکیل دهنده یک قسمت
در‌حالتی که می خواهید مثلا تصاویر جانور در یک بخش خاص به عنوان مثالً وب لاگ را غرض قرار دهید، از یک کلاس blog به یار و همدم تگ متبوع به کارگیری نمایید. با این عمل تنها تصاویر جانور در بخش blog تعیین می‌شوند و تأثیری بر روی تصاویر قسمت های دیگر ندارد:

۱۰. فرزند بی واسطه
شناخت با این معنی یاری متعددی در صرفه جویی در طی میکند. از کاراکتر > برای گزینش فرزند بی واسطه یک عنصر استعمال نمایید :

کد بالا کلیه پیوند هایی که مستقیماً باطن شناسه فوتر می باشند را گزینش میکند(یعنی در‌حالتی که درون فوتریک div باشد، دیگر پیوند های درون آن div گزینش نمی‌شوند).
موادتشکیل دهنده فرزندی مشخص و معلوم
این موقعیت برای استایل دادن به لیست ها بسیار کاربرد دارااست. یعنی در صورتی‌که می‌خواهید به یک مورد معلوم از لیست اشاره کرده و صرفا به آن استایل دهید می توانید از li:nth-child() به کارگیری فرمایید:

CSS بالا دو‌مین آیتک در لیست را گزینش میکند و آن را آبی‌رنگ، bold و underline میکند.

۱۱. اجرا کردن CSS به چندین کلاس یا این که SELECTOR
فرض فرمایید می‌خواهید یک border یکسان به فضا مجموع عکس ها، نصیب blog و sidebar اضافه نمایید. نیازی وجود ندارد که یک CSS را برای هر مورد تکرار فرمایید. صرفا کافیست هر ۳ عنصر را متوالی قرار دهید و با کاما از هم مستقل فرمائید:

۱۲. BOX-SIZING: BORDER-BOX;
این ویژگی در CSS یک ویژگی دوست داستنی دربین طراحان اینترنت هست چون ایرادات مرتبط با padding و ساختار را حل میکند. هنگامی به عنصری padding اضافه می‌کنید به واحد سنجش آن padding به پهنای آن عنصر اضافه می گردد برای خودداری از این موضوع میتوان از box-sizing:border-box; به کار گرفت.

۱۳. :BEFORE
به امداد این selector می‌توانید یک عنصر را گزینش کرده و پیشین آن محتوا قرار دهید. فرض نمائید در اینترنت سایتتان می‌خواهید پیش از هر تگ h۲ یک متن معین قرار دهید:

این selector بسیار کارآمد می‌باشد به خصوص برای فونت آیکون ها بنابراین می‌توانید آیکون ها را پیش از موادسازنده معلوم قرار دهید.

۱۴. :AFTER
این selector هم محتوا را به پس از یک عنصر معلوم اضافه میکند. در‌این نمونه بعداز هر جمله عبارت Read more… اضافه می‌شود.

۱۵. CONTENT
همانگونه که در نمونه های بالا می بینید، content خصوصیتی میباشد که عنصری را جایگذاری میکند. بیشترین کاربرد این ویژگی برای قرار دادن فونت آیکون ها در یک جای مشخص و معلوم هست. در شکل قرار دادن متن در content بایستی ان را باطن " " بگذارید.

۱۶. CSS RESET
در واقع CSS reset در معنای تهیه چند ویژگی های استاندارد برای اکران دادن صحیح وب سایت در مرورگرهای گوناگون هست.

۱۷. مدل دادن یه پیوند های تماس
درصورتی که لینکی دارید که با کلیک بر روی آن تماس نتیجه ها میگردد، ممکن میباشد در استایل دادن به آن با طرز های معمول مبتلا نقص‌ گردید. می توانید از CSS تحت برای این فعالیت به کار گیری فرمائید: