Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнаете многие коды. Посмотрим на конкретном примере.
Базовый синтаксис CSS Скажем, нам нужен красный цвет фона страницы: В HTML это можно сделать так: <body bgcolor="#FF0000"> С помощью CSS того же самого результата можно добиться так: body {background-color: #FF0000;} Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS: selector {propery: value;} selector(селектор) - к какому HTML-тегу(тегам) применяется свойство (например body) property(свойство) - свойство, которое, к примеру может быть цветом фона (background-color) value(значение) - значением свойства background-color может быть, например red (#FF0000) Но где размещать CSS-код? Именно этим вопросом мы и займёмся сейчас. Применение CSS к HTML-документу
Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.
Метод 1: Инлайн/In-line (атрибут style)
Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:
<html> <head> <title>Example</title> </head> <body style="background-color: #FF0000;"> <p>This is a red page</p> </body> </html>
Метод 2: Внутренний (тэг style)
Второй способ вставки CSS-кодов - HTML-тэг <style>. Например:
<html> <head> <title>Example</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>This is a red page</p> </body> </html> Метод 3: Внешний (ссылка на таблицу стилей)
Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. В данном учебнике мы будем использовать именно этот метод во всех примерах.
Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете создать таблицу стилей прямо на вашем сайте.
Например, скажем, ваша таблица стилей называется style.css и находится в папке style.
Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (index.html) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода: <link rel="stylesheet" type="text/css" href="style/style.css"/>
Обратите внимание, как указан путь к вашей таблице стилей атрибутом href.
Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:
Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла. Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов. То есть изменения в одном файле внешней таблицы стилей влияют на все HTML-документы, на которыех она подключена. Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите изменить цвет фона сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.
Давайте посмотрим, как это сделать. Попытайтесь сделать это сами.
Cоздайте файл style.css и при помощи построчного редактора впишите в него следующее:
body { background-color: #FF0000; }
Откройте блочный редактор, выбрав "Редактировать" в wExplorer на файле index.html (если таковой не существует его необходимо создать). Затем выберите редактирование заголовка и в поле "URL файла с CSS-стилями" впишите "style.css";
В редакторе по строкам файл index.html будет иметь примерно следующий вид:
Оба файла (index.html и style.css) в нашем случае должны находиться в одной папке.
Выберите "Просмотр" в редакторе или наберите полный адрес вашей страницы с именем сайта в вашем браузере и вы увидите, что страница имеет красный фон. Поздравляем! Вы создали вашу первую таблицу стилей! Переходите в следующий урок, где мы рассмотрим некоторые из свойств CSS.
Цвет и фон
В этом уроке вы научитесь, как использовать цвета и фон на ваших сайтах. Мы рассмотрим также продвинутые методы позиционирования и управления фоновым изображением. Будут разъяснены следующие CSS-свойства:
color background-color background-image background-repeat background-attachment background-position background
Цвет переднего плана : свойство 'color'
Свойство color описывает цвет переднего плана элемента.
Например, представьте, что мы хотим сделать все заголовки документа тёмно-красными. Все заголовки обозначаются HTML-элементом . В нижеприведённом коде цвет элемента устанавливается красным.
h1 { color: #ff0000; }
Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000), либо вы можете использовать названия цветов ("red") или rgb-значения (rgb(255,0,0)). Свойство 'background-color'
Свойство background-color описывает цвет фона элемента.
В элементе размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу .
Вы можете также применять это свойство к другим элементам, в том числе - к заголовкам и тексту. В следующем примере различные цвета фона применяются к элементам и .
body { background-color: #FFCC66; }
h1 { color: #990000; background-color: #FC9804; }
Заметьте, что устанавливает два свойства для , разделяя их точкой с запятой.
Фоновые изображения [background-image]
CSS-свойство background-image используется для вставки фонового изображения.
Вы можете использовать в качестве фонового изображения любую картинку уже находящуюся на вашем сайте или же прямо с другого сайта, для этого нужно будет указывать к ней полный путь с http:// вначале.
Для вставки рисунка в качестве фонового изображения страницы просто примените свойство background-image в тэге <body> и укажите местоположение рисунка.
body { background-color: #FFCC66; background-image: url("image.gif"); }
h1 { color: #990000; background-color: #FC9804; }
Обратите внимание, что мы специфицируем место, где находится файл как url("image.gif"). Это означает, что он находится в той же папке, что и таблица стилей. Вы, разумеется, можете ссылаться и на файлы изображений в других папках, используя, например, url("/images/image.gif"), или даже на файлы в Internet, указывая полный адрес файла: url("http://mastox.ru/images/image.gif"). Повторение/мультипликация фонового изображения [background-repeat]
Вы заметили в предыдущем примере, что изображение повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран. Свойство background-repeat управляет этим.
Ниже указаны четыре значения background-repeat. Background-repeat: repeat-x (Рисунок повторяется по горизонтали) background-repeat: repeat-y (Рисунок повторяется по вертикали) background-repeat: repeat (Рисунок повторяется по горизонтали и вертикали) background-repeat: no-repeat (Рисунок не повторяется)
Например, для отмены повторения/мультипликации фонового рисунка мы должны записать такой код:
body { background-color: #FFCC66; background-image: url("image.gif"); background-repeat: no-repeat; }
h1 { color: #990000; background-color: #FC9804; }
Блокировка фонового изображения [background-attachment]
Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы.
Ниже указаны два значения background-attachment. Background-attachment: scroll (Изображение прокручивается вместе со страницей - разблокировано) Background-attachment: fixed (Изображение блокировано)
Расположение фонового рисунка [background-position]
По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана. Свойство background-position позволяет изменять это значение по умолчанию, и фоновый рисунок может располагаться в любом месте экрана.
Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.
Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right.
В таблице дано несколько примеров. background-position: 2cm 2cm (Рисунок расположен на 2 cm слева и на 2 cm сверху) background-position: 50% 25% (Рисунок расположен по центру и на четверть экрана сверху) background-position: top right (Рисунок расположен в правом верхнем углу страницы)
В примере кода фоновое изображение располагается в правом нижнем углу экрана:
body { background-color: #FFCC66; background-image: url("image.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; }
h1 { color: #990000; background-color: #FC9804; }
Сокращённая запись [background]
Свойство background входит в состав всех свойств, перечисленных в этом уроке.
С помощью background вы можете сжимать несколько свойств и записывать ваши стили в сокращённом виде, что облегчает чтение таблиц.
Если свойство отсутствует, оно автоматически получает значение по умолчанию. Например, если background-attachment и background-position нет в данном примере:
background: #FFCC66 url("image.gif") no-repeat;
то этим двум неспецифицированным свойствам будут присвоены значения по умолчанию - scroll и top left.
