Давайте создадим простую HTML страничку.
Откроем Блокнот или другой текстовой редактор, например Notepad++ , и внесём следующий текст:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>
<body>
Тут любой текст.
</body>
</html>
Сохраним этот документ в какую-нибудь папку с именем: indexcss.html.
У нас получился файл с раширением HTML, т. е. файл который способен открыть и показать любой браузер, такой как Mozilla Firefox, Opera, Internet Explorer, и др. Простыми словами мы создали Web-страничку с минимальным набором тэгов. Но наша с Вами задача изучить CSS , а потому сейчас мы с Вами будем заполнять эту страничку разными примерами текста и задавать для неё каскадные таблицы стилей, которые будут влиять на внешний вед текста этой странички.
Первым делом мы должны подключить к этой страничке некий файл с таблицами стилей.
Для этого сразу после тэга <title> вставляем новый одиночный тэг <link> .
К этому тегу приписываем атрибуты: href="css/style.css" type="text/css" rel="stylesheet" .
Откройте документ indexcss.html при помощи блокнота или другого текстового редактора для редактирования, скопируйте строчку :
<link href="css/style.css" type="text/css" rel="stylesheet" >
и вставьте в наш документ следующей строкой после тэга <title></title>.
Вот что у Вас должно получиться:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<link href="css/style.css" type="text/css" rel="stylesheet" >
</head>
<body>
Тут любой текст.
</body>
</html>
Если мы откроем данную страничку в браузере, то ничего не изменится, потому что мы этой строкой лишь указали браузеру где смотреть стили, но не создали сам файл, в папке
css содержащий стили, а потому мы сейчас должны создать в той же папке, где расположена наша минимальная HTML - страничка, папку css, а самой папке css создадим файл
style.css.
Открываем опять же в любом текстовом редакторе, например в Блокноте, новый текстовый документ и и сохраняем его в виде файла:
style.css, обязательно в папку с именем
css.
Пока файл
style.css оставим пустым и заполним нашу html-страничку некоей информацией с тегами html, что бы потом с помощью файла стилей изменить внешний вид этих самых тэгов.
Нам понадобятся несколько известных тегов html таких как тег абзацев <p></p>, тэг заголовков <h1></h1> и тег например списка
<ol>
<li></li>
<li></li>
<li></li>
</ol>
Вставим следующие строчки в наш HTML документ между тегами <body></body>:
<h1> Заголовок первого уровня </h1>
<br> <!-- сделаем переход на следующую строку что бы заголовки были друг под другом. -->
<h2> Подзаголовок </h2>
<p> Тут любой текст. Это первый абзац текста, например. Как сообщает пресс-служба Херсонской ОГА, начиная с 11 марта, в целом по
области в акции приняли участие 210 тыс. человек. Было ликвидировано
1068 стихийных свалок, благоустроено 542 парка и сквера, 15175 тыс.
кв.м. придомовых территорий, 478 братских могил, мемориальных
комплексов, мест почетных захоронений, убрано 719 кладбищ, высажено 58,7
тыс. саженцев деревьев, 21,1 тыс. кустарников, отремонтировано 429
детских площадок, проведено благоустройство придорожных зеленых зон,
побелены стволы деревьев и бордюры.
</p>
<p>
Это второй абзац текста. Например. "Однако, несмотря на завершение двухмесячника по благоустройству,
областная государственная администрация призывает жителей Херсонщины
продолжать поддерживать чистоту и порядок на территории области", -
говорится в сообщении.
</p>
Вот , что у нас получиться:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<link href="css/style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<h1> Заголовок первого уровня </h1>
<br> <!-- сделаем переход на следующую строку что бы заголовки были друг под другом. -->
<h2> Подзаголовок </h2>
<h3> Заголовок пункта </h3>
<p>
Тут любой текст. Это первый абзац текста, например. Как сообщает
пресс-служба Херсонской ОГА, начиная с 11 марта, в целом по
области в акции приняли участие 210 тыс. человек. Было ликвидировано
1068 стихийных свалок, благоустроено 542 парка и сквера, 15175 тыс.
кв.м. придомовых территорий, 478 братских могил, мемориальных
комплексов, мест почетных захоронений, убрано 719 кладбищ, высажено 58,7
тыс. саженцев деревьев, 21,1 тыс. кустарников, отремонтировано 429
детских площадок, проведено благоустройство придорожных зеленых зон,
побелены стволы деревьев и бордюры.
</p>
<p>
Это второй абзац текста. Например. "Однако, несмотря на завершение двухмесячника по благоустройству,
областная государственная администрация призывает жителей Херсонщины
продолжать поддерживать чистоту и порядок на территории области", -
говорится в сообщении.
</p>
</body>
</html>
