Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Создание набора правил в CSS.

Viktor | 24.02.2014 | нет комментариев

Как создавать стили в 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”>

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

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

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

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

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

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

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

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

h2 {color:#FF0000;}

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

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

Листинг 2.2.

.green {
font-family:Verdana, Arial;
font-size:14px;
color: green;
}

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

<h2 align=”center”>Обзор автомобилей БМВ 2008 года.</h2>

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

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

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB