День 23. Галопом по Европам
Итак, переходим теперь непосредственно к применению CSS. Разбирать будем его пошагово,по мере употребления различных элементов в коде.
Чтобы было к чему нам эти элементы применять давайте сразу определимся с кодом примера:
<html>
<head>
<title>Форматирование текста средствами CSS</title>
<link href="mystyle.css" rel="stylesheet" />
</head>
<body>
<h1><span>Форматирование текста средствами CSS</span></h1>
<p class="epigraf">Главное в жизни - семья и дом. И эпитаксия.</p>
<h2>Физические основы эпитаксиальной технологии</h2>
<p>Промышленный прогресс в эпитаксиальной технологии в настоящее время связан с процессом эпитаксии
кремния из газовой формы. Поэтому рассмотрение методов получения эпитаксиальных слоев кремния из
газовой фазы, как промышленных, так и находящихся в стадии лаборыторных исследований, приобретает особое значение.
Первые работы по использованию процесса эпитаксии кремния в технологии микроэлектроники появились в начале
1960 г. В ряде случаев этот процесс пришел на смену процесса диффузии, занимавшего до недавнего времени
доминирующее положение при создании изотипных и<a href="#"> p-n переходов.</a> </p>
</body>
</html>
Обратите внимание, у меня уже типа подключена таблица стилей mystyle.css. Вы тоже можете сразу ее внести в код, браузер, не найдя ее в папке, просто ее забанит.
Также посмотрите внимание на парметры ссылки. Там указан атрибут href="#". Это значит, что при переходе по ссылке никакого переброса не будет, вы просто останетесь на той же странице.
Итак, давайте же теперь начнем форматировать текст. Начнем, например, с определения параметров абзаца.
Для этого создаем файл mystyle.css и вносим туда запись типа
p { text-align: justify; }
Смотрим на результат. Текст выравнился, что называется, по ширине. Но вы, естественно, можете выравнять его по center, left или right.
Теперь, допустим, поменяем шрифт. Для этого добавим кое что:
p { text-align: justify;
text-family: monospace; }
Смотрим... Шрифт изменился на моноширинный. Здесь в качестве значений могут выступать как конкретные шрифты, так и семейства шрифтов. Собственно, monospace - это семейство шрифтов. Семейством называют набор шрифтов, объединенных
общим стилем, элементами и так далее... Всего есть пять семейств: monospace, serif, sans-serif, cursive и fantasy.
Дальше давайте поменяем цвет текста и цвет фона. Добавляем запись:
p { text-align: justify;
text-family: monospace;
background-color: rgb(232, 142, 234);
color: red; }
Я думаю, вы догадаетесь, что здесь за что отвечает, поэтому отмечу лишь один новый для себя момент. Посмотрите на способ задания цвета. Это мое новшество, я такого еще никогда не делал. Оказывается, что цвет можно указывать, используя формат rgb(x,x,x), где вместо иксов стоит насыщенность того или иного цвета. Посмотрел я их в paint'е, в палитре, там в колонке
слева указаны насыщенности основных цветов в текущем.
Ах, да, пока не забыл. Все вот эти параметры наследуются. То есть мы вот все указываем для элемента р, соответственно, эти самые параметры применяться ко всем элементам p, которые будут внутри body. Если нам нужно определить стиль для какого-то параметра отдельно, то следует поступить так:
p.exclusive { text-align: justify;
text-family: monospace;
background-color: rgb(232, 142, 234);
color: red; }
А потом при объявлении самого исключительного абзаца нужно сделать так:
<p class="exclusive">
Вот к этому абзацу и применится стиль exclusive.
Так, продолжаем форматировать.
Можем поменять толщину текста
p {
text-align : justify;
font-family : monospace;
font-weight: 900;
}
Понятно, какой элемент отвечает за это? Он может принимать любые значения от 100 до 900, но только в сотнях.
Сейчас изменим размер шрифта:
p {
text-align : justify;
font-size : 1pc;
font-family : monospace;
font-weight: 900;
}
В качестве единиц измерения могут использоваться следующие величины: pt- типографский пункт(1/7 дюйма), in- дюйм, pc - 12 пунктов, cm- сантиметр, mm - миллиметр. Это только некоторые из них, но наиболее распространенные.
Итог.
Так, что я еще такого сегодня узнал... Хм... Надо экспериментировать, друзья. Находить новые элементы языка CSS и пробовать их применять, вот что я вам скажу. Пожалуй, этим я и займусь в ближайшие пару дней. Вы тоже можете заняться этим, а потом
рассказать о новых элементах мне.
До завтра, друзья.
Комментариев нет:
Отправить комментарий