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

Цель: ознакомиться 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 рх):

font-size: 36 px;

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

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

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

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

4. После открытия диалогового окна New CSS Rule (Создать правило CSS) дважды щелкните по кнопке Less Specific (Менее точно), чтобы выбрать селектор #mainContent h1. Щелкните по кнопке ОК . (рисунок 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 . Если вы добавите в область mainContent еще один тег

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

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

в селекторе тегов.

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 или в браузере.

Обратите внимание на изменения, которые внесли в заголовок

и в абзац под изображением Екатеринбурга. Внизу списка 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. Обратите внимание, что выбранный текст оказался набранным заглавными буквами, а индикатор селектора тегов включает имя класса . Класс был добавлен к выбранному тексту по-средством использования тега .

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

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

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

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

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

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

Посредством Dreamweaver вы можете легко вставлять в документ разделы страницы или теги

для создания областей макета или для того, чтобы упорядочить области страницы. Тегу

можно присвоить ID или класс. В этом упражнении мы создадим несколько разделов

и присвоим их одному и тому же определяемому пользователем классу.

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 вокруг раздела страницы, в котором находятся выбранное изображение и текст, отображается пунктирная линия, указывающая на наличие

(рисунок 2.18).

Рисунок 2.18 - Выделение блока

Процесс добавления подобных тегов

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

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

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

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

Щелкните по кнопке ОК .

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

Раздел страницы, посвященный Алине, теперь находится в своем собственном теге

, который отображается в окне Document в виде пунктира.

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

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

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

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

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

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 h1 и се-лектора #mainContent hi? Как называются эти типы селекторов?
3. Как применить класс CSS к тегу?
4. Как вставить на веб-страницу новые области
   ?
5. Какие свойство и значение CSS используются для скрытия любого содержимого, ассо-циируемого со стилем CSS?

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

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

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

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

После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).

Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.

Рис. 1.1. Веб-страница, созданная только на HTML

Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2).

Рис. 1.2. Веб-страница, созданная на HTML и CSS

Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).

Пример 1.1. Исходный код документа

HTML5 CSS 2.1 IE Cr Op Sa Fx

Флексагон

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

Сам код HTML никаких изменений не претерпел и единственное добавление - это строка . Она ссылается на внешний файл с описанием стилей под именем style.css . Содержимое этого файла показано в примере 1.2.

Пример 1.2. Содержимое стилевого файла style.css

Body { font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */ font-size: 11pt; /* Размер основного шрифта в пунктах */ background-color: #f0f0f0; /* Цвет фона веб-страницы */ color: #333; /* Цвет основного текста */ } h1 { color: #a52a2a; /* Цвет заголовка */ font-size: 24pt; /* Размер шрифта в пунктах */ font-family: Georgia, Times, serif; /* Семейство шрифтов */ font-weight: normal; /* Нормальное начертание текста */ } p { text-align: justify; /* Выравнивание по ширине */ margin-left: 60px; /* Отступ слева в пикселах */ margin-right: 10px; /* Отступ справа в пикселах */ border-left: 1px solid #999; /* Параметры линии слева */ border-bottom: 1px solid #999; /* Параметры линии снизу */ padding-left: 10px; /* Отступ от линии слева до текста */ padding-bottom: 10px; /* Отступ от линии снизу до текста */ }

В файле style.css как раз и описаны все параметры оформления таких тегов как ,

и

Заметьте, что сами теги в коде HTML пишутся как обычно.

Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.

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

Типы стилей

Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.

Стиль браузера

Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом

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

Стиль автора

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

Стиль пользователя

Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Кнопка «Оформление» , как показано на рис. 1.3.

Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer

В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Параметры стиля» (рис. 1.4).

Рис. 1.4. Подключение стиля пользователя в браузере Opera

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

Вопросы для проверки

1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?

1. font-color
2. color
3. font-family
4. font-size

2. Что такое стиль?

1. Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
2. Язык разметки гипертекстовых документов.
3. Набор правил форматирования элементов веб-страницы.
4. Метод преобразований текстовых документов в HTML.
5. Технология, представляющая собой разные приёмы для вёрстки HTML-кода.

3. Как расшифровывается аббревиатура CSS?

1. Colorful Style Sheets
2. Cascading Style Sheets
3. Computer Style Sheets
4. Creative Style Sheets
5. Common Style Sheets

Ответы

2. Набор правил форматирования элементов веб-страницы.

Перед тем, как мы начнём наше путешествие по урокам создания сайтов на HTML и CSS, важно понимать различия между двумя языками, синтаксис каждого языка и некоторую основную терминологию.

Что такое HTML и CSS?

HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.

Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.

Основные термины HTML

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

Элементы

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

до

) и абзацев (определены как

); в список можно включить элементы ,

, , и и многие другие.

Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:

Теги

Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.

Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например,

.

Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например,

.

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

Так, теги ссылок будут выглядеть примерно так:

...

Атрибуты

Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id , который идентифицирует элемент; атрибут class , который классифицирует элемент; атрибут src , который определяет источник встраиваемого содержимого; и атрибут href , который указывает ссылку на связанный ресурс.

Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент с атрибутом href будет выглядеть следующим образом:

Shay Howe

Демонстрация основных терминов HTML

Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега и закрывающего тега охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com" в открывающем теге.

Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег

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

Настройка структуры документа HTML

HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.

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

Объявление типа документа или находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто . После этого идёт элемент означающий начало документа.

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

Всё видимое содержимое веб-страницы будет находиться в элементе . Структура типичного HTML-документа выглядит следующим образом:

Привет, мир!

Это веб-страница.

Демонстрация структуры HTML-документа

Этот код показывает документ, начиная с объявления типа документа, , затем сразу идёт элемент . Внутри идут элементы и . Элемент содержит кодировку страницы через тег и название документа через элемент

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

Рис. 1.04. Наш сайт Styles Conference со сбросом CSS

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Резюме

Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

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

Напомним, что мы рассмотрели следующее:

• Разница между HTML и CSS.
• Знакомство с элементами HTML, тегами и атрибутами.
• Настройка структуры вашей первой веб-страницы.
• Знакомство с селекторами CSS, свойствами и значениями.
• Работа с селекторами CSS.
• Указатель на CSS из HTML.
• Важность CSS сброса.

Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.

Ресурсы и ссылки

• Common HTML terms via Scripting Master
• CSS Terms & Definitions via Impressive Webs
• CSS Tools: Reset CSS via Eric Meyer

Presenting a document to a user means converting it into a usable form for your audience. Browsers , like , or Internet Explorer , are designed to present documents visually, for example, on a computer screen, projector or printer.

How does CSS affect HTML?

Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from:

• A set of properties , which have values set to update how the HTML content is displayed, for example, I want my element"s width to be 50% of its parent element, and its background to be red .
• A selector , which selects the element(s) you want to apply the updated property values to. For example, I want to apply my CSS rule to all the paragraphs in my HTML document .

A set of CSS rules contained within a stylesheet determines how a webpage should look. You will learn a lot more about what CSS syntax looks like in the next article of the module - CSS Syntax .

A quick CSS example

The above descriptions may or may not have made sense, so let"s make sure things are clear by presenting a quick example. First of all, let"s take a simple HTML document, containing an

and a element represents a paragraph.">

(notice that a stylesheet is applied to the HTML using a element):

Hello World!

This is my first CSS example

Now let"s look at a very simple CSS example containing two rules:

H1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; }

The first rule starts with an h1 selector, which means that it will apply its property values to the

element. It contains three properties and their values (each property/value pair is called a declaration ):

1. The first one sets the text color to blue.
2. The second sets the background color to yellow.
3. The third one puts a border around the header that is 1 pixel wide, solid (not dotted, or dashed, etc.), and colored black.

The second rule starts with a p selector, which means that it will apply its property values to the element represents a paragraph.">

element. It contains one declaration, which sets the text color to red.

In a web browser, the code above would produce the following output:

This isn"t too pretty, but at least it starts to give you an idea of how CSS works.

Active learning: Writing your first CSS

Now we"ll give you a chance to write your own bit of CSS. You can do this using the Input areas below, in the live editable example. In a similar fashion to what you saw above, you"ve got some simple HTML elements and some CSS properties. Try adding some simple declarations to your CSS, to style the HTML.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

Playable code

HTML Input

<h1>Hello World!</h1> <p>This is a paragraph.</p> <ul> <li>This is</li> <li>A list</li> </ul>

CSS Input

h1 { } p { } li { }

Output

var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var output = document.querySelector(".output"); var solution = document.getElementById("solution"); var styleElem = document.createElement("style"); var headElem = document.querySelector("head"); headElem.appendChild(styleElem); function drawOutput() { output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; } reset.addEventListener("click", function() { htmlInput.value = htmlCode; cssInput.value = cssCode; drawOutput(); }); solution.addEventListener("click", function() { htmlInput.value = htmlCode; cssInput.value = "h1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n}\n\np {\n color: red;\n}\n\nli {\n text-shadow: 2px 2px 3px purple;\n}"; drawOutput(); }); htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput);

How does CSS actually work?

When a browser displays a document, it must combine the document"s content with its style information. It processes the document in two stages:

1. The browser converts HTML and CSS into the (Document Object Model ). The DOM represents the document in the computer"s memory. It combines the document"s content with its style.
2. The browser displays the contents of the DOM.

About the DOM

A DOM has a tree-like structure. Each element, attribute and piece of text in the markup language becomes a DOM node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.

Understanding the DOM helps you design, debug and maintain your CSS because the DOM is where your CSS and the document"s content meet up.

DOM representation

Rather than a long, boring explanation, let"s take an example to see how the DOM and CSS work together.

Let"s assume the following HTML code:

In the DOM, the node corresponding to our

Element is a parent. Its children are a text node and the nodes corresponding to our elements. The SPAN nodes are also parents , with text nodes as their children:

P ├─ "Let"s use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"

This is how a browser interprets the previous HTML snippet -it renders the above DOM tree and then outputs it in the browser like so:

Applying CSS to the DOM

Let"s say we added some CSS to our document, to style it. Again, the HTML is as follows:

Let"s use: Cascading Style Sheets

If we apply the following CSS to it:

Span { border: 1px solid black; background-color: lime; }

The browser will parse the HTML and create a DOM from it, then parse the CSS. Since the only rule available in the CSS has a span selector, it will apply that rule to each one of the three spans. The updated output is as follows:

How to apply your CSS to your HTML

There are three different ways to apply CSS to an HTML document that you"ll commonly come across, some more useful than others. Here we"ll briefly review each one.

External stylesheet

You"ve already seen external stylesheets in this article, but not by that name. An external stylesheet is when you have your CSS written in a separate file with a .css extension, and you reference it from an HTML element. The HTML file looks something like this:

Hello World!

This is my first CSS example

CSS дает широкие возможности по оперированию стилем текста. Можно влиять на шрифт, цвет, размер и другие свойства текста.

Так как эта страница расчитана на новичков, то сначала напомним базовый синтаксис CSS и используемую терминологию.

Каждое правило CSS состоит из селектора и определения. Селектор - обычно это тег, к которому мы применяем наш стиль, а определение - это само стилевое отображение. Определение состоит из свойства и его значения. Например: свойство - цвет, значение - красный.

Синтаксис CSS следующий:

селектор { свойство: значение }

Пример правила CSS:

p { color : blue }

Отображать текст синим цветом. Одному селектору можно указать несколько пар (свойство: значение).

p { color : blue ; font-size : 10pt }

В этом примере задано правило тегу

Отображать текст синим цветом и размером 10pt. То есть тут мы имеем две пары (свойство: значение) применённые к одному селектору, в данном случае к тегу абзаца

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

Свойства шрифта

Если не указывать это свойство в CSS, то броузер будет показывать текст шрифтом по умолчанию. Обычно это Times New Roman.

Список шрифтов в значении font-family может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки, одинарные или же двойные.

Браузер поочерёдно проверяет наличие шрифтов из списка на компьютере пользователя. Если первый шрифт в списке есть, то используется он, иначе браузер проверяет наличие второго шрифта из списка. Если ни одного нет, используется шрифт по умолчанию. В конце списка обычно прописывают ключевые слово, которое описывает тип желаемого шрифта - serif, sans-serif, fantasy, cursive или monospace.

Универсальные семейства шрифтов:

• serif - антиквенные шрифты (шрифты с засечками), типа Times;
• sans-serif - рубленные шрифты (шрифты без засечек или гротески), типичный представитель - Arial;
• monospace - моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
• fantasy - семейство декоративных шрифтов;
• cursive - семейство курсивных шрифтов;

Пример с использованием:

Заголовок h1

Заголовок h2

Следующее свойство:

Пример кода, в этом примере встроим стили в тег при помощи атрибута style.

Пример нормального шрифта.

Пример курсива.

Пример наклонного шрифта.

Видно что курсив от наклонного шрифта внешне не отличается.

Следующее свойство:

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

Обычный текст. Текст капителью.

Опять обычный текст.

Следующее свойство:

Свойство font-weight устанавливает насыщенность шрифта. Для этого в значении используются ключевые слова: bold - полужирное начертание, normal - нормальное начертание. Значение может быть установленно в диапазоне от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное - 900. Нормальное начертание шрифта (normal, которое установлено по умолчанию) соответствует 400, стандартный полужирный текст, bold, - значению 700.

Браузеры обычно не могут точно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold , normal и lighter . На практике же начертание в большинстве браузеров обычно ограничено только двумя вариантами: нормальное начертание и жирное начертание.

Значения lighter и bolder изменяют жирность шрифта относительно насыщенности родителя, соответственно, в меньшую и большую сторону.

Обычный текст. Текст bold.

Опять обычный текст.

Следующее свойство:

Свойство font-size - определяет размер шрифта элемента. Размер шрифта можно задать несколькими способами.

Абсолютный размер кегля шрифта может задаваться с использованием ключевых слов: xx-small (крайне малый), small (малый), medium (средний, значение по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). Абсолютные размеры шрифта зависят от настроек браузера и операционной системы, так что они не совсем абсолютны.

Для изменения размера текста относительно родителя используется другой набор констант (larger - увеличивает размер относительно родительского, smaller - уменьшает размер).

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

Текст xx-small. Текст larger.

Текст small.

Текст medium.

Текст large.

Текст x-large.

Текст xx-large.

Опять обычный текст.

Текст 150%.

Текст 15px. Текст larger.

Свойства текста

Кроме работы со шрифтами, CSS даёт ряд инструментов для работы с свойствами самого текста.

Рассмотрим первое свойство:

При установке межстрочного интервала отчёт идёт от базовой линии шрифта. По умолчанию расстояние между строками текста зависит от вида и размера шрифта и определяется браузерами автоматически. Отрицательное значение интерлиньяжа не допускается.

Обычный текст. Первая строка.
Вторая строка.
Третья строка.

Изменённый текст. Первая строка.
Вторая строка.
Третья строка.

При процентной записи за 100% берется высота шрифта.

Следующее свойство:

При помощи определения { text-decoration : none } можно убирать подчеркивание у ссылок, которое устанавливается в браузерах по умолчанию.

Поисковик Google.

Следующее свойство:

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

Свойство text-transform

Свойство	Значение	Описание	Пример
text-transform	none capitalize uppercase lowercase	Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные	text-transform: uppercase

Пример использования:

Текст none.

Текст capitalize.

Текст uppercase.

Текст lowercase.

Сравните текст который содержится в html-коде с текстом в окне браузера.

Следующее свойство:

Свойство text-align - служит для выравнивания текста по горизонтали окна браузера или контейнера, в котором расположен блок текста.

Свойство text-align

Свойство	Значение	Описание	Пример
text-align	left right center justify	Выравнивание текста	text-align: right

Подробное описание значений:

• center - текст выравнивается по центру.
• justify - выравнивание по ширине, фактически это выравнивание по правому и левому краю одновременно, между словами текста образовываются пустые места, которые браузер заполняет пробелами.
• left - выравнивание по левопу краю. Это значение используется по умолчанию.
• right - выравнивание по правому краю.

Пример использования этого свойства будет совмещён с примером работы следующего свойства.

Следующее свойство:

Свойство text-indent - служит для создания величины отступа первой строки блока текста (например, для абзаца

Это свойство допускает отрицательное значение, в таком случае создается выступ первой строки.

Свойство text-indent

Свойство	Значение	Описание	Пример
text-indent	значение %	Отступ первой строки	text-indent: 15px; text-indent: 10%

Работа со свойствами text-align и text-indent. Для лучшего понимания работы кода откройте страницу в новом окне и уменьшите его размер.

Windows Phone Железо Вконтакте Windows 10 Обзоры Ошибки Windows 8 Интересное Советы Новости

Сравниваем флагманы: Sony Xperia Z3 и Xperia Z3 Compact Лучше сони z3

Sony Xperia Z, Z1, Z2, Z3, Z5 — как не запутаться, перечисляя модификации смартфонов, выпущенные за последние 3 года? И это не считая версий вроде Compact, Ultra или Premium, которые тоже существуют в линейке японской марки. Чтобы жить было интереснее и

Заработок в соц сетях (деньги на лайках) — как зарабатывают в ВК, Инстаграме, Ютубе, Фейсбуке и других социальных сетях

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

Почему не заряжается ноутбук, когда он включен в сеть

Добрый день.Аккумуляторная батарея есть абсолютно в каждом ноутбуке (без нее немыслимо представить себе мобильное устройство).Случается иногда так, что она перестает заряжаться: и вроде бы ноутбук подключен к сети, и все светодиоды на корпусе моргают, да

Самые читаемые материалы

Сравниваем флагманы: Sony Xperia Z3 и Xperia Z3 Compact Лучше сони z3

Заработок в соц сетях (деньги на лайках) — как зарабатывают в ВК, Инстаграме, Ютубе, Фейсбуке и других социальных сетях

Почему не заряжается ноутбук, когда он включен в сеть

Основные устройства компьютера, их назначение и взаимосвязь

Персональный GPS трекер «ГдеМои

Безопасный браузер для windows 7

Что такое расширение файла EPUB?

 

Последние материалы

Основные устройства компьютера, их назначение и взаимосвязь

Основные устройства компьютера «живут» в системном блоке. К ним относятся: материнская плата, процессор, видеокарта, оперативная память, жесткий диск. Но за его пределами, обычно на столе, «проживают» также не менее важные устройства компьютера. Такие как.

Персональный GPS трекер «ГдеМои

Современные GSM/GPS-трекеры оснащены цифровым акселерометром, который способен фиксировать данные о возможных авариях, столкновениях, переворотах и незапланированных подъемах кузова корпоративного автотранспорта, информируя об этом владельца. Забота о бл.

Безопасный браузер для windows 7

Разумеется, что лучшие браузеры - это быстрые, современные и функциональные решения. Но как среди десятков браузеров выбрать тот самый, единственный, неповторимый, и самый лучший? В этой статье мы не расскажем вам про 10 лучших браузеров, так как нет не.

Что такое расширение файла EPUB?

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

mirtortov.ru

Советы по настройке компьютеров и смартфонов © 2024

Задать вопрос эксперту Связь с администрацией

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