استایل نویسی با css (Cascading Style Sheets) به زبان برنامه‌نویسی گفته می‌شود که برای طراحی و زیباتر کردن ظاهر صفحات وب استفاده می‌شود. css امکان کنترل کامل روی رنگ‌ها، فونت‌ها، فاصله‌ها، طرح‌بندی و دیگر جنبه‌های بصری را فراهم می‌کند. اهمیت css در جداسازی محتوا از طراحی است که باعث مدیریت آسان‌تر و افزایش سرعت بارگذاری صفحات می‌شود. همچنین با کمک css می‌توان وبسایت‌هایی واکنش‌گرا و کاربرپسند طراحی کرد که تجربه کاربری بهتری ارائه دهند.
انواع استایل نویسی با css
css روش‌های متنوعی برای استایل‌دهی به عناصر وبسایت ارائه می‌دهد که هرکدام کاربردها و ویژگی‌های خاص خود را دارند. از تغییر ظاهر متن و تصاویر گرفته تا طراحی پیچیده انیمیشن‌ها، همه با css امکان‌پذیر است. در ادامه، با مهم‌ترین روش‌ها و تکنیک‌های استایل نویسی با css آشنا خواهید شد. به کمک این موارد می توانید طراحی سایت متمایز و بدون نقصی نسبت به دیگر سایت‌‌ها داشته باشید.
۱. استایل به متن انتخاب‌شده، راهی برای جلب توجه کاربران
در صفحات وب، وقتی متنی را انتخاب می‌کنید، مشاهده می‌کنید که رنگ پس‌زمینه آبی می‌گیرد که نشان می‌دهد این قسمت select شده است. ما می‌توانیم با توجه به طراحی سایت و استایل نویسی با css، به متن‌های انتخاب شده استایل‌های خودمان را بدهیم. برای انتخاب متن‌های انتخاب شده مثلاً در تگ‌های p در css به صورت زیر عمل می‌کنیم:
p::selection { background: cyan; }
p::-moz-selection { background: cyan; }
<div>This text has special styles when you highlight it.<div>
<p>Also try selecting text in this paragraph.<p>
/* Make selected text gold on a red background */
::-moz-selection {
color: gold;
background: red;
}
::selection {
color: gold;
background: red;
}
/* Make selected text in a paragraph white on a blue background */
p::-moz-selection {
color: white;
background: blue;
}
p::selection {
color: white;
background: blue;
طراحی سایت حرفه‌ای، کلید موفقیت کسب‌و‌کارتان
اگر به دنبال وبسایتی هستید که کسب و کارتان را متحول کند، شرکت هینزا با طراحی وبسایت حرفه‌ای و کاربرپسند، به شما کمک می‌کند تا در دنیای آنلاین بدرخشید. برای مشاهده نمونه کارهای طراحی سایت هینزا کلیک کنید.
۲. استایل به اسکرول ها، از جذابیت تا کاربرد
یکی دیگر مواردی که طراحی فروشگاه اینترنتی را متمایز می‌کند، دیزاین و استایل دهی با اسکرول است که به صورت زیر انجام می‌شود:
::-webkit-scrollbar { styles here }selector های متنوعی برای دیزاین دارد:
- webkit-scrollbar: انتخاب کل اسکرول بار
- webkit-scrollbar-button: دکمه های موجود در اسکرول اعم از دکمه فلش بالا و پایین
- webkit-scrollbar-thumb: دکمه وسط اسکرول که تکان دهنده اسکرول است
- webkit-scrollbar-track: نوار مسیر اسکرول
- webkit-scrollbar-track-piece: قسمتی از نوار مسیر که با دکمه وسط قابل پوشش نیست
- webkit-scrollbar-corner: پایین اسکرول بار قسمتی که هر دو اسکرول عمودی و افقی به هم رسیدند.
- webkit-resizer: اهرم تغیر سایز المان
به مثال زیر توجه کنید:
۳. جلوگیری از پرش اسکرول در فایرفاکس
در مرورگر فایل فاکس؛ اگر محتوای صفحه کمتر از اندازه صفحه باشد؛ چون به صورت پیش فرض html استایل overflow:auto را دارد؛ اسکرول بار نمایش داده نمی‌شود ولی وقتی که به هر دلیلی مثل تغییر اندازه صفحه یا زیاد شدن متن صفحه؛ صفحه اسکرول شود و اسکرول بار نمایش داده شود؛ پرشی در مرورگر خواهیم داشت. با از ابتدا قرار دادن اسکرول بار به کمک استایل نویسی با css و دادن overflow-y:scroll به HTML، می‌توانیم از این پرش جلوگیری کنیم.
۴. جداسازی صفحات پرینت، حرفه‌ای‌تر به‌نظر برسید
به کمک استایل نویسی با css می‌توان محل شکسته شدن محتوای صفحه و رفتن به صفحه بعد در پرینت؛ را کنترل کرد. مثلا در اینجا ما کلاس page-break را در نظر گرفتیم که به هر بخش ار محتوا که می خواهیم در صفحه جدید در پرینت قرار بگیرد؛ این کلاس را می دهیم.
.page-break { page-break-before:always; }۵. حداقل ارتفاع؛ مناسب برای تمام مرورگرها
در بعضی از قسمت‌های دیزاین طراحی سایت لازم است که حداقل ارتفاع کنترل شود، زیرا وبسایت ها دارای محتوای داینامیک و پویا هستند و ممکن است متن واقعی از مقدار در نظر گرفته شده توسط طراح کمتر باشد یا در زمان های مختلف تغییر کند، این موارد نباید دیزان را به هم بزنند. به کمک min-height از چنین بر هم زدن هایی می‌توان جلوگیری کرد. اما مشکلی که در اینجا نمایان می‌شود این است که بعضی از مرورگرها متاسفانه min-height را درک نمی‌کنند، برای حل این موضوع به صورت زیر عمل می‌کنیم:
.container {
height: auto !important;
min-height: 500px;
height: 500px;
}
/* Should have the same value as the min height above */
۶. نمایش اولین حرف مقاله به صورت بزرگ
به عنوان زیبایی می‌توانید مقاله یا متن را با حرف بزرگ و استایل متفاوت، شروع کنید. انتخاب حرف اول با :first-letter انجام می‌شود.
p:first-letter {
font-size: 20px;
font-weight: bold;
color: red;
}
به مثال زیر توجه کنید:
<div class=’visible-scrollbar’>
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Aliquam at enim ligula.
</div>
<div class=’invisible-scrollbar’>
<Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongwor</div
<div class=’mostly-customized-scrollbar’>
<Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br
And pretty tall<br>
thing with weird scrollbars.<br>
Who thought scrollbars could be made weeeeird?div>
.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
}
.invisible-scrollbar::-webkit-scrollbar {
display: none;
}
/* Demonstrate a ‘mostly customized’ scrollbar
* (won’t be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #aaa; /* or add it to the track */
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
}
ترافیک ارگانیک بیشتر، فروش بیشتر با سئو حرفه‌ای هینزا
برای بهتر دیده شدن سایت در نتایج گوگل و جذب مشتریان بیشتر فرصت را از دست ندهید و از خدمات سئو سایت هینزا برای موفقیت کسب و کارتان استفاده کنید. برای کسب اطلاعات بیشتر و مشاهده نمونه سایت‌های سئو شده توسط تیم هینزا با ما تماس بگیرید.
۷. حذف خط آبی لینک های فعال، جزئیات مهم در زیبایی
حتما تا به حال مشاهده کردید که با کلیک روی لینک‌ها رنگ آبی در حاشیه آن‌ها در مرورگر های مختلف دیده می شود. ممکن است این رنگ یا کلا این ویژگی مناسب طراحی سایت شما نباشد، به کمک ویژگی outline در css می‌توانید آن را حذف و یا تغییر دهید.a:hover, a:focus {
outline:none;
}
۸. کلمات با حروف بزرگ با سایز کوچک، ظرافت در نمایش
در استایل نویسی با css خصوصیتی وجود دارد که به شما این امکان را می دهد که حروف انگلیسی را capital ولی با اندازه کوچک بنویسید، البته همان طور که گفته شد و بدیهی ست فقط مناسب حروف لاتین است. این ویژگی با استایل font-variant در css اعمال می‌شود:.text-small-caps {
font-variant:small-caps;
}
