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

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

لینک ها در 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");
}

پاسخ دهید

    DESIGNESTAN
    0912-0292081