Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 17. CSS-спрайты, селекторы псевдоклассов и псевдоэлементов, комбинации селекторов, приоритеты правил css

Содержание курса

CSS-спрайты

CSS спрайт - это один большой графический файл (картинка), на котором есть несколько маленьких изображений.


Для чего эта вещь нужна? Дело в том, что каждая загрузка картинки с сервера в браузер нагружает сервер и, если этих маленьких картинок очень много, а сайт имеет высокий трафик, то нагрузка на сервер будет довольно высока. Чтобы снизить нагрузку на сервер все маленькие картинки (значки, смайлики и т.п.) объединяют в одну большую картинку, в этом случае процессов загрузки с сервера становится в разы меньше.

После того, как CSS спрайт загружен, нужные его элементы показываются в нужном месте на странице сайта, т.е. большая картинка показывается кусочками в нужных местах. Как это делается мы сейчас и рассмотрим.

Предположим, у нас есть в документе html три ссылки - на текстовый документ .txt, на документ .html и на документ .xml. Возьмём CSS спрайт с именем файла sprite-1.png (размер спрайта 16×60 пикселей, размер элементов в спрайте 16×20 пикселей), изображённый ниже и методом позиционирования через CSS вставим нужные куски этого спрайта возле ссылок.

<!DOCTYPE html>
	<html>
		<head>
			<title>CSS-спрайты</title>
			<style>
			
				a {
					background: url(sprite-1.png);
					background-repeat: no-repeat;
					padding-left: 25px;
					}
					
				a[href$='.txt'] {
					background-position: left center;
					}
					
				a[href$='.html'] {
					background-position: left top;
					}
					
				a[href$='.xml'] {
					background-position: left bottom;
					}
					
			</style>
		</head>
		<body>
		<p>
			<a href="file.txt">Ссылка на текстовый документ</a><br /><br />
			<a href="file.html">Ссылка на документ html</a><br /><br />
			<a href="file.xml">Ссылка на документ xml</a>
		</p>
		</body>
	</html>

Давайте теперь подробно разберёмся, что же мы сделали в стилях.
Первой строкой мы задали фон всем ссылкам в виде картинки нашего спрайта и сдвинули их текстовое содержимое на 25 пикселей вправо. Во второй строке для ссылок, href которых заканчивается на '.txt', мы задали позиционирование фоновой картинки (нашего спрайта) left center, что значит по горизонтали сдвинуть спрайт влево, а по вертикали выставить по центру, а это соответствует центральному значку на спрайте. В третьей строке мы задали позиционирование спрайта по горизонтали также влево, а по вертикали - верх картинки. Ну и в четвёртой строке позиционирование спрайта задано влево и низ картинки.

В итоге мы получим такой вид в браузере:

Селекторы псевдоклассов

Напомню, что обращение к псевдоклассу в CSS осуществляется через двоеточие например, :hover - псевдокласс, который отвечает за наведение мышью.

Давайте разберём такой пример с селекторами псевдоклассов:

<!DOCTYPE html>
	<html>
		<head>
			<title>Селекторы псевдоклассов</title>
			<style>
				p:hover {color: #f00;}
				span {display: none;}
				input:focus + span {display: inline;}
			</style>
		</head>
		<body>
		   <p>Первый параграф в body</p>
		   <p>Второй параграф в body</p>
		     <div>
			   <p>Первый параграф в div</p> 
			   <p>Второй параграф в div</p> 
		     </div>
		   <p>Текст и <a href="#">ссылка</a> в параграфе</p>
		   <input type="text"><span>Подсказка</span>
		</body>
	</html>

Первой строкой в стилях (первое правило CSS) для всех параграфов при наведении мышью задан красный цвет текста. Следует учитывать, что псевдокласс :hover не будет работать на мобильных устройствах.

Во второй строке в стилях (второе правило CSS) мы указали не отображать элемент <span> (подсказка для текстового поля).

Псевдокласс :focus может быть применён к двум элементам html - текстовому полю и ссылке. На стационарном компьютере ссылка получает фокус при перемещении по ссылкам с помощью клавиши "tab".

В третьем правиле CSS (третья строка в стилях) мы использовали соседний селектор - это обращение к элементу, следующему за первым указанным в правиле CSS. Соседний селектор указывается при помощи знака "плюс" через пробел. Теперь, когда текстовое поле - элемент <input type="text"> получит фокус, отобразится подсказка - элемент <span>

Селекторы псевдоэлементов

Здесь мы рассмотрим следующие селекторы псевдоэлементов :before, :after, :first-letter, :first-line.

:before - добавляет содержимое перед элементом, :after - после элемента, :first-letter - обращение к первому символу содержимого элемента, :first-line - обращение к первой строке содержимого элемента. Если перед двоеточием не указан элемент, прописанные правила будут применены ко всем возможным элементам в документе html.

<!DOCTYPE html>
	<html>
		<head>
			<title>Селекторы псевдоэлементов</title>
			<style>
			
				p:before {
					content: 'Контент перед абзацем '; 
					color: red;
					}
					
				:first-letter {
					font-size: 2em;
					color: green;
					}
					
			</style>
		</head>
		<body>
		  <div>
			<p>Не так давно <span>работа в интернете</span> была
			редкостью и большой привилегией, у многих это ассоциировалось
			с обманом, лохотроном или же чем-то нереальным. Однако в
			настоящее время - в наш век развития компьютерных и интернет
			технологий заработок и полноценная работа в интернете уже
			реальность. Многие ещё пока смутно представляют себе, что 
			значит работать в интернете. На этом сайте собраны самые
			популярные способы заработка и работы в интернете.</p>
		  </div>
		  <p>Ещё один параграф после DIV</p>
		</body>
	</html>

Свойство content - создаёт перед элементом <p> область, в которую можно что-либо вставить, обратите внимание на синтаксис в примере выше (content, затем двоеточие, пробел и кавычки).

Единица измерения "em" - это текущий размер шрифта, т.е. 2em - это будет шрифт, в 2 раза больше текущего.

Псевдоэлементы :first-letter и :first-line невозможно задать для строчных (inline) элементов (в нашем примере - это элемент <span>)

В итоге мы получаем такой вид в браузере:


Теперь рассмотрим такие селекторы псевдоклассов: :first-child, :last-child, :last-of-type, :first-of-type. Благодаря этим псевдоклассам, мы можем обращаться к элементам html, зная только их порядковый номер. Это позволяет избежать присвоения лишних классов и id элементам html.

:first-child и :first-of-type - псевдоклассы, которые позволяют обратиться к первому дочернему элементу.

:last-child и :last-of-type - псевдоклассы, которые позволяют обратиться к последнему дочернему элементу.

<!DOCTYPE html>
	<html>
		<head>
			<title>Селекторы псевдоклассов</title>
			<style>
			
				div {
					padding: 10px 50px;
					}
					
				p:first-child {
					color: red;
					}
					
				p:last-of-type {
					color: green;
					}
					
			</style>
		</head>
		<body>
			<p>Первый параграф в body (первый дочерний 
			элемент body)</p>
			<p>Второй параграф в body</p>
			
			<div>
			  <p>Первый параграф в DIV (первый дочерний 
			  элемент DIV'а)</p>
			  <span>Первый span в DIV</span>
			  <p>Второй параграф в DIV</p>
			  <span>Второй span в DIV</span>
			</div>
			
			<p>Текст в параграфе</p>
			<p>Последний параграф в body</p>
		</body>
	</html>

Вид в браузере:


Рассмотрим теперь селекторы для выборки элементов по номеру в списке дочерних. Для этого применяется псевдокласс :nth-child(). В скобках может указываться:
3 - номер элемента
even - четные
odd - нечетные
3n - выражение, где n - внутренний счётчик в псевдоклассе (выражение 3n - это будет каждый третий пункт меню, 5n - каждый пятый пункт меню и т.д.)

<!DOCTYPE html>
	<html>
		<head>
			<title>Селекторы псевдоклассов</title>
			<style>
				li:nth-child(3) {background: #fcc;}
			</style>
		</head>
		<body>
			<ul>
				<li>Пункт списка 1</li>
				<li>Пункт списка 2</li>
				<li>Пункт списка 3</li>
				<li>Пункт списка 4</li>
				<li>Пункт списка 5</li>
				<li>Пункт списка 6</li>
				<li>Пункт списка 7</li>
				<li>Пункт списка 8</li>
				<li>Пункт списка 9</li>
				<li>Пункт списка 10</li>
			</ul>
		</body>
	</html>

Вид в браузере:


Выражение :nth-child() плохо работает (или вообще не работает) в IE ниже 9-ой версии, но это позволяет исправить решение от Dean Edwards

Комбинации селекторов

Контекстный селектор - предки-потомки - записывается через пробел: div strong {color: slateblue;} - задано правило CSS для strong'а, который является потомком div'а (будут окрашены все strong'и, которые находятся внутри div'а).

Дочерний селектор - родитель-ребёнок: div > strong {color: red;} - правило CSS будет применено для <strong>, который является именно ребёнком <div> (не только потомком, т.е. <strong> должен находиться непосредственно внутри <div>).

Соседний селектор: h1 + p {background: yellow;} - правило будет применено для ближайшего (первого) соседнего тега <p> следующего за <h1>.

Любой соседний селектор: h1 ~ p {background: LightCyan;} - правило будет применено для всех тегов <p> следующих за <h1>.

<!DOCTYPE html>
	<html>
		<head>
			<title>Комбинации селекторов</title>
			<style>
				div strong {color: slateblue;}
				div > strong {color: red;}
				h1 + p {background: yellow;}
				h1 ~ p {background: LightCyan;}
			</style>
		</head>
		<body>
			<div>
			<h1>Заголовок первого уровня</h1>
			<p><strong>Первый</strong> параграф в DIV</p>
			<p><strong>Второй</strong> параграф в DIV</p>
			<strong>Просто полужирный текст в DIV</strong>
			</div>
			
			<p><strong>Первый</strong> параграф в body</p>
		</body>
	</html>

Также возможно объединение различных селекторов для ужесточения условий выборки
Объединение tags + id: p#in {color: green;}.
Объединение tags + class: p.news {color: green;}.
Объединение class + class (у элемента должно быть объявлено сразу два класса): .last.news {color: green;}.
Объединение class + pseudo-class: .news:hover {color: green;}.
Объединение class + pseudo-elements: .news:first-letter {color: green;}.
Объединение class + attributes: .news[title] {color: green;}.
Объединение pseudo-class + pseudo-class: :first-child:hover {color: green;}.
Объединение attributes + pseudo-elements: [title]:first-letter {color: green;}.
Объединение attributes + attributes: [class] [title] {color: green;}.
Объединение tags + id + class + attributes + pseudo-class: p#in.begin[title]:hover {color: green;}.
Объединение tags + id + class + attributes + pseudo-elements + pseudo-class: p#in.begin[title][class][id]:first-child:first-letter {color: green;}.

Приоритеты правил CSS

Для одного и тоже элемента по каким-либо причинам могут быть заданы противоречащие друг другу правила CSS. Чтобы избежать конфликтных ситуаций при определении свойств, в CSS есть правила приоритета. Если приоритет селектора выше, то конфликтующие свойства переопределяются. В случае равных приоритетов, срабатывает последнее (нижнее) правило CSS.

<!DOCTYPE html>
	<html>
		<head>
			<title>Приоритет правил CSS</title>
			<style>
				/*Равный приоритет*/
				p {color: red;}
				p {color: green;}
				/*Приоритет id*/
				#in {color: red;}
				p {color: green;}
				/*Приоритет class*/
				.text .news {color: red;}
				p:first-child {color: green;}
				/*Приоритет tags*/
				div p {color: red;}
				p {color: green;}
				/*Равный приоритет*/
				#out p.news {color: red;}
				div.text #in {color: green;}
				/*Приоритет !important*/
				p {color: red !important;}
			</style>
		</head>
		<body>
			<div id="out"class="text">
			<p id="in"class="news">Содержимое параграфа</p>
			</div>
		</body>
	</html>

Если расположить селекторы в порядке убывания приоритета, то получится такой список:
1. !important
2. атрибут style
3. #id
4. .class
5. :pseudo-class
6. [attributes]
7. tags
8. :pseudo-elements

Равный приоритет в примере получился по той причине, что использовано одинаковое количество равных по приоритету селекторов.

Самый высокий приоритет имеет приписка !important: p {color: red !important;}. А высочайший приоритет эта приписка имеет в атрибуте style, в этом случае перебить её уже ни чем невозможно:

<!DOCTYPE html>
	<html>
		<head>
			<title>Максимальный приоритет правил css</title>
		</head>
		<body>
			<p style="background: #f99 !important;">Параграф с максимальным
			приоритетом стилевого правила</p>
		</body>
	</html>

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля