Каскадные таблицы стилей (CSS) Каскадные (многоуровневые) таблицы стилей – cascading style sheets (CSS) Автор: Лимаренко А.И., Учитель информатики и ИКТ. - презентация

1 Каскадные таблицы стилей (CSS) Каскадные (многоуровневые) таблицы стилей – cascading style sheets (CSS) Автор: Лимаренко А.И., Учитель информатики и ИКТ гимназии 446

2 Каскадные таблицы стилей (CSS) Каскадные (многоуровневые) таблицы стилей – cascading style sheets (CSS) При помощи CSS (каскадных таблиц стилей) можно делать такие вещи, которые и не снились веб-мастерам, начинавшим строить самые первые веб-страницы. Теперь при помощи CSS можно не только оформлять внешний вид текста, но и позиционировать объекты на своем сайте, верстать целые страницы, придавать различные эффекты, менять стиль оформления всех страниц сайта одновременно и прочее...

3 Каскадные таблицы стилей (CSS) Существуют три способа применения стилей в документе HTML. 1.Встраивание (inline). Описание стиля можно встроить в различные теги HTML, для которых стиль имеет смысл, например: для объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек таблицы. В следующем примере демонстрируется тег объявления абзаца с добавлением к нему атрибута STYLE для получения требуемого эффекта. текст красного цвета

4 Каскадные таблицы стилей (CSS) 2. Внедрение (embed), обеспечивающее контроль над страницей HTML. Использование тега в пределах раздела страницы позволяет детально описать атрибуты, применяемые ко всей странице стиля. текст красного цвета

5 Каскадные таблицы стилей (CSS) 3. Связанные (link) стили, называемые также внешними, являются развитием внедренных стилей. При этом используется тот же тег STYLE, что и ранее, но все описания хранятся в отдельном файле (обычно с расширением.css). Сам файл либо должен располагаться в корневом каталоге узла, либо вы должны корректно определить связь с ним в HTML-документах. текст красного цвета файл style.css должен содержать: p{color: red;}

6 Каскадные таблицы стилей (CSS) Селекторы Это элементы тегов, задаваемые в начале определения листов стилей; эти элементы сообщают браузеру, где применить стиль. Стоящее после селектора определение стиля заключается в фигурные скобки. Вот пример, в котором селектором является BODY: body { color: blue;} Несколько селекторов можно группировать вместе, отделив их друг от друга запятыми: h1, p, h2{font-size: 12px;} Вместо селекторов можно использовать маску *. В данном примере стиль с определенным кеглем шрифта применяется ко всем находящемся на странице тегам: *{ font-size: 14pt;}

7 Каскадные таблицы стилей (CSS) Наследование и переопределение При обсуждении технических спецификаций часто бывает полезно вникнуть в смысл названия. В технике принято точно определять в названии суть и назначение стандарта или спецификации. Описание стилей отображения элементов HTML-разметки носит название "Каскадные таблицы стилей". Со словом "стилей" все более или менее понятно. Слово "таблицы" подразумевает набор свойств элемента разметки, который можно представить в виде строки в таблице свойств, т.е. элементы разметки - строки, а свойства - столбцы. А вот слово "каскадные" требует пояснения. Во-первых, существует иерархия элементов разметки (дерево объектов на странице), во-вторых, свойства этих объектов могут наследоваться. Таким образом, в дереве объектов образуется ветвь, которая ведет к листу дерева - элементу разметки, например, элементу списка или параграфу. Его свойства определяются элементами разметки, в которые вложен элемент и описателями стиля для самого этого элемента:

8 Каскадные таблицы стилей (CSS) Наследование и переопределение Это начало первого раздела, который сдвинут на 10 пикселей вправо относительно левого края параграфа и на 10 пикселей вниз относительно стандартной границы параграфа. Это начало второго раздела, который сдвинут относительно предыдущего раздела на 10 пикселей, а относительно параграфа на 20 пикселей. Данный раздел имеет красную строку с отступом в 10 пикселей и смещен относительно предыдущего раздела на 20 пикселей. 1. первый элемент списка 2. второй элемент списка Список сдвинут относительного второго раздела на 10 пикселей, а относительно текущего параграфа на 30 пикселей. Первая строка не является строкой начала параграфа, поэтому на нее отступ не распространяется (только в Netscape).

9 Каскадные таблицы стилей (CSS) Наследование и переопределение Прeдыдущий текст в терминах разделов и списка закодирован так: Это начало первого раздела, который сдвинут на 10 пикселей вправо относительно левого края параграфа и на 10 пикселей вниз относительно стандартной границы параграфа. Это начало второго раздела, который сдвинут относительно предыдущего раздела на 10 пикселей, а относительно параграфа на 20 пикселей. Данный раздел имеет красную строку с отступом в 10 пикселей и смещен относительно предыдущего раздела на 20 пикселей. первый элемент списка второй элемент списка Список сдвинут относительного второго раздела на 10 пикселей, а относительно текущего параграфа на 30 пикселей. Первая строка не является строкой начала параграфа, поэтому на нее отступ не распространяется (только в Netscape).

10 Каскадные таблицы стилей (CSS) Наследование и переопределение Таким образом отступы, отсчитываются относительно элемента, в который вложен текущий элемент. Все параметры, которые не были переопределены в текущем элементе, наследуются из старшего по иерархии элемента. Последнее хорошо продемонстрировано в применении стилей отображения списка, который вложен в раздел и поэтому отображается курсивом. Когда объяснение некоторого феномена HTML-разметки растягивается на несколько параграфов, то полезно воспользоваться графической схемой построения страницы, которая приведена ниже:

11 Каскадные таблицы стилей (CSS) Наследование и переопределение При использовании стилей действуют следующие правила старшинства стилей: 1. Сначала применяются стили умолчания браузера 2. Стили умолчания браузера переопределяются прилинкованными стилями (элемент LINK заголовка документа). 3. Прилинкованные стили переопределяются описаниями стилей в элементе STYLE. 4. Стили элемента STYLE переопределяются атрибутом style в любом из элементов разметки. Не все атрибуты стиля могут наследоваться. Например, "набивка" (отступ содержания элемента от его границ) элемента BODY не наследуется вложенными в него элементами и определяется по умолчанию или прописывается отдельно для каждого элемента. Для единства отображения элементов следует прописывать стиль по максимуму атрибутов, чтобы добиться единообразия при отображении.

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

13 Каскадные таблицы стилей (CSS) Синтаксис таблицы стилей Указатель (Selector). Указатель является элементом, к которому будут применяться назначаемые вами атрибуты. Это может быть просто тег типа заголовка (H1) или абзаца (Р). Таблицы стилей позволяют использовать различные объекты, включая классы, которые будут кратко обсуждаться далее. Свойство (Property). Свойство определяет указатель. Например, если в качестве указателя выбран абзац, вы можете включить свойства, определяющие этот указатель. В свойства входят такие элементы, как поля, шрифты и фоновые изображения. В таблицах стилей существует много свойств, которые можно использовать для того, чтобы определить указатель. Значение (Value). Значения определяют свойства. Предположим, что у вас есть заголовок первого уровня H1(указатель) и вы включаете свойство type family (семейство шрифта). Шрифт, который на самом деле будет применен к указанному фрагменту, задается значением этого свойства. Описание (Declaration). Свойства и значения объединяются, образуя описание. Строка (Rule). Указатель и описание образуют строку

14 Каскадные таблицы стилей (CSS) Определение правил CSS Итак, каскадная таблица стилей - это набор правил форматирования тегов HTML. Например, для того, чтобы цвет фона Web-страницы сделать черным, необходимо объявить следующее правило форматирования: body{background:black} В данном случае объявлено правило форматирования тега body, а именно - свойству стиля background присвоено значение black (черный). В результате применения этого правила цвет фона всего документа изменится на черный. Обратите внимание: в таблице стилей теги HTML не заключаются в угловые скобки. Свойства CSS должны находиться в фигурных скобках. Для каждого тега HTML можно указать не одно, а несколько свойств стиля. Изменим с помощью CSS не только цвет фона Web-страницы, но и цвет шрифта (на белый). Body {background: black;color:white} Одно и то же правило стиля можно применить сразу к нескольким различным тегам HTML-страницы. Например: body, td, h1{ background:black; color:white}

15 Каскадные таблицы стилей (CSS) Встроенный стиль Встроенный стиль применяется к любому тегу HTML с помощью атрибута style следующим образом: 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. Посмотрим на результат: 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.

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

17 Каскадные таблицы стилей (CSS) Встроенный стиль Вот пример работы тега : AII of the text within this section is 18 point Garamond. AII of the text within this section is 18 point Garamond. и тега : This text appears in the color red, with no line break after the closing span tag and the rest of the text.

18 Каскадные таблицы стилей (CSS) Встроенный стиль Cовет Хотя встроенные стили довольно полезны - гораздо лучше разрабатывать стандартные стили для всего Web-узла и затем применять их, используя внедренные или связанные таблицы стилей.

19 Каскадные таблицы стилей (CSS) Внедренный стиль Внедренные стили используют тег, расположенный между тегами и в стандартном документе HTML. Рассмотрим пример внедренного стиля: Embedded Style Sheet Example BODY{ background: #FFFFFF; color: #000000; } H1{ font: 14pt verdana; color: #CCCCCC;} P{font: 12pt times;} A{color: #FFOOOO; text-decoration: none}...

20 Каскадные таблицы стилей (CSS) Внедренный стиль Как видно из примера, приведенного выше, таблица стилей теперь отличается от кода стандартной страницы HTML, но все же логику проследить нетрудно. В нашем случае для основной части страницы (body) указаны цвет фона, цвет текста. Для заголовка первого уровня (H1) указывается шрифт (название шрифта и размер в пунктах). В этом и состоит удобство каскадных таблиц стилей - вы можете задавать размеры не только в пунктах, но и пикселях (рх), процентах (75%) и сантиметрах (cm). Другой интересный момент этой таблицы стилей - различие стилей шрифтов заголовка и абзаца. Они отличаются цветом, отступом и гарнитурой. В теге якоря (А) можно увидеть еще один очень удобный элемент синтаксиса. Строка text-decoration: none удаляет подчеркивание ссылок, так что результат выглядит чисто и привлекательно.

21 Каскадные таблицы стилей (CSS) Связанные таблицы стилей Связанные (linked), или внешние (external), таблицы стилей являются расширением понятия внедренных стилей. Используется тот же самый код, что и для внедренной таблицы стилей, но он помещается в отдельный документ (файл с расширением.css). После этого с этим документом (файлом) связываются все страницы, к которым необходимо применить данный стиль.

22 Каскадные таблицы стилей (CSS) Связанные таблицы стилей Вот как выглядит пример связанной таблицы стилей: BODY{ background: #ffffcc; color: #000000; } P { font-family : sans-serif; font-style : italic; font-size : 16pt; color: #006633; } H1{ font-family: Arial, Helvetica, sans-serif; font-size: 24pt; color: #996633; }

23 Каскадные таблицы стилей (CSS) Связанные таблицы стилей Теперь сохраним этот документ как отдельный файл. Назовем его style-l.css и поместим в папку таблиц стилей с именем style. Свяжем с этим документом любое количество страниц HTML. Для этого нужно использовать между тегами и следующую конструкцию: Любая страница, содержащая такую связь, будет оформлена в соответствии со стилями, указанными в файле style_1.css. Результаты применения стилей показаны здесь.здесь.

24 Каскадные таблицы стилей (CSS) Связанные таблицы стилей Код этой страницы выглядит следующим образом: Пример использования связанной таблицы стилей Старинная студенческая песня Поднявши меч на наш союз достоин будет худшей кары, и я за жизнь его тогда не дам и ломанной гитары. Как вожделенно жаждет век нащупать брешь у нас в цепочке... Возьмемся за руки друзья, чтоб не пропасть поодиночке. Это стихотворение Булата Окуджавы, ставшее уже классикой.

25 Каскадные таблицы стилей (CSS) Связанные таблицы стилей Здесь важно помнить о смысле концепции каскадирования. Если вам нужны 10 страниц HTML, на которые глобально воздействует эта таблица стилей, вы можете ее применить. Затем, если нужно внести небольшие корректировки в отдельные страницы, можно либо внедрить в эти страницы дополнительные стили, либо использовать встроенный стиль. Cовет Обязательно просматривайте страницы с таблицами стилей в соответствующем броузере - Internet Explorer 6.0 и выше. В противном случае все ваши стили могут исчезнуть! Следует всегда тестировать такие страницы без таблицы стиля (используйте более старый броузер или просто временно измените название таблицы стилей, чтобы броузер не мог ее найти) и проверять, чтобы они выглядели приемлемо.

26 Каскадные таблицы стилей (CSS) Спасибо за внимание!