Каскадные таблицы стилей 2

В нашем курсе мы рассмотрим уроки CSS - т.е. уроки технологии, одной из самой важной при верстке веб-страниц.

В этом уроке мы оформим нашу web-страничку, чтобы она стала более разноцветной (рисунок 1).

Рисунок 1

Прежде, чем перейти к оформлению страниц, изучим, как задается цвет в web

1. Определение цветов. Уроки CSS

При определении цветов для документа HTML можно использовать либо названия цветов, либо их шестнадцатеричные коды. Система шестнадцатеричного кодирования основана на трех компонентах - красном (Red), зеленом (Green) и синем (Blue), отсюда и ее название RGB, по первым буквам названий этих цветов. Каждый из компонентов соответствует шестнадцатеричному числу от 00 до FF (0 и 255 в десятичной системе счисления). Эти три значения затем объединяются в одно значение, которому предшествует знак #, например #800080, что соответствует фиолетовому цвету.

В таблице приведены названия некоторых цветов и их коды. Более полные таблицы цветов и их коды можно просмотреть в папке colors , расположенной в папке CD .

Цвет		Цвет
Black (черный)		Silver (серебряный)
Maroon (темно-бордовый)		Red (красный)
Green (зеленый)		Lime (известь)
Olive (оливковый)		Yellow (желтый)
Navy (темно-синий)		Blue (синий)
Purple (фиолетовый)		Fuchia (фуксия)
Teal (темно-зеленый)
Gray (серый)		White (белый)

Таблица безопасных цветов для разработки дизайна сайта

Безопасная палитра цветов обеспечивает наиболее точное соответствие отображения на различных мониторах.

Безопасная палитра состоит из 216 цветов. Безопасные цвета всегда неизменные при переходе от одного браузера к другому или от одной платформы к другой, от одного монитора к другому с их различными возможностями цветоотображения и разрешениями.

Если любое из трех шестнадцатеричных значений отличается от 00, 33, 66, 99, СС или FF, то цвет не является безопасным.

Таблицу безопасных цветов можно просмотреть в папке CD / colors .

2. Определение CSS

Наша web-страница пока не имеет оформления, которое можно осуществлять двумя способами:

первый - средствами таблиц стилей CSS (более прогрессивный и правильный метод),
второй - средствами атрибутов у тегов HTML .

Начнем сразу с более прогрессивного метода.

CSS - Cascading Style Sheets (иерархические стилевые спецификации или каскадные таблицы стилей) не заменяют языка разметки, являются самостоятельной технологией, которая применяется к тегу HTML.

Назначение: позволяет автоматически изменить стиль HTML элемента на всех страницах сайта. Например, мы используем на десяти web-страницах заголовок H1, который должен быть зеленого цвета. При использовании таблиц стилей нам придется только один раз указать зеленый цвет и он применится сразу на десяти страницах.

Обратная ситуация: мы с помощью атрибутов HTML задали на десяти web-страницах всем заголовкам H1 зеленый цвет, т.е. прописали его десять раз. Затем решили изменить цвет заголовка на красный, тогда нам придется десять раз исправить зеленый цвет на красный.

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

Таблица стилей включает набор CSS-элементов, структура которых отличается от структуры HTML-элемента.

Синтаксис CSS -элемента

селектор {свойство 1: значение; свойство 2: значение; … свойство N: значение}

Вначале пишется имя селектора, например, h1, это означает, что все стилевые свойства будут применяться к тегу

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

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

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

Например :

h1 {font-family:Arial; font-size:14pt}

или тот же самое можно записать так:

font-family:Arial;

font-size:14pt

В этом примере:

h1 - селектор, в данном случае HTML-элемент,

font-family и font-size - стилевые свойства,

Arial - значение свойства font-family,

14pt - значение свойства font-size.

Способы включения таблиц стилей в HTML-документ

Внешняя таблица стилей (связанный стиль).

Внедренная таблица стилей (глобальный стиль).

Внутренние стили.

3. Внешняя таблица стилей CSS (связанный стиль)

Определяет стиль всего сайта.

Является текстовым файлом с расширением css.

В данном примере таблица стилей написана в текстовом файле style.css.

Практическое задание 1

1. Откройте чистый документ в Notepad++ и сохраните его в папке public_html под именем style . css . Обратите внимание, чтобы в поле Тип файла было установлено All types (рисунок 2).

Рисунок 2

2. Так как CSS - это другая технология, то теги HTML в файле.css не пишутся вообще. Оформим наш заголовок «Каталог архитектурных проектов» в файле main . html с выравниванием по центру, синим цветом, шрифтом Verdana, высотой шрифта 20 pt. Для этого в файле css сделаем следующую запись (рисунок 3):

Рисунок 3

