Каскадные таблицы стилей

В прошлых уроках мы научились создавать различные элементы для веб-страницы: заголовки, абзацы, картинки, ссылки и так далее. Также при помощи атрибутов тегов мы изменяли цвет фона страницы, цвет текста, семейство шрифтов и т.д. Теперь все это (указание значений для элементов веб-страницы) мы будем делать при помощи каскадных таблиц стилей — CSS. Т.е. вместо атрибутов будем использовать отдельный файл, в котором будем прописывать все необходимые свойства для элементов веб-страницы. Такой файл имеет расширение *.css, например, style.css. Вообще, каскадные таблицы стилей — это формальный язык описания внешнего вида html-документа. Мы берем необходимый элемент, например тег, и для него прописываем все необходимые свойства. Например, для тега <body> мы хотим задать цвет фона и семейство шрифтов, для этого в файле со стилями пропишем:

Каскадные таблицы стилей

Здесь body является селектором, а все остальное между фигурных скобок — свойствами с их значениями. После названия свойства ставится двоеточие, после него идет значение. В конце каждой строки необходимо ставить точку с запятой. Названия свойств в css немного отличаются от названия атрибутов, выполняющих одну и ту же функцию, например для изменения семейства шрифтов используется атрибут face, а в css использутеся свойство font-family

Также, для того, чтобы стили заработали, нам необходимо подключить файл со стилями к html-шаблону. Это делается несколькими способами, мы рассмотрим один из самых удобных — подключение через тег <link> в контейнере <head>...</head>:

Каскадные таблицы стилей

Для этого тега нам потребуется атрибут href, который указывает путь на файл со стилями, атрибут type, который указывает на тип документа,  и атрибут rel, который сообщает браузеру информацию о том, как использовать подключаемый документ. Тег <link> при нашем типе документа <!DOCTYPE html> не требует закрывающего тега. 

Давайте создадим для нашего шаблона index.html файл со стилями. Назовем его style.css. Создайте его в той же папке, где лежит файл index.html: кликаем правой клавишей мышки, выбираем создать > текстовый документ, после этого переименовываем его и ставим расшиерние css:

Каскадные таблицы стилей

Откройте шаблон index.html в текстовом редакторе и оставьте там только заголовок и абзац, в контейнере <head>...</head> пропишите путь к файлу со стилями:

Каскадные таблицы стилей

Откройте файл style.css в текстовом редакторе, и запишите для тега <body> следующие свойства: для фона страницы — свойство background, для семейства шрифтов — свойство font-family, и для цвета текста — свойство color

Каскадные таблицы стилей

Сохраните изменения и откройте index.html в браузере:

Каскадные таблицы стилей

Вот такой будет результат.

Видеоматериал по этому уроку:

http://youtu.be/q3LuYtWr-Ec

Источник: http://psd-html-css.ru/html/kaskadnye-tablicy-stiley

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Каскадные таблицы стилей | | 2012-03-25 20:31:00 | | Статьи Web-мастеру | | В прошлых уроках мы научились создавать различные элементы для веб-страницы: заголовки, абзацы, картинки, ссылки и так далее. Также при помощи атрибутов тегов мы изменяли цвет фона страницы, цвет | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: