Каскадные таблицы стилей css практическая работа – Язык гипретекстовой разметки HTML 4.0. Практическая работа № 8. Применение каскадных листов стилей | форматирование web-страниц с использованием таблиц стилей | создание каскадных листов стилей

Псевдоклассы и псевдоэлементы. Псевдоклассы и псевдоэлементы — это особые классы и элементы, присущие CSS и автоматически определяемые поддерживающими CSS браузерами.

Синтаксис: селектор:псевдокласс { свойства }
селектор.класс:псевдокласс { свойства }
селектор:псевдоэлемент { свойства }
селектор.класс:псевдоэлемент { свойства }

Псевдоклассы различают разные типы одного элемента, создавая при определении собственные стили для каждого из них. Например,

a:link,a:visited {color:blue}

a:active {color:red}

a:hover {text-decoration:none}

В данном примере все элементы ссылки будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание.

Псевдоэлементы позволяют объединять несколько стилей для какого-либо объекта. Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для тега P псевдоэлемент first-letter, в котором устанавливаете различные стили:

p:first-letter {float:right;font-size:2em;color:red;}

Список псевдоклассов и псевдоэлементов :

Anchor Pseudo Classes — эти псевдоклассы элемента , обозначающего ссылку. Псевдоклассы этого элемента: (ссылка), active (активная ссылка), visited (посещенный ранее URL), hover (псевдокласс, возникающий при поднесении курсора к ссылке, не работает в Netscape).

First Line Pseudo-element — first-line. Этот псевдоэлемент может быть использован с block-level элементами (p, h2 и т.д.). Он изменяет стиль первой строки этих элементов.

First Letter Pseudo-element — first-letter. Похож на first-line, но влияет не на всю строку, а только на первый символ.

Устанавливает стили для первой буквы объекта

:first-line

Устанавливает стили для первой строки объекта

:hover

Устанавливает стили для элемента, когда пользователь подводит курсор мыши к ссылке. Данный псевдокласс часто используется вместе с псевдоклассами :active, :link и :visited

:active

Устанавливает стили для элемента, когда ссылка становится активной, но переход по ссылке еще не совершен. Данный псевдокласс часто используется вместе с псевдоклассами :hover, :link и :visited

:link

Устанавливает стили для элемента, когда ссылка не является часто посещаемой. Данный псевдокласс часто используется вместе с псевдоклассами :hover, :active и :visited

:visited

Устанавливает стили для элемента, когда ссылка недавно посещалась. Данный псевдокласс часто используется вместе с псевдоклассами :hover, :active и :link. (Используйте данный псевдокласс перед ними, чтобы не подавлять их поведение)

ПРИМЕР: Содержимое таблицы стилей:

A.pr:visited { color:blue }

A.pr:active { font-weight:bold; color:brown }

A.pr:link { color:#00FF00 }

A.pr:hover { color:red; text-decoration: none}

P{color: bleak;font-style: italic;font-weight: bolder}

p:first-letter { float:right;font-size:2em;color:red;}

p:first-line {color:green;}

HTML-код основного документа:

Как видите, первая буква и первая строка каждого параграфа имеет особый вид,

заданный при помощи различных стилей.

Данный прием вам хорошо известен по книгам, использующим подобный прием

в глубокой древности

Подведите курсор к ссылке,

и она станет красного цвета и исчезнет подчеркивание ссылки

Примечание: описания нескольких свойств для одного селектора, контекстуального селектора, класса, индивидуально именованного стиля или группы объединенных селекторов отделяются друг от друга точкой с запятой «;».

Урок 2. Работа с каскадными таблицами стилей (CSS) | | Уроки MODx Evo

Цель: ознакомиться c работой каскадных таблиц стилей (CSS).

Задачи:

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

В результате выполнения данной лабораторной работы у вас должна получиться такая веб-страница (рисунок 2.1):

Рисунок 2.1 — Предварительный просмотр веб-страницы

Присоединение внешней таблицы

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

1. Если на экране не видно панели Files, выберите Window => Files (Окно => Файлы).

2. Дважды щелкните по Lab2  => about-start.html на панели Files, что­бы открыть страницу в окне Document (рисунок 2.2).

Рисунок 2.2 — Шаблон about-start.html

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

3. Выберите File => Save As и сохраните эту страницу в папке Lab2, используя имя about.html. Следующим заданием будет присоединить внешнюю таблицу стилей к текущей странице.

4. При необходимости выберите Window => CSS Styles (Окно => Стили CSS). Щелкните по кнопке Attach Style Sheet (Присоединить таблицу стилей) на панели CSS Styles.

5. После открытия диалогового окна Attach External Style Sheet (Присоединить внешнюю таблицу стилей) (рисунок 2.3) щелкните по кнопке Browse. Перейдите к Lab2 в диалоговом окне Select Style Sheet File (Выбрать файл таблицы стилей) и выберите mystyles.css. Щелкните по кнопке OK.

Рисунок 2.3 — Диалоговое окно Attach External Style Sheet

6. Убедитесь в том, что в диалоговом окне Attach External Style Sheet выбрана опция Add as: Link (Добавить как: Ссылка). Выберите экран во всплывающем меню Media (Мультимедиа). Щелкните по кнопке ОК.

7. Как вы могли заметить, вид страницы значительно изменился, а изобра­жение заднего плана в верхнем колонтитуле из урока 1 теперь исполь­зуется в нижнем колонтитуле. Нижняя часть страницы отображается в виде двух столбцов.

8. Выберите File => Save.

Создание новых правил CSS

Правило CSS состоит из двух основных частей: селектора и одного или более свойств.
Например, в правиле CSS, приведенном ниже, селектором является тег hi, а свойствами —color: red (цвет: красный) и font-size: З6рх (размер шрифта: 36 рх):

hi {

color: red;

font-size: 36 px;

}

В Dreamweaver вы создаете стили в среде «указать и нажать», а программа пишет за вас соответствующий код. По мере того как у вас будет появляться больше опыта по работе с CSS, вы сможете вручную писать CSS с помощью программы Dreamweaver.

1. Убедитесь, что на панели стилей CSS выбран режим All; если для панели установлен режим Current (Текущий), щелкните по кнопке All. Щелкните по кнопке (+), расположенной после mystyles.css, чтобы расширить ее

2. В окне Document поместите курсор на текст заголовка «Познакомьтесь с нашим персоналом.». Выберите <hl>, используя селектор тегов внизу окна Document.

3. Щелкните по New CSS Rule внизу таблицы стилей CSS.

4. После открытия диалогового окна New CSS Rule (Создать правило CSS) дважды щелкните по кнопке Less Specific (Менее точно), чтобы выбрать селектор #mainContent h2. Щелкните по кнопке ОК. (рисунок 2.4)

Рисунок 2.4 — Диалоговое окно New CSS Rule

5. Убедитесь, что в диалоговом окне CSS Rule Definition for #mainCon-tent hi in mystyles.css (Определение правила CSS для #mainContent hi в mystyles.css) выбрана категория Type; в противном случае выберите Туре в столбце Category слева от диалогового окна (рисунок 2.5).

6. Выберите Georgia, Times New Roman, Times, serif во всплывающем меню набора шрифтов Font-family

7. Используйте «пипетку» в поле Color, чтобы выбрать темно-синий цвет в левом углу графического заголовка. Необходимым цветом является #345FA3, хотя значение цвета немного отличается. Если вам нужен именно такой цвет, то вместо использования «пипетки» введите #345FA3 в поле Color. Щелкните по кнопке ОК.

Рисунок 2.5 — Диалогове окно CSS Rule Definition

Вы изменили семейство шрифтов и цвет для #mainContent <hl>. Если вы добавите в область mainContent еще один тег <h2>, то он будет подчиняться тому же правилу. Если с этой таблицей стилей у вас связана тысяча страниц, то у них всех изменится семейство шрифтов и цвет элементов #mainContent <hl>. Это хороший пример, подтверждающий преимущества, которые вы получаете при использовании внешних таблиц стилей.

8. Установите курсор на абзац «Вид из окон нашего офиса.» внизу окна Document, выберите <p> в селекторе тегов.

9. Щелкните по New CSS Rule внизу панели CSS Styles.

10. После открытия диалогового окна New CSS Rule щелкните два раза по опции Less Specific (Менее точно), чтобы выбрать #sidebarl р. Щелкните по кнопке ОК.

11. Выберите Туре в столбце Category (Категория). В поле размера шрифта Font-size введите 80 и выберите во всплывающем меню %, Во всплывающем меню стиля шрифта Font выберите курсив (italic) (рисунок 2.6).

Рисунок 2.6 — Диалогове окно CSS Rule Definition (Type)

12. Выберите категорию Box (Рамка) в области Category. Снимите флажок Same for all (Одинаково для всех) в области Margin (Отступ). Введите 0 в поле Тор (Верхняя сторона). Щелкните по кнопке ОК (рисунок 2.7).

Рисунок 2.7 — Диалогове окно CSS Rule Definition (Box)

С помощью категории Box можно контролировать невидимые рамки, окружающие элементы, определяя значения ширины, высоты, заполнения, полей и иные свойства. Обычно это называется боксовой моделью. Если бы для дизайна потребовался такой же объем полей вокруг селектора, вы бы выбрали флажок Same for all (Одинаково для всех) и указали значение в поле Тор, которое также применялось бы и к полям Right (Правая сторона), Bottom (Нижняя сторона) и Left (Левая сторона). Значения заполнения и полей могут быть одними и теми же или отличаться для каждой стороны рамки, окружающей элемент. Также допускаются отрицательные значения.

13. Выберите File => Save As.

14. Выполните предварительный просмотр изменений в режиме отображения Live или в браузере.

Обратите внимание на изменения, которые внесли в заголовок <h2> и в абзац под изображением Екатеринбурга. Внизу списка All Rules было добавлено два новых правила; в этом списке отражена очередность правил CSS в таблице стилей. Дизайнеры часто любят группировать соответствующие стили, чтобы их было проще найти. Порядок правил в таблице стилей также влияет на значимость каждого правила в каскадной записи. Вы можете быстро переместить любой стиль в другое место, a Dreamweaver перепишет за вас код.

15. Переместите недавно добавленный стиль #mainContent hi на панели стилей CSS под .twoColFixLtHdr #mainContent

16. Переместите #sidebarl p под .twoColFixLtHdr #sidebarl.

17. Выберите File => Save All (Файл => Сохранить все), чтобы сохранить изменения файлов HTML и CSS.

Установка пользовательских классов

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

1. Щелкните по иконке New CSS Rule внизу панели CSS Styles. Откроется новое диалоговое окно CSS Rule.

2. Выберите Class (Класс) во всплывающем меню Selector Туре (Тип селектора) (может применяться к любому элементу HTML) и введите «.пате» в поле Selector Name (Имя селектора). Включите основной период. Если вы забудете про это, Dreamweaver сама вставит данную информацию, но лучше не забывать.

3. Убедитесь, что всплывающее меню Rule Definition (Определение правила) установлено на mystyles.css, и щелкните по кнопке ОК (рисунок 2.8).

Рисунок 2.8 — Диалоговое окно New CSS Rule

4. Выберите Type в диалоговом окне CSS Rule Definition for .name in mystyles.css столбца Category. Выберите small-caps (малые прописные буквы) во всплывающем меню варианта шрифта и щелкните по кнопке ОК.

Рисунок 2.9 — Диалоговое окно CSS Rule Definition (Type)

5. Выберите File => Save All.

Выполняя эти действия, вы не заметите каких-либо изменений в программе Dreamweaver, только в список All Rules (Все правила) панели CSS Styles будет добавлена одна запись.

Применение стилей

1. Выделите первый экземпляр имени Елена.

Рисунок 2.10 — Выделение имени

2. Выберите .name из списка Targeted Rule (Целевое правило) панели Properties.

3. Обратите внимание, что выбранный текст оказался набранным заглавными буквами, а индикатор селектора тегов включает имя класса <span.name>. Класс был добавлен к выбранному тексту по­средством использования тега <span>.

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

5. Выполните предварительный просмотр страницы в режиме отображения Live или в браузере.

Обратите внимание, что в режиме отображения Live или в браузере форматирование шрифта отображается соответствующим образом.

Рисунок 2.11 — Просмотр в режиме Live

6. Выберите File => Save.

Применение определяемых пользователем классов к разделам страницы

Посредством Dreamweaver вы можете легко вставлять в документ разделы страницы или теги <div> для создания областей макета или для того, чтобы упорядочить области страницы. Тегу <div> можно присвоить ID или класс. В этом упражнении мы создадим несколько разделов <div> и присвоим их одному и тому же определяемому пользователем классу.

1. Используйте курсор, чтобы выделить изображение Елены и абзац (рисунок 2.12).

Рисунок 2.12 — Пример выделения

2. Выберите Layout (Макет) на панели Insert. В зависимости от конфигурации рабочей области меню Insert может отображаться на линейке или на панели (рисунок 2.13).

Рисунок 2.13 — Меню Макет

3. Выберите Insert Div Tag (Вставить тег Div). Откроется диалоговое окно Insert Div Tag (рисунок 2.14).

4. Убедитесь, что опция Insert установлена на Wrap around selection (Обтекание вокруг выбранного объекта). Введите «.profile» в поле Class.

Рисунок 2.14 — Диалоговое окно Insert Div Tag

5. Щелкните по кнопке New CSS Rule.

6. ведите «.profile» в поле Selector Name. Проверьте, чтобы новое правило во всплывающем меню Rule Definition (Определение правила) находилось в файле mystyles.css. Щелкните по кнопке ОК (рисунок 2.15).

Рисунок 2.15 — Диалоговое окно New CSS Rule

7. Выберите Box в диалоговом окне CSS Rule Definition for .profile mystyles.css столбца Category. Выберите right (правая) во всплывающем меню Clear (Чистый) (рисунок 2.16).

Рисунок 2.16 — Диалоговое окно CSS Rule Definition (Box)

8. Выберите Positioning (Положение) в столбце Category и auto (авто) во всплывающем меню Overflow (Переполнение). Щелкните по кнопке ОК (рисунок 2.17).

Рисунок 2.17 — Диалоговое окно CSS Rule Definition (Positioning)

9. Dreamweaver возвратит вас в диалоговое окно Insert Div Tag. Щелк­ните по кнопке ОК.

Теперь в окне Document вокруг раздела страницы, в котором находятся выбранное изображение и текст, отображается пунктирная линия, указывающая на наличие <div> (рисунок 2.18).

Рисунок 2.18 — Выделение блока <div>

Процесс добавления подобных тегов <div> к присвоенному профилю класса class .profile будет немного отличаться для других профилей, расположенных на странице, так как теперь class .profile имеется в вашем файле mystyles.css.

10. Выделите в окне Document изображение Алины и два находящихся над ним абзаца.

11. Выберите Insert Div Tag на панели Insert категории Layout. Откроется диалоговое окно Insert Div Tag.

12. Выберите во всплывающем меню Insert опцию Wrap around selection. На этот раз вы выбираете в меню Class уже существующий профиль класса, чтобы применить его к новому <div> Щелкните по кнопке ОК.

Рисунок 2.19 — Диалоговое окно Insert Div Tag

Раздел страницы, посвященный Алине, теперь находится в своем собственном теге <div>, который отображается в окне Document в виде пунктира.

13. Повторите действия 10,11 и 12 для разделов страницы об Александре и Яне.

14. Выберите File => Save All.

Перемещение изображений

В предыдущем задании вы создали класс под названием .profile, который устанавливает для добавленных на страницу тегов div правила для свойств clear и overflow. В следующем задании вы задействуете свойство перемещения, чтобы определить положение изображений профилей. Определив правила в .profile, вы можете приступить к выпол­нению этого упражнения.

1. Выберите изображение Елены и убедитесь, что в селекторе тегов выбран тег <img>.

2. Выберите class .fltrt на панели Properties. Теперь изображение Елены появится справа, а текст о ней отобразится слева от фотографии.

3. Выберите изображение Алины. Выберите класс .fltlft на панели Properties. Изображение Алины останется слева, но поскольку оно теперь перемещено, то текст будет отображаться справа от него.

4. Продолжайте перемещать оставшиеся изображения профиля: изображение Александра — вправо, изображение Яны — влево.

5. Выберите File => Save All, чтобы сохранить то, что вы сделали.

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

Рисунок 2.20 — Предварительный просмотр страницы

Исследование селекторов на панели правил CSS

В этом задании вы более детально изучите панель CSS Styles и озна­комитесь с имеющейся в Dreamweaver информацией по каждому стилю и его свойствам.

1. Поместите курсор в окне Document на одно из имен, к которому при­меняется имя класса .name.

2. Щелкните по кнопке All на панели CSS Styles, а затем убедитесь, что в категории All Styles (Все стили) выбрано имя класса .name, и щелкните по кнопке Current (Текущий).

3. Щелкните по левой иконке Show information about the selected property (Показать сведения о выбранном свойстве) в средней области окна.

Рисунок 2.21 — Панель CSS Styles

4. Выберите иконку Show Cascade of rules for selected tag (Отобразить каскад правил для выбранного тега) чтобы просмотреть область окна Rules, а не область About.

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

Рисунок 2.22 — Область Rules

В области окна Properties отображаются свойства селектора. Чтобы увидеть область Properties, вам, возможно, потребуется опустить вниз нижнюю границу панели CSS Styles. Значения можно редактировать прямо в области Properties, а новые свойства можно добавить, используя ссылку Add Property (Добавить свойство).

В ходе выполнения данной лабораторной работы у вас должна полчиться веб-страница (рисунок 2.23)

Рисунок 2.23 — Итоговая веб-страница

Ответьте на контрольные вопросы.

1. Как присоединить существующую внешнюю таблицу стилей к веб-странице?
2. Чем будут отличаться результаты между правилами CSS для селектора
   #header h2 и се­лектора #mainContent hi? Как называются эти типы селекторов?
3. Как применить класс CSS к тегу?
4. Как вставить на веб-страницу новые области <div>?
5. Какие свойство и значение CSS используются для скрытия любого содержимого, ассо­циируемого со стилем CSS?

Контрольное задание

1. Подберите материал для своего веб-сайта.
2. Реализуйте вторую страницу своего веб-сайта.

Требования к веб-странице:

1. Использовать как минимум 3 изображения.
2. Использовать внешнюю таблицу стлей (CSS).
3. Создать как минимум 1 пользователький класс, и применить его.
4. Создать несколько разделов <div>.
5. Применить к изображению «обтекание» текста.

2.2Каскадная таблица стилей css

Каскадные (многоуровневые) таблицы стилей — cascading style sheets (CSS) — это мощный стандарт на основе текстового формата, определяющий представление данных в браузере. Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают, как он должен выглядеть. Таким образом, каскадные таблицы стилей дают возможность хранить содержимое отдельно от его представления. Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице. CSS разрабатывались так, чтобы обеспечить больший уровень контроля над размещением текста и графики. Каскадные таблицы стилей обеспечивают должный уровень единства оформления, организации и контроля во время разработки узла, который является недостижимым с помощью одного только HTML.[15]

CSS предполагает 3 типа таблиц стилей — встроенные, внедренные (внутренние) и связанные (внешние).

Впервые идея форматирования HTML-документов с помощью CSS была рекомендована Консорциумом W3C в 1996 году. Эта рекомендация, которая была обновлена в 1998 году, используется Web-разработчиками, и по сей день.

Что значит слово «каскадный»? Термин «каскадный» означает, что в одной странице HTML могут использоваться разные стили. Браузер, поддерживающий таблицы стилей, будет следовать их порядку (как по каскаду), интерпретируя информацию стилей. Это означает, что вы можете использовать все три типа стилей, и браузер будет интерпретировать сначала связанные, затем внедренные и, наконец, встроенные стили. Даже если ко всему узлу будут применены образцы стилей, можно будет управлять отдельными аспектами страниц с помощью внедренных стилей, а отдельными областями внутри этих страниц — с помощью встроенных стилей. Другой аспект каскадирования — наследование (inheritance). Наследование означает, что если не указано иное, то конкретный стиль будет унаследован другими элементами страницы HTML. Например, если вы примените определенный цвет текста в теге <р>, то все теги внутри этого абзаца наследуют этот цвет, если не оговорено иное.  

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

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

• Встроенный (Inline). Этот метод позволяет взять любой тег HTML и добавить к нему стиль. Использование встроенного метода предоставляет максимальный контроль над всеми свойствами Web-страницы. Предположим, вы хотите задать внешний вид отдельного абзаца. Вы можете просто добавить атрибут style к тегу абзаца, и броузер отобразит этот абзац с помощью параметров стиля, добавленного в код.

• Внедренный (Embedded) Внедрение позволяет контролировать всю страницу HTML. При использовании тега <style>, помещенного внутри раздела <head> страницы HTML, в код вставляются детализированные атрибуты стиля, которые будут применяться ко всей странице.

• Связанный (Linked или External) Связанная таблица стилей — мощный инструмент, который позволяет создавать образцы стилей (master styles), которые можно затем применять ко всему узлу. Основной документ таблицы стилей (расширение .css) создается Web-дизайнером. Этот документ содержит стили, которые будут едиными для всего Web-узла (неважно, содержит одну страницу или тысячи страниц). Любая страница, связанная с этим документом, будет использовать указанные стили.

Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать. Синтаксис всех методов, используемых для применения стилей к документа HTML, практически одинаков. Таблицы стилей составляются из определенных частей. Эти части включают следующие элементы:

• Указатель (Selector). Указатель является элементом, к которому будут применяться назначаемые вами атрибуты. Это может быть просто тег типа заголовка (h2) или абзаца (Р). Таблицы стилей позволяют использовать различные объекты, включая классы, которые будут кратко обсуждаться далее.

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

• Значение (Value). Значения определяют свойства. Предположим, что у вас есть заголовок первого уровня h2(указатель) и вы включаете свойство type family (семейство шрифта). Шрифт, который на самом деле будет применен к указанному фрагменту, задается значением этого свойства.

• Описание (Declaration). Свойства и значения объединяются, образуя описание.

• Строка (Rule). Указатель и описание образуют строку

Итак, каскадная таблица стилей — это набор правил форматирования тегов HTML. Например, для того, чтобы цвет фона Web-страницы сделать черным, необходимо объявить следующее правило форматирования:

body{background:black}

В данном случае объявлено правило форматирования тега body, а именно — свойству стиля background присвоено значение black (черный). В результате применения этого правила цвет фона всего документа изменится на черный.

Свойства CSS должны находиться в фигурных скобках. Для каждого тега HTML можно указать не одно, а несколько свойств стиля.

Изменим с помощью CSS не только цвет фона Web-страницы, но и цвет шрифта (на белый).

body{background:black;color:white}

Формат самого правила не имеет значения, главное — правило должно читаться удобно и легко. Например, вышеприведенное правило можно записать и так:

body{

background:black;

color:white}

Одно и то же правило стиля можно применить сразу к нескольким различным тегам HTML-страницы. Например:

body,td,h2{

background:black;

color:white}

Встроенный стиль применяется к любому тегу HTML с помощью атрибута style следующим образом:

<P style=»font: 12pt Courier New»> The text in this line will

display as 12 point text using the Courier New font.

</P>

Или:

<p style=»font: 12pt Arial»>

The text in this line will display as 18 point text using the

Arial font.

</p>

Посмотрим на результат:

The text in this line will display as 12 point text using the Courier New font.

The text in this line will display as 18 point text using the Arial font.

Можно добавлять встроенный стиль в любой тег HTML, в котором эта операция будет иметь смысл. Среди таких тегов можно назвать абзацы, заголовки, горизонтальные линии, якоря и ячейки таблиц. Ко всем этим элементам логично применять встроенные стили. Существуют два тега, которые помогают применять встроенные стили к разделам страницы. Это теги <div> (division — раздел) и <span> (промежуток). Эти теги определяют диапазон текста, так что все, находящееся между ними, будет оформлено с помощью нужного стиля. Единственное различие между <div> и <span> состоит в том, что <div> создает принудительный разрыв строки ,a <span> -нет. Следовательно,нужно использовать <span> для изменения стиля любой части текста, меньшей абзаца. 

Вот пример работы тега <div>:

<div style=»font-family: Garamond; font-size: 18 pt;>»AII of the

text within this section is 18 point Garamond.

AII of the text within this section is 18 point Garamond.

и тега <span>:

<span style=»color:#ff3300;»> This text appears in the color red,

with no line break after the closing span tag </span> and the rest of

the text.

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

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

2. Создаем простую html страничку (index.html).

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

В результате получится документ показанный на рисунке 2.1 :

Рисунок 2.1

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

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

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

<link href=»style.css» rel=»stylesheet» type=»text/css»>

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

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

Рисунок 2.2

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

Рисунок 2.3

Каскадные таблицы стилей CSS и методы их добавления

Цель урока: знакомство с каскадными таблицами стилей. На уроке рассмотрены методы добавления стилей к html-страницы

CSS стили. Методы добавления

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

Рассмотрим основные методы добавления стилей:

• Встраивание (inline)
• Вложение (embeding)
• Связывание (linking)
• Импорт

Метод встраивания (inline) в CSS

Метод встраивания (или строковый стиль) — это самый простой метод добавления стиля. Применяется в том случае, когда необходимо применить стиль только к одному единственному конкретному тегу и только один раз

 
Синтаксис:

<элемент  style = "свойство1: значение; свойство2: значение; . . .">;

<элемент  style = «свойство1: значение; свойство2: значение; . . .»>;

 

Рассмотрим основные понятия, встречающиеся при использовании стилей.

Пример: Первый абзац без стилей, ко второму абзацу применен стиль

<p>Обычный текст</p>

<p>Обычный текст</p>

<p>Абзац с методом встраивания</p>

<p>Абзац с методом встраивания</p>

Результат:

Обычный текст

Абзац с методом встраивания

Метод вложения (embeding) CSS

Метод вложения или внутренний стиль описывается в области head веб-страницы.

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

Пример: в примере использован метод вложения, поэтому оба абзаца в документе будут стилизованы

<head>
<style type="text/css">
  p{
	color:red;
	background:#cccccc;
  }
</style>
</head>
<body>
<p>Абзац1</p>
<p>Абзац2</p>
...

<head> <style type=»text/css»> p{ color:red; background:#cccccc; } </style> </head> <body> <p>Абзац1</p> <p>Абзац2</p> …

Результат:

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

Пример использования вложенного стиля для разных селекторов (тегов)

<head>
<style type="text/css">
h2 {
	border-width: 1; 
	border: groove; 
	text-align: center; 
	color: green
	}
h3 {
	color: maroon; 
	font-style: italic
	}
body {
	background-color: #FF0000;
	}
...
</style>

<head> <style type=»text/css»> h2 { border-width: 1; border: groove; text-align: center; color: green } h3 { color: maroon; font-style: italic } body { background-color: #FF0000; } … </style>

Метод связывания (Linking) в CSS

Это самый надежный и самый эффективный способ использования каскадных таблиц стилей.

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

• Используя метод встраивания определите цвет текста элемента h2.
• Используя метод вложения определите задний фон страницы.
• Используя метод связывания определите написание параграфа курсивным стилем.

Работайте над текстом:

<body>
<h2>В моей душе</h2>
<p>
Я хочу быть ребенком, наивным и смелым,<br/>
Ничего не бояться и верить в добро.<br/>
Я бы снова писала по черному белым:<br/>
Два плюс два - ну, четыре, конечно равно! 
</p>

<body> <h2>В моей душе</h2> <p> Я хочу быть ребенком, наивным и смелым,<br/> Ничего не бояться и верить в добро.<br/> Я бы снова писала по черному белым:<br/> Два плюс два — ну, четыре, конечно равно! </p>