Стилове за списъци, таблици и навигация

Стилизиране на списъци

В HTML съществуват два основни типа списъци:

<ul> (unordered list) - Неподредени списъци. Елементите на списъка се отбелязват със символи.
<ol> (ordered list) – Подредени списъци. Елементите на списъка се отбелязват с цифри или букви. [1]

CSS разполага със следните свойства за стилизиране на HTML списъци:

list-style-type – Определя вида на маркера за елементите на списъка.
list-style-image – Задава изображение като маркер за елементите на списъка.
list-style-position – Определя позицията на маркерите за елементите на списъка.
list-style – Съкратено свойство за горепосочените свойства.

list-style-type

CSS свойството list-style-type определя вида на маркера за елементите в списък. Ето някои от наличните маркери за елементи на списък:

ul {
        list-style-type: circle;
}
ul {
        list-style-type: disc;
}
ul {
        list-style-type: square;
}

ol {
        list-style-type: upper-roman;
}
ol {
        list-style-type: lower-roman;
}
ol {
        list-style-type: lower-alpha;
}
ol {
        list-style-type: decimal;
}

Code

<style>
ul {
      list-style-type: circle;
}
</style>

<ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
</ul>

Preview

list-style-image

CSS свойството list-style-image се използва за замяна на маркера на елемента от списъка с изображение.

Внимание

Винаги задавайте и свойството list-style-type. То се използва, ако изображението по някаква причина не е достъпно.

Code

<style>
ul {
      list-style-type: circle;
      list-style-image: url("/img/bat.png");
}
</style>

<ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
</ul>

Preview

Информация

Препоръчително е изображението да не бъде с големи размери

list-style-position

CSS свойството list-style-position определя позицията на маркерите на елементите в списъка (булетите).

list-style-position: outside - Означава, че маркерите ще бъдат разположени извън самия елемент на списъка. Началото на всеки ред от елемента на списъка ще бъде подравнено вертикално. Това е настройката по подразбиране:

Code

<style>
ul {
      list-style-position: outside;
}
</style>

<ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
</ul>

Preview

list-style-position: inside - Означава, че маркерите ще се намират вътре в елемента на списъка. Тъй като са част от самия елемент, те ще бъдат част от текста и ще го изместят в началото:

Code

<style>
ul {
      list-style-position: inside;
}
</style>

<ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
</ul>

Preview

Премахване на маркерите

Свойството list-style-type: none се използва за премахване на маркерите на елементите в списъка.

Бележка

Списъкът има зададени по подразбиране външен отстъп (margin) и вътрешен отстъп (padding). За да ги премахнете, добавете margin: 0 и padding: 0 към елемента <ul> или <ol>

Code

<style>
ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
}
</style>

<ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
</ul>

Preview

list-style

list-style е съкратено свойство (shorthand property). То се използва за задаване на всички свойства, свързани със списъци, в рамките на една декларация.

При използването на това съкратено свойство редът на стойностите е следният:

list-style-type
list-style-position
list-style-image

Ако някоя от посочените стойности липсва, се прилага стойността по подразбиране за съответното свойство.

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

Стилизиране с цветове

Можем също така да стилизираме списъците с цветове и отстъпи, за да изглеждат по-интересно.

Всичко, добавено към тага <ol> или <ul>, засяга целия списък, докато свойствата, добавени към тага <li>, ще се отнасят за отделните елементи на списъка:

Code

<style>
ol {
      background: salmon;
      padding: 20px;
}
ol li {
      background: mistyrose;
      color: darkred;
      padding: 10px;
      margin-left: 20px;
}
ul {
      background: powderblue;
      padding: 20px;
}
ul li {
      background: mistyrose;
      color: darkblue;
      margin: 5px;
}
</style>

<ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
</ol>

<ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
</ul>

Preview

Стилизиране на таблици

HTML таблиците могат значително да подобрят външния си вид с помощта на CSS. [2]

Задаване на рамки

CSS свойството border се използва за задаване на дебелината, стила и цвета на рамките на таблици.

Свойството border е съкратен запис за:

border-width – Задава дебелината на рамката.
border-style – Задава стила на рамката (задължително).
border-color – Задава цвета на рамката.

Code

<style>
table, th, td {
      border: 1px solid red;
}
</style>

<table>
      <tr>
          <th>Име</th>
          <th>Възраст</th>
      </tr>
      <tr>
          <td>Мартин Маринов</td>
          <td>21</td>
      </tr>
</table>

Preview

Бележка

Защо има двойни рамки?

Забележете, че таблицата има двойни рамки. Това е така, защото елементите <table>, <th> и <td> имат отделни рамки.

За да премахнем двойните рамки, използваме свойството border-collapse.

border-collapse

CSS свойството border-collapse определя дали рамките на таблицата да се слеят в една обща рамка, или да останат отделни, както е при стандартния HTML.

Това свойство може да приема една от следните стойности:

separate – Стойност по подразбиране. Рамките са отделни; всяка клетка има собствена рамка.
collapse – Рамките се сливат в една обща рамка, когато това е възможно.

Code

<style>
table, th, td {
      border: 1px solid red;
      border-collapse: collapse;
}
</style>

<table>
      <tr>
          <th>Име</th>
          <th>Възраст</th>
      </tr>
      <tr>
          <td>Мартин Маринов</td>
          <td>21</td>
      </tr>
</table>

Preview

padding

За да контролирате разстоянието между рамката и съдържанието в таблица, използвайте свойството padding за елементите <td> и <th>.

Code

<style>
table, th, td {
      border: 1px solid red;
      border-collapse: collapse;
}
th, td {
      padding: 10px;
}
</style>

<table>
      <tr>
          <th>Име</th>
          <th>Възраст</th>
      </tr>
      <tr>
          <td>Мартин Маринов</td>
          <td>21</td>
      </tr>
</table>

Preview

border-spacing

CSS свойството border-spacing задава разстоянието между рамките на съседни клетки.

Бележка

Това свойство работи само когато border-collapse е зададено на separate, което е стойността по-подразбиране, следователно използването на border-collapse може да бъде премахнато.

Code

<style>
table, th, td {
      border: 1px solid red;
      border-spacing: 15px;
}
#table1 {
      /* задава 15px на всяка страна */
      border-spacing: 15px; 
}
#table2 {
      /* задава 15px по хоризонтала и 50px по вертикала */
      border-spacing: 15px 50px;
}
</style>

<table id = "table1">
      <tr>
          <th>Име</th>
          <th>Възраст</th>
      </tr>
      <tr>
          <td>Мартин Маринов</td>
          <td>21</td>
      </tr>
</table>

<br />

<table id = "table2">
      <tr>
          <th>Име</th>
          <th>Възраст</th>
      </tr>
      <tr>
          <td>Рая Петкова</td>
          <td>19</td>
      </tr>
</table>

Preview

Размери на таблицата

CSS свойството width се използва за задаване на ширината на таблица. [3] Ширината може да се зададе:

В проценти (%).
Като фиксирана стойност (px).
Чрез ключовата дума auto.

CSS свойството height се използва за задаване на височината на таблица. Височината може да бъде зададена:

В проценти (%).
Като фиксирана стойност (px).
Чрез ключовата дума auto.

Code

<style>
table, th, td {
      border: 1px solid red;
}
table {
      width: 100%;
}
th {
      height: 100px;
}
</style>

<table>
      <tr>
          <th>Име</th>
          <th>Възраст</th>
      </tr>
      <tr>
          <td>Мартин Маринов</td>
          <td>21</td>
      </tr>
</table>

Preview

Подравняване на елементите

CSS свойството text-align се използва за задаване на хоризонталното подравняване на съдържанието в елементи <th> или <td>. [4] Това свойство може да приема една от следните стойности:

left – Подравнява текста вляво.
right – Подравнява текста вдясно.
center – Центрира текста.

Бележка

По подразбиране съдържанието на елементите <th> е центрирано, а съдържанието на елементите <td> е подравнено вляво.

Code

<style>
table, th, td {
      border: 1px solid red;
}
table {
      width: 100%;
}
td {
      text-align: center;
}
</style>

<table>
      <tr>
          <th>Име</th>
          <th>Възраст</th>
      </tr>
      <tr>
          <td>Мартин Маринов</td>
          <td>21</td>
      </tr>
</table>

Preview

CSS свойството vertical-align задава вертикалното подравняване на съдържанието в елементи <th> или <td>.

top – Подравнява текста горе.
bottom – Подравнява текста долу.
center – Центрира текста.

Бележка

По подразбиране вертикалното подравняване на съдържанието в таблица е по средата (както за <th>, така и за <td> елементите).

Code

<style>
table, th, td {
      border: 1px solid red;
}
table {
      width: 100%;
}
td {
      height: 70px;
      vertical-align: bottom;
}
</style>

<table>
      <tr>
          <th>Име</th>
          <th>Възраст</th>
      </tr>
      <tr>
          <td>Мартин Маринов</td>
          <td>21</td>
      </tr>
</table>

Preview

Прилагане на декорации

За да създадете разделители за таблица, добавете свойството border-[value] към елементите <th> и <td>, където value приема една от следните стойности [5]:

