Как работать и подключить CSS к HTML документу на практике

25 июля, 2014 Максим Метелев 24316 просмотров Комментариев нет

Добро пожаловать в следующий урок из серии уроков по CSS! С вами вновь Макс Метелев и сегодня мы разберем на практике как работать с CSS и как его подключить к html документу.

В прошлом уроке мы бегло узнали историю его появления. Если не читали, то настоятельно рекомендую.

Завариваем кофе, чай, берем плюшки и вперед за изучение основ сайтостроения.

Содержание

1 Как работает CSS?
2 Базовый синтаксис CSS
3 Как подключить CSS к HTML документу?
4 Попробуйте самостоятельно
- - 4.0.1 Default.htm
  - 4.0.2 Style.css
- 4.1 Рекомендую ознакомиться с этими статьями:

Как работает CSS?

В этом уроке вы создадите свой первый файл стилей. Многие из свойств, используемых в каскадных таблицах стилей аналогичны в HTML. Поэтому если вы уверенно разбираетесь в гипертекстовой разметке, то, скорее всего, вы быстро усвоите многие «приблуды» CSS. Давайте рассмотрим на примере.

Базовый синтаксис CSS

Например, нам нужен красный фоновый цвет веб страницы. Используя HTML мы бы сделали примерно так:

<body bgcolor="#FF0000">

1	<body bgcolor="#FF0000">

В стилях подобное мы бы достигли написанием следующего кода:

body {background-color: #FF0000;}

1	body {background-color: #FF0000;}

Как вы должны были заметить написание и там, и там одинаково. Данный пример демонстрирует фундаментальную модель CSS:

Базовая модель CSS

Но где размещать код CSS спросите Вы? Вполне логичный и здравый вопрос. Именно этим мы сейчас и займемся.

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

Можно выделить 3 способа подключения CSS к веб странице. Все их мы сейчас рассмотрим на примере. Внимательно смотрите 3 способ, так как он самый правильный с точки зрения стандартов верстки и логики. Другие тоже верны, но это «грубые» варианты. Их лучше не использовать.

Метод 1 – Внутристроковое размещение стилей (через атрибут style)

Первый путь заключается в подключении CSS к HTML посредством атрибута style. Основываясь на приведенным выше примере с красным цветом наш код записался бы так:

<html>
	  <head>
		<title>Example</title>
	  </head>
	  <body style="background-color: #FF0000;">
		<p>Здесь красная страница</p>
	  </body>
</html>

<html>

<head>

<title>Example</title>

</head>

<p>Здесь красная страница</p>

</body>

</html>

Метод 2 – Через использование тегов style

Другой способ подразумевает включение парных тегов стилей <style></style> внутрь той страницы, где мы хотим применить их. Например, как здесь:

<html>
	  <head>
		<title>Простой пример</title>
		<style type="text/css">
		  body {background-color: #FF0000;}
		</style>
	  </head>
	  <body>
		<p>Здесь снова красная страница</p>
	  </body>
</html>

<html>

<head>

<title>Простой пример</title>

body {background-color: #FF0000;}

</style>

</head>

<body>

<p>Здесь снова красная страница</p>

</body>

</html>

Метод 3 – Внешнее подключение файлов стилей.

Это рекомендуемый и правильный метод заключается в увязке файла стилей и веб страницы через подключение в html документ всего лишь одной строчки:

<link rel="stylesheet" type="text/css" href="style/style.css" />

1	<link rel="stylesheet" type="text/css" href="style/style.css" />

Единственное условие вы должны сохранить отдельно файл со стилями и назвать его, например style.css и быть он должен в папке CSS или Style. Такую ситуацию можно проиллюстрировать вот так:

Правильная структура и расположение файлов

Следует обратить внимание на место, где будет подключаться наша строчка, которая вызывает файл со стилями. Она должна находиться между служебными тегами <head></head> . Можно разместить ее сразу после тега заголовка страницы <title> , как на этом примере:

<html>
     <head>
       <title>My document</title>
       <link rel="stylesheet" type="text/css" href="style/style.css" />
     </head>
	  <body>
          </body>
</html>

<html>

<head>

<title>My document</title>

</head>

<body>

</body>

</html>

Ссылка говорит браузеру, что он должен использовать макет из файла CSS для отображения html документа. Т.е как, своего рода, должная инструкция поисковику. Иди вот в это место, цепляй файл стилей и украшай страницу так, как я написал. Ну это образно говоря:-)

Самое важное то, что вы можете иметь неограниченное количество веб страниц и иметь при этом один файл со стилями.

Как работает CSS в связке с html документами

Эта техника поможет сэкономить вам уйму времени. Представьте, что Вы хотите изменить цвет фона веб-сайта с количеством 100-200 страниц, таблица CSS спасет вас от необходимости вручную изменять все эти 100-200 документов.

Давайте еще раз закрепим все на практике.

Попробуйте самостоятельно

Откройте NOTEPAD++ или другую программу для редактирования и создания веб страниц и создайте два файла – один со страничкой html, а другой с файлом стилей:

Default.htm

<html>
	  <head>
		<title>My document</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	  </head>
	  <body>
		<h1>My first stylesheet</h1>
	  </body>
	</html>

<html>

<head>

<title>My document</title>

</head>

<body>

<h1>My first stylesheet</h1>

</body>

</html>

Style.css

body {
      background-color: #FF0000;
}

body {

background-color: #FF0000;

}

Теперь возьмите и поместите эти два файла в одну папку. Не забудьте сохранить файлы с правильными расширениями (.htm и .css соответственно)

Откройте в браузере файл default.htm и посмотрите, как ваша страница приобрела красный фон. Поздравляем Вас! Вы сделали свой первый файл стилей.

В следующем уроке мы взглянем на некоторые свойства CSS

Рубрики: CSS стили

Поддержите информационный проект

Я подготовил для Вас обращение, с ним можете ознакомиться тут

Об авторе

Макс Метелев - автор, блоггер, актер местного театра, ведущий городских мероприятий. Делюсь только лучшим!

Макс Метелев

Калининград, Россия

Подробнее

Видеообращение

Мои услуги

Корпоративные сайты

Создание простых сайтов-визиток на заказ

Сайты-визитки

Landing Page

Создание недорогих интернет магазинов на заказ

Интернет магазины

Комплексное SEO продвижения сайтов в Яндексе и Гугле

SEO продвижение

SEO аудит сайта

Настройка Яндекс Директ

Настройка контекстной рекламы в Google Adwords

Настройка Google Adwords

SMM продвижение

Раскрутка в Instagram

Практика CSS: Создаем первую таблицу стилей

Как работает CSS?

Базовый синтаксис CSS

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

Метод 1 – Внутристроковое размещение стилей (через атрибут style)

Метод 2 – Через использование тегов style

Метод 3 – Внешнее подключение файлов стилей.

Попробуйте самостоятельно

Default.htm

Style.css

Поддержите информационный проект

Об авторе

Интересные статьи, которые изучают на моем блоге

6 лучших плагин...

Лучший WordPres...

Где взять конте...

213 способов ка...

Обзор лучших пл...

Как продвинуть ...

Как добавить ст...

Внимание! Конку...

Легальное продв...

Сравнение 7 луч...

Руководство для...

Создаем бесплат...

Макс Метелев

Видеообращение

Мои услуги

Рубрики блога

ТОП статей

Новое на блоге

Основное

Рубрики

Новое в блоге

Лидеры просмотров

Практика CSS: Создаем первую таблицу стилей

Как работает CSS?

Базовый синтаксис CSS

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

Метод 1 – Внутристроковое размещение стилей (через атрибут style)

Метод 2 – Через использование тегов style

Метод 3 – Внешнее подключение файлов стилей.

Попробуйте самостоятельно

Default.htm

Style.css

Рекомендую ознакомиться с этими статьями:

Поддержите информационный проект

Об авторе

Интересные статьи, которые изучают на моем блоге

Макс Метелев

Видеообращение

Мои услуги

Рубрики блога

ТОП статей

Новое на блоге

Основное

Рубрики

Новое в блоге

Лидеры просмотров