5 апреля 2010

Как сделать простую страницу HTML с таблицей стилей

wordpress для чайниковХотя сайт посвящен теме wordpress для чайников, но любому, кто хочет научится улучшать внешний вид отображаемых страниц необходимо знать основы HTML(язык гипертекстовой разметки) и CSS(каскадные таблицы стилей). Для этого я и привожу сегодняшнюю статью.
На сайте уже выложено несколько статей, объясняющие правила CSS в которых мы рассмотрели селекторы в Основы работы с селекторами CSS, Часть 1, Часть 2 и псевдоклассы Часть1 и Часть 2, а также Псевдоэлементы
Сейчас я хочу показать два простых способа проверки приведенных в статьях примеров, для тех, кто хочет научится применять правила CSS в своих целях.
Для этого вам понадобится лишь простой текстовый редактор и браузер.
Первый способ.
Для начала в редакторе создайте новое окно для редактирования файла и скопируйте в него шаблон:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Test Page</title>
<style type="text/css">
          /* здесь записываются правила CSS */
</style>
</head></p>
<p><body></p>
<p>             /* Здесь вставляем код HTML */</p>
<p></body>
</html>

Сохраните его в удобной для вас папке, например c:\test, задав ему имя test.html.
Затем выбирайте любой пример из статей по CSS. Для примера я взял псевдокласс :First-child из статьи Псевдоклассы. Часть 2. и вставил в шаблон, получив такой файл:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Test Page</title></p>
<p><style type="text/css">
    p:first-child {
	 color: red;
    }
</style></p>
<p></head></p>
<p><body>
<div>
	<p>Это параграф который отобразится красным</p>
</div>
<div id="myid">
	<h2>Заголовок</h2>
	<p>Этот параграф не отобразится красным</p>
</div></p>
<p></body>
</html>

Затем открываете ваш браузер и в командной строке вводите file:///с://test/test.html для загрузки страницы либо воспользуйтесь меню для открытия файла либо комбинацией клавиш CTRL+O.
Второй способ
Во втором примере мы разделим файл HTML и таблицу стилей. Сначала приведу файл HTML, в который мы будем вставлять код страницы и сохраним его с именем test1.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p>
<p><title>My Test Page with style.css</title></p>
<p><link rel="stylesheet" href="style.css" type="text/css" />
</head></p>
<p><body></p>
<p>             /* Здесь вставляем код HTML */</p>
<p></body>
</html>

Обратите внимаение, что файл таблицы стилей будет подключен в строке

<link rel="stylesheet"> href="style.css" type="text/css">

и должен находится в той же папке, что и test1.html
Затем создаем файл таблицы стилей который будет подключаться к файлу HTML и сохраним его с именем style.css

  p:first-child {
	 color: red;
    }

После того как вы сохраните оба файла, можете открыть file:///с://test/test1.html в окне браузера и увидите тот же результат, что и в первом примере.
Успешного вам освоения правил таблиц стилей, уважаемые читатели!

Статьи по теме
Статья оказалась полезной? Подпишись на RSS рассылку или следуй за мной на твиттере @wpstarter или по этой ссылке wpstarter
Рубрика: песочница

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

Обведите фигуру по линии:

Ставим WordPress на локальном копьютере