Дополнительные сведения о CSS

  • 4 мин

Давайте рассмотрим больше способов, которые CSS могут упростить управление содержимым, и ваше содержимое более интересно для читателей.

Комментарии

Как и в любом языке компьютера, CSS поддерживает комментарии. Чтобы закомментировать в разделе CSS, вы будете использовать /* comment */. Определяет /* начало комментария и */ помечает конец. Комментарий CSS может охватывать несколько строк текста. Комментарии — отличный способ оставить заметки для себя или других разработчиков или сделать заметки во время обучения языку.

Внимание

Комментарии CSS являются общедоступными и доступны как браузером, так и пользователями веб-сайта. Не сохраняйте конфиденциальную информацию в комментариях.

Примечания CSS форматируются по-разному от html-комментариев. Примечания в HTML используют <!--comment--> синтаксис.

Настройка шрифтов

С помощью CSS можно указать браузеру, какой шрифт вы хотите использовать для определенного текста. Иногда вы хотите использовать Arial для удобочитаемости или что-то фантазий для стиля. На следующем рисунке показан текст в Arial и другом тексте шрифта с именем "Влияние".

Снимок экрана: отображение текста H T M L в двух шрифтах.

Наиболее распространенным вариантом настройки шрифта на странице является font-family. font-family обычно устанавливается в список шрифтов, что позволяет браузеру использовать первый шрифт, который он может поддерживать. Например, настройка Tahoma, Verdana, sans-serif попыток использовать Tahoma, затем Verdana, и, наконец, общий шрифт без засечек.

Вы также можете использовать другие параметры, такие как стиль, вес и украшение. font-style используется для курсивизации текста, задав значение italic. font-weight поддерживает различные полужирные параметры, при bold этом наиболее распространенные. И, наконец, text-decoration используется для underline, overlineили line-through текста.

КСС Результат
font-weight: bold; Демонстрация
font-style: italic; Демонстрация
text-decoration: line-through; Демонстрация

text-decoration может отличаться от других параметров, используемых для изменения отображения шрифта. Ключевое различие заключается в том, что text-decoration используется для применения стиля вокруг текста или текста, но не изменяет сам шрифт. Полужирные и курсивные курсивы изменяют шрифт.

Примечание.

Обычно следует избегать использования подчеркивания на веб-странице, так как текст может выглядеть как гиперссылка.

Изменение размеров шрифтов

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

Примечание.

Размер шрифта по умолчанию для многих браузеров составляет 16 пикселей.

Абсолютный размер может измеряться в пикселях и указывается в CSS с помощью px. Чтобы задать шрифт на 14 пикселей, можно использовать директиву font-size: 14px;.

Относительный размер шрифтов обычно измеряется с помощью em или rem. em имеет значение short для элемента и относительно родительского (em) или корневого (rem). Корень — это html элемент. 1emили 1rem равен размеру родительского или корневого элемента, в то время как 2em2em или будет двойным. Так как размеры экрана могут отличаться, обычно рекомендуется использовать относительный размер каждый раз, когда это возможно.

Рассмотрим следующий КОД HTML и CSS в качестве примера:

<html>
    <body>  
        <div>Sample text</div>
    </body>
</html>

html {
    font-size: 18px;
}
div {
    font-size: 14px;
}

div Если размер элемента равен 14 пикселям, потому что родительский элемент установлен div в значение 14px, в то время как 1rem размер корня 1em будет равен html18px.

1.5em div для элемента было бы 21 пикселей (14 * 1,5 = 211.5rem). Вы можете использовать em и rem обеспечить остальные масштабы страниц при обновлении родительских или корневых размеров.

Цвета

Цвет шрифта color можно задать с помощью свойства. color значение RGB (красный, зеленый, синий) или одно из многих именованных цветов, например black или lightgray.

Значения RGB в CSS могут быть шестнадцатеричными значениями, префиксами или #значениями от 0 до 255 внутри rgb функции. Чтобы задать цвет оттенка коричневого цвета по умолчанию, вы будете использовать color: brown;. Для пользовательского оттенка фиолетового цвета можно использовать color: #7462e0.

/* named value */
div {
    color: brown;
}

/* RGB hex value */
h1 {
    color: #7462e0;
}

/* RGB function */
h2 {
    color: rgb(105, 6, 19);
}

Внимание

Выбор цвета всегда должен учитывать тех, кто имеет дефицит цветового зрения. Вы можете использовать такие инструменты, как Color Safe , чтобы помочь в выборе контрастных цветов, чтобы обеспечить доступность сайта для всех пользователей.

Как вы можете подозревать, есть десятки доступных именованных цветов, и значения RGB предлагают бесконечный набор параметров. Редакторы, такие как vscode.dev или Visual Studio Code , могут помочь определить доступные значения цвета. Оба редактора отображают предварительный просмотр образца цвета в вашем CSS. Если вы наведете курсор мыши на образец, вам будет представлен селектор цвета, который вы можете использовать для установки нужного цвета.

Снимок экрана: селектор цвета из Visual Studio Code.