top
bottom
left
right

Code

<style>
table {
      width: 100%;
}
th, td {
      border-bottom: 1px solid #ddd;
}
</style>

<table>
      <tr>
          <th>Име</th>
          <th>Възраст</th>
      </tr>
      <tr>
          <td>Мартин Маринов</td>
          <td>21</td>
      </tr>
</table>

Preview

Използвайте CSS селектора :hover върху <tr>, за да подчертаете редовете на таблицата при посочване с мишката

Code

<style>
table {
      width: 100%;
}
tr:hover {
      background-color: coral;
}
</style>

<table>
      <tr>
          <th>Име</th>
          <th>Възраст</th>
      </tr>
      <tr>
          <td>Мартин Маринов</td>
          <td>21</td>
      </tr>
</table>

Preview

За таблици с редуващи се цветове на редовете (тип „зебра“) използвайте селектора nth-child() и задайте цвят на фона за всички четни (или нечетни) редове на таблицата

Code

<style>
table {
      width: 100%;
}
tr:nth-child(even) {
      background-color: coral;
}
</style>

<table>
      <tr>
          <th>Име</th>
          <th>Възраст</th>
      </tr>
      <tr>
          <td>Мартин Маринов</td>
          <td>21</td>
      </tr>
      <tr>
          <td>Рая Петкова</td>
          <td>19</td>
      </tr>
      <tr>
          <td>Михаил Иванов</td>
          <td>23</td>
      </tr>
      <tr>
          <td>Анджела Куманова</td>
          <td>20</td>
      </tr>
</table>

Preview

Стилизиране на навигацията

Навигационните ленти помагат на потребителите лесно да се придвижват между различните секции на уебсайта. [6]

Обикновено навигационните ленти се изграждат с помощта на HTML елементи за списъци (<ul> и <li>), след което се оформят със CSS за постигане на добър външен вид.

Навигационната лента по същество представлява списък от връзки, така че използването на HTML елементите <ul> и <li> е напълно логично.

<ul>
        <li><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">About</a></li>
</ul>

След това премахваме отстъпите и маркерите.

ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
}

Code

<style>
ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
}
</style>

<ul>
      <li><a href="default.asp">Home</a></li>
      <li><a href="news.asp">News</a></li>
      <li><a href="contact.asp">Contact</a></li>
      <li><a href="about.asp">About</a></li>
</ul>

Preview

При вертикалната лента за навигация връзките са подредени една под друга и обикновено са подравнени спрямо лявата или дясната страна на уебстраницата. [7]

В основата на вертикалната лента за навигация стои <ul> с елементи <li>, като всеки от тях съдържа връзка <a>.

Вертикална навигация със стилове

Code

<style>
ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #f1f1f1;
}
li a {
      display: block;
      color: black;
      padding: 8px 16px;
      text-decoration: none;
}
li a:hover {
      background-color: #555555;
      color: white;
}
</style>

<ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
</ul>

Preview

При хоризонталната навигационна лента връзките са подредени хоризонтално (една до друга) и обикновено са разположени в горната част на уебстраницата. [8]

Често се добавя и елемент <nav> около елемента <ul>, който служи като контейнер за навигационната лента.

Хоризонтална навигация със стилове

Code

<style>
body {
      margin: 0;
      padding: 0;
}
ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333333;
}
ul li {
      float: left;
}
ul li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
}
ul li a:hover {
      background-color: #111111;
}
</style>

<ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
</ul>

Стилизиране на списъци​

list-style-type​

Code

Preview

list-style-image​

Code

Preview

list-style-position​

Code

Preview

Code

Preview

Премахване на маркерите​

Code

Preview

list-style​

Стилизиране с цветове​

Code

Preview

Стилизиране на таблици​

Задаване на рамки​

Code

Preview

border-collapse​

Code

Preview

padding​

Code

Preview

border-spacing​

Code

Preview

Размери на таблицата​

Code

Preview

Подравняване на елементите​

Code

Preview

Code

Preview

Прилагане на декорации​

Code

Preview

Code

Preview

Code

Preview

Стилизиране на навигацията​

Code

Preview

Вертикална навигация със стилове​

Code

Preview

Хоризонтална навигация със стилове​

Code

Preview

Използвана литература​

Стилизиране на списъци

list-style-type

list-style-image

list-style-position

Премахване на маркерите

list-style

Стилизиране с цветове

Стилизиране на таблици

Задаване на рамки

border-collapse

padding

border-spacing

Размери на таблицата

Подравняване на елементите

Прилагане на декорации

Стилизиране на навигацията

Вертикална навигация със стилове

Хоризонтална навигация със стилове

Използвана литература