Составьте краткое изложение этой истории. Вот краткое изложение содержания истории, основанное на фактах: Вот упрощенная версия содержания истории: Вот беззаботный взгляд на содержание истории: Исследуйте другую точку зрения: Покажите мне факты Объясните это так, будто мне 5 лет Дайте мне беззаботный пересказ
Веб-страница без какого-либо стиля похожа на чистый холст. Возможности безграничны, и легко потратить время на эксперименты с различными макетами, цветами и шрифтами. Но стили браузера по умолчанию не идеальны, поэтому вам нужно приложить усилия, чтобы просто начать с правильного дизайна.
Следующие стили обеспечат прочную основу, на которой вы сможете строить позже. Когда проблемы с удобством использования решены и основные принципы дизайна установлены, вы можете сосредоточиться на своем контенте или продолжить совершенствовать свой дизайн оттуда.
Более логичное определение размера коробки
Если вы изучали CSS с нуля, вы должны хорошо понимать блочную модель. Но если вы не знакомы с этой концепцией, она может быть запутанной, чтобы в ней разобраться. Даже когда вы знаете, что происходит, работать с моделью браузера по умолчанию может быть неудобно, поэтому я рекомендую вам сбросить box-sizing следующим образом:
html { box-sizing: border-box; }
*, *:до, *:после { box-sizing: inherit; }
Значение по умолчанию для box-sizing — content-box. При такой настройке любые свойства ширины и высоты, применяемые к элементу, не будут включать отступы, границы или поля. Например, вы можете захотеть, чтобы элемент занимал половину ширины страницы:
#примерно { ширина: 50%; отступ: 8px; }
Это приведет к общей ширине в половину ширины контейнера плюс 16 пикселей (по 8 пикселей с каждой стороны). Значение border-box для box-sizing гарантирует, что свойства ширины и высоты включают отступы и границы, что значительно упрощает создание элемента, который будет ровно в половину ширины страницы.
Короче говоря, border-box — более интуитивный способ объявления размеров, который, вероятно, вызовет у вас меньше проблем в долгосрочной перспективе. Применив его к элементу html, а затем настроив все остальные элементы на наследование этого значения, вы можете легко переопределить его, если вам это нужно.
Оптимальная длина линии
Недаром большинство книг и журналов имеют портретную ориентацию: длинные строки трудно читать. Когда ваш глаз достигает конца строки и возвращается к началу следующей, ему приходится быстро переключать фокус. Чем дальше ему приходится перемещаться, чтобы сделать это, тем сложнее это сделать.
Руководства по типографике обычно рекомендуют длину строки от 45 до 75 символов. Вы можете использовать свойство max-width, чтобы гарантировать, что ваши строки содержат не более определенного количества символов, используя единицу ch:
html { макс-ширина: 70ch; }
Единица ch относительно неизвестна, но становится все более и более важной. Эта единица представляет ширину символа 0 в соответствующем шрифте, поэтому это отличный способ обеспечить приблизительное количество символов в строке.
Невозможно указать точное количество символов в строке из-за шрифтов переменной ширины. Но это приближение, по большей части, более чем достаточно.
Горизонтально центрированный контент
После того, как вы установили длину строки, ваш контент будет выровнен по левому краю страницы. Если размер шрифта не очень большой, это часто будет выглядеть несбалансированным, особенно для тех, кто использует широкоэкранный монитор. Читателю гораздо удобнее смотреть прямо перед собой, чем поворачивать голову.
Простое решение — выровнять содержимое по центру окна браузера, задав ему равные поля слева и справа:
html { margin: auto; }
Это работает только тогда, когда элемент (в данном случае HTML-тег) имеет ограниченную ширину. Если это элемент полной ширины, то не будет никаких полей для балансировки. Свойство max-width, заданное ранее, означает, что при любом большем окне содержимое будет центрировано с равными горизонтальными полями.
Удобная мера
В типографике интерлиньяж относится к вертикальному пространству между строками текста. CSS называет это «высотой строки» и указывает значение по умолчанию «нормальное», которое браузеры обычно интерпретируют как около 1.2. Другими словами, строка текста будет иметь около 10% от своей высоты, добавленных в качестве пространства сверху и снизу.
Термин «лидинг» (произносится как «лидинг») происходит от полосок свинца, используемых для разделения строк текста в традиционных механических печатных машинах.
Значение по умолчанию приемлемо, но, как и в случае с длиной строки, оно может вызвать проблемы с читаемостью. Значение, которое вы используете, в конечном счете должно зависеть от шрифта, длины строки и среднего количества слов в ваших абзацах, но хорошим общим компромиссом является 1.4, примерно в два раза больше места, чем значение по умолчанию:
html { высота строки: 1.4; }
Более разборчивый размер шрифта
Размер шрифта по умолчанию в большинстве браузерных сред составляет 16 пикселей, и так было долгое время. По мере того, как разрешение экранов увеличивается, это приводит к тому, что текст становится все меньше и меньше, что в какой-то момент становится слишком неудобным для большинства вкусов. Но значение по умолчанию остается прежним.
Следующее объявление использует относительные единицы — em — для увеличения размера шрифта по сравнению с тем, каким он был бы в противном случае. В случае по умолчанию это берет шрифт размером 16px и увеличивает его до 20px.
html { размер шрифта: 1.25em; }
Важно отметить преимущество этого подхода по сравнению с font-size: 20px. Использование em означает, что если пользователь изменит настройки браузера и выберет шрифт меньше или больше, чем по умолчанию, ваша страница будет масштабироваться пропорционально.
Соответствующие шрифты заголовка и основного текста
По умолчанию ваш браузер будет отображать текст шрифтом с засечками. Хотя это нормально для основного текста, общепризнанно, что заголовки без засечек лучше сочетаются с основным шрифтом с засечками. Многие семейства шрифтов поставляются парами с засечками и без засечек, именно по этой причине.
h1, h2, h3, h4, h5, h6 {семейство шрифтов: без засечек; }
Хороший шаблон должен использовать общие семейства шрифтов: serif и sans-serif. Они гарантированно доступны и, как и размер шрифта, пользователь все еще может выбрать свой предпочтительный шрифт в браузере, например Chrome:
Используя эти стили в качестве основы, вы можете добавить больше нюансов с помощью набора шрифтов, выбрав уникальные шрифты, которые дополнят ваш дизайн, при этом оставив общие семейства в качестве запасного варианта.
Простые адаптивные изображения
Изображения, которые выходят за пределы своих контейнеров, могут выглядеть в лучшем случае уродливо, а в худшем — нарушить макет вашего сайта. Если вы не очень строго контролируете изображения на своем сайте, особенно если пользователи могут их загружать, в эту ловушку легко попасть.
Самая простая подстраховка — убедиться, что все изображения на вашей странице не шире своего контейнера. Свойство max-width позволяет это сделать:
img { макс. ширина: 100%; высота: авто; }
Обратите внимание, что для сохранения соотношения сторон исходного изображения требуется значение height: auto, если вы указываете размеры в тегах изображения, например:
При использовании этой разметки свойство max-width может обрезать ширину, но не окажет никакого влияния на высоту, поэтому ваше изображение будет растянуто без указания высоты: auto.
Подходящий цветовой контраст
Хороший цветовой контраст — ключ к читабельности. Если цвет текста слишком похож на цвет фона, его может быть трудно читать. Это вдвойне (или даже больше) касается людей, у которых есть трудности с восприятием определенных цветов.
Руководство по доступности веб-контента требует коэффициент контрастности не менее 7:1. Для справки, коэффициент контрастности черного текста (#000000) на белом фоне (#ffffff) составляет 21:1, что проходит тест на контрастность с летающими … цветами. Однако такой резкий контраст имеет и обратную сторону: он может напрягать глаза из-за необходимости подстраиваться под столь разную яркость.
Очень незначительное изменение может иметь решающее значение; не настолько большое, чтобы вы его заметили, но достаточное, чтобы ваши глаза заметили:
html { цвет: #333; }
Этот очень темный серый цвет имеет коэффициент контрастности 12.63:1 на чисто белом фоне, что почти вдвое меньше, чем у чисто черного цвета, но все равно легко превосходит требование 7:1.
Удаление подчеркивания ссылок
С тех пор, как в начале 1990-х появился HTML, трюизм сохранился: ссылки синие и подчеркнутые. Это значение по умолчанию, и в большинстве случаев оно хорошо работает как функция удобства использования, информируя читателя о том, на какие именно части документа он может кликнуть.
Однако подчеркивание ссылок может конфликтовать с вашим дизайном и, в зависимости от длины ссылок, может выглядеть некрасиво и даже навредить читабельности текста. Когда CSS стал популярным, воцарилась еще одна истина: дизайнеры отключают подчеркивание ссылок.
Делать это или нет, решать вам, но распространенный прием — скрыть подчеркивание по умолчанию и показать его, когда читатель наводит указатель мыши на ссылку:
a:link { текст-декорация: нет; }
a:hover { текст-декор: подчеркивание; }
Ссылки по-прежнему будут отображаться синим цветом, поэтому они должны оставаться узнаваемыми. Если вы перемещаетесь по ним с помощью клавиатуры, они не будут подчеркнуты, но будет применен стиль контура браузера по умолчанию, что гарантирует, что вы по-прежнему сможете их идентифицировать.
Если вы используете подчеркивание ссылок, но хотите сделать его более изящным, ознакомьтесь со свойствами text-underline-offset и text-underline-position.
Полный CSS
Эти стили не обязательно будут все применимы к вашему дизайну. Но они являются хорошей основой для работы, и они делают простые документы достаточно привлекательными.
Кодекс
HTML {
box-size: border-box;
макс. ширина: 70 каналов;
маржа: авто;
font-size: 1.25em;
цвет: #333;
line-height: 1.4;
}
* {
размер-box: наследовать;
}
h1, h2, h3, h4, h5, h6 {
семейство шрифтов: sans-serif;
}
IMG {
максимальная ширина: 100%;
высота: авто;
}
ссылка {
текстовое оформление: нет;
}
а: зависать {
текст-оформление: подчеркивание;
}
Результаты
На этом снимке экрана показан пример HTML-документа со множеством основных элементов, отрисованных с использованием стиля браузера по умолчанию:
На этом снимке экрана показан тот же документ с примененной минимальной таблицей стилей, приведенной выше:
Представленные здесь стили должны улучшить базовый минимальный дизайн типичного HTML-файла, с улучшениями читаемости и общей компоновки. Попробуйте их с вашими собственными документами или веб-сайтами и продолжайте изучать CSS, чтобы улучшить свои знания и отточить свои дизайны еще больше.
