Что такое таблицы стилей HTML?

HTML Cascading Style Sheet - это лист с набором правил и свойств, который сообщает браузеру, как отображать HTML, используя все указанные стили.

CSS это способ, которым мы стилизуем любые веб-страницы. У CSS есть все свойства, такие как фон, цвета, шрифты, интервалы, границы и т. Д., Которые мы можем определить для каждого элемента на страницах.

Таблицы стилей HTML также используются для установки макета страницы, например, где верхний колонтитул, нижний колонтитул или любые другие элементы должны быть размещены на странице. О CSS всегда говорят вместе с HTML, поскольку страницы без каких-либо стилей очень бледные, без выделения каких-либо заголовков и т. Д. И одинакового размера шрифта по всей странице, что не дает хорошего обзора пользователям.

Как использовать таблицы стилей HTML?

В прошлом стили, скрипты, HTML все было написано на одной странице. Это делало страницы чрезвычайно длинными и чрезвычайно сложными для чтения и редактирования. Затем появился способ отделить HTML, стили и Javascript.

Способы включения таблиц стилей HTML на веб-страницу:

Есть 3 способа, которыми мы можем включить стили:

  1. Inline Styling

Это способ написания стилей для каждого элемента внутри самого HTML внутри атрибута, называемого стилем.

Этот способ стилизации вообще не рекомендуется, так как HTML выглядит загроможденным, и мы не можем следовать подходу «Один раз напиши, используй во многих местах»

Eg: Hello World!

Eg: Hello World!

  1. Внутренний стиль

При этом стили включаются в тег стиля и размещаются на веб-странице поверх HTML. Этот способ стилизации все еще лучше, чем встроенный стиль, поскольку мы можем объединить общие стили в случае, если он должен использоваться для нескольких элементов одновременно.

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

Eg:

container-block(
font-size: 10px;
margin-top: 10px;
)

Hello World!

  1. Внешний Стиль

Это самый распространенный и лучший способ иметь стили для веб-страницы. Это похоже на внутренний стиль, но разница в том, что стили пишутся в отдельном файле с расширением .css и ссылка на него помещается в тег head веб-страницы.

Синтаксис для ссылки файла CSS на веб-странице:

Стили должны быть включены в тег head, который находится над тегом body (т.е. фактическим содержимым) HTML

Каков приоритет между встроенным, внутренним, внешним стилем?

Встроенные стили имеют больший приоритет, чем внутренние, и тогда последний приоритет получает внешний стиль.

Инлайн> Внутренний> Внешний

Лучшие практики при использовании CSS:

  • CSS можно разделить на несколько файлов вместо одного.
  • Отдельные CSS-файлы могут быть включены один за другим в тег заголовка с помощью тегов ссылки.
  • Или один файл CSS может иметь несколько операторов импорта для импорта остальных файлов CSS. Это логически разделит CSS, но в итоге все стили будут отображаться из одного и того же файла.

Использование: @import './process.css';

  • Стили могут быть определены для любых элементов веб-страницы с помощью селекторов, таких как сам тег HTML, имена классов, идентификаторы, любые имена атрибутов.
  • Есть несколько псевдо-селекторов, таких как:
    • перед
    • после
    • п-й ребенок
    • Первый ребенок
    • последний ребенок
    • зависать
    • посетил

Это в основном состояния выбранных элементов, а не точные.

  • Когда умноженные CSS-файлы включаются в страницу, последний получает самый высокий приоритет и переопределяет существующие стили предыдущих файлов, имеющих тот же селектор.
  • Таблицы стилей должны использоваться до самого HTML, чтобы стили применялись во время загрузки страницы. При включении в конце HTML сначала загружается, а затем медленно применяются стили, что очень плохо для пользователя.

Различные особенности каскадных таблиц стилей HTML:

  • CSS обеспечивает анимацию . Ранее javascript использовался только для анимации. Но последний CSS, т. Е. CSS3, обеспечивает анимацию с использованием самих свойств.
  • Префиксы поставщиков. Прежде чем браузеры выпускают стандартную версию / имя свойства для любых новых функций, браузеры предоставляют нам некоторые префиксы поставщиков на некоторое время в течение некоторого периода времени в качестве эксперимента. Разработчикам нужно подождать, пока браузер выпустит свои стандартные версии, а пока можно использовать экспериментальные функции с префиксами поставщиков.
  • CSS-преобразования: переход используется для постепенного перехода к одному значению свойства в течение заданного периода времени.

Eg: -webkit-transition: width 2s, height 4s;

  • CSS Transforms: Преобразование в CSS позволяет переводить, вращать, масштабировать и наклонять элементы.

Медиа-запросы:

Мобильные телефоны, десктопы и iPad ведут себя по-разному, однако мы не можем одинаково стилизовать страницы. Предыдущие веб-стандарты создавались таким образом, чтобы у нас были разные CSS для каждого типа устройства.

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

Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)

Стили, безусловно, благо для Интернета. И поскольку веб-разработка в последнее время выросла в геометрической прогрессии, CSS3 определенно приобрел большой спрос, чтобы сделать страницы чрезвычайно интерактивными и интуитивно понятными.

Рекомендуемые статьи

Это было руководство к таблицам стилей HTML. Здесь мы обсудим, как использовать таблицы стилей HTML, различные функции и способы включения CSS на веб-странице. Вы также можете посмотреть следующие статьи, чтобы узнать больше -

  1. Введение в CSS
  2. Преимущества CSS в веб-дизайне
  3. Что такое CSS? | Как пользоваться?
  4. Является ли CSS чувствительным к регистру?
  5. Различные стили списка HTML

Категория:

Инструменты веб-разработки