آموزش CSS (بخش سیزدهم)

خصوصیت float

این خصوصیت برای موقعیت و محتوای قالب بندی استفاده می شود، برای مثال اجازه دهید یک تصویر به سمت چپ یا راست متن در یک باکس حرکت کند.

خصوصیت float می تواند یکی از مقادیر زیر را داشته باشد:

  • – left : عنصر به سمت چپ ظرفش شناور می شود
  • – right : عنصر به سمت راست ظرفش شناور می شود
  • – none : عنصر شناور نیست (فقط در جایی که در متن ظاهر می شود نمایش داده می شود). این مقدار پیش فرض است
  • – inherit : عنصر ارزش شناور والد خود را به ارث می برد

در ساده ترین استفاده، می توان از ویژگی های float استفاده کرد تا متن را در اطراف تصاویر قرار داد.

;float: right

مثال زیر مشخص می کند که یک تصویر باید در یک متن به سمت راست حرکت کند:

img {
    float: right;
    width:170px;
    height:170px;
}
<p><img src="pineapple.jpg" alt="Pineapple">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

خروجی :

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

;float: left

مثال زیر مشخص می کند که تصویر باید در یک متن به سمت چپ شناور شود:

img {
    float: left;
    width:170px;
    height:170px;
}

خروجی :

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

;float: none

در مثال زیر تصویر در جایی که در متن رخ می دهد نمایش داده می شود:

img {
    float: none;
    width:170px;
    height:170px;
}

خروجی :

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

خصوصیت clear

ای خصوصیت مشخص می کند که عناصر می توانند در کنار عنصردیگر شناور شوند یا نه و در چه طرفی این اجازه رو دارد.

خصوصیت clear می تواند یکی از مقادیر زیر را داشته باشد:

  • – none : اجازه می دهد عناصر در هر دو طرف شناور شوند.(این مقدار پیش فرض است)
  • – left : عناصر شناور در سمت چپ مجاز نیست
  • – right : عناصر شناور در سمت راست مجاز نیست
  • – both : عناصر شناور در هر دو طرف چپ و راست مجاز نیست

آموزش CSS (بخش دوازدهم)

خصوصیت position در css

ویژگی position نوع موقعیت قرارگیری عناصر را در صفحه مشخص می کند(با استفاده از مقادیر static relative, fixed, absolute , sticky).

سپس عناصر با استفاده از ویژگی های بالا(top)، پایین(bottom)، چپ(left) و راست(right) قرار می گیرند. با این حال، این خواص کار نخواهند کرد، مگر اینکه ویژگی موقعیتی برای اولین بار تنظیم شود. آنها نیز بسته به مقدار موقعیت، متفاوت عمل می کنند.

;position: static

عناصر HTML به طور پیش فرض به صورت static قرار دارند. عناصر موقعیت static توسط ویژگی های top، bottom، left و right تحت تاثیر قرار نمی گیرند. عنصر با موقعیت static همواره با توجه به جریان عادی صفحه نمایش داده می شود.

div.static {
    position: static;
    left: 30px;
    border: 3px solid #73AD21;
}
<div class="static">
This div element has position: static;
</div>

خروجی :

This div element has position: static;

;position: relative

با قرار دادن عناصر با موقعیت relative می توانیم با تنظیم مقادیر to , bottom , left و right آنها را جابجا کنیم.

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}
<div class="relative">
This div element has position: relative;
</div>

خروجی :

This div element has position: relative;

;position: fixed

عنصر با موقعیت fixed موقعیت خود را نسبت به نمایشگر تعیین می کند بدین معنی که همیشه در همان مکان که تعیین شده است باقی می ماند و با اسکرول شدن صفحه و بالا و پایین بردن صفحه مو قعیت آن تغییری نمی کند و در همان جا باقی می ماند. از خصوصیات top، right، bottom و left برای قرار دادن عنصر استفاده می شود.

div.relative {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}
<div class="fixed">
This div element has position: fixed;
</div>
This div element has position: fixed;

;position: absolute

عنصر با موقعیت absolute نسبت به نزدیکترین اجداد خود که موقعیت relative دارد موقعیت خود را تعیین می کند. با مقدار دهی به خصوصیات top, bottom, right و left جایگاه آن را درون باکس پدر خود را تعیین می کنیم.

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 
div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
<div class="relative">This div element has position: relative;
    <div class="absolute">This div element has position: absolute;</div>
</div>

خروجی :

This div element has position: relative;
This div element has position: absolute;

z-index

هنگامی که عناصر در صفحه قرار می گیرند می توانن بر روی هم قرار بگیرند و هم پوشانی داشته باشند.

توسط خصوصیت z-index متوانیم تعیین کنیم که یک عنصر باید بر روی یا در پشت عناصر دیگر قرار بگیرد. این خصوصیت می تواند مقدار مثبت یا منفی بگیرد و هر چه عدد بزرگتر باشد اولویت آن عنصر برای قرار گرفتن بر روی عناصر دیگر با مقدار کمتر بیشتر است.

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

خروجی :

This is a heading

Because the image has a z-index of -1, it will be placed behind the text.

خصوصیت Overflow در css

خصوصیت overflow برای کنترل محتوا برای قرار گرفتن در یک منطقه بسیار بزرگ است. ای خصوصیت مشخص می کند که وقتی یک محتوایی از باکسی که درون آن قرار گرفته است بیشتر است و از عرض و طول تعیین شده آن بیرون میزند ما بقی آن نشان داده شود یا نه یا اینکه به چه شکلی نمایش داده شود.

خاصیت overflow دارای مقادیر زیر است:

  • – visible : این مقدار که پیش فرض نیز می باشد محتوا را در خارج از جعبه عنصر نشان میدهد.
  • – hidden : محتوای خارج از جعبه عنصر را غیر قابل مشاهده می کند.
  • – scroll : محتوای خارج از جعبه عنصر را یک اسکرول اضافه می کند تا بقیه محتوا را مشاهده کنید(فقط اسکرول افقی اضافه میکند).
  • – auto : مشابه scroll عمل می کند، اما در صورت نیاز یک اسکرول عمودی نیز اضافه می کند.

;overflow: visible

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
}
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

خروجی :

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.

;overflow: hidden

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: hidden;
}
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

خروجی :

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.

;overflow: scroll

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: scroll;
}
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

خروجی :

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.

;overflow: auto

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: scroll;
}
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

خروجی :

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.

آموزش CSS (بخش یازدهم)

جدول ها در css

Table Borders

از خصوصیت border برای تعیین مرزهای جدول در CSS استفاده می شود. مثال زیر مرز سیاه را برای عناصر
table(خود جدول) ، th(عنوان جدول) ، td(سلول های جدول) را مشخص می کند:

table, th, td {
    border: 1px solid white;
}
<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Lois</td>
    <td>Griffin</td>
    </tr>
</table>

خروجی :

FirstnameLastname
PeterGriffin
LoisGriffin

توجه داشته باشید که جدول در مثال بالا دارای مرزهای دوگانه است. این به این علت است که هم جدول و عناصر th و td دارای مرزهای مجزا هستند.

خاصیت border-collapse تعیین می کند که مرزهای جدول باید به یک مرز واحد تبدیل شوند:

table {
    border-collapse: collapse;
}
table, td, th {
    border: 1px solid white;
}

خروجی :

FirstnameLastname
PeterGriffin
LoisGriffin

اگر فقط می خواهید یک مرز در اطراف جدول باشد، فقط ویژگی مرزی را برای table مشخص کنید:

table {
    border: 1px solid white;
    border-collapse: collapse;"
}

خروجی :

FirstnameLastname
PeterGriffin
LoisGriffin

تعیین عرض و ارتفاع جدول

عرض و ارتفاع یک جدول با ویژگی های width و height تعریف می شود. مثال زیر پهنای جدول را ۱۰۰٪ تعریف می کند و ارتفاع عنوان جدول را مقدار۵۰ پیکسل تعیین می کند :

