![]() ![]() колонтитул в word 2007, 0000002111
Синтаксис и основные понятия языка CSSМногие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнаете многие коды. Посмотрим на конкретном примере. Базовый синтаксис CSS
Скажем, нам нужен красный цвет фона страницы: <body bgcolor="#FF0000"> С помощью CSS того же самого результата можно добиться так: body {background-color: #FF0000;}
Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную
Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем Метод 1: Инлайн/In-line (атрибут style)Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:
<html> Метод 2: Внутренний (тэг style)Второй способ вставки CSS-кодов - HTML-тэг <style>. Например:
<html> Метод 3: Внешний (ссылка на таблицу стилей)
Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. В данном учебнике мы будем
Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете создать таблицу стилей прямо на Например, скажем, ваша таблица стилей называется style.css и находится в папке style.
Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (index.html) на таблицу стилей (style.css). Обратите внимание, как указан путь к вашей таблице стилей атрибутом href. Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:
<html>
Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла. Давайте посмотрим, как это сделать. Попытайтесь сделать это сами. Cоздайте файл style.css и при помощи построчного редактора впишите в него следующее:
body
background-color: #FF0000;
Откройте блочный редактор, выбрав "Редактировать" в wExplorer на файле index.html (если таковой не существует его В редакторе по строкам файл index.html будет иметь примерно следующий вид:
<html> Оба файла (index.html и style.css) в нашем случае должны находиться в одной папке.
Выберите "Просмотр" в редакторе или наберите полный адрес вашей страницы с именем сайта в вашем браузере и вы увидите, Цвет и фон
В этом уроке вы научитесь, как использовать цвета и фон на ваших сайтах. Мы рассмотрим также продвинутые методы
color Цвет переднего плана : свойство 'color' Свойство color описывает цвет переднего плана элемента.
Например, представьте, что мы хотим сделать все заголовки документа тёмно-красными. Все заголовки обозначаются
h1 {
Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000), либо вы можете использовать названия Свойство background-color описывает цвет фона элемента.
В элементе размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы
Вы можете также применять это свойство к другим элементам, в том числе - к заголовкам и тексту. В следующем примере
body {
h1 { Заметьте, что устанавливает два свойства при этом, разделяя их точкой с запятой. Фоновые изображения [background-image] CSS-свойство background-image используется для вставки фонового изображения.
Вы можете использовать в качестве фонового изображения любую картинку уже находящуюся на вашем сайте или же прямо с
Для вставки рисунка в качестве фонового изображения страницы просто примените свойство background-image в тэге
body {
h1 {
Обратите внимание, что мы специфицируем место, где находится файл как url("image.gif"). Это означает, что он находится
Вы заметили в предыдущем примере, что изображение повторяется по умолчанию по горизонтали и вертикали,
Ниже указаны четыре значения background-repeat. Например, для отмены повторения/мультипликации фонового рисунка мы должны записать такой код:
body {
h1 { Блокировка фонового изображения [background-attachment]
Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе
Ниже указаны два значения background-attachment. Например, следующий код фиксирует изображение.
body {
h1 { Расположение фонового рисунка [background-position]
По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана. Свойство background-position позволяет
Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор
Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы
В таблице дано несколько примеров. В примере кода фоновое изображение располагается в правом нижнем углу экрана:
body {
h1 { Сокращённая запись [background] Свойство background входит в состав всех свойств, перечисленных в этом уроке.
С помощью background вы можете сжимать несколько свойств и записывать ваши стили в сокращённом виде, что облегчает Например, посмотрите на эти строки:
background-color: #FFCC66; Используя background, того же результата можно достичь одной строкой кода: background: #FFCC66 url("image.gif") no-repeat fixed right bottom; Порядок свойств этого элемента таков: [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position] Если свойство отсутствует, оно автоматически получает значение по умолчанию. Например, если background-attachment и background-position нет в данном примере: background: #FFCC66 url("image.gif") no-repeat; то этим двум неспецифицированным свойствам будут присвоены значения по умолча- нию - scroll и top left. колонтитулы в word 2007, 000000211111 ![]() ![]() |