Блог Тимура Казанского

Урок 2. Стили CSS в HTML


Чтобы отобразить страницу в интернете, одного языка html будет не достаточно, так как, язык «HTML(HyperText Markup Language)» – это язык гипертекстовой разметки, который отвечает за структуру сайта, а за дизайн отвечает язык «CSS(Cascading Style Sheets)», поэтому необходимо выучить два языка, не переживайте язык CSS не сложный, в чем вы скоро сможете убедиться сами. В этом уроке мы поговорим о стилизации и усовершенствуем нашу анкету, которую мы с вами написали на прошлом уроке. И так, чтобы приступить к стилизации нашей с вами анкеты нам потребуется добавить новый элемент <style> в шапку анкеты (элемент «head», помните? если нет, то перечитайте Урок 1. Как создать HTML страницу?) как я уже говорил на прошлом уроке, элемент это открывающий тег + содержимое + закрывающий тег, а атрибут обеспечивает элемент информацией. Давайте посмотрим на следующий пример:

<html>
<head>
<title>Анкета пользователя - Иванова Ивана Ивановича</title>
<style>
body {
background-color: yellow;
}
body h1,h2 {
text-align: center;
color: red;
}
body h3 {
text-align: center;
color: blue;
}
</style> </head>
<body>
<h1>Добро пожаловать на анкету пользователя!</h1>
<p>Ниже, вы можете прочитать персональные данные пользователя!</p>
<img src="photo.jpg" title="Фотография пользователя" alt="Фотография пользователя">
<lu>
<li><b>Имя:</b> Иван</li>
<li><b>Фамилия:</b> Иванов</li>
<li><b>Отчество:</b> Иванович</li>
</lu>
<h2>Краткий рассказ о себе</h2>
<p><em>Я родиля и живу в г.Москва</em>, работаю инженером, люблю путешествовать, обожаю живопись, книги и свою собаку!</p>
<h3>Увлечения</h3> <p>С недавних пор у меня появилось новое хобби - <ins>создание веб-сайтов</ins>, вернее я хочу созлавать их и поэтому начал изучение языка html и вот, как выглядит каркас данного языка:</p>
<code>
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;/code&gt;
&lt;/body&gt;
&lt;/html&gt;

Открываем код в браузере и видим:

Пример анкеты после применения стиля css

Вы можете также посмотреть анкету здесь и скачать код отсюда.

Посмотрите на изменения: фон анкеты стал желтым, заголовки стали красными и отображаются в середине страницы, нижний подзаголовок помечен синим цветом и все это благодаря «css», а теперь давайте подробно разберем код, с помощью которого произошли все эти изменения:

<style>открываем тег style
body {определяем стили для тела страницы, для этого мы открываем фигурные скобки
background-color: yellow;определяет цвет анкеты желтым цветом.
}после того как стили определены, не забудьте закрыть фигурные скобки
body h1,h2 {в этом блоке кода мы определяем стили для заголовков <h1>,<h2> тела страницы
text-align: center;выставляем заголовки по центру
color: red;и помечаем заголовки красным цветом
}закрываем фигурную скобку
body h3 {а это стиль для заголовка третьего уровня
text-align: center; также определяем, чтобы заголовок находился по центру
color: blue; и придаем ему синий цвет
}закрываем фигурную скобку, это означает, что мы закончили с определением стиля для данного элемента html
</style>закрываем тег style

Посмотрите на анкету еще раз, как вы уже заметили появился новый элемент заголовка третьего уровня <h3>, чем выше уровень – тем меньше шрифт заголовка, а всего уровней 6, т.е. самый большой заголовок – это <h1>, а самый маленький <h6>.

В анкете появился новый абзац (элемент <p>) в котором говорится о каркасе html, так вот представьте себе этот каркас, как только что построенный двухэтажный дом, который нужно снабдить мебелью и различными вещами, весь дом – это все что находится между тегами <html>, второй этаж или чердак – это все что находится в тегах <head>, а первый этаж – это все, что между тегами <body>. А теперь давайте укомплектуем первый этаж нашего дома мебелью, такой как: <h1>,<h2>,<h3>,<p>,<code> и т.д. Отлично, мебель есть, но она вся одного цвета и не расставлена, давайте исправлять? Окей, пусть этим займется дизайнер по имени CSS, но, как указать ему, какую именно мебель нужно покрасить в красный цвет, а какую в синий, и куда поставить мебель <h1> или вообще оставить все, как есть? Все просто, говорим дизайнеру - мебель <h1> и <h2> на первом этаже(ага, берем этаж body и мебель h1,h2) покрасить в красный цвет(color: red;) и поставить её в центр комнаты(text-align: center;), так мебель покрасили, расставили, а саму комнату на первом этаже нет, давайте исправлять! Говорим дизайнеру – покрась пожалуйста все стены нашего первого этажа(дизайнер делает отметку – body) в желтый цвет(и рядом делает пометку, фон: желтый т.е. background-color: yellow;). Ну что, ничего сложного, правда?

Обьяснение css в html на примере дома

А сейчас мы разберем пару новых элементов html, которые я добавил к анкете:

В теге «<code>» мы указываем программный код, который хотим показать на нашем сайте, но, обязательно помните, что если мы не пометим теги кода специальными аббревиатурами(ссылками на символы), то они будут интерпретироваться, как действующий код. Поэтому аббревиатура символа «<» обозначается, как «&lt;», а для символа «>», как «&gt;», т.е. тег «<h1>» нужно пометить, как «&lt;h1&gt;», иначе откуда браузеру знать, то ли это заголовок, а то ли текст, который нужно отобразить. А, как тогда отобразить сами ссылки на символ - «&lt;» и «&gt;» спросите вы? Очень просто, нам нужно только отобразить символ «&» с помощью ссылки «&amp;», а у «&gt;» наоборот удалить символ «&», и получится так: «&amp;gt;» Элемент <em> отвечает за подчеркивание текста. И последний элемент, с которым мы еще не знакомы – это элемент «<br />», он отвечает за перенос строки, для наглядности разберем следующую запись: «<p> С недавних пор у меня появилось новое хобби </p>» - отобразится, как непрерывная строка, а вот запись «<p> С недавних пор <br /> у меня появилось <br /> новое хобби </p>», отобразится, как:

«С недавних пор
у меня появилось
новое хобби»

Попробуйте написать и отредактировать свою анкету, а часть написанного кода, заключите в тег «<code>» и отобразите его. На сегодня все. Не пропустите следующие уроки, дальше будет только интереснее!

Категория: Уроки HTML для чайников

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0