table, td, th {
    border: 1px solid white;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th {
    height: 50px;
}

خروجی :

FirstnameLastname
PeterGriffin
LoisGriffin

ترازبندی افقی جدول

خصوصیت text-align تراز افقی (مانند چپ، راست، یا مرکز) محتوا را درون th یا td تنظیم می کند.

th {
    text-align: center;
}

خروجی :

FirstnameLastname
PeterGriffin
LoisGriffin

چیدمان عمودی جدول

خاصیت vertical-align تطبیق عمودی (مثل بالا، پایین، یا وسط) محتوا را در th یا td تنظیم می کند.

مثال زیر تراز عمودی متن را به پایین برای عناصر td تنظیم می کند:

td {
    height: 50px;
    vertical-align: bottom;
}

خروجی :

FirstnameLastname
PeterGriffin
LoisGriffin

Table Padding

برای کنترل فضای بین مرز و محتوا در یک جدول، از خصوصیت padding در th و td elements استفاده می شود :

th, td {
    padding: 15px;
}

خروجی :

FirstnameLastname
PeterGriffin
LoisGriffin

رنگ در جدول

مثال زیر رنگ پس زمینه و رنگ متن عناصر را مشخص می کند:

tr:nth-child(even){
    background-color: #f2f2f2;
}
th {
    background-color: #4CAF50;
    color: white;
}

خروجی :

FirstnameLastname
PeterGriffin
LoisGriffin

خصوصیت display

ویژگی display مهمترین ویژگی CSS برای کنترل لایه ها است. این خصوصیات مشخص می کند که چگونه یک عنصر نمایش داده شود. هر عنصر HTML دارای مقدار پیش فرض display بسته به نوع آن عنصر است. مقدار display پیش فرض برای اکثر عناصر block یا inline است.

عناصر بلوکی(block)

یک عنصر سطح block همیشه بر روی یک خط جدید شروع می شود و عرض کامل را در دسترس می گیرد (تا آنجا که ممکن است به سمت چپ و راست برسد).

مثال هایی از عناصر سطح block :

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

عناصر درون خطی(inline)

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

نمونه هایی از عناصر خطی inline :

<span>
<a>
<img>

;Display: none

;Display: none معمولا با جاوا اسکریپت برای مخفی کردن و نمایش عناصر بدون حذف و بازسازی آنها استفاده می شود.

همانطور که گفته شد، هر عنصر یک مقدار display پیش فرض دارد. با این حال، شما می توانید آن را نادیده بگیرید.

تغییر عنصر block به یک inline یا برعکس می تواند مفید باشد برای اینکه صفحه به یک روش خاص نگاه شود و همچنان استانداردهای وب را دنبال کند. مثلا برای ایجاد منوی افقی لازم است که عناصر li به صورت inline در بیایند.

li {
    display: inline;
}
<ul>
    <li><a href="#" target="_blank">HTML</a></li>
    <li><a href="#" target="_blank">CSS</a></li>
    <li><a href="#" target="_blank">JavaScript</a></li>
</ul>

تفاوت display:none با visibility:hidden در چیست ؟

در display:none عنصر به همرا عرض و ارتفاعی که اشغال کرده بود از صفحف محو می شوند ولی در visibility:hidden خود عنصر از دید محو می شود ولی عرض و ارتفاعی را که از صفحه اشغال کرده بود در صفحه همچنان باقی می ماند.

لینک ها در css

با استفاده از CSS، لینک ها می توانند از طرق مختلف طراحی شوند.

پیوند ها را می توان با هر ویژگی CSS (به عنوان مثال color, font-family, background و غیره) استایل دهید. علاوه بر این، لینک ها را می توان به صورت متفاوت با توجه به وضعیت موجود در آن، استایل دهید.

چهار حالت لینک عبارتند از:

  • – a:link – یک پیوند معمولی، بدون بازدید
  • – a:visited – یک پیوند بازدید شده توسط کاربر
  • – a:hover – یک لینک زمانی که کاربر با موس روی آن میرود
  • – a: active – لینک زمانی که کلیک شده است
a:link {
   color: red;
}
a:visited {
   color: green;
}
a:hover {
   color: hotpink;
}
a:active {
   color: blue;
}

هنگام تنظیم استایل برای چند حالت لینک، برخی از قوانین وجود دارد:

a:hover باید بعد از a:link و a:visited بیاید و a:active باید بعد از a:hover بیاید.

a:link, a:visited {
   background-color: #f44336;
   color: white;
   padding: 14px 25px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
}
a:hover, a:active {
   background-color: red;
}

لیست ها در css

در HTML، دو نوع اصلی از لیست ها وجود دارد:

  • – لیست های غیر ترتیبی (<ul>) : آیتم های لیست با یک دایره توپر مشخص می شوند
  • – لیست های ترتیبی (<ol>) : آیتم های لیست با اعداد یا حروف مشخص می شوند

خواص لیست CSS به شما این امکان را می دهد:

  • – نشانگرهای لیست مختلف را برای لیست های ترتیبی تنظیم کنید
  • – لیست مارکرهای مختلف را برای لیست های غیر ترتیبی تنظیم کنید
  • – یک تصویر را به عنوان نشانگر لیست تنظیم کنید
  • – رنگ های پس زمینه را به لیست های مورد نظر اضافه کنید

علامت های مورد نظر در لیست های مختلف

خصوصیت list-style-type علامت های مورد نظر در لیست های مختلف را مشخص می کند.

مثال زیر برخی از نشانگرهای لیست موجود را نشان می دهد:

ul.a {
   list-style-type: circle;
}
ul.b {
   list-style-type: square;
}
ol.c {
   list-style-type: upper-roman;
}
ol.d {
   list-style-type: lower-alpha;
}
<ul class="a">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ul>
<ul class="b">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ul>
<ol class="c">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ol>
<ol class="d">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ol>

خروجی :

  • Coffee
  • Tea
  • Coca Cola


  • Coffee
  • Tea
  • Coca Cola


  1. Coffee
  2. Tea
  3. Coca Cola


  1. Coffee
  2. Tea
  3. Coca Cola

توجه: بعضی از مقادیر برای لیست های غیر ترتیبی و برخی برای لیست های مرتب شده است.

قرار دادن یک تصویر به عنوان نشانگر مورد لیست

خصوصیت list-style-image یک تصویر را به عنوان نشانگر گزینه های لیست مشخص می کند:

ul {
   list-style-image: url('sqpurple.gif');
}

موقعیت نشانگرهای لیست

خصوصیت list-style-position موقعیت نشانگرهای لیست مورد نظر را مشخص می کند.

ul.a {
   list-style-position: outside;
}
ul.b {
   list-style-position: inside;
}

list-style-position: outside (پیش فرض):

  • Coffee – A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant
  • Tea – An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia
  • Coca Cola – A carbonated soft drink produced by The Coca-Cola Company. The drink’s name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves

list-style-position: inside:

  • Coffee – A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant
  • Tea – An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia
  • Coca Cola – A carbonated soft drink produced by The Coca-Cola Company. The drink’s name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves

حذف تنظیمات پیش فرض : برای حذف تنظیمات پیش فرض لیست ها مانند شکل نشانه آیتم های لیست و مقادیر پیش فرض padding ، margin به صورت زیر عمل می کنیم.

ul.demo {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
<ul class="demo">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ul>

خروجی :

  • Coffee
  • Tea
  • Coca Cola

می توان تمام خصوصیات لیست را در یک خط با دستور list-style نوشت (Shorthand).

ul {
   list-style: square inside url("sqpurple.gif");
}

خصوصیات font در css

Font family

خصوصیت font-family باید چندین نام فونت را به عنوان یک سیستم «پشتیبان» نگه دارد. اگر مرورگر اولین فونت را پشتیبانی نکرد، فونت بعدی را اعمال کند و غیره.

نکته: اگر نام یک خانواده فونت بیش از یک کلمه باشد، باید در علامت نقل قول، مانند: “Times New Roman” قرار گیرد.

برای استفاده از بیش از یک خانواده فونت در لیست آنها را با کاما از هم جدا می کنیم:

p {
   font-family: "Times New Roman", Times, serif;
}

Font style

خصوصیت font-style عمدتا برای مشخص کردن متن کلامی استفاده می شود.

این ویژگی دارای سه مقدار است:

  • – normal : متن به طور معمول نمایش داده می شود
  • – italic : متن به صورت کج نشان داده می شود
  • – oblique : متن “تکیه گاه” است (شیب دار بسیار شبیه به italic است اما کمتر پشتیبانی می شود)
p.normal {
   font-style: normal;
}
p.italic {
   font-style: italic;
}
p.oblique {
   font-style: oblique;
}
<p class="normal">This is a paragraph in italic style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>

خروجی :

This is a paragraph in normal style.

This is a paragraph in italic style.

This is a paragraph in oblique style.

Font Size

خاصیت font-size اندازه قلم متن را تنظیم می کند.

توانایی مدیریت اندازه متن در طراحی وب مهم است. با این حال، شما نباید از تنظیمات اندازه فونت استفاده کنید تا پاراگراف ها را اندازه هدینگ بکنید یا هدینگ ها (h1..h6) را هم اندازه هم بکنید.

اندازه قلم اندازه می تواند یک اندازه مطلق یا نسبی باشد.

اندازه مطلق :

  • – متن را به یک اندازه مشخص تنظیم می کند
  • – اجازه نمیدهد که کاربر اندازه متن را در تمام مرورگرها تغییر دهد
  • – اندازه مطلق زمانی مفید است که اندازه فیزیکی خروجی شناخته شده است

اندازه نسبی :

  • – اندازه را نسبت به عناصر اطراف تنظیم می کند
  • – به کاربر امکان می دهد اندازه متن را در مرورگرها تغییر دهد

توجه: اگر شما یک اندازه فونت را مشخص نکنید، اندازه پیش فرض متن معمولی، مانند پاراگراف ها، ۱۶ پیکسل (۱۶px=1em) است.

تنظیم اندازه فونت با پیکسل

تنظیم اندازه متن با پیکسل به کنترل کامل بر اندازه متن می انجامد:

h1 {
   font-size: 40px;
}
h2 {
   font-size: 30px;
}
p {
   font-size: 14px;
}
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>

خروجی :

This is heading 1

This is heading 2

This is a paragraph.

تنظیم اندازه فونت با em

برای اجازه دادن به کاربران برای تغییر اندازه متن (در منوی مرورگر)، بسیاری از توسعه دهندگان ازem به جای پیکسل استفاده می کنند.

۱em برابر اندازه فونت فعلی است. اندازه متن پیش فرض در مرورگرها ۱۶ پیکسل است. بنابراین، اندازه پیش فرض ۱em برابر ۱۶ پیکسل است.

اندازه را می توان از پیکسل ها به EM با استفاده از این فرمول محاسبه کرد: pixels/16=em

h1 {
   font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
   font-size: 1.875em; /* 30px/16=1.875em */
}
p {
   font-size: 0.875em; /* 14px/16=0.875em */
}
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>

خروجی :

This is heading 1

This is heading 2

This is a paragraph.

Font Weight

خصوصیت font-weight وزن فونت را مشخص می کند:

p.normal {
   font-weight: normal;
}
p.light {
   font-weight: lighter;
}
p.thick {
   font-weight: bold;
}
p.thicker {
   font-weight: 900;
}
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

خروجی :

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

اندازه فونت واکنش گرا :

اندازه متن را می توان با واحد VW تنظیم کرد، که به معنی “عرض نمایشگر” است.

به این ترتیب اندازه متن از اندازه پنجره مرورگر پیروی می کند:

<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

Viewport اندازه پنجره مرورگر است. ۱vw = 1٪ از عرض نمایشگر است، اگر عرض نمایشگر ۵۰cm باشد، ۱vw=0.5cm است.

آموزش CSS (بخش هشتم)

خصوصیات متن در css

Text Color

خصوصیت Color برای تنظیم رنگ متن استفاده می شود. رنگ توسط:

  • – نام رنگ : مانند “blue”
  • – توسط مقدار HEX مانند “#۰۰۰۰ff”
  • – توسط مقدار RGB مانند “(rgb(0,0,255”

برای مشاهده لیست کامل مقادیر رنگ ممکن است به مقادیر CSS Color مراجعه کنید.

<h1 style="color: blue;">This is heading 1</h1>
<p style="color: green;">This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p>

This is heading 1

This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.

text-align

خصوصیت text-align برای تنظیم تراز افقی یک متن استفاده می شود.

برای خصوصیت text-align می توان چهار مقدار را تعریف کرد: left , right , center , justify.

h1 {
   text-align: center;
}
h2 {
   text-align: left;
}
h3 {
   text-align: right;
}
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

خروجی :

Heading 1 (center)

Heading 2 (left)

Heading 3 (right)

هنگامی که مشخصه text-align بر روی “justify” تنظیم شده است، هر خط کشیده می شود به طوری که هر خط برابر با عرض و حاشیه چپ و راست شود (مانند مجلات و روزنامه ها) .

div {
   border: 1px solid black;
   padding: 10px;
   width: 200px;
   height: 200px;
   text-align: justify;
}
<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>

خروجی :

In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since. ‘Whenever you feel like criticizing anyone,’ he told me, ‘just remember that all the people in this world haven’t had the advantages that you’ve had.’

text-decoration

text-decoration برای تنظیم یا حذف دکوراسیون از متن استفاده می شود.

مقدار ;text-decoration: none اغلب برای حذف خط از زیر لینک استفاده می شود.

مقادیر دیگر text-decoration برای تزئین متن مورد استفاده قرار می گیرند.

h1 {
   text-decoration: overline;
}
h2 {
   text-decoration: line-through;
}
h3 {
   text-decoration: underline;
}
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

خروجی :

This is heading 1

This is heading 2

This is heading 3

نکته: توصیه نمی شود که از مقدار underline برای متنی که یک لینک نیست استفاده کنید، زیرا اغلب خواننده را گمراه می کند.

text-transform

خصوصیت text-transform برای مشخص کردن حروف بزرگ و کوچک در یک متن استفاده می شود، که می تواند سه مقدار uppercase (تمام حروف به صورت بزرگ)، lowercase (تمام حروف به صورت کوچک)، capitalize (حرف اول کلمات به صورت بزرگ و مابقی کلمات به صورت کوچک)

p.uppercase {
   text-transform: uppercase;
}
p.lowercase {
   text-transform: lowercase;
}
p.capitalize {
   text-transform: capitalize;
}
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

خروجی :

This is some text.

This is some text.

This is some text.

text-indent

خصوصیت text-indent برای مشخص کردن مقدار تورفتگی خط اول متن استفاده می شود:

p {
   text-indent: 50px;
}
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

خروجی :

In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since. ‘Whenever you feel like criticizing anyone,’ he told me, ‘just remember that all the people in this world haven’t had the advantages that you’ve had.’

letter-spacing

خصوصیت letter-spacing برای تعیین فضای بین کاراکترهای یک متن استفاده می شود.

مثال زیر نشان می دهد که چگونه فضای بین کاراکترها را می توان افزایش یا کاهش داد:

h1 {
   letter-spacing: 3px;
}
h2 {
   letter-spacing: -3px;
}
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

خروجی :

This is heading 1

This is heading 2

line-height

خصوصیت line-height برای تعیین فاصله ی بین خطوط استفاده می شود.

p.small {
   line-height: 0.7;
}
p.big {
   line-height: 1.8;
}
<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

خروجی :

This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.

This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.

This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.

Text Direction

خصوصیت direction برای تغییر مسیر متن یک عنصر مورد استفاده قرار می گیرد.

p.ex1 {
   direction: rtl;
}
<p>This is the default text direction.</p>
<p class="ex1"><bdo dir="rtl">This is right-to-left text direction.</bdo></p>

خروجی :

This is the default text direction.

This is right-to-left text direction.

word-spacing

خصوصیت word-spacing برای تعیین فضای بین کلمات در یک متن استفاده می شود.

h1 {
   word-spacing: 10px;
}
h2 {
   word-spacing: -5px;
}
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

خروجی :

This is heading 1

This is heading 2

text-shadow

خصوصیت text-shadow سایه را به متن اضافه می کند.

مثال زیر موقعیت سایه افقی (۳ پیکسل)، موقعیت سایه عمودی (۲ پیکسل) و رنگ سایه (قرمز) را مشخص می کند:

h1 {
   text-shadow: 3px 2px red;
}
<h1>Text-shadow effect</h1>

خروجی :

Text-shadow effect

آموزش CSS (بخش هفتم)

CSS Outline

یک طرح کلی خطی است که در اطراف عناصر بیرون از مرزها ایجاد می شود تا عنصر “برجسته” شود.

CSS Outline دارای ویژگی های زیر است:

  • – outline-style
  • – outline-width
  • – outline-color
  • – outline-offset
  • – outline

نکته: Outline با border متفاوت است! Outline بر خلاف border، در خارج از مرز عنصر کشیده شده و ممکن است با سایر محتوا همپوشانی داشته باشد. همچنین، Outline بخشی از ابعاد عنصر نیست، عرض و ارتفاع کلی عنصر بر عرض طرح کلی تاثیر نمی گذارد.

outline-style

خصوصیت outline-style سبک طرح را مشخص می کند و می تواند یکی از مقادیر زیر را داشته باشد:

  • – dotted : یک طرح نقطه نقطه را تعریف می کند
  • – dashed : یک طرح خط چین را تعریف می کند
  • – solid : یک طرح خط ممتد را تعریف می کند
  • – double : یک طرح دو خطی را تعریف می کند
  • – groove : یک طرح سه بعدی را تعریف می کند
  • – ridge : یک طرح سه بعدی شیاردار را تعریف می کند
  • – inset : یک طرح سه بعدی داخلی را تعریف می کند
  • – outset : یک طرح سه بعدی خارجی را تعریف می کند
  • – none : هیچ طرحی را برای outline تعریف نمی کند

نکته: هیچ کدام از خواص outline هیچ تأثیری نخواهند داشت، مگر اینکه مشخصه outline-style تعریف شده باشد!

<p style="outline-color:red;outline-style: dotted;">A dotted outline</p>
<p style="outline-color:red;outline-style: dashed;">A dashed outline</p>
<p style="outline-color:red;outline-style: solid;">A solid outline</p>
<p style="outline-color:red;outline-style: double;">A double outline</p>
<p style="outline-color:red; {outline-style: groove;">A groove outline. The effect depends on the outline-color value.</p>
<p style="outline-color:red;outline-style: ridge;">A ridge outline. The effect depends on the outline-color value.</p>
<p style="outline-color:red;outline-style: inset;">An inset outline. The effect depends on the outline-color value.</p>
<p style="outline-color:red;outline-style: outset;">An outset outline. The effect depends on the outline-color value.</p>

خروجی :

A dotted outline

A dashed outline

A solid outline

A double outline

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

Outline Color

برای تنظیم رنگ Outline، از ویژگی outline-color استفاده می شود.

رنگ را می توان توسط :

  • – نام رنگ : یک نام رنگ را مشخص کنید، مانند “red”
  • – تعریف مقدار RGB : مقدار RGB را مشخص کنید، مانند “(rgb (255،۰،۰”
  • – تعریف مقدار Hex : مقدار hex را مشخص کنید، مانند “ff0000#”

Outline Width

خصوصیت outline-width عرض outline را مشخص می کند و می تواند یکی از مقادیر زیر را داشته باشد:

  • – thin (به طور معمول مقدار ۱px)
  • – medium (به طور معمول مقدار ۳px)
  • – thick (به طور معمول مقدار ۵px)
  • – تعریف یک اندازه مشخص با (px، pt، cm، em، و…)
<p style="border: 1px solid black; outline-style: solid; outline-color: red; outline-width: thin;">A thin outline.</p>
<p style="border: 1px solid black; outline-style: solid; outline-color: red; outline-width: medium;">A medium outline.</p>
<p style="border: 1px solid black; outline-style: solid; outline-color: red; outline-width: thick;">A thick outline.</p>
<p style="border: 1px solid black; outline-style: solid; outline-color: red; outline-width: 4px;">A 4px thick outline.</p>

خروجی :

A thin outline.

A medium outline.

A thick outline.

A 4px thick outline.

Outline – Shorthand property

امکان نوشتن دستورات outline توسط یک شرط کوتاه برای تنظیم ویژگی های ذکر شده است :

<p style="outline: dotted red;">A dotted red outline.</p>
<p style="outline: 5px solid yellow;">A 5px solid yellow outline.</p>
<p style="outline: thick ridge pink;">A thick ridge pink outline.</p>

خروجی :

A dotted red outline.

A 5px solid yellow outline.

A thick ridge pink outline.

Outline Offset

خصوصیت outline-offset فضای بین یک outline و لبه border یک عنصر را مشخص می کند. فضای بین عنصر و outline آن شفاف است.

مثال زیر یک خط ۱۵px را خارج از لبه border مشخص می کند:

<p style="margin: 30px; border: 1px solid white; outline: 1px solid red; outline-offset: 15px;">This paragraph has an outline 15px outside the border edge.</p>

خروجی :

This paragraph has an outline 15px outside the border edge.

تعیین عرض و ارتفاع در css

تنظیم ارتفاع و عرض

خواص height و width برای تعیین ارتفاع و عرض یک عنصر استفاده می شود.

height و width را می توان به طور خودکار تنظیم کرد. مقادیر عرض و ارتفاع را می توان با px , % , cm , … مشخص کرد.

<div style="height: 200px; width: 50%; background-color: darkblue;">
   <h2>Set the height and width of an element</h2>
   <p>This div element has a height of 200px and a width of 50%:</p>
</div>

خروجی :

   

Set the height and width of an element

   

This div element has a height of 200px and a width of 50%:

<div style="height: 100px; width: 500px; background-color: darkblue;">
   <h2>Set the height and width of an element</h2>
   <p>This div element has a height of 200px and a width of 50%:</p>
</div>

خروجی :

   

Set the height and width of an element

   

This div element has a height of 200px and a width of 50%:

نکته : خواص ارتفاع و عرض شامل padding، margin یا border نیست.

تنظیم حداکثر عرض

خصوصیات max-width برای تعیین حداکثر عرض یک عنصر استفاده می شود. max-width را می توان با مقادیر طول، مانند پیکسل، سانتی متر و غیره، یا درصد (٪) بلوک والد مشخص کرد.

با استفاده از max-width، در این وضعیت، مرور مرورگر پنجره های کوچک را بهبود می بخشد.

CSS Box Model

تمام عناصر HTML را می توان به عنوان جعبه در نظر گرفت. در CSS، اصطلاح “Box Model” هنگام صحبت در مورد طراحی و طرح استفاده می شود.

CSS box model اساسا جعبه ای است که در اطراف هر عنصر HTML پیچیده می شود. این شامل: padding، border، margin و محتوای واقعی(content) است. تصویر زیر box mode را نشان می دهد:

CSS Box Model

توضیح بخش های مختلف تصویر بالا :

  • – content : محتوا جعبه، جایی که متن و تصاویر در آن قرار می گیرد
  • – padding : محدوده اطراف محتوا را مشخص می کند.
  • – border : حاشیه ای که در اطراف محفظه و محتوا قرار می گیرد
  • – margin : منطقه خارج از border را مشخص می کند.

box model اجازه می دهد تا ما یک مرز را در اطراف عناصر اضافه کنیم و فضای بین عناصر تعریف کنیم.

<div style="background-color: lightgrey; width: 300px; border: 25px solid green; padding: 25px; margin: 25px;">
This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

عرض و ارتفاع یک عنصر

به منظور تنظیم عرض و ارتفاع یک عنصر به طور صحیح در تمام مرورگرها، شما باید بدانید که چگونه box model کار می کند.

مهم: هنگامی که خواص عرض و ارتفاع یک عنصر را با CSS تنظیم می کنید، فقط عرض و ارتفاع محتوا را تعیین می کنید. برای محاسبه ابعاد کامل یک عنصر، شما همچنین باید padding، margin و border را اضافه کنید.

فرض کنید میخواهیم یک عنصر div را به عرض کل ۳۵۰ پیکسل بسپاریم:

محاسبه آن به صورت زیر می شود :

۳۲۰px (width)
+ ۲۰px (left + right padding)
+ ۱۰px (left + right border)
+ ۰px (left + right margin)
= ۳۵۰px

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

width + left padding + right padding + left border + right border + left margin + right margin

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

height + top padding + bottom padding + top border + bottom border + top margin + bottom margin


آموزش CSS (بخش پنجم)

تعیین فاصله ها در حاشیه عناصر CSS Margins

خواص margin در CSS برای ایجاد فضای اطراف عناصر، خارج از هر مرز تعریف شده، استفاده می شود. با CSS، شما کنترل کامل بر روی حاشیه ها دارید. این خاصیت ها برای تنظیم حاشیه برای هر طرف یک عنصر (بالا، راست، پایین و سمت چپ) وجود دارد.

CSS دارای خصوصیات برای تعیین حاشیه برای هر طرف یک عنصر است:

  • – margin-top
  • – margin-right
  • – margin-left
  • – margin-bottom

اگر margin دارای چهار مقدار باشد (;margin: 25px 50px 75px 100px) :

  • – حاشیه بالای ۲۵ پیکسل است
  • – حاشیه راست ۵۰ پیکسل است
  • – حاشیه پایین ۷۵ پیکسل است
  • – حاشیه سمت چپ ۱۰۰ پیکسل است
<h2>The margin shorthand property - 4 values</h2>
<div style="border: 1px solid black;margin: 25px 50px 75px 100px;background-color: darkblue;">
This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.
</div>

خروجی :

The margin shorthand property – 4 values

This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.

اگر margin دارای دو مقدار باشد (;margin: 25px 50px) :

  • – حاشیه بالا و پایین ۲۵ پیکسل است
  • – حاشیه راست و چپ ۵۰ پیکسل است

اگر margin دارای یک مقدار باشد (;margin: 25px) :

تمام چهار طرف حاشیه ۲۵ پیکسل است.

شما می توانید مقدار margin را auto قرار دهید که در این صورت عنصر درون ظرف خود به صورت افقی در وسط صفحه قرارمی گیرد و در واقع عنصر عرض مشخص شده را می گیرد و فضای باقیمانده به طور مساوی بین حاشیه های چپ و راست تقسیم می شود:

<h2>Use of margin:auto</h2>
<p>
You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:
</p>
<div style="width:300px; margin: auto; border: 1px solid red;">
This div will be horizontally centered because it has margin: auto;
</div>

خروجی :

Use of margin:auto

You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

This div will be horizontally centered because it has margin: auto;

تعیین فاصله ها در داخل مرز عناصر CSS Padding

خصوصیات CSS Padding برای ایجاد فضای اطراف محتوای عنصر، در داخل هر مرز تعریف شده، استفاده می شود. با استفاده از CSS، شما کنترل کاملی بر روی Padding دارید. خواص برای تنظیم Padding برای هر طرف یک عنصر (بالا، راست، پایین و چپ) وجود دارد.

CSS دارای خصوصیاتی برای تعیین Padding برای هر طرف یک عنصر است.

  • – padding-top
  • – padding-right
  • – padding-bottom
  • – padding-left

توجه : مقادیر منفی برای خصوصیت padding مجاز نیستند.

مثال زیر padding های مختلف را برای هر چهار طرف یک عنصر تنظیم می کند:

<h2>Using individual padding properties</h2>
<div style="border: 1px solid black; background-color: darkblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px;">
This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.
</div>

خروجی :

Using individual padding properties

This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.

برای کوتاه کردن کد، می توان تمام خواص padding را در یک ویژگی مشخص کرد. اگر خصوصیت padding دارای چهار مقدار باشد (;padding: 25px 50px 75px 100px) :

  • – مقدار padding بالا ۲۵ پیکسل است.
  • – مقدار padding راست ۵۰ پیکسل است.
  • – مقدار padding پایین ۷۵ پیکسل است.
  • – مقدار padding چپ ۱۰۰ پیکسل است.
<h2>The padding shorthand property - 4 values</h2>
<div style="border: 1px solid black; padding: 25px 50px 75px 100px; background-color: darkblue;">
This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.
</div>

The padding shorthand property – 4 values

This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.

اگر خصوصیت padding دارای سه مقدار باشد (;padding: 25px 50px 75px) :

  • – بالا ۲۵ پیکسل است
  • – راست و چپ ۵۰ پیکسل است
  • – padding پایین ۷۵ پیکسل است

اگر خصوصیت padding دارای دو مقدار باشد (;padding: 25px 50px) :

  • – سطوح بالا و پایین ۲۵px هستند
  • – مقادیر راست و چپ ۵۰ پیکسل است

اگر خصوصیت padding دارای یک مقدار باشد (;padding: 25px) :

تمام چهار طرف ۲۵ پیکسل است.

اگر یک عنصر دارای عرض مشخص شده باشد، ابعاد اضافه شده padding به آن عنصر، به عرض کل عنصر افزوده می شود. این اغلب یک نتیجه نامطلوب است.

در مثال زیر، عنصر دارای عرض ۳۰۰px می باشد. با این حال، پهنای واقعی رندر عنصر ۳۵۰px خواهد بود (۳۰۰px + 25px + 300px + 25px ) :

<h2>Padding and element width</h2>
<div style="width: 300px; background-color: green;">
This div is 300px wide.
</div>
<br>
<div style="width: 300px; padding: 25px; background-color: darkblue;">
The width of this div is 350px, even though it is defined as 300px in the CSS.
</div>

خروجی :

Padding and element width

This div is 300px wide.

The width of this div is 350px, even though it is defined as 300px in the CSS.

برای حفظ عرض در ۳۰۰px، بدون توجه به مقدار padding، شما می توانید از box-sizing با مقدار border-box استفاده کنید. این باعث می شود که عنصر برای حفظ عرض آن، اگر padding را افزایش دهید، فضای موجود در دسترس کاهش خواهد یافت. به عنوان مثال:

<h2>Padding and element width</h2>
<div style="width: 300px; background-color: green;">
This div is 300px wide.
</div>
<br>
<div style="width: 300px; padding: 25px; box-sizing: border-box; background-color: darktblue;">
The width of this div is 350px, even though it is defined as 300px in the CSS.
</div>

خروجی :

Padding and element width

This div is 300px wide.

The width of this div is 350px, even though it is defined as 300px in the CSS.

آموزش CSS (بخش چهارم)

مرزها (Borders) در css :

خصوصیات border در CSS به شما اجازه می دهد که style، اندازه و رنگ مرز یک عنصر را مشخص کنید.

نکته : دقت کنید که هیچ کدام از خاصیت های Border تا زمانی که خاصیت Border-style را مقداردهی نکرده باشید، تاثیری نخواهند داشت.

خاصیت های border:

Border Style

مقدار این خصوصیت border مشخص می کند چه نوع مرزی برای نمایش شکل آن بکار برده شود، که شامل مقادیر زیر می باشند:

  • – None دراین حالت هیچ مرزی تعریف نمی شود.
  • Solid یک خط مرزی ممتد رسم می کند.
  • – Dotted یک مرز نقطه چین تعریف می کند.
  • – Dashed یک مرزخط چین تعریف می کند.
  • – Double یک مرز دو خطی ایجاد می کند.
  • – Groove یک مرز سه بعدی ایجاد می کند که در آن خطوط بالایی و سمت چپ پررنگ تر ازخطوط دیگر هستند.
  • – Ridge در این حالت خطوط مرزی به صورت سه بعدی و با طیف رنگی نمایش داده می شوند.
  • – Inset این مقدار یک مرز داخلی سه بعدی تعریف می کند که در آن معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگر هستند.
  • – Outset این مقدار یک مرز سه بعدی خارجی تعریف می کند که در آن خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگر هستند.

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

A inset border.

A outset border.

A none border.

ضخامت حاشیه مرزی (Border Width)

با استفاده از این خاصیت می توانید ضخامت خط مرزی را تعیین کنید. عرض خط مرزی را می توان به عنوان یک اندازه مشخص (توسط px، pt، cm، em، و غیره) یا با استفاده از یکی از سه مقدار از پیش تعیین شده: thin ، medium و thick تنظیم کرد. خاصیت border-width می تواند از یک تا چهار مقدار (برای مرز بالا(top)، مرز راست(right)، مرز پایین(bottom) و مرز چپ(left)) داشته باشد.

p.one {
   border-style: solid;
   border-width: 5px;
}
p.two {
   border-style: solid;
   border-width: medium;
}
p.three {
   border-style: dotted;
   border-width: 2px;
}
p.four {
   border-style: dotted;
   border-width: thick;
}
p.five {
   border-style: double;
   border-width: 15px;
}
p.six {
   border-style: double;
   border-width: thick;
}
p.seven {
   border-style: solid;
   border-width: 2px 10px 4px 20px;
}

Some text.

Some text.

Some text.

Some text.

Some text.

Some text.

Some text.

رنگ خط مرزی Border Color

خاصیت border-color برای تنظیم و مقداردهی رنگ خط مرزی مورد استفاده قرار می گیرد، که می توان توسط استفاده از نام رنگ (مثلا red)، تعیین مقدار RGB (مانند rgb(255,0,0) ) و یا توسط مقدار دهی HEX (مانند #ff0000) آن را تنظیم کرد.

خاصیت border-color می تواند از یک تا چهار ارزش (برای مرز بالا(top)، مرز راست(right)، مرز پایین(bottom) و مرز چپ(left)) داشته باشد.

p.one {
   border-style: solid;
   border-width:3px;
   border-color: red;
}
p.two {
   border-style: solid;
   border-width:3px;
   border-color: green;
} 
p.three {
   border-style: solid;
   border-width:3px;
   border-color: red green blue yellow;
} 

A solid red border

A solid green border

A solid multicolor border

تعریف مرز به صورت مجزا برای هر طرف

از مثال های بالا دیده شده است که ممکن است مرز دیگری برای هر طرف مشخص شود(برای هر طرف یک مرزی متفاوت داشت). در CSS، برای مشخص کردن هر یک از مرزها (بالا، راست، پایین و سمت چپ) نیز ویژگی هایی وجود دارد:

p {
   border-top-style: dotted;
   border-right-style: solid;
   border-bottom-style: dotted;
   border-left-style: solid;
}

۲ different border styles.

خاصیت border-style می تواند از یک تا چهار مقدار را داشته باشد:

border-style: dotted solid double dashed;
  • – مرز بالایی نقطه چین می شود.
  • – مرز سمت راست عنصر با خطی معمولی کشیده می شود.
  • – مرز پایین با دو خط نمایش داده می شود.
  • – مرز سمت چپ خط چین می شود.
border-style: dotted solid double;
  • – مرز سمت بالا نقطه چین می شود.
  • – مرزهای سمت راست و چپ با خط معمولی ترسیم می شوند.
  • – مرز سمت پایین دو خطه می شود.

border-style: dotted solid;
  • – مرزهای سمت بالا و پایین نقطه چین می گردند.
  • – مرزهای سمت راست و چپ با خطی معمولی کشیده می شوند.


border-style: dotted;

هر چهار حاشیه با خطی معمولی تعریف می شوند.

خاصیت Border-Shorthand

همانطور که می توانید از مثال های بالا مشاهده کنید، در هنگام برخورد با مرزها، ویژگی های زیادی وجود دارد. به منظور کاهش اندازه ی کد (مختصر نویسی یا بهینه نوشتن کد)، می توان تمامی خاصیت های جداگانه را در یک خاصیت واحد تعریف کرد. این خاصیت را مختصر نویسی کد یا همان short-hand property می نامند.

  • border-width
  • border-style (الزامی )
  • border-color
p {
   border: 5px solid red;
}

شما همچنین می توانید تمام خصوصیات مرزی فرد را فقط برای یک طرف مشخص کنید:

p {
   border-left: 6px solid red;
}

گرد کردن گوشه های خطوط مرزی Rounded Borders

ویژگی border-radius برای اضافه کردن مرزهای گرد به یک عنصر استفاده می شود:

p {
   border: 2px solid red;
}
p {
   border: 2px solid red;
   border-radius: 5px;
}
p {
   border: 2px solid red;
   border-radius: 8px;
}
p {
   border: 2px solid red;
   border-radius: 12px;
}

Normal border

Round border

Rounder border

Roundest border