🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Красная строка
В ЦСС отступ красной строки, втяжка абзаца, задаётся свойством text-indent. Его значения могут быть фиксированными, например, в пикселях или относительными, например, в процентах или em:
p {
text-indent: 1em; /* Задаём абзацный отступ в круглую */
margin: 0; /* И убираем вертикальные отступы */
}
p:first-child,
h1 + p,
h2 + p,
h3 + p {
/* У абзацев, стоящих первыми
или сразу после заголовков
и подзаголовков,
абзацный отступ избыточен:
можно его обнулить */
text-indent: 0;
}Красная строка
В ЦСС отступ красной строки, втяжка абзаца, задаётся свойством text-indent. Его значения могут быть фиксированными, например, в пикселях или относительными, например, в процентах или em:
p {
text-indent: 1em; /* Задаём абзацный отступ в круглую */
margin: 0; /* И убираем вертикальные отступы */
}
p:first-child,
h1 + p,
h2 + p,
h3 + p {
/* У абзацев, стоящих первыми
или сразу после заголовков
и подзаголовков,
абзацный отступ избыточен:
можно его обнулить */
text-indent: 0;
}Упражнение: кегль, шрифты, выключка и регистр
Измените ЦСС так, чтобы первая текстовая страница повторила вторую.
.exerciseFontBasics h1 {
Вёрстка
Дизайн
Вёрстка
Дизайн
Упражнение: кегль, шрифты, выключка и регистр
Измените ЦСС так, чтобы первая текстовая страница повторила вторую.
.exerciseFontBasics h1 {
Цвет
Цвет текста и фона задают свойствами color и background-color. Можно использовать HSL, RGB или RGBA, если нужно добавить цвету прозрачность:
.alert {
/* Задаём бордовый цвет текста в HSL */
color: hsl(354.6, 61%, 32.2%);
/* В RGB */
color: rgb(132, 32, 41);
/* Он же в шестнадцатеричном виде */
color: #842029;
/* Для фона берём красный
с 15% прозрачностью */
background-color: rgba(255, 0, 0, .15);
/* И добавляем внутренние отступы
для аккуратности */
padding: 21px 11px 40px;
}Когда точные цвета неважны, например, во время отладки или в демонстрационных целях, быстрее использовать именованные цвета:
.inverted {
color: white;
background-color: black;
border: 2px solid red;
padding: 19px 9px 38px;
}См. также:
Color. Документация
Цвет
Цвет текста и фона задают свойствами color и background-color. Можно использовать HSL, RGB или RGBA, если нужно добавить цвету прозрачность:
.alert {
/* Задаём бордовый цвет текста в HSL */
color: hsl(354.6, 61%, 32.2%);
/* В RGB */
color: rgb(132, 32, 41);
/* Он же в шестнадцатеричном виде */
color: #842029;
/* Для фона берём красный
с 15% прозрачностью */
background-color: rgba(255, 0, 0, .15);
/* И добавляем внутренние отступы
для аккуратности */
padding: 21px 11px 40px;
}Когда точные цвета неважны, например, во время отладки или в демонстрационных целях, быстрее использовать именованные цвета:
.inverted {
color: white;
background-color: black;
border: 2px solid red;
padding: 19px 9px 38px;
}См. также:
Color. Документация
h1 + p:first-letter {
float: left; /* Настраиваем буквицу: задаём обтекание текстом */
font-size: 2.7em; /* Увеличиваем кегль */
line-height: .25em; /* Уменьшаем интерлиньяж, чтобы он не взрывал интерлиньяж абзаца */
margin-top: .37em; /* Двигаем ближе к тексту, чтобы занять ровно 2 строки */
}
::selection {
background: #02aff0; /* Меняем цвет и фон выделенного текста */
color: #fff;
}
code ::selection {
background: #000;
color: #31ff53;
text-shadow: -1px 1px #0043ff;
}
Sometimes, layout designer controls the volume of text by limiting the length of subheads, quotes, sidebars, and other special elements. But often text is given as is, and layout designer works only with its shape.
Буквица, первая строка и выделение
Для управления первой буквой, первой строкой и выделением текста используют псевдоэлементы — «виртуальные» кусочки текста, которые можно использовать в ЦСС, не добавляя лишнюю разметку. Первой букве текста соответствует псевдоэлемент :first-letter, первой строке — :first-line, выделению — ::selection
Стилизация выделения не работает на тач‑устройствах.
Интересный момент: псевдоэлементы ограничены здравым смыслом в свойствах, которые можно в них поменять.
Например, в ::selection можно менять цвет, фон, тень и подчёркивание‑зачёркивание текста, но изменить шрифт, кегль или интерлиньяж не получится.
Весь этот разворот — рабочий пример. Попробуйте выделить текст или код
Sometimes, layout designer controls the volume of text by limiting the length of subheads, quotes, sidebars, and other special elements. But often text is given as is, and layout designer works only with its shape.
Буквица, первая строка и выделение
Для управления первой буквой, первой строкой и выделением текста используют псевдоэлементы — «виртуальные» кусочки текста, которые можно использовать в ЦСС, не добавляя лишнюю разметку. Первой букве текста соответствует псевдоэлемент :first-letter, первой строке — :first-line, выделению — ::selection
Стилизация выделения не работает на тач‑устройствах.
h1 + p:first-letter {
float: left; /* Настраиваем буквицу: задаём обтекание текстом */
font-size: 2.7em; /* Увеличиваем кегль */
line-height: .25em; /* Уменьшаем интерлиньяж, чтобы он не взрывал интерлиньяж абзаца */
margin-top: .37em; /* Двигаем ближе к тексту, чтобы занять ровно 2 строки */
}
::selection {
background: #02aff0; /* Меняем цвет и фон выделенного текста */
color: #fff;
}
code ::selection {
background: #000;
color: #31ff53;
text-shadow: -1px 1px #0043ff;
}
Интересный момент: псевдоэлементы ограничены здравым смыслом в свойствах, которые можно в них поменять.
Например, в ::selection можно менять цвет, фон, тень и подчёркивание‑зачёркивание текста, но изменить шрифт, кегль или интерлиньяж не получится.
Подчёркивание, зачёркивание и надчёркивание
Дополнительно оформить текст подчёркиванием, зачёркиванием или надчёркиванием можно с помощью text-decoration или border-bottom. Кроме того, в Хроме можно задать вид, стиль и цвет используемой линии:
/* Убираем подчёркивание у ссылок в шапке */
header a {
text-decoration: none;
}
/* Подчёркиваем важные моменты (em от emphasis) в статье.
Старые версии браузеров покажут чёрное подчёркивание */
em {
text-decoration: underline;
/* Новые браузеры покажут жёлтое подчёркивание
толщиной в 5 пикселей */
text-decoration-line: underline;
text-decoration-color: yellow;
text-decoration-thickness: 5px;
}
/* Зачёркиваем удалённые кусочки (del от deleted) статьи */
del {
text-decoration: line-through;
}
Обратите внимание на пример с text-decoration: underline. Браузеры и ЦСС постоянно развиваются: появляются новые свойства, усложняются старые. Новые версии браузеров поддерживают расширенный синтаксис text-decoration с указанием толщины, цвета и стиля линий, а старые браузеры — нет. Поэтому чтобы подчёркивание работало во всех браузерах, мы сначала указываем старый синтаксис, как несгораемый вариант, а ниже — новый: если браузер не поймёт новый синтаксис, он использует предыдущий вариант.
In CSS type size of the screen text usually lies in the range of 12 to 16 points and line spacing is 120–140 % of the type height size.
Иногда подчёркивание ссылок задают с помощью border или box‑shadow. Чтобы убрать такое подчёркивание, используют border: none или box‑shadow: none
Подчёркивание, зачёркивание и надчёркивание
Дополнительно оформить текст подчёркиванием, зачёркиванием или надчёркиванием можно с помощью text-decoration или border-bottom. Кроме того, в Хроме можно задать вид, стиль и цвет используемой линии:
/* Убираем подчёркивание у ссылок в шапке */
header a {
text-decoration: none;
}
/* Подчёркиваем важные моменты (em от emphasis) в статье.
Старые версии браузеров покажут чёрное подчёркивание */
em {
text-decoration: underline;
/* Новые браузеры покажут жёлтое подчёркивание
толщиной в 5 пикселей */
text-decoration-line: underline;
text-decoration-color: yellow;
text-decoration-thickness: 5px;
}
/* Зачёркиваем удалённые кусочки (del от deleted) статьи */
del {
text-decoration: line-through;
}
Обратите внимание на пример с text-decoration: underline. Браузеры и ЦСС постоянно развиваются: появляются новые свойства, усложняются старые. Новые версии браузеров поддерживают расширенный синтаксис text-decoration с указанием толщины, цвета и стиля линий, а старые браузеры — нет. Поэтому чтобы подчёркивание работало во всех браузерах, мы сначала указываем старый синтаксис, как несгораемый вариант, а ниже — новый: если браузер не поймёт новый синтаксис, он использует предыдущий вариант.
In CSS type size of the screen text usually lies in the range of 12 to 16 points and line spacing is 120–140 % of the type height size.
Иногда подчёркивание ссылок задают с помощью border или box‑shadow. Чтобы убрать такое подчёркивание, используют border: none или box‑shadow: none