3. Создание статического содержания. Css

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

• Содержание

• 3.1. Таблицы стилей CSS

  • 3.1.1. Общее описание

  • 3.1.2. Добавление CSS

    • 3.1.2.1. Таблица связанных стилей

    • 3.1.2.2. Таблица глобальных стилей

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

  • 3.1.3. Базовый синтаксис

  • 3.1.4. Селекторы тегов

    • 3.1.4.1. Классы

    • 3.1.4.2. Идентификаторы

    • 3.1.4.3. Контекстные селекторы

    • 3.1.4.4. Соседние селекторы

    • 3.1.4.5. Дочерние селекторы

    • 3.1.4.6. Селекторы атрибутов

    • 3.1.4.7. Универсальный селектор

    • 3.1.4.8. Группирование

  • 3.1.5. Наследование

  • 3.1.6. Псевдоклассы

    • 3.1.6.1. Псевдоклассы, определяющие состояние элементов

    • 3.1.6.2. Псевдоклассы, имеющие отношение к дереву документа

  • 3.1.7. Псевдоэлементы

  • 3.1.8. Элементы CSS

    • 3.1.8.1. Текст

    • 3.1.8.2. Цвет

    • 3.1.8.4. Ссылки

    • 3.1.8.5. Списки

    • 3.1.8.6. Единицы измерения

  • 3.1.9. Пример использования CSS

  • 3.1.10. Ключевые термины

• 3.2. Дополнительная тема: регистрация доменов

  • 3.2.1. Общие сведения

  • 3.2.2. Регистрация домена

  • 3.2.4. Управление доменной зоной

  • 3.2.5. Ключевые термины

• 3.3. Дополнительная тема: хостинг сайтов

  • 3.3.1. Общие сведения

  • 3.3.2. Ключевые термины

• 3.4. Краткие итоги

3.1. Таблицы стилей css

3.1.1. Общее описание

CSS (Cascading Style Sheets, каскадные таблицы стилей) – технология описания внешнего вида документа, написанного языком разметки [1]. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

CSS – одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название "стандарты Web". В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01, XHTML и стандарт CSS.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа [2]. До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания (написанного на HTML или другом языке разметки) и представления (написанного на CSS) документа. Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана) и др.

Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit (Arora, Google Chrome, Safari), а также браузер Opera [3]. Что касается Internet Explorer, то только 8-ая его версия полностью поддерживает CSS 2.1 и частично – CSS 3 [4].

Основными преимуществами использования CSS являются:

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

• уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл;

• простота последующего изменения дизайна;

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

Недостатками использования CSS являются:

• различное отображение верстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS;

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

Термин "Каскадные таблицы стилей" был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

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

В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

Рекомендация W3C по CSS1, принята 17 декабря 1996 года, откорректирована 11 января 1999 года. Среди возможностей, предоставляемых этой рекомендацией, можно отметить:

• Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля – обычного, курсивного или полужирного.

• Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.

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

• Выравнивание для текста, изображений, таблиц и других элементов.

• Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки.

Рекомендация W3C по CSS2, принята 12 мая 1998 года. Она построена на CSS1 с сохранением обратной совместимости. В данной CSS2 добавлены следующие возможности:

• Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки.

• Типы носителей. Позволяет устанавливать разные стили для разных носителей (например, монитор, принтер, КПК).

• Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например, для слепых посетителей сайта).

• Страничные носители. Позволяет, например, установить разные стили для элементов на четных и нечетных страницах при печати.

• Расширенный механизм селекторов.

• Указатели.

• Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.

Рабочая версия CSS2.1 W3C от 8 сентября 2009 года. Она построена на CSS2 и содержит исправления ошибок.

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

CSS при отображении страницы может быть взята из различных источников:

• Авторские стили в виде:

• внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе;

• встроенных стилей – блоков CSS внутри самого HTML-документа;

• inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style;

• Пользовательские стили:

  • локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили и применяемый ко всем документам;

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

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

Пример таблицы стилей:

h2 {

font-size: 1.75em;

color: #469;

}

#container {

padding: 0;

}

#column_r_content, #column_l_content {

margin: 10px;

}

p#paragraph1 {

margin: 0;

}

#masthead img {

float: left;

margin: 0;

padding: 0;

}

#navigation a:hover {

color: #000;

text-decoration: none;

border: 1px solid #ed9;

background-color: #ed9;

}

.style_italic {

font-style: italic;

}

Здесь приведено семь правил с селекторами h2, #container, #column_r_content, #column_l_content, p#paragraph1, #masthead img, #navigation a:hover, .style_italic.

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

Второе правило будет применяться к элементам, идентификатор которых равен container. Аналогично ему, третье правило будет применяться к элементам, идентификатор которых равен либо column_r_content, либо column_l_content. Эти элементы будут иметь внешний отступ, равный 10 пикселям.

Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).

Пятое правило будет применяться только к элементам img, которые находятся внутри элемента, атрибут id которых равен masthead. Такие элементы не будут иметь внешних и внутренних отступов и будут прижиматься к левой границе экрана (но внутри своего контейнера).

Шестое правило определяет стиль hover для элементов a, находящихся в элементе с атрибутом id равным navigation. Это правило, в частности, изменить цвет и задний фон ссылки, когда указатель мыши находится над этими элементами.

Седьмое правило будет применено к элементам, атрибут class которых содержит слово ' style_italic '. Например:

<p class="style_italic">

Этот абзац будет выведен курсивом.

</p>