2 Урок. Создание набора правил в CSS.
Автор: Андрей Краснокутский
Дата: 2009-02-16 Как создавать стили в CSS.
В первом уроке мы подготовили с Вами наши файлы (код файлов) для придания им дизайна с помощью CSS. Внешний вид элементов на странице изменяется с помощью правил которые прописываются в таблице стилей style.css .
Правило (набор правил) - это утверждение сообщающее браузеру, как отображать элементы на HTML-странице. Набор правил состоит из селектора, за которым следует блок объявлений. Внутри блока объявлений может быть одно или несколько объявлений, каждое из которых содержит свойство и значение.
При создании набора правил первым этапом является выбор селектора, к которому будут применяться данные правила. Взгляните на рисунок 1:

Рисунок 1.
Здесь мы выбираем элемент <p> т.е. абзац и придаем ему сдедующие правила отображения:
-
font-famile: Verdana, Arial; - говорит браузеру что текст в абзацах отбображать шрифтом Verdana или Arial;
-
font-size: 12px; - говорит браузеру что шрифт должен быть размером 12px;
-
color: #000000; - говорит браузеру, что шрифт должен черного цвета;
-
margin: 15 px; - говорит браузеру, что отступы по краям (сверху, снизу, слева и справа от текста заключенного в абзаце) должны быть 15рх;
Обратите внимание, что теперь эти свойства будут применены ко все страничкам к которым привязана данная таблица стилей. Т.е. если мы изменем например цвет шрифта с черного на темно синий, то цвет изменится абсолютно на всех страницах. В настоящее время у нас таких страничек пять, а к примеру если таких html-страниц 50 или 500. Чувствуете всю мощь CSS......
Записи вида А и вида В абсолютно равнозначны, здесь пишут кому как удобнее, например я придерживаюся записи вида В, просто так код более удобочитаем. В дальнейшем мы будем писать правила в таблице стилей именно в форме вида В.
Пропишите это правила в таблице стилей и посмотрите как измениться шрифт заключеный в теги абзаца <p></p> на всех наших страницах. Я в нашей таблице стилей пропишу цвет шрифта темно синий т.е. color:#000066; . Вам я думаю будет интересно попробовать разные значения всех значений в этом правиле. Попробуйте изменить размер шрифта, цвет, отступ - посмотрите как и что изменяется на страницы и остановитесь на наиболее понравившемся варианте.
Проводить эксперементы с изменением цвета (не только шрифта) очень удобно спомощью бесплатной програмки HTML Colors. Её Вы сможите найти и скачать в разделе Инструментарий.
А теперь допустим нам срочно понадобилось например выделить третий абзац красным цветом, увеличить в этом абзаце шрифт и сделать его жирным. Для этого прописываем новое правило в таблице стилей.
Совет. Для того чтобы в дальнейшем самим было легче разобраться с таблице стилей, давайте этим стилям осмысленные названия. Раз это у нас будет правило для абзаца да еще шрифт в нем будет красного цвета, дадим этому правилу имя .red .
Листинг 2.1.
.red {font-family:Verdana, Arial;
font-size:16px;
color:#FF0000;
margin:15px;
font-weight: bold;
}
|
|
Теперь открывает код нашего файла в котором мы хотим изменить внешний вид какого-то элемента (контейнера) в данном случае мы решили, что это будет 3-й абзац на странице index.html и в теге <p> прописываем данный класс таким образом: class="red". Если раньше в этом контейнере было прописано только вырвнивание по ширине, то теперь эта запись выглядит так:
<p align="justify" class="red">
|
|
Все мы присвоили третьему абзацу новый класс red со своими свойствами.
Обратите внимание - написание этого правила начинается с . (точки) . Почему именно с точки?
В CSS существует как бы две возможности, которые Вам надо просто принять и запомнить:
1. CSS дает возможность изменять внешний вид готовых тегов (переопределять значения) - это мы делали в первом случае с тегом абзаца <p> .
2. CSS дает возможность создавать собственные правила (классы) для элементов (тегов) - это мы сделали во втором случае, присвоив тегу <p> новый класс "red".
Класс class="red" мы можем применить к любому элементу (тегу) на html-странице.
Для лучнего понимания давайте поработаем с заголовками на наших страницах.
Как Вы помните из преведущих уроков текст заголовков у нас был заключен в теги <h2></h2>. Сейчас наши заголовки отображаются на странице высотой h2, черным цветом и жирным начертанием. Придадим этим заголовкам (изменим внешний вид) как и в уроках по HTML красный цвет. Для этого в таблице стилей напишем новое правило:
Обратите внимание это правило мы прописали только в таблице стилей, не добавляя ничего в код наших html-страниц...... и заголовки на всех страницах изменили свой цвет с черного на красный.
Теперь создадим новое правило для заголовков h2 : нам вдруг понадобилось на странице про БМВ уменьшить размер заголовка и сделать его зеленым. Создаем в таблице стилей новый класс:
Листинг 2.2.
.green {
font-family:Verdana, Arial;
font-size:14px;
color: green;
}
|
|
Теперь присваиваем на странице bmw.html заголовку h2 данный класс и получаем для этого заголовка следующий код:
<h2 align="center" class="green">Обзор автомобилей БМВ 2008 года.</h2>
|
|
Вот что у нас получилось на этой странице, сравните с заголовками на других страницах. Мы присвоили этот класс только зоголовку и можем присвоить этот класс любому элементу.
Теперь вы знаете каким образом элементам html-страницы (тегам, иногда говорят контейнер) присваиваются новые классы и переопределяются существующие классы.
Качайте и читайте так же:
Как сделать иконку (пиктограмму) сайта.
pdfFactory Pro - одна из лучших программ для создания PDF документов . Создает электронные книги в PDF формате из WORD файлов.
"Как сделать книгу в PDF формате". Практическое руководство. Скачать бесплатно.
Всплывающие окна PopUp (ы) - эффективный инструмент для привлечения посетителей на сайт и увеличения продаж.
Практическое руководство по созданию PopUp (ов) привлекающих внимание. Скачать бесплатно.
Как быстро создавать свои востребованные информационные товары?
Просмотров: 17519
Андрей! Какой у Вас замечательный сайт! Я уже вторую неделю регулярно им пользуюсь: изучаю Ваши уроки,и видеоуроки; читаю Вашу литературу и скачиваю программы; делаю первые шаги в веб-программировании! И, что самое главное, у меня получается!!! А я ведь совсем не физик, а лирик! И в этом может убедиться каждый, кто посетит мой литературный сайт: " СТИХИ ОЛЕГ ГУЗЬ " Мои реквизиты: электронная почта: STIHI100@rambler.ru сайт: http://sites.google.com/site/stihiolegguz/
Спасибо, Андрей!
Прекрасный сайт. После хождения по сайту и чтения статей, многое становится ясным. И от полного новичка потихоньку перехожу к человеку, который уже что-то умеет и знает. Мой сайт: http://www.domurok.narod.ru/, мой адрес: domurok@yandex.ru
Спасибо. Нашла то, что долго искала. Главное очень-очень понятно, даже новичку.
Спасибо. Нашла то, что долго искала. Главное очень-очень понятно, даже новичку.
|