Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

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.

.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 красный цвет. Для этого в таблице стилей напишем новое правило:

h2 {color:#FF0000;}

Обратите внимание это правило мы прописали только в таблице стилей, не добавляя ничего в код наших 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 (ов) привлекающих внимание. Скачать бесплатно.

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

 

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


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


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

Комментарии добавил(а): Олег Гузь
Дата: 2009-10-23

Андрей! Какой у Вас замечательный сайт! Я уже вторую неделю регулярно им пользуюсь: изучаю Ваши уроки,и видеоуроки; читаю Вашу литературу и скачиваю программы; делаю первые шаги в веб-программировании! И, что самое главное, у меня получается!!! А я ведь совсем не физик, а лирик! И в этом может убедиться каждый, кто посетит мой литературный сайт: " СТИХИ ОЛЕГ ГУЗЬ " Мои реквизиты: электронная почта: STIHI100@rambler.ru сайт: http://sites.google.com/site/stihiolegguz/

Комментарии добавил(а): Константин Гусев
Дата: 2010-04-19

Спасибо, Андрей! Прекрасный сайт. После хождения по сайту и чтения статей, многое становится ясным. И от полного новичка потихоньку перехожу к человеку, который уже что-то умеет и знает. Мой сайт: http://www.domurok.narod.ru/, мой адрес: domurok@yandex.ru

Комментарии добавил(а): Надежда
Дата: 2012-02-10

Спасибо. Нашла то, что долго искала. Главное очень-очень понятно, даже новичку.

Комментарии добавил(а): Надежда
Дата: 2012-02-10

Спасибо. Нашла то, что долго искала. Главное очень-очень понятно, даже новичку.

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

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

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


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


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

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

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

Книги

Украшения

Сайт от А до Я

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

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

Охрана труда

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

PHP УРОКИ

Услуги

Скрипты

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

SEO

jQuery

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

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

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

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

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Видео Курс по созданию
Информационного Бизнеса в Интернете
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


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

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

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

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

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

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

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

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

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

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

Деревянные дома от СПК "Ванда"

Наши ссылки

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

QR код сайта www.LuksWeb.ru

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


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

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT