Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Учебник CSS

Учебник по языку форматирования — CSS

Урок №1
Используем CSS в HTML-документе
Учебник по CSS, для начинающих и продолжающих.

Прежде чем начать изучать язык CSS, вы должны обладать хотя бы минимальными знаниями о языке HTML: понимать, что такое HTML-документ, голова HTML-документа, тело HTML-документа, HTML-тег, атрибут HTML-тега, значение атрибута и т.д.

CSS — это язык форматирования, с помощью него, тегам языка HTML (абзацам, заголовкам, фотографиям, ссылкам, кнопкам и т.д.) назначают различные CSS-свойства, благодаря которым, у тегам можно назначать такие параметры как: цвет, фон, размеры, высота, ширина, отступы, границы, положение, прозрачность и мн.др.

Форматирование — это изменение внешнего вида.

В данном учебнике по CSS, мы будем рассматривать последнюю, третью версию языка — CSS3

Внедряем CSS-код в HTML-документ

Для начала, внедрим CSS-код в HTML-документ. Допустим, у нас есть файл index.html, в нём содержится следующий HTML-документ:

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Открыв в браузере файл index.html вы получите следующее.

С помощью CSS, мы можем изменить внешний вид любых тегов, в нашем примере мы изменим внешний вид заголовка h1 и абзацев p. Разместите в голове HTML-документа следующий код, я выделил его красным цветом:

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
  <style>
   h1 {
    color: white;
    background-color: green;
   }
   p {
    color: orange; 
    font-size: 20px;
   }
  </style>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Открыв в браузере файл index.html вы должны увидеть следующее.

Как вы можете увидеть, благодаря языку CSS мы смогли изменить внешний вид заголовка и абзацев. Текст заголовока стал белым, а его фон зелёным, шрифт у абзацев увеличился и стал оранжевым.

Посмотрите еще раз на CSS-код, который мы внедрили в HTML-документ:

h1 {
 color: white;
 background-color: green;
}
p {
 color: orange;
 font-size: 20px;
}

На этом первый урок учебника по CSS, окончен. В следующем уроке мы подробно разберём CSS-код и узнаем из каких частей он состоит.

Читать далее: Разбираем CSS-код

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget