- Создание сайта на Adobe Dreamweaver
- Первая веб страница
- Форматирование текста в HTML
- Создание списков
- Гиперссылки
- Создание таблиц в блокноте
- Цвета в HTML
- Как создать форму в HTML?
- Табличная верстка сайта
- Теги в HEAD
- Изображения в html
- Блочная структура сайта
- Блочная верстка
В этом уроке мы поговорим о каскадных таблицах стилей (CSS) и о том, насколько они упрощают настройку дизайна сайта. С помощью CSS можно в одном файле задать оформление на всех страницах сайта.
При создании сайта нужно придерживаться такой концепции: языком HTML описывают содержание страниц на сайте, а языком CSS описывают дизайн и оформление элементов страницы.
Например, мы можем в одном файле задать цвет, фон, размеры шрифта, оформление картинок. А в файлах сайта мы вставим содержание, текст, изображения.
Файл, в котором описывается дизайн страницы, и оформление элементов обычно называют style.css.
В блокноте создайте файл style.css.
Давайте опишем дизайн первого элемента – body:
body { background: grey; color: white; }
Сохраните этот файл в папке, где вы храните файлы сайта.
С помощью этой записи мы зададим белый шрифт на сером фоне. Если вы помните, в языке html эта запись выглядела так:
<body bgcolor="grey" text="white">
Если мы будем создавать новые страницы нашего сайта, то каждый раз нам нужно будет прописывать тег body. А можно один раз описать элемент body в файле style.css , прикрепить этот файл к каждой странице, и элемент body будет все время отображаться так, как мы его описали в файле style.css.
Для того чтобы прикрепить файл style.css нам нужно после тега <head> вставить следующую запись:
<link href="style.css" rel="stylesheet" type="text/css" />
Давайте в каждом файле, который мы создали, вставим эту запись, а также изменим тег body:
<body>
Как видите, во всех файлах фон стал серым, а текст белым. Теперь, если мы хотим поменять цвет фона, то нам нужно изменить только описание селектора body, и во всех файлах автоматически поменяется цвет фона.
Давайте теперь разберем, как задавать оформление элементов. В общем виде команды css выглядят так:
Селектор {атрибут:значение}
Селектор — это название элемента разметки, атрибут- название параметра, который мы хотим описать.
В следующих уроках мы подробно разберем, как нам описывать текстовые, строчные элементы, как работать с изображениями.
Работа с Dreamwever.
Давайте создадим страницу style.css. Для этого зайдите в меню File – нажмите New. У вас откроется такое окно:
Зайдите на вкладку General, в категорию Basic Page, выберите CSS, нажмите Create (на рисунке обведено овалами).
Вы создадите страницу с расширением css. Сохраните ее под названием style.css.
По умолчанию первая строка выглядит так:
/* CSS Document */
/*___*/ — между этими знаками можно вводить комментарии, браузерами они не интерпретируются.
Введите:
body { background: grey; color: white; }
Сохраните страницу. Теперь в каждую страницу, которую мы создавали, в тег <head> введите ссылку на страницу css:
<link href="style.css" rel="stylesheet" type="text/css" />
А тег body измените так: <body>
В результате все наши страницы написаны белым текстом на сером фоне.
В следующих уроках мы научимся с помощью css форматировать текст и работать с изображениями.