RSS-лента

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.

Теперь открывает код нашего файла в котором мы хотим изменить внешний вид какого-то элемента (контейнера) в данном случае мы решили, что это будет 3-й абзац на странице index.html и в теге <p> прописываем данный класс таким образом: class="red". Если раньше в этом контейнере было прописано только вырвнивание по ширине, то теперь эта запись выглядит так:

Все мы присвоили третьему абзацу новый класс red со своими свойствами.

Обратите внимание - написание этого правила начинается с . (точки) . Почему именно с точки?

В CSS существует как бы две возможности, которые Вам надо просто принять и запомнить:

1. CSS дает возможность изменять внешний вид готовых тегов (переопределять значения) - это мы делали в первом случае с тегом абзаца <p> .

2. CSS дает возможность создавать собственные правила (классы) для элементов (тегов) - это мы сделали во втором случае, присвоив тегу <p> новый класс "red".

Класс class="red" мы можем применить к любому элементу (тегу) на html-странице.

Для лучнего понимания давайте поработаем с заголовками на наших страницах.

Как Вы помните из преведущих уроков текст заголовков у нас был заключен в теги <h2></h2>. Сейчас наши заголовки отображаются на странице высотой h2, черным цветом и жирным начертанием. Придадим этим заголовкам (изменим внешний вид) как и в уроках по HTML красный цвет. Для этого в таблице стилей напишем новое правило:

Обратите внимание это правило мы прописали только в таблице стилей, не добавляя ничего в код наших html-страниц...... и заголовки на всех страницах изменили свой цвет с черного на красный.

Теперь создадим новое правило для заголовков h2 : нам вдруг понадобилось на странице про БМВ уменьшить размер заголовка и сделать его зеленым. Создаем в таблице стилей новый класс:

Листинг 2.2.

Теперь присваиваем на странице bmw.html заголовку h2 данный класс и получаем для этого заголовка следующий код:

Вот что у нас получилось на этой странице, сравните с заголовками на других страницах. Мы присвоили этот класс только зоголовку и можем присвоить этот класс любому элементу.

Теперь вы знаете каким образом элементам html-страницы (тегам, иногда говорят контейнер) присваиваются новые классы и переопределяются существующие классы.

Качайте и читайте так же:

Как сделать иконку (пиктограмму) сайта.

pdfFactory Pro - одна из лучших программ для создания PDF документов . Создает электронные книги в PDF формате из WORD файлов.

"Как сделать книгу в PDF формате". Практическое руководство. Скачать бесплатно.

Всплывающие окна PopUp (ы) - эффективный инструмент для привлечения посетителей на сайт и увеличения продаж.

Практическое руководство по созданию PopUp (ов) привлекающих внимание. Скачать бесплатно.

Как быстро создавать свои востребованные информационные товары?

Просмотров: 13037

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Добавить Ваш комментарий:

Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

С нами сделать сайт сможет даже Ребёнок! "Сайт от А до Я" Узнать сейчас >>> Хотите заработать? 2-х Уровневая Партнерская программа! Присоединяйтесь.

Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

Наши Аттестаты

Проверить аттестат

Проверено Z-PAYMENT