В наших уроках CSS давайте разберем, что здесь написано согласно синтаксису CSS-элемента, о котором мы говорили выше в этом уроке.

h1 - селектор, т.е. элемент html, к которому применяется стиль;
text-align:center; - стилевое свойство text-align (выравнивает текст) со значением center (по центру);
color:#0000FF; - стилевое свойство color (цвет текста) со значением синего цвета #0000FF (значение взято из таблицы цветов);
font-family:Verdana; - стилевое свойство гарнитуры шрифта font-family со значением Verdana;
стилевые свойства со значениями разделены между собой точкой с запятой;
и так далее, все согласно синтаксису.

Чтобы наша web-страница «увидела» таблицу стилей и применила свойства к html-элементам, необходимо установить связку между файлом main . html и style . css . Для этого откройте файл main.html и между тегами < head > и head > вставьте конструкцию , как на рисунке 4.

Рисунок 4

3. Просмотрите результат в браузере. Он должен совпадать с рисунком 5.

Рисунок 5

В данном уроке CSS мы рассмотрим где взять названия стилевых свойств и их значений? Для этого также существуют специальные справочники и спецификация (папка Справочник CSS). Для начала используйте в качестве справки небольшой справочник Sprav_CSS.doc .

4. Зададим стиль заголовку h2 «Проекты для Вашего будущего дома» с выравниванием по правому краю, бордового цвета, шрифтом Verdana, высотой шрифта 16 pt. Для этого в файле style . css h 2 (рисунок 6).

Рисунок 6

5. Проверьте результат в браузере, он должен совпадать с рисунком 7.

Рисунок 7

6. Абзацы оформим с выравниванием по ширине, темно-синего цвета, шрифтом Arial, высотой шрифта 12 pt. Для этого в файле style . css сделаем следующую запись для селектора p (рисунок 8).

Рисунок 8

7. Также сделаем светло-голубым цветом фон всей web-страницы. Для этого для селектора body добавим запись (рисунок 9)

Рисунок 9

8. Просмотрите результат в браузере. Он должен совпадать с рисунком 10.

Рисунок 10

Думаю из данного урока CSS, принцип использования внешней таблицы стилей понятен. Для того, чтобы легко и красочно оформлять свои web -странички, надо по справочнику изучать стилевые свойства и их значения и пробовать на практике. Чем больше Вы помните таких свойств и значений без обращения к справочнику, тем выше Ваш профессионализм.

Исследовательские задания

Используя справочник Sprav_CSS.doc, оформите стилями заголовок < h 3> в файле main.html. Свойства стилей на выбор.

Для списка «Проекты домов», используя стили, измените арабские цифры на римские. Остальные параметры по желанию.

Для списка «Площади домов» в качестве маркера примените изображение spisok_1.gif из папки html_css_2 . Остальные параметры по желанию.

В качестве фона web-страницы примените через стили изображение fon9.jpg из папки html_css_2 .

С использованием стилей сделайте шрифт абзацев полужирным.

Примерный результат на рисунке 11.

Рисунок 11

4. Классы в стилевых спецификациях

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

Например, у нас в тексте есть несколько заголовков h 1 и нам необходимо, чтобы они были разного цвета. Тогда разделить стили надо следующим образом

h1.golub{color:blue}

h1.krasn{color:red}

h1.zelen{color:green}

После точки идет имя класса, которое должно быть уникальным и не может состоять только из цифр.

Теперь при использовании тега < h 1> в документе необходимо установить атрибут class , чтобы указать, какой именно стиль нужно применить:

< h 1 class =" golub "> Это голубой заголовок h 1>

< h 1 class =" krasn "> Это красный заголовок h 1>

< h 1 class =" zelen "> Это зеленый заголовок h 1>

Практическое задание 2

1. Откройте файл shablon . html . Сохраните его под новым именем ploshady . html в папке public_html .

2. Напишите между тегами и новый заголовок «Площади домов».

3. В содержимое скопируйте текст из файла Площади домов.txt из папки html _ ccs _2 .

4. Стили будем писать в том же файлеstyle . css , который у нас создан в предыдущем уроке. Поэтому в файле ploshady . html установите связку с этой таблицей стилей, вставив между тегами и (рисунок 12)

Рисунок 12

5. Отформатируйте заголовки тегом
и присвойте каждому заголовку свой класс (рисунок 13).

Рисунок 13

Ваш файл ploshady . html сейчас должен выглядеть следующим образом (рисунок 14).

Рисунок 14

6. В таблице стилей style . css создайте следующую запись (рисунок 15)

Рисунок 15

7. Проверьте web-страницу в браузере. Результат на рисунке 16.

Рисунок 16

8. Вы, наверно, заметили, что в нашей новой записи стилей заголовков есть повторяющиеся конструкции font-family:Verdana; text-align:left; font-size:14pt. Такие конструкции можно записывать один раз, сгруппировав селекторы, к которым они применены. Для этого, надо перечислить селекторы через запятую, а затем в фигурных скобках прописать общие свойства. Тогда наша таблица стилей для заголовков будет выглядеть следующим образом (рисунок 17):

Рисунок 17

Практическое задание 3

Под каждый заголовком в файле ploshady . html есть текст. Отформатируйте абзацы с использованием различных классов. Используйте разные цвета, выравнивание и гарнитуру шрифтов. Имена классов должны быть уникальными. Нежелательно использование одинаковых имен для разных селекторов. Один из возможных вариантов на рисунке 18:

Рисунок 18

5. ID-стиль для специфического элемента

Уроки CSS включают изучение так называемых id-стилей.

Любому элементу можно присвоить идентификаторid , а затем поставить в соответствие этому элементу какой-либо стиль, используя id .

Например:

Запись в файле таблиц стилей будет следующая

# test { color :#00 ffff }

Теперь можно поставить этот стиль в соответствие любому элементу в документе html:

...

...

В этом примере слово test - имя стиля. Имя может быть произвольным из латинских букв, но оно должно быть уникальным, т.е. ни один элемент в таблице стилей не должен больше иметь такое имя.

Практическое задание 4

Сделаем заготовку для будущего меню нашего сайта.

1. Откройте файл shablon . html и сохраните его под новым именем menu . html в папке public_html.

2. В содержимое страницы файла menu . html внесите текст из файла menu . txt из папкиhtml _ css _2 .

3. Средствами html-тегов отформатируйте файл следующим образом:

для заголовков «Категории проектов», «Каталог архитектурных проектов» и «Площади домов» используйте тег
;

для списка «Категории проектов» используйте нумерованный список
;
для списков «Каталог архитектурных проектов» и «Площади домов» используйте маркированный список
4. Вверху web-страницы вставьте логотип (файл logo_myhouse.gif ). Результат должен совпасть с рисунком 19.

Рисунок 19

5. Для этого меню сделаем отдельную таблицу стилей под именем style _ menu . css . Установите связку между файлом menu . html и таблицей стилей style _ menu . css , вставив запись между тегами и в файле menu . html .

6. Создайте чистый документ и сохраните его под именем style _ menu .css в своей папке.

7. Для группы «Категории проектов», в которую входит заголовок и нумерованный список и для группы «Каталог архитектурных проектов», в которую входит сам заголовок и маркированный список будем использовать имя id-стиля blue . Т.е. код будет выглядеть следующим образом (рисунок 20):

Рисунок 20

8. В файле style _ menu . css стиль для этих элементов сделаем темно-синего цвета, шрифтом Tahoma (рисунок 21):

Рисунок 21

9. Для группы «Площади домов», в которую входит заголовок и маркированный список, будем использовать имя id-стиля brown . Т.е. код будет выглядеть следующим образом (рисунок 22):

Рисунок 22

10. В файле style _ menu . css стиль для этих элементов сделаем коричневого цвета, шрифтом Times (рисунок 23):

Рисунок 23

11. И добавим еще цвет фона файлу menu.html (рисунок 24)

Рисунок 24

12. В результате получим следующую web-страницу (рисунок 25)

Рисунок 25

В результате выполнения этого урока CSS, у Вас должны быть созданы следующие файлы:

style . css

style _ menu . css

ploshady . html

menu . html

Для чего нужны таблицы стилей?

Вы создавали предыдущие страницы, так как их создавали раньше до появления каскадных таблиц стилей или CSS (Cascading Style Sheets).

Основные проблемы, с которыми сталкивались разработчики сайтов до появления CSS:

Проблема позиционирования (разметка страниц). Хотя для этого стали использовать таблицы (они небыли для этого предназначены изначально), они не решили всех проблем. Не возможно осуществить следующее:
- Нельзя задать фиксированные размеры какого-нибудь блока. Например, текстовый блок будет разъезжаться при переполнении (даже если он в таблице).
- Нельзя задать фиксированные координаты положения блока на странице.
- Нельзя наложить один блок на другой. Например, попробуйте надвинуть картинку поверх таблицы или другой картинки.

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

Третья проблема заключалась в том, что все браузеры имеют индивидуальные настройки. Например, в браузере можно увеличить шрифт, что приведет к искажению всей страницы.

С помощью CSS эти проблемы можно решить.

Способы применения CSS

Существует три способа применения таблиц стилей:

Внутренние таблицы стилей (Inline Style Sheets) - при помощи специального атрибута помещаются прямо в HTML теги.
Пример HTML:

Пример CSS:

Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать, только если необходимо задать определенному элементу свой индивидуальный стиль.
При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега.

Глобальные таблицы стилей (Global Style Sheets) - определяют стиль элементов во всем документе.
Для этого используется тег …

Связанные стили

Самые удобные, потому что с их помощью можно легко оформить в едином стиле целый сайт. Связанный стиль подразумевает, что всё CSS-оформление находится в отдельном файле с расширением .css .

Такой подход удобен ещё и тем, что он отделяет правила оформления страниц от их содержимого, CSS-код можно легко менять, не вмешиваясь в HTML-файлы, а принцип разделения кода очень важен, особенно в больших проектах.

Чтобы связать правила из CSS-файла с HTML-страницей, используется тег , добавленный в контейнер , и его атрибуты.

Вот строка, связывающая правила из файла mystyle.css с HTML-страницей:

rel="stylesheet" определяет, что тег ссылается на файл таблицы стилей, href="mysyle.css" задаёт его адрес. Правила адресации такие же, как у обычных ссылок – путь может быть абсолютным, относительным и т. д.

Импортированные стили

С помощью команды @import можно добавить стили из CSS-файла в текущую таблицу. Это может потребоваться, например, если вы хотите дополнить индивидуальное оформление документа, заданное с помощью глобальных стилей, универсальными правилами из отдельного файла. Со встроенными стилями метод использовать нельзя.

Код ниже импортирует в документ таблицу файла any.css , которая находится в папке с редактируемым HTML-документом:

@import url(any.css);

Команда прописывается строкой ниже открывающего тега

1. Что такое каскадные таблицы стилей css?

Здравствуйте дорогие мои читатели. Я решил открыть новую часть сайта, посвященную работе с каскадными таблицами стилей css.

Итак, что же такое каскадные таблицы стилей css?

css (англ. Cascading Style Sheets — каскадные таблицы стилей ) - язык описания внешнего вида документа, написанного с использованием языка разметки.
Что бы было проще понять новичку - каскадные таблицы стилей css предназначены для создания красивого, легкого в редактировании дизайна html страничек сайтов.

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

Спустя некоторое время, для упрощения работы сайтостроителям, браузеры стали "подгонять" под одни стандарты. На сегодняшний день практически все программы, используемые для просмотра интернет страничек, одинаково воспроизводят сайты, на которых используются каскадные таблицы стилей css.

Мои наблюдения!!! По моим личным наблюдениям, такие последние версии браузеров, как Opera, Mazilla ForeFox, Maxthon, Google Chrome и Internet Explorer практически одинаково покапоказывают странички, в которых используются каскадные таблицы стилей, но если браузеры не последних поколений, то и сами странички сайтов будут выглядеть по другому. И для того, что бы Ваш сайт выглядел одинаково практически во всех браузерах, есть специальные технологии задания каскадных таблиц стилей.

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

2. Как создать каскадную таблицу стилей css?

В этой части статьи мы создадим и подключим каскадную таблицу стилей к самой простой html страничке.

Итак, делаем так:

1. Создаем папку, в которой будут наша html страничка, и каскадная таблица стилей.
Пусть, моя папка будет называться "css"

2. Создаем простую html страничку (index.html). Как это делается можете прочитать .

3. Теперь создаем простой текстовый документ (аналогично созданию html странички), только называем его style.css.

В результате у Вас должно получиться вот что:

Все, файл который будет содержать в себе стили css готов.

Теперь давайт подключим созданную стаблицу стилей к файлу index.html.

3. Как подключить каскадную таблицу стилей css?

Итак, для того что бы подключить таблицу стилей к html страничке, необходимо в файле index.html в теге прописать тег:

Здесь, в атрибуте href="style.css" прописан путь к самому файлу со стилями css. В этом случае файл css и index.html находится в одной папке.

Например, если наш файл index.html будет иметь такой код:

Важно!!! Кстати, не забудьте при сохранении в блокноте файла index.html поставить кодировку 1251 (ANSI-кириллица). Так как если это не сделать и файл сохранить в другой кодировке, то браузер вместо текстов покажет Вам "каракули".

Если же все будет сделано и сохранено правильно, то в браузере Вы увидете следующее:

Вот и все, файл index.html создан, а так же к нему подключены таблицы стилей css.

Теперь давайте проверим работу таблиц стилей css.

Итак, начнем с самого простого, и зададим тегу новый стиль, определяющий фоновое изображение html странички, цвет фона странички (если изображения в браузере посетителя странички отключены), верхние и нижние отступы, шрифт по умолчанию, его размер и цвет.

Для того, что бы установить фоновое изображение, его нужно разметить в папке с нашими файлами.

А если Вы планируете научиться создавать профессиональные интернет магазины на движке Magento, то это легче всего сделать с помощью моего авторского видео курса .