🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Бюросанс
Бюросайн
Бюросанс поддерживает тонкое, нормальное и жирное начертания. Бюросайн — вариативный шрифт, поддерживающий все начертания, включая промежуточные
Чтобы использовать какое‑то начертание, шрифт должен его поддерживать. В противном случае браузер подберёт ближайшее подходящее начертание из тех, что доступны ему в шрифте.
Отдельная история — вариативные шрифты, в которых есть любые начертания. Они работают по принципу интерполяции: с помощью математики вычисляют неизвестные промежуточные начертания, используя известные крайние.
Как и в обычных шрифтах для задания «жирности» в вариативных шрифтах нужно использовать font‑weight:font-weight: 400
Бюросанс
Бюросайн
Чтобы использовать какое‑то начертание, шрифт должен его поддерживать. В противном случае браузер подберёт ближайшее подходящее начертание из тех, что доступны ему в шрифте.
Отдельная история — вариативные шрифты, в которых есть любые начертания. Они работают по принципу интерполяции: с помощью математики вычисляют неизвестные промежуточные начертания, используя известные крайние.
Как и в обычных шрифтах для задания «жирности» в вариативных шрифтах нужно использовать font‑weight:font-weight: 400
Бюросанс поддерживает тонкое, нормальное и жирное начертания. Бюросайн — вариативный шрифт, поддерживающий все начертания, включая промежуточные
Красная строка
В ЦСС отступ красной строки, втяжка абзаца, задаётся свойством 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 можно менять цвет, фон, тень и подчёркивание‑зачёркивание текста, но изменить шрифт, кегль или интерлиньяж не получится.