List-style | Стилизиране на булети
Когато стилизираме HTML лист като този:
- Примерен елемент 1
- Примерен елемент 2
- Примерен елемент 3
Най-гъвкавия начин да го направим, е като премахнем стила на булетите и си направим наш си.
LI {
list-style: none;
padding: 0px 0px;
margin: 0px 0px;
}
Може да сложим собствени булети с background-image и да контролираме местоположението им с background-position.
Width и Height
width: 200px;
height: 300px;
Width (ширина) и Height (височина), както и другите свойства свързани с тях, могат да се задават единствено на елементи с display тип block или inline-block. Ако се опитате да го зададете на елемент с таг SPAN, B, I или A, то няма да има никакъв ефект докато не му сложите display:inline-block или само block.
Когато поставим min-width, това значи, че минималната ширина на контейнера ще е посочена, но ако съдържанието е в повече, тя ще стане по-голяма. Останалите свойства работят по аналогичен начин.
min-width: 200px;
max-width: 250px;
min-height: 100px;
max-height: 350px;
Вертикално центриране
.container {
height: 10em;
display: table-cell;
vertical-align: middle;
}
!important
color: #992200 !important;
width: 300px !important;
Реда на задаване на правила в CSS е от значение.
Последното зададено влиза в сила. Ако няколко CSS правила прихващат един елемент и всички задават цвят, то последния такъв ще се ползва, спрямо подредбата на css файлове в HTML и css правила вътре във файла.
Но ако искаме да променим това и правилото не е последното, тогава слагаме след стойността му !important и то ще е в сила.
Сподели с приятели: |
