Используем CSS в HTML
Используем язык 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-код