Применение css к html-документу

Базовый синтаксис CSS

фундаментальную модель CSS:

Применение css к html-документу

Но где размещать CSS-код? Именно этим вопросом мы и займёмся сейчас.

Применение CSS к HTML-документу

Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем — то есть внешней/external таблице стилей.

Метод 1: Инлайн/In-line (атрибут style)

Можно применять CSS к HTML с помощью HTML-атрибута style.

Example

This is a red page

Метод 2: Внутренний (тэг style)

Второй способ вставки CSS-кодов — HTML-тэг . Например:

Example body {background-color: #FF0000;}

This is a red page

Метод 3: Внешний (ссылка на таблицу стилей)

Рекомендуемый метод — создание ссылки на так называемую внешнюю таблицу стилей. Мы будем использовать именно этот метод во всех примерах.

Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:

Применение css к html-документу

Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:

Обратите внимание, как указан путь к вашей таблице стилей атрибутом href.

Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами и . Например, так:

My document …

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

Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите изменить цвет фона web-сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.

Единицы размеров

Все размеры и позиционные расположения в CSS задаются в размерных единицах. Internet Explorer и другие браузеры поддерживают как абсолютные, так и относительные единицы. Абсолютные единицы задают точный размер, например, в сантиметрах или дюймах, относительные единицы вычисляются относительно каких-либо других свойств (например, размера монитора или листа бумаги) или размеров других элементов.

Допустимые абсолютные единицы:

  • in – дюймы (2,54 см)
  • cm – сантиметры
  • mm – миллиметры
  • pt – пункты (points, 1pt = 1/72in)
  • pc – пики (picas, 1pc = 12pt)

Относительные единицы:

  • em – размер на основе размера шрифта (атрибута font-size). В типографии em — это единица измерения, которая представляет высоту заглавной буквы М шрифта. В веб-дизайне 1 em — это высота базового шрифта в браузере, которая обычно составляет 16 пикселов (но пользователь может изменять ее). Если эта единица применяется для определения размера шрифта, то она имеет смысл относительной величины по отношению к размеру шрифта в родительском элементе. Пример: left: 2.5em
  • ex – размер буквы x
  • px – вычисляется на основе разрешения монитора или принтера
  • % – размер относительно другого, как правило, родительского элемента. Например, ширина ячейки таблицы может быть выражена в процентах от ширины таблицы

Абсолютные единицы хороши для определения размеров элементов в версии для печати. Для отображения на экране, как правило, применяются пикселы, проценты и em. Выбирая, какую единицу измерения использовать, следует исходить из согласованности размеров элементов веб-страницы (текста, блоков, изображений и т.п.). Фактический размер элементов предсказать невозможно (это зависит от разрешения монитора, который пользователь может менять), поэтому речь идет именно о согласованности, т.е. о совместном изменении размеров элементов страницы при ее масштабировании. Если пользователь считает текст слишком мелким, то он должен иметь возможность увеличить его (и наоборот). Современные браузеры позволяют масштабировать страницу как единое целое — все элементы увеличиваются и уменьшаются пропорционально. Однако более старые браузеры (например, IE6-) не предоставляли такой возможности — вместо этого разрешалось регулировать только размер шрифта (т.е. масштабировался текст, а остальные элементы не меняли своих размеров). Существенное изменение размера шрифта текста без изменения размера контейнера этого текста, как правило, нежелательно. Здесь на помощь приходит такая единица длины как em: когда меняется размер шрифта, меняется и величина em, и размеры блоков удается согласовать таким образом со шрифтом. Измерение размера в процентах (от соответствующего размера контейнера) позволяет поддерживать согласованность другого рода — между размерами блоков и размером окна браузера. В большинстве же случаев измерение длины в пикселах — достаточно хорошее решение.

Подключение каскадных таблиц стилей #CSS к #HTML документу

Похожие статьи:

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Adblock
detector