Используем CSS в HTML


Используем язык CSS в HTML-документе

Урок №6
Используем CSS-код на html странице
Используем CSS в HTML-документе.

В этом уроке мы будем использовать язык CSS, в нашем HTML-документе. В современном сайтостроении язык CSS стал неотъемлемой частью языка HTML, в будущем их скорее всего объединят в единую технологию, поскольку они эффективно взаимодополняют друг друга.

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

CSS — это язык форматирования. Форматирование — это изменение внешнего вида.

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

В этом уроке, мы затронем лишь начальные аспекты языка CSS. Для того чтобы узнать о нём более подробно, прочитайте мой учебник по CSS, который находится на этом же сайте.

Внедряем CSS с помощью тегов <style> </style>

Один из способов внедрения CSS-кода в HTML-документ, является внедрение при помощи тегов <style> </style>, эти теги обычно размещают в голове HTML-документа (между тегами <head> </head>).

Между тегами <style> </style> помещают CSS-код. Схема обычного CSS-кода, выглядит следующим образом:

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

Основной частью языка HTML является — тег, основной частью языка CSS является — свойство (их еще называют CSS-свойства). В языке CSS существует очень много различных свойств, в будущем, каждое из них мы изучим отдельно.

Итак, что мы имеем на данный момент? На данный момент мы имеем файл index.html, который содержит следующий код:

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

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

Давайте изменим с помощью языка CSS, цвет и шрифт заголовка. Для этого нужно вставить в голову нашего HTML-документа, теги <style> </style> и между ними написать следующий CSS-код:

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

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

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

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

До внедрения CSS, заголовок выглядел так:

Черный цвет шрифта до использования CSS.

После внедрения CSS, заголовок стал выглядеть так:

Зелёный цвет шрифта после использования CSS.

В следующем уроке, мы разберём каждую строку CSS-кода.

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


Дата публикации поста: 7 февраля 2016
Дата обновления поста: 15 октября 2014
Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

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

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