CSS: что это такое и как подключить стили к HTML документу?

  1. Создание сайта на Adobe Dreamweaver
  2. Первая веб страница
  3. Форматирование текста в HTML
  4. Создание списков
  5. Гиперссылки
  6. Создание таблиц в блокноте
  7. Цвета в HTML
  8. Как создать форму в HTML?
  9. Табличная верстка сайта
  10. Теги в HEAD
  11. Изображения в html
  12. Блочная структура сайта
  13. Блочная верстка

В этом уроке мы поговорим о каскадных таблицах стилей (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. У вас откроется такое окно:

Создаем CSS файл в DreamViewer

Зайдите на вкладку 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 форматировать текст и работать с изображениями.

 

Оставить ответ

Ваш email не будет показан.