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

Разбираем CSS-код

Разбираем код языка CSS внедренного в HTML-документ

Урок №7
Разбираем код языка CSS
Разбираем CSS-код, внедрённый в HTML-документ.

В предыдущем уроке мы выяснили, что такое CSS и внедрили его код в HTML-документ. В этом уроке мы узнаем, что означает каждая часть CSS-кода.

Схема CSS-кода, выглядит следующим образом:

имяТега { CSS-свойство: значение; }

Наш внедренный в HTML-документ, CSS-код выглядит так:

h1 {
 color: green;
 font-family: Arial; 
}

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

Фигурные скобки нужны для того, чтобы обозначить начало и конец CSS-свойств, предназначенных для тега, в нашем случае, для тега h1

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

font-family: Arial;вторая строка, идущая после открывающей фигурной скобки, где
font-family — это CSS-свойство, означающее какое имя должно быть у шрифта,
Arial — это значение CSS-свойства, означает что имя шрифта должно быть Arial

Обратите внимание на то, что после CSS-свойств вы должны ставить двоеточие :, а после значений вы должны ставить точку с запятой ;

Давайте теперь назначим CSS-свойства, абзацам p страницы. Добавьте следующий CSS код в HTML-документ:

p {
 color: blue;
 font-size: 19px;
 width: 60%;
}

Ваш HTML-документ, теперь должен выглядеть следующим образом:

<html>
 <head>
  <title>Страница о снежном барсе</title>
  <style>
   h1 {
    color: green;
    font-family: Arial;
   }
   p {
    color: blue;
    font-size: 19px;
    width: 60%;
   }
  </style>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <img src="irbis.jpg">
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

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

Обратите внимание на то, что цвет текста абзацев стал синим, размер шрифта увеличился, а ширина абзацев стала равна 60% ширине браузера.

Рассмотрим CSS-свойства назначенные абзацам p
color: blue;первая строка, идущая после открывающей фигурной скобки, где
color — это CSS-свойство, означающее цвет,
blue — это значение CSS-свойства, означает что цвет должен быть синим.

font-size: 19px;вторая строка, идущая после открывающей фигурной скобки, где
font-size — это CSS-свойство, означающее размер шрифта,
19px — это значение CSS-свойства, означает что размер шрифта должен быть равен 19 пикселей.

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

Читать далее: Добавляем ссылку на HTML-страницу

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

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

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

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

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