УРОКИ CSS для начинающих. Базовый курс.


Урок 4. Определяем свойства для тегов.

Вот мы и подошли непосредственно к тому, что можно делать с помощью таблиц стилей.

Самое простое - задавать тегам некоторые свойства.

Например, зададим свойства тегу <h1>.

В открытом в "Блокноте" файле style.css пишем следующее:

Листинг 4.1.

h1 {
font-size : 48px;
font-family : "Times New Roman", Times, serif;
color : #008000;
text-align : center;
vertical-align : middle;
}

Разберём, что мы написали.

Во-первых, указали тег, для которого определяем стиль (<h1>).

Стили записываются в фигурных скобках: { … }

Запись стиля состоит из свойства и значения. Например, в строке

font-size : 48px;

font-size - свойство шрифта (размер), а 48px - значение, в данном случае конкретная величина - 48 пикселей.

Свойство font-family определяет начертание шрифта ("Times New Roman", Times, serif, где serif означает любой шрифт с засечками - на случай, если перечисленных в списке шрифтов не окажется на компьютере пользователя);

свойство color - цвет (#008000 - зелёный);

свойство text-align - выравнивание по горизонтали (center - по центру ячейки или страницы);

свойство vertical-align - выравнивание в ячейке по вертикали (middle - по центру ячейки).

Обратите внимание: каждая строка в таблице заканчивается точкой с запятой!

Чтобы не застревать в теории и не загромождать текст, я не стану здесь подробно рассказывать обо всех свойствах и их возможных значениях. С ними Вы можете ознакомиться в справочнике по каскадным таблицам стилей, который можно свободно скачать здесь. Кроме того подробно о каждом свойстве будет рассказано в дальнейших уроках.

Сохраните результат, откройте файл index.html в браузере. Название сайта теперь зелёным цветом, размер шрифта 48px, расположено по центру ячейки:

Уроки css для начинающих
Рис. 4

Если Вы перейдёте на страницу о породах, то увидите, что с названием сайта и на ней произошло то же самое.

Итак, определив стиль для тега h1 и прописав его только в файле стилей, мы получили одинаковый вид для однотипного элемента - названия сайта - на всех страницах сайта.

Сделаем то же самое для некоторых других элементов страницы.

Переходим в файл стилей в "Блокноте" и дописываем следующее:

Листинг 4.2.

……
h3 {
font-size : 16px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight : bold;
text-decoration : underline;
color : #008000;
text-align : center;
}
table {
border : solid;
border-color : Blue;
border-width : 2px;
}
td {
border : solid;
border-color : Blue;
border-width : 1px;
}

Здесь мы задали стили для тегов <H3>, <table> и <td>.

Сохраните результат и обновите страницу в браузере. Заголовок статьи, заданный тегом <H3>, стал зелёным, начертание шрифта изменилось на Verdana, также изменился размер шрифта, а текст стал подчёркнутым. Вокруг всей таблицы и каждой ячейки появилась рамка:

Уроки css для начинающих
Рис. 5

Перейдите на страницу о породах и убедитесь, что там произошло то же самое.

Итак, теперь Вы можете самостоятельно задавать стили для всех тегов. Для упрощения работы и пока ещё не выучили все свойства и значения, желательно пользоваться справочником. В нём же Вы познакомитесь со всеми свойствами стилей и их возможными значениями, так как я не объясняю их здесь, чтобы не загромождать уроки теорией.

Успехов. И до встречи на следующем уроке >>>>>>>

Важно! Те уроки по CSS, что выложены на нашем сайте - это очень далеко не всё, что следует знать по каскадным таблицам стилей. К тому же, web-технологии постоянно развиваются! Поэтому рекомендую скачать бесплатно видеоуроки по CSS, в которых вы найдёте много нового, соответствующего современным стандартам сайтостроения.

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

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

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

Новые статьи

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

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

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта




35 - 1 - 22