🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Лайфхак: псевдокласс :not
Обычно в ЦСС применяют стили к элементу, который соответствует какому‑то условию: является определённым тегом, имеет класс, находится первым, последним и так далее.
Псевдокласс :not применяет стили к элементу, который не соответствует условию: не является определённым тегом, не имеет класса, не стоит первым. Иногда этот псевдокласс делает код заметно проще и нагляднее.
Например, обычно ненужные отступы последних элементов убирают в два шага: сначала задают отступы всем элементом, а затем обнуляют для последнего. Используя :not можно написать короче и нагляднее — сказать браузеру: «добавь отступ всем непоследним элементам».
/* Было */
ul li { margin-bottom: 9px; }
ul li:last-child { margin-bottom: 0; }
/* Стало */
ul li:not(:last-child) { margin-bottom: 9px; }
/* Ещё примеры: всё в .content, кроме лида */
.content :not(.lead) { … }
/* Все в article, кроме p */
article *:not(p) { … }
Вложить один :not в другой не получится, зато можно сделать забавный в своей бессмысленности селектор :not(*), который найдёт любой элемент, являющийся не любым, то есть не найдёт ничего
Лайфхак: псевдокласс :not
Обычно в ЦСС применяют стили к элементу, который соответствует какому‑то условию: является определённым тегом, имеет класс, находится первым, последним и так далее.
Псевдокласс :not применяет стили к элементу, который не соответствует условию: не является определённым тегом, не имеет класса, не стоит первым. Иногда этот псевдокласс делает код заметно проще и нагляднее.
Например, обычно ненужные отступы последних элементов убирают в два шага: сначала задают отступы всем элементом, а затем обнуляют для последнего. Используя :not можно написать короче и нагляднее — сказать браузеру: «добавь отступ всем непоследним элементам».
/* Было */
ul li { margin-bottom: 9px; }
ul li:last-child { margin-bottom: 0; }
/* Стало */
ul li:not(:last-child) { margin-bottom: 9px; }
/* Ещё примеры: всё в .content, кроме лида */
.content :not(.lead) { … }
/* Все в article, кроме p */
article *:not(p) { … }
Вложить один :not в другой не получится, зато можно сделать забавный в своей бессмысленности селектор :not(*), который найдёт любой элемент, являющийся не любым, то есть не найдёт ничего
Псевдоэлементы ::after и ::before
Одна из крутейших возможностей ЦСС — добавление содержимого в начало и в конец почти любого элемента с помощью слов ::before и ::after.
<blockquote>
Волк слабее льва и тигра, но в цирке он не выступает
</blockquote>
blockquote::before {
content: '«';
}
blockquote::after {
content: '»';
}
Слова ::before и ::after добавляют в вёрстку псевдоэлементы — «виртуальные» кусочки разметки, которых нет в исходной ХТМЛ‑разметке. Из‑за этого содержимое псевдоэлементов не учитывается поисковиками, плохо распознаётся устройствами чтения с экрана, не выделяется и не копируется. Поэтому не рекомендуем верстать псевдоэлементами важное содержание сайта.
С другой стороны, если вам нужно спрятать текст от поисковиков или помешать выделению и копированию, то один из способов — поместить текст в псевдоэлементы.
Псевдоэлементы нельзя добавить к элементам с незакрывающимися тегами, вроде img. Но можно обернуть img в div и добавить псевдоэлементы уже к нему.
Волк слабее льва и тигра, но в цирке он не выступает
На обозначения псевдоэлементов в веб‑инспекторе можно нажать, чтобы увидеть и отредактировать их стили
Волк слабее льва и тигра, но в цирке он не выступает
На обозначения псевдоэлементов в веб‑инспекторе можно нажать, чтобы увидеть и отредактировать их стили
Псевдоэлементы ::after и ::before
Одна из крутейших возможностей ЦСС — добавление содержимого в начало и в конец почти любого элемента с помощью слов ::before и ::after.
<blockquote>
Волк слабее льва и тигра, но в цирке он не выступает
</blockquote>
blockquote::before {
content: '«';
}
blockquote::after {
content: '»';
}
Слова ::before и ::after добавляют в вёрстку псевдоэлементы — «виртуальные» кусочки разметки, которых нет в исходной ХТМЛ‑разметке. Из‑за этого содержимое псевдоэлементов не учитывается поисковиками, плохо распознаётся устройствами чтения с экрана, не выделяется и не копируется. Поэтому не рекомендуем верстать псевдоэлементами важное содержание сайта.
С другой стороны, если вам нужно спрятать текст от поисковиков или помешать выделению и копированию, то один из способов — поместить текст в псевдоэлементы.
Псевдоэлементы нельзя добавить к элементам с незакрывающимися тегами, вроде img. Но можно обернуть img в div и добавить псевдоэлементы уже к нему.
Никола Пуссен. Рождение Венеры. 1636
Псевдоэлементы можно стилизовать так же, как обычные элементы, а значит, возможности применения псевдоэлементов ограничены только возможностями ЦСС и вашей фантазией.
Сделаем класс для затемнения и заблюривания содержимого контейнера. Свойство position мы подробнее разберём дальше в книге.
<div class="adult">
<img src="the-birth-of-venus.jpg">
</div>
.adult {
position: relative; /* relative даст поместить другой элемент поверх этого */
}
.adult::after {
content: ''; /* Обязательно указывать content для ::before и ::after, даже если нужен псевдоэлемент без содержимого. Если не указать content, псевдоэлемент не появится */
display: block; /* По умолчанию ::before и ::after инлайновые, нам нужен блочный элемент для установки размеров */
position: absolute;
inset: 0;
width: 100%; /* Растягиваем элемент по ширине и высоте */
height: 100%;
z-index: 2; /* Размещаем псевдоэлемент поверх .adult */
background: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(5px);
}
Позиционирование
Поскольку у элемента может быть два псевдоэлемента, используем второй, чтобы добавить надпись поверх блюра:
.adult {
…
}
.adult::after {
…
}
.adult:before {
content: '16+';
font-size: 24px;
color: #fff;
text-shadow: 1px 1px 20px rgb(0 0 0 0.5);
position: absolute;
left: 50%;
top: 50%;
z-index: 3; /* Размещаем поверх ::after */
transform: translate(-50%, -50%); /* Ставим элемент по центру родителя */
}Никола Пуссен. Рождение Венеры. 1636
Псевдоэлементы можно стилизовать так же, как обычные элементы, а значит, возможности применения псевдоэлементов ограничены только возможностями ЦСС и вашей фантазией.
Сделаем класс для затемнения и заблюривания содержимого контейнера. Свойство position мы подробнее разберём дальше в книге.
<div class="adult">
<img src="the-birth-of-venus.jpg">
</div>
.adult {
position: relative; /* relative даст поместить другой элемент поверх этого */
}
.adult::after {
content: ''; /* Обязательно указывать content для ::before и ::after, даже если нужен псевдоэлемент без содержимого. Если не указать content, псевдоэлемент не появится */
display: block; /* По умолчанию ::before и ::after инлайновые, нам нужен блочный элемент для установки размеров */
position: absolute;
inset: 0;
width: 100%; /* Растягиваем элемент по ширине и высоте */
height: 100%;
z-index: 2; /* Размещаем псевдоэлемент поверх .adult */
background: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(5px);
}
Позиционирование
Поскольку у элемента может быть два псевдоэлемента, используем второй, чтобы добавить надпись поверх блюра:
.adult {
…
}
.adult::after {
…
}
.adult:before {
content: '16+';
font-size: 24px;
color: #fff;
text-shadow: 1px 1px 20px rgb(0 0 0 0.5);
position: absolute;
left: 50%;
top: 50%;
z-index: 3; /* Размещаем поверх ::after */
transform: translate(-50%, -50%); /* Ставим элемент по центру родителя */
}Трюк: увеличение области клика с помощью псевдоэлемента
Поскольку псевдоэлементы расположены внутри элемента и технически являются его содержимым, за их счёт можно увеличивать область клика элемента.
Псевдоэлемент с абсолютным позиционированием и отрицательными вытяжками увеличит область клика элемента на размер отрицательной вытяжки. Абсолютное позиционирование мы подробнее разберём дальше в книге.
В примере область клика ссылок подкрашена для наглядности.
.extClickArea {
position: relative;
}
.extClickArea::after {
content: '';
position: absolute;
/* Вытягиваем псевдоэлемент на −0,3em за границы родителя — самого элемента */
inset: -0.3em;
}
Будьте осторожны, когда используете этот трюк для элементов, расположенных у границ экрана. Выступающий псевдоэлемент может добавить странице лишние поля и скролл
Позиционирование
Трюк: увеличение области клика с помощью псевдоэлемента
Поскольку псевдоэлементы расположены внутри элемента и технически являются его содержимым, за их счёт можно увеличивать область клика элемента.
Псевдоэлемент с абсолютным позиционированием и отрицательными вытяжками увеличит область клика элемента на размер отрицательной вытяжки. Абсолютное позиционирование мы подробнее разберём дальше в книге.
В примере область клика ссылок подкрашена для наглядности.
.extClickArea {
position: relative;
}
.extClickArea::after {
content: '';
position: absolute;
/* Вытягиваем псевдоэлемент на −0,3em за границы родителя — самого элемента */
inset: -0.3em;
}
Будьте осторожны, когда используете этот трюк для элементов, расположенных у границ экрана. Выступающий псевдоэлемент может добавить странице лишние поля и скролл
Позиционирование
Тест по разделу «Модули»
Для чего мы советуем перечислять несколько шрифтов в font-family?
Если на компьютере не установлен шрифт, если он не загрузился или в нём нет нужной буквы, браузер попробует следующий шрифт из списка
Как работают ключевые слова serif или sans-serif в font-family?
serif, браузер включит только строчные; если указан sans-serif, выключит ихКлючевое слово в конце списка описывает тип шрифта: serif — с засечками, sans‑serif — без засечек. Если браузер доберётся до него, то возьмёт системный шрифт соответствующего семейства
По какому признаку шрифты в этой книге называют веб‑безопасными?
Веб‑безопасными называют шрифты, входящие в стандартный набор операционной системы
Выберите верные утверждения о назначении ЦСС‑свойств.
font-size — кегльfont-size — ширина текстовой колонкиline-height — высота символовline-height — интерлиньяжfont-weight — кегльfont-weight — максимально допустимый размер файла шрифтаfont-weight — «жирность» шрифтаfont-style — подчёркивание, зачёркивание, надчёркиваниеfont-style — начертание шрифта, курсив и наклонtext-decoration — особенности шрифта, лигатуры и сглаживаниеtext-decoration — подчёркивание, зачёркивание, надчёркиваниеfont‑size и line‑height управляют кеглем и интерлиньяжем, font‑style управляет начертанием, font‑weight задаёт «жирность» шрифта, а text‑decoration добавляет подчёркивание, зачёркивание или надчёркивание
Какому элементу мы советуем задавать основной шрифт страницы и почему?
body, чтобы стили не пришлось повторять для всего подряд, принцип наследования в ЦССarticle и main, чтобы стили наследовались для всех статей и текстов, принцип «семантическое ядро»Наследование стилей позволяет писать меньше кода, избегать повторов стилей, последовательно стилизовать страницу от общего к частному
Чем управляет свойство font-variant?
Свойство font‑variant включает лигатуры и капитель
Для чего мы рекомендуем использовать атрибут alt?
Атрибут alt нужен на случай, когда картинка по ссылке недоступна, для помощи людям, которые используют программы чтения с экрана, и для поисковых роботов
чтобы узнать результат.
Тест по разделу «Модули»
Для чего мы советуем перечислять несколько шрифтов в font-family?
Если на компьютере не установлен шрифт, если он не загрузился или в нём нет нужной буквы, браузер попробует следующий шрифт из списка
Как работают ключевые слова serif или sans-serif в font-family?
serif, браузер включит только строчные; если указан sans-serif, выключит ихКлючевое слово в конце списка описывает тип шрифта: serif — с засечками, sans‑serif — без засечек. Если браузер доберётся до него, то возьмёт системный шрифт соответствующего семейства
По какому признаку шрифты в этой книге называют веб‑безопасными?
Веб‑безопасными называют шрифты, входящие в стандартный набор операционной системы
Выберите верные утверждения о назначении ЦСС‑свойств.
font-size — кегльfont-size — ширина текстовой колонкиline-height — высота символовline-height — интерлиньяжfont-weight — кегльfont-weight — максимально допустимый размер файла шрифтаfont-weight — «жирность» шрифтаfont-style — подчёркивание, зачёркивание, надчёркиваниеfont-style — начертание шрифта, курсив и наклонtext-decoration — особенности шрифта, лигатуры и сглаживаниеtext-decoration — подчёркивание, зачёркивание, надчёркиваниеfont‑size и line‑height управляют кеглем и интерлиньяжем, font‑style управляет начертанием, font‑weight задаёт «жирность» шрифта, а text‑decoration добавляет подчёркивание, зачёркивание или надчёркивание
Какому элементу мы советуем задавать основной шрифт страницы и почему?
body, чтобы стили не пришлось повторять для всего подряд, принцип наследования в ЦССarticle и main, чтобы стили наследовались для всех статей и текстов, принцип «семантическое ядро»Наследование стилей позволяет писать меньше кода, избегать повторов стилей, последовательно стилизовать страницу от общего к частному
Чем управляет свойство font-variant?
Свойство font‑variant включает лигатуры и капитель
Для чего мы рекомендуем использовать атрибут alt?
Атрибут alt нужен на случай, когда картинка по ссылке недоступна, для помощи людям, которые используют программы чтения с экрана, и для поисковых роботов