CSS یکی از حیاتی‌ترین زبان‌ها برای طراحی و توسعه وبسایت‌ها از طرف توسعه‌دهندگان Front-End و افرادی‌ست که مشغول توسط رابط کاربری هستند. از این رو بسیار مهم است که برای تبدیل شدن به توسعه‌دهنده وبسایت به خوبی با این زبان آشنایی داشته و تمام تکنیک‌های آن را به خوبی بدانید.
در این مطلب از وبسایت آموزشی راکت قصد داریم در رابطه با چندین تکنیک مهم و البته ساده صحبت کنیم که با دانستن آن‌ها میتوانید در موقعیت‌های مختلف از این موارد استفاده کنید. تمام این موارد پیشتر در دوره آموزشی CSS بصورت کامل‌تر توضیح داده شده‌اند، بنابراین اگر قصد کامل‌تر کردن دانش‌تان در این زمینه را دارید میتوانید به صورت رایگان از این دوره استفاده کنید.
۱- استفاده از افکت Hover
زمانیکه شما ماوس را روی یک المان قرار میدهید فرایند Hovering روی یک المان را فعال می‌کنید، با فعال کردن این قابلیت شما میتوانید استایل آن المان را به هر شکلی که دوست دارید تغییر دهید. اگر از این قابلیت به تنهایی استفاده کنید، تغییراتی که اعمال خواهد شد به صورت یک دفعه و بدون هیچگونه تغییری خواهد بود. اما با استفاده کردن از خاصیت transtion میتوانید فرایند تغییر را با تاخیر و انیمیشن‌محورانه انجام دهید.
در قطعه کد زیر میتوانید منظور دقیق این مسئله را متوجه شوید:
<html>
<body>
<h4>I am fast</h4>
<p>I am slow</p>
<style>
/*Initial styles*/
h4 {
font-size: 70px;
color: red;
}
p {
font-size: 60px;
color: blue;
}
/* Styles, with hovering effect */
h4:hover {
color: black;
transition: all 0.5s ease;
/*delaying the hovering effect. */
}
p:hover {
color: yellow;
transition: all 2s ease;
}
</style>
</body>
</html>در قطعه کد بالا ما المان‌های h4 و p را با استایل‌های متفاوتی استایل‌دهی می‌کنیم. همانگونه که مشاهده می‌کنید h4 بعد از آنکه فرایند هاور روی آن شروع شد به رنگ سیاه تبدیل خواهد شد البته این نکته را نیز در نظر بگیرید که چنین حالتی در بازه زمانی ۰.۵ ثانیه اتفاق می‌افتد و این تغییر رنگ برای المان p ۲ ثانیه طول خواهد کشید.
۲- در مرکز قرار گرفتن المان‌ها (افقی و عمودی)
در مرکز قرار دادن هر چیزی به نظر کمی سخت می‌آید و البته توسعه‌دهندگان نیز از این مسئله آگاهی دارند. با این حال باید اعتراف کنم که ابدا موضوع سختی نیست، تنها روش‌های بسیار زیادی برای اینکار وجود داشته که انتخاب کردن میان آن‌ها انسان را سر در گم می‌کند. یکی از روش‌ها استفاده کردن از قدرت Flexbox است.
<html>
<body>
<div style="border: 1px solid; width: 500px; height: 600px;">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet illo
corporis saepe sunt quidem nesciunt asperiores impedit odit! Enim quam
voluptatum modi suscipit laboriosam porro fugiat odit molestiae error?
Dolores.
</p>
</div>
<style>
div {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</body>
</html>به همین سادگی و تنها در سه خط کد CSS شما میتوانید المان‌های‌تان را درست در وسط صفحه قرار دهید.
۳- قرار دادن تصاویر بصورت دقیق در کانتینرها
برخی از وبسایت‌ها تنها با استفاده کردن از تصاویر با اندازه‌های متفاوت، کلیت طراحی‌شان نابود می‌شود. حال ما برای حل کردن این مشکل باید از روشی بهینه استفاده کنیم.
تصور کنید که شما تصویری با نام test.png دارید که می‌خواهید آن را در #container نمایش دهید. در این حالت به قطعه کد زیر دقت کنید:
همانطور که مشاهده می‌کنید با استفاده کردن از خاصیت‌های متفاوت ما سعی کرده‌ایم که یک قاب تصویری را ایجاد کرده و در آن بدون اینکه تصویر به صورت ناموضونی کشیده شود آن را به نمایش بگذاریم.
<html>
<body>
<div id="container">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<style>
#container {
background-image: url('test.png');
/* the image to display */
background-position: center;
/* crop the image from the center */
background-size: cover;
/* cover the container */
background-repeat: no-repeat;
/* do not repeat the image */
width: 500px;
/* the width */
height: 500px;
/* the height */
}
</style>
</body>
</html>۴- لینک‌های بازدید شده
استایل‌دهی به لینک‌های بازدید شده باعث می‌شود که کاربر بهتر بتواند لینک‌هایی که از قبل آن‌ها را بازدید نموده مشاهده کند و سراغ لینک‌های تکراری نرود. این تنها یک مسئله برای رابط کاربری نیست بلکه می‌تواند تجربه کاربری وبسایت را نیز بهبود بخشد. استفاده از رنگ‌های متفاوت بدین منظور می‌تواند کاربردی باشد. در قطعه کد زیر میتوانید سه حالت مختلف از لینک‌ها را استایل‌دهی کنید.
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/*selected link */
a:active {
color: blue
}۵- اولین حرف پاراگراف
البته این تکنیکی نیست که در زبان‌هایی مانند فارسی بسیار رایج و پر استفاده باشد اما در هر حال دانستن آن به نظر نمی‌رسد که دانش اضافی باشد. استفاده از این تکنیک بیشتر در وبسایت‌های خبری انگلیسی رواج دارد و براساس آمارهای موجود انجام چنین کاری می‌تواند تاثیر بسیار زیادی روی کاربران داشته باشد. دیدن یک حرف بزرگ بیشتر اوقات باعث خواندن تمامی آن کلمه و در نهایت خط اول یا جمله اول پاراگراف می‌شود.
در قطعه کد زیر میتوانید متوجه روش تعریف چنین قابلیتی شوید:
<html>
<body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<style>
p:first-letter {
display: grid;
margin: 7px;
color: black;
font-size: 80px;
float: left;
}
</style>
</body>
</html>۶- گروه‌بندی المان‌ها
مطمئنا استایل‌دهی به المان‌های مختلف به صورت جداگانه کار آسانی نخواهد بود و البته چنین روشی نیز شما را تنها یک مبتدی نشان می‌دهد. به همین منظور بسیار مهم است که شما شیوه گروه‌بندی المان‌ها با استفاده از CSS Class را یاد بگیرید. این تکنیک بسیار ساده‌ای‌ست اما برای به کار بردن آن نیاز به خلاقیت وجود دارد. چرا که گاهی اوقات ممکن است یک المان در یک کلاس‌بندی خاص، استایل‌های دیگری را نیز نیازمند باشد.
<html>
<body>
<div class="card">
<h4>Why do developer Group elements together when styling?</h4>
<p>Developers Group elements together to save on time </p>
<h5>What are advantages Of Consolidating during styling?</h5>
</div>
<div class="card">
<h4>Why do developer Group elements together when styling?</h4>
<p>Developers Group elements together to save on time </p>
<h5>What are advantages Of Consolidating during styling?</h5>
</div>
<style>
.card {
background-color: black;
color: white;
font-size: medium;
text-align: center;
width: 400px;
padding: 10px;
margin: 10px;
border-radius: 5px;
}
</style>
</body>
</html>۷- قرارگیری المان‌ها بصورت fixed
ممکن است گاهی بخواهید المانی فارغ از آنکه Viewport مرورگر تغییری می‌کند یا نه در همان جایی که وجود دارد باقی بماند. برای انجام چنین کاری میتوانید از قطعه کد زیر و خاصیت‌های به کار رفته در آن استفاده کنید:
<html>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet illo
corporis saepe sunt quidem nesciunt asperiores impedit odit! Enim quam
voluptatum modi suscipit laboriosam porro fugiat odit molestiae error?
Dolores.
<br />
<a class="arrowup" href=""><i class="fa fa fa-arrow-up"></i></a>
</p>
</div>
<style>
div {
width: 410px;
height: 230px;
}
.arrowup {
position: fixed;
right: 20px;
bottom: 20px;
background-color: blue;
font-size: medium;
padding: 20px;
width: 20px;
height: 20px;
border-radius: 100px;
color: white;
text-align: center;
}
</style>
</body>
</html>در پایان
در این مقاله از وبسایت آموزشی راکت سعی کردیم ۷ تکنیک برای برای انجام کارهای متفاوت در CSS به شما را نشان دهیم. هر کدام از این موارد مطمئنا می‌توانند در حالت‌های مختلف کاربردی باشند. تمام این موارد پیشتر در دوره آموزشی CSS بصورت کامل‌تر توضیح داده شده‌اند، بنابراین اگر قصد کامل‌تر کردن دانش‌تان در این زمینه را دارید میتوانید به صورت رایگان از این دوره استفاده کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید