Вторник, 17.10.2017, 16:22
Приветствую Вас Гость | rss
Меню сайта
Форма входа

Статистика

Онлайн всего: 4
Гостей: 4
Пользователей: 0

Урок 2: Как работает CSS?


Вы этом уроке вы создадите свою первую таблицу стилей - style sheet. Вы узнаете об основах базовой модели CSS и о том, какие коды необходимо использовать для CSS в HTML-документе.

Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнаете многие коды. Посмотрим на конкретном примере.

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

Скажем, нам нужен красный цвет фона web-страницы:

В HTML это можно сделать так:

<body bgcolor="#FF0000">


С помощью CSS того же самого результата можно добиться так:

body {background-color:#FF0000;}



 Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:


модель css

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

Применение CSS к HTML-документу

Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.

Метод 1: Инлайн/In-line (атрибут style)

Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:

<html>
  <head>
    <title>
Моя первая страничка!</title>
  </head>
  <body
style="background-color: #FF0000;">
    <p>
Это красная страница</p>
  </body>
</html>


цвет фона


Метод 2: Внутренний (тэг style)

Второй способ вставки CSS-кодов  - HTML-тэг <style>. Например:

<html>
<head>
<title>
Моя первая страничка! </title>
<style
type="text/css">
      body {background-color:#FF0000;}
    </style>
</head>
 <body>
  <p>
Эта страница так же будет красной</p>
 </body>
</html>


цвет фона css



Метод 3: Внешний (ссылка на таблицу стилей)



Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. В данном учебнике мы будем использовать именно этот метод во всех примерах.

Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:

таблица стилей

Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (default.html) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:

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


Обратите внимание, как указан путь к вашей таблице стилей атрибутом href.

Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:

<html>
  <head>
    <title>
Моя первая страничка!</title>
    <link
rel="stylesheet" type="text/css" href="/style/style.css" />
  </head>
  <body>



Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.

css файл

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

Давайте посмотрим, как это сделать.


Попытайтесь сделать это сами


Откройте Notepad (или другой ваш текстовый редактор) и создайте два файла - HTML-файл и CSS-файл - такого содержания:

default.htm

<html>
  <head>
    <title>
Моя первая страничка!</title>
    <link
rel="stylesheet" type="text/css" href="/style.css" />
  </head>
  <body>
    <h1>
Моя первая таблица стилей</h1>
  </body>
</html>




style.css

body{
  background-color:#FF0000;
}




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

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

style css


Поиск
Календарь
«  Октябрь 2017  »
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
3031
Архив записей

rss
Яндекс.Метрика Каталог@Mail.ru - каталог ресурсов интернет