دسته ‌بندی آموزش ها
برچسب ها

آشنایی با CSS Borders و نحوه استفاده از آن

css borders introduction
20 آبان 1403

CSS یکی از ابزارهای بسیار قدرتمند و کاربردی برای طراحی وب سایت‌ها است که به شما اجازه می‌دهد به هر عنصر در صفحه وب سبک خاص خود را بدهید. یکی از موضوعات ساده ولی اساسی در CSS، کنترل و طراحی مرزهای عناصر یا همان Borders است. این ویژگی‌ها به شما این امکان را می‌دهند که نمای بصری جذابی به عناصر خود بدهید و با استفاده از آن‌ها، جداسازی و تفکیک جزیی بین عناصر مختلف صفحه ایجاد کنید.

استفاده از Borders در CSS به شما اجازه می‌دهد تا به سادگی اندازه، رنگ و نوع مرز را تعیین کنید. برای مثال شما می‌توانید یک مرز یک‌نواخت، دوگانه، نقطه‌چین و یا حتی خیلی بیش از این‌ها را برای عناصر خود بسازید. این ویژگی‌ها باعث می‌شود که طراحی شما حرفه‌ای‌تر به نظر برسد و همچنین خوانایی و دسترسی به وب‌سایت شما بهبود یابد.

مرزها در CSS به شما امکان می‌دهند تا تفاوت و تبعیض بهتری بین بخش‌های مختلف وب ایجاد کنید. مثلاً می‌توانید یک خط زیرین زیبا برای عنوان‌ها اضافه کنید، جعبه‌های محتوا را با حاشیه‌های ضخیم‌تر یا رنگی زنده‌تر نمایش دهید یا حتی انتقال‌های جذابی بین عناصر با تغییر مرزهای آن‌ها بسازید.

برای طراحی مرزها در CSS از چندین خاصیت مثل border-width، border-style و border-color استفاده می‌شود که به شما این امکان را می‌دهد که مرزها را به طور کامل سفارشی‌سازی کنید و ظاهر کلی صفحه خود را تغییر دهید.

حال که با اهمیت و کارکرد CSS Borders آشنا شدید، بیایید با یک مثال ساده نحوه استفاده از آن را بررسی کنیم.

مثال از کاربرد CSS Borders


<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نمونه CSS Borders</title>
    <style>
        .border-box {
            border-width: 2px;
            border-style: solid;
            border-color: blue;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="border-box">
        این یک باکس با مرز آبی است.
    </div>
</body>
</html>

توضیح خط به خط کد


<!DOCTYPE html>
این داکیومنت را به عنوان یک صفحه HTML معرفی می‌کند.
<html lang="fa">
شروع داکیومنت HTML و مشخص کردن زبان صفحه به فارسی.
<head>
شروع بخش هدایی داکیومنت که شامل اطلاعات متا و استایل‌ها است.
<meta charset="UTF-8">
تنظیم انکودینگ صفحه به UTF-8 که اکثر وب سایت‌ها از آن پشتیبانی می‌کنند.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
تنظیم صفحه برای سازگاری با ابعاد دستگاه‌های مختلف.
<title>نمونه CSS Borders</title>
عنوان صفحه که در تب مرورگر نمایش داده می‌شود.
<style>
شروع بخش استایل داخلی که CSS مورد استفاده برای صفحه را تعریف می‌کند.
.border-box
تعریف یک کلاس برای عناصر HTML با نام border-box.
border-width: 2px;
تنظیم ضخامت مرز به ۲ پیکسل.
border-style: solid;
تنظیم نوع مرز به حالت یک‌نواخت یا solid.
border-color: blue;
تنظیم رنگ مرز به آبی.
padding: 10px;
اضافه کردن فضای داخلی ۱۰ پیکسی به باکس.
margin: 5px;
اضافه کردن فاصله خارجی ۵ پیکسی به باکس.
</style>
پایان بخش استایل داخلی.
</head>
پایان بخش هد.
<body>
شروع بخش بدن داکیومنت جایی که محتوا نمایش داده می‌شود.
<div class="border-box">
یک باکس دیو با کلاس border-box برای نمایش دادن مرز تنظیم می‌شود.
این یک باکس با مرز آبی است.
متنی که درون باکس نمایش داده می‌شود.
</div>
پایان تعریف باکس دیو.
</body>
پایان بخش بدنه صفحه.
</html>
پایان داکیومنت HTML.

سوالات متداول

؟

چگونه می‌توانم مرز دور یک عنصر را بردارم؟

؟

آیا می‌توان مرزهای مختلفی برای هر سمت یک عنصر تعریف کرد؟

؟

تفاوت بین border-width و border-style چیست؟

مطالب مرتبط