Что такое каскадные таблицы стилей и для чего используется CSS?

Что такое каскадные таблицы стилей и для чего используется CSS?

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





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



Как выглядит CSS?

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





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

Каждому свойству можно присвоить поддерживаемое значение. Присвоение значения свойству - это «объявление». Обычно они выглядят так:



property: value

Например:

нет звука из динамиков windows 10
color: red

Значения для разных свойств могут сильно отличаться, даже значения для одного и того же свойства. Например, вот еще два способа написать предыдущее объявление:



color: #ff0000
color: rgb(255, 0, 0)

Как сочетаются HTML и таблицы стилей

Вы можете комбинировать HTML и CSS несколькими способами, каждый из которых имеет свои преимущества.

Написание стилей в строке

Самый простой способ - прикрепить объявления стиля непосредственно к элементу в файле HTML. Вы можете сделать это с помощью стиль атрибут так:




Most of this text is red …


… but this isn’t!


Хотя стилизация таких встроенных элементов может быть удобной, у нее есть несколько недостатков. Во-первых, это усложняет HTML, что затрудняет чтение с первого взгляда. Также неудобно поддерживать: представьте себе длинный документ, в котором мы хотим установить цвет каждого абзаца. Это CSS, но не таблицы стилей.

Встраивание стилей в голову

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





/* style instructions go here */



...

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

Здесь на помощь приходят селекторы CSS. Они позволяют нам нацеливать определенные части страницы и определять их стиль в одном месте, используя следующий синтаксис:

как сделать видео обои
selector {
declaration1;
declaration2;
/* etc. */
}

Например, чтобы сделать текст абзаца синим, мы можем указать следующее:

p {
color: blue;
}

В этом примере селектор просто п , который соответствует всем элементам абзаца в нашем документе. Он будет окрашивать весь текст в синий цвет, если он находится в

Связывание внешней таблицы стилей

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


Вставьте этот код в теги вашего HTML-файла, чтобы связать вашу внешнюю таблицу стилей.

Сила CSS

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

Вот лишь несколько преимуществ этого разделения:

  • Вы можете отключить таблицу стилей, просто изменив ссылку на файл. Это может происходить даже динамически. За один шаг вы можете полностью изменить внешний вид страницы.
  • При необходимости многие страницы могут использовать одни и те же таблицы стилей. Изменяя один-единственный файл, вы можете обновить внешний вид всего веб-сайта.
  • Разделение страницы на «содержание» и «стиль» имеет технические преимущества. Прокси и браузеры могут кэшировать отдельные файлы отдельно. Это означает, что сайт может отправлять информацию о своем стиле один раз, а не включать ее на каждую страницу.
  • При совместной работе разные команды могут работать со своими сильными сторонами, создавая и редактируя отдельные файлы, не влияя друг на друга.

Объясняя Каскад

Вы много узнали о стилях и таблицах стилей, но как насчет каскадной части CSS?

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

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

Каскад указывает, что таблица стилей автора применяется после стилей пользовательского агента. Если наш браузер сообщает, что заголовки выделены полужирным шрифтом, а автор страницы заявляет, что заголовки на этой странице светлые, тогда они будут светлыми.

Есть еще один источник таблиц стилей, который передает читателю некоторый контроль. Теоретически любой веб-пользователь может поддерживать пользовательскую таблицу стилей с собственными правилами. Они находятся посередине: пользовательские правила переопределят настройки браузера по умолчанию, но сами будут переопределены стилями авторов. К сожалению, поддержка пользовательских таблиц стилей никогда не была широко распространена.

Ориентация на разные СМИ

Таблицы стилей можно использовать в разных контекстах за пределами экрана. В половина атрибут ссылка element определяет, к каким типам мультимедиа применяется таблица стилей. Например, вы можете определить таблица стилей для печати используя разметку, подобную следующей:

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

Связанный: Как просматривать веб-страницы, если вы слепой или слабовидящий

скачать офис для дома и бизнеса 2016

Такие сайты, как Википедия, используют CSS для управления стилем печати, скрытия нежелательных элементов и упрощения макета.

CSS делает HTML хорошо выглядящим

Каскадные таблицы стилей охватывают многое: каскад, наследование, селекторы, источники, медиа и т. Д. Но их мощь позволяет использовать современный Интернет. Это среда, которая обеспечивает встроенные функции повторного использования, гибкости и доступности.

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

Делиться Делиться Твитнуть Эл. адрес Шпаргалка по основным свойствам CSS3

Освойте основной синтаксис CSS с помощью нашей шпаргалки по свойствам CSS3.

Читать далее Похожие темы
  • Программирование
  • Веб-разработка
  • CSS
Об авторе Бобби Джек(Опубликовано 58 статей)

Бобби - энтузиаст технологий, проработавший разработчиком программного обеспечения большую часть двух десятилетий. Он увлечен играми, работает редактором обзоров в Switch Player Magazine и занимается всеми аспектами онлайн-публикации и веб-разработки.

Ещё от Bobby Jack

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!

Нажмите здесь, чтобы подписаться