Практика по спрайтах
-
Створіть верстку:
- горизонтальний список з 4-х посилань "Google Plus", "Linked In", "Telegram", "Twitter";
- вертикальний список з 3-х посилань і текстом "Documents", "Archive", "News". - Скачайте архів іконок.
- В архіві не вистачає двох іконок: icon_btn-2w.png та icon_btn-3b.png, зробіть їх самостійно.
- Всі 10 іконок об'єднайте в спрайт
- Стилями приберіть текст з пунктів горизонтального меню, задайте розмір посиланням 40х40px, добавте сірий (silver) бордер.
-
Для вертикального меню задайте темно-синій колір фона (navy) та білий текст.
Зліва від тексту розташуйте білі іконки.
При наведенні на пункт меню робіть текст і іконки блакитного кольору.
Селектори CSS
A B { ... } - задає стилі для всіх елементів B, що знаходяться всередині тега A на будь-якому рівні вкладення.
A > B { ... } - задає стилі лише для дочірніх елементів першого рівня.
A ~ B { ... } - задає стилі для всіх елементів B, що слідують після елемента A.
A + B { ... } - задає стилі для елемента B, що йде одразу після елемента A.
<p><span><a href="#">Link</a></span></p>
p a { color: green;}
p > span { background: red;}
p > a { background: green;} /* не буде працювати */
<p class="nobel">Some text.</p>
<p>...</p>
<h2>Header</h2>
.nobel ~ h2 { color: green;}
.nobel + p { color: blue;}
.nobel + h2 { color: navy;} /* не буде працювати */
[атрибут] - задає стилі для елементів, у яких задано вказаний атрибут.
[атрибут="значення"] - задає стилі для елементів, у яких задано атрибут та конкретне значення.
[href^="ftp://"] - вибирає елементи, у яких вказаний атрибут починається з вказаного значення.
[href$=".png"] - вибирає елементи, у яких вказаний атрибут закінчується вказаним значенням.
[href*="google"] - вибирає елементи, у яких значення вказаного атрибута містить строку, вказану у значенні.
[class~="green"] - вибирає елементи у яких в значенні атрибута є задана підстрока, відділена пробілами від інших підстрок.
Виділити червоним і жирним всі елементи, в яких використовуються внутрітегові стилі:
[style] { color: red; font-weight: bold;}
Добавити рамку до зображень, в яких атрибут alt має значення "Фото":
img[alt="Фото"] { border: 2px solid #aaa;}
Всі посилання на FTP зробити зеленого кольору:
a[href^="ftp://"] { color: green;}
Всі посилання на gif-файли зробити сірого кольору:
a[href$=".gif"] { color: #777;}
Сховати всі посилання, які містять в собі підстроку "yandex":
a[href*="yandex"] { display: none;}
Вибирає всі елементи в яких є клас "green" і задає їм зелений колір:
[class~="green"] { color: green;}
.green { color: green;} /* виконує ту саму дію */
Селектори, що дозволяють вибрати конкретний елемент:
.box:first-child { ... }
.box:last-child { ... }
.box:nth-child(2) { ... }
.box:nth-child(8) { ... }
.box:nth-child(odd) { ... }
.box:nth-child(even) { ... }
.box:nth-child(3n+2) { ... }
.box:nth-child(-n+5) { ... }
.box:not(p) { ... }
li:not(.active, #info) { ... }
Додаткові стилі для вибору першої букви і першої строчки:
p:first-letter { color: red;}
p:first-line { font-weight: bold;}