- •Введение
- •1. Протокол http
- •1. Теги, структура html документа
- •2. Форматирование текста
- •Шрифты: гарнитура, размер, цвет
- •Оформление текста
- •Заголовки
- •Текст в виде большого заголовка
- •Текст в виде маленького заголовка Теги переноса строки и форматирования абзаца
- •Выравнивание текста
- •3. Списки.
- •4. Таблицы.
- •5. Изображения
- •6. Свойства страницы - параметры тега body
- •7. Ссылки
- •8. Формы.
- •11. Символьные объекты.
- •10. Что такое css?
- •11 Добавление стилей
- •Лекция: Введение в MySql
11 Добавление стилей
Внутренние стили
Глобальные стили
Связанные стили
Сочетание различный видов стилей
Упражнение
Стили можно добавить тремя способами.
Внутренние стили
Внутренний стиль - это своего рода расширение html-тега. Такой стиль создается в случае необходимости задать какие-либо свойства для конкретного объекта, а не группы объектов. Эти свойства называютя атрибутами стиля.
Для создания такого стиля используется параметр style, который есть у всех тегов. Параметру style присваиваются перечисленные через "точку с запятой" атрибуты с заданными значениями. Значения атрибутам присваиваются не знаком "равно", как обычно, а знаком "двоеточие".
Например, Вы хотите, какой-то конкретный заголовок написать оранжевым цветом и размером 22 пиксела. Для этого напишите следующее:
<h1 style="color: #CD6600; font-size: 22px">Урок 1</h1>
Разберем этот пример. Фраза "Урок 1" выделена тегом заголовка <h1>. У тега <h1> создается стиль с помощью параметра style. У стиля задаются 2 атрибута color (цвет) и font-size (размер шрифта), разделенные "точкой с запятой". Атрибуту color присваивается значение #CD6600, атрибуту font-size присваивается значение 22px.
Глобальные стили
Глобальные стили создаются в случае необходимости задать какие-либо свойства для группы объектов. Такие стили создаются в начале документа внутри тега <head> и их действие распространяется на весь документ.
Глобальные стили добавляются в документ следующим образом:
Внутри тега <head> вставляется парный тег <style> с параметром type="text/css";
Внутри тега <style> располагаются все стили для данного документа. Стили разделяются просто переносом строки.
Стиль описывается так: пишется название стиля и ставятся "фигурные скобки" { }.
Между "фигурными скобками" пишутся все атрибуты стиля с присвоенными значениями, разделенные "точкой с запятой". Значения атрибутам присваиваются "двоеточием", а не знаком "равно". После значения последнего атрибута "точку с запятой" ставить необязательно.
<head> <style type="text/css"> стиль1 { атрибут1: значение; атрибут2: значение; ... } стиль2 { атрибут1: значение; атрибут2: значение; ... } ... </style> </head>
Например, сделаем все заголовки <h1> оранжевого цвета и размером 22 пиксела и все заголовки <h2> красного цвета и размером 20 пикселов:
<head> <style type="text/css"> h1 { color: #CD6600; <-- стиль для тега <h1> font-size: 22px } h2 { color: #FF0000; <-- стиль для тега <h2> font-size: 20px } </style> </head>
После добавления этих стилей, все заголовки Вашего документа, выделенные тегами <h1> и <h2> без дополнительных тегов будут обладать нужными свойствами. И если Вы захотите изменить или добавить какое-либо свойство, Вы просто измените или добавите его в соответсвующем стиле.
Связанные стили
Таблицы связанных стилей (Linked Style Sheet) создаются в отдельном файле с расширением .css и подключаются к документу (или нескольким документам).
Этот способ добавления стилей наиболее удобный из всех описанных способов и предоставляет большее число возможностей для web-разработчика.
Во-первых, действие стилей, описанных в отдельномом файле, распространяется на любое количество документов, к которым он подключен, а также этот же файл можно использовать и на других сайтах.
Во-вторых, можно изменять стили без изменения html-страниц. И все изменения автоматически применятся ко всем страницам, к которым подключен файл стилей.
И, в-третьих, при первой загрузке браузер кэширует (запоминает) такие файлы, поэтому загружаться Ваш сайт будет нескольк о быстрее.
Примером таблицы связанных стилей является файл style_school.css, который подключается к каждой страничке наших уроков. И стоит нам захотеть изменить, например, цвет или размер заголовков во всех уроках, мы всего лишь изменим соответствующие параметры в подключенном файле стилей, и заголовки во всех уроках автоматически приобретут нужные свойства.
Чтобы подключить к документу файл стилей, нужно в начале документа внутри тега <head> вставить тег <link> с тремя параметрами:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Где параметры rel="stylesheet" и type="text/css" - постоянные, а параметру href присваивается адрес файла стилей. Адрес может быть как абсолютный, так и относительный.
Например, к нашим урокам файл стилей style_school.css можно подключить так:
<head> <link rel="stylesheet" type="text/css" href="style_school.css"> </head>
Внутри файла стилей описываются все необходимые стили, разделенные переносом строки, точно так же как и глобальные стили:
стиль1 { атрибут1: значение; атрибут2: значение; ... } стиль2 { атрибут1: значение; атрибут2: значение; ... } ...
Посмотрите, как устроен файл style_school.css.
Для примера создадим документ с заголовками (откройте его, посмотрите, как он выглядит без стилей, и посмотрите его код). Сделаем все заголовки <h1> оранжевого цвета и размером 22 пиксела и все заголовки <h2> красного цвета и размером 20 пикселов. Для этого создадим файл стилей style.css, содержащий следующее:
h1 { color: #CD6600; font-size: 22px } h2 { color: #FF0000; font-size: 20px }
И подключим этот файл к нашему документу:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
Получится такой документ (откройте его, посмотрите, как он выглядит с применением стилей, и посмотрите его код).
Сочетание различный видов стилей
Все описанные виды стилей можно использовать совместно друг с другом. Только в этом случае стоит помнить о приоритетах: больший приоритет имеют внутренние стили, затем глобальные, и наименьший - связанные таблицы стилей.
Например, сделаем все заголовки <h1> оранжевого цвета, а один конкретный - красного цвета. Для оранжевых заголовков создадим глобальный стиль, а для красного - внутренний:
<head> h1 { color: #CD6600 } </head> <body> <h1>Заголовок 1</h1> <h1 style="color: #FF0000">Заголовок 2</h1> <h1>Заголовок 3</h1> </body>
В результате данного примера "Заголовок 1" и "Заголовок 3" будут оранжевого цвета, а "Заголовок 2" - красного.