Описание технологии каскадных таблиц стилей

 

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

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

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

§ Авторские стили (информация стилей, предоставляемая автором страницы) в виде:

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

§ Встроенных стилей — блоков CSS внутри самого HTML-документа.

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

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

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

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

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

Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.

Приоритеты рассчитываются таким образом (от большего к меньшему): стиль, напрямую прописанный в тэге; стиль, заданный с помощью атрибута (ID); стиль класса (class); стиль тэга.

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

Схематически это можно показать так:

 

селектор {

свойство: значение;

свойство: значение;

свойство: значение;

}

 

Например:

p {

font-family: " Garamond", serif;

}

h2 {

font-size: 110 %;

color: red;

background: white;

}

.note {

color: red;

background: yellow;

font-weight: bold;

}

p#paragraph1 {

margin: 0;

}

a: hover {

text-decoration: none;

}

#news p {

color: blue;

}

Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a: hover и #news p.

В первых двух правилах HTML-элементам p (абзацу) и h2 (заголовку второго уровня) назначаются стили. Абзацы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.

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

 

< p class=" note" > Этот абзац будет выведен полужирным шрифтом красного цвета на желтом фоне.< /p>

 

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

Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.

Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news».

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

- Лишь ссылка в HTML, а сами CSS в отдельном файле (наиболее предпочтителен):

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

- Еще один способ подключить CSS, находящиеся в отдельном файле:

< style type=" text/css" media=" all" > @import " style.css"; < /style>

- Непосредственно в HTML-документе:

< style type=" text/css" >

body {

color: red;

}

< /style>

- Непосредственно в элемент:

< p style=" font-size: 21px; color: green; " > Рассказ о том, как вредно красить батареи< /p>

Псевдоклассы

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

 

a { text-decoration: none; }a: hover { text-decoration: underline; }

Верхняя строчка - это переопределение стандартного тега < a>, которое запрещает подчеркивать ссылки, а вот нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней.

А вот и другой пример псевдокласса - определение буквицы вначале абзаца:

 

p: first-letter { font-size: 200\%; font-weight: bold; }

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

 

Примечания

 

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

/* Этот текст является комментарием */

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

Основные параметры CSS

 

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

Основные параметры шрифта

 

· font-weight: [bold|normal|number] - жирность шрифта

· font-style: [normal|italic|oblique] - наклон шрифта

· font-size: number - размер шрифта

· font-family: name - гарнитура шрифта

· color: number - цвет шрифта

· background-color: number - цвет подложки

· background: url - текстурная подложка

Псевдоклассы Ссылок

 

· A: active{} Таблица стилей для активных ссылок (при нажатии)

· A: link{} Таблица стилей для собственно ссылок

· A: visited{} Таблица стилей для посещённых ссылок

· A: hover {} Таблица стилей для ссылок при наведении указателя мыши

 

Основные параметры абзаца (и Элементов типа " Box" (div-блоки) )

 

· text-align: [left|right|center|justify] - выравнивание

· text-indent: number - отступ красной строки

· line-height: number -интерлиньяж

· letter-spacing: number - трекинг

· padding-left: number - отступ от текста слева

· padding-right: number - отступ от текста справа

· padding-top: number - отступ от текста сверху

· padding-bottom: number - отступ от текста снизу

· margin-left: number - отступ от границы слева

· margin-right: number- отступ от границы справа

· margin-top: number - отступ от границы сверху

· margin-bottom: number - отступ от границы снизу

Единицы измерения в CSS

 

В свойствах, которым требуется указание размеров, можно использовать несколько способов для их задания:

· относительный размер в процентах (%)

· относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large)

· абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), пикселях (px), средней шириной буквы " m" (em), средней шириной буквы " x" (eх)

· абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in) абсолютный в пикселях (px)

Задание цвета в CSS

 

Цвет для тех свойств, где это нужно, может быть определен одним из трех способов:

· при помощи названия цвета: yellow, red, green, grey,..

· шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..

· десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255, 0, 0), rgb(100, 23, 78).

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

1) дайте свое определение html;

2) для чего предназначен тег < body> < /body>;

3) какие редакторы html вы знаете.

4) назовите операции, которые можно производить с текстом в html;

5) какие значения можно задавать параметру Size;

6) каково назначение тега < strong> < /strong>.

7) дайте свое определение контенту;

8) для чего предназначен тег < div> < /div>;

9) какой тег предназначен для создания заголовков;

10) Для чего предназначены списки;

11) Что такое < li> < /li>;

12) С помощью какого тега можно создавать маркированные списки;

13) Какие форматы изображений вы знаете;

14) Назовите тег, отвечающий за внедрение изображений в html-документ;

15) Можно ли осуществлять выравнивание изображения;

16) что такое гипертекстовая ссылка, дайте свое определение;

17) в чем отличие между относительной и абсолютной ссылкой;

18) можно ли использовать изображение как гиперссылку.

19) какой тег отвечает за создание строк? Какой за создание столбцов;

20) можно ли применять к таблице такие свойства, как цвет фона, размер;

21) каково назначение тега < th> < /th>.

22) дайте определение форме;

23) каково назначение атрибута select;

24) какие виды форм вы знаете.

25) дайте свое определение таблице стилей;

26) что такое псевдоклассы;

27) опишите алгоритм вынесения внешней таблицы стилей в отдельный файл.

Задание на лабораторную работу.

Все страницы делятся на статические (неизменяемые) и динамические (изменяемые, постоянно регенерируемые). К статическим относятся те станицы,

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

· Не менее 10-15 страниц;

· Определиться со способом разбиения страниц на разделы;

· Использовать гиперссылки на странице - все виды;

· Внедрить изображение, фоновый рисунок или цвет;

· Использовать таблицу (к примеру, стат. Данные или прайс-лист);

· Добавьте «обратную связь» (форма — анкета для связи клиента с фирмой);

2) Примените к сайту созданную вами таблицу css:

· Таблица стилей должна быть внешней;

· Не менее, чем 15 классов на таблицу стилей;

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

⇐ Предыдущая123456

Поделиться: