Главная
Блог разработчиков 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
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB