Каскадные таблицы стилей Лекция 7

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

Cascading Style Sheets Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми. Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми. Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений. Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений. Схематически это можно показать так: Схематически это можно показать так: селектор, селектор { селектор, селектор { свойство: значение; свойство: значение; свойство: значение; свойство: значение; свойство: значение; свойство: значение; }

Cascading Style Sheets Например: Например: p { font-family: Garamond, serif; } p { font-family: Garamond, serif; } h2 { font-size: 110 %; color: red; background: white; } h2 { font-size: 110 %; color: red; background: white; }.note { color: red; background: yellow; font-weight: bold; }.note { color: red; background: yellow; font-weight: bold; } p#paragraph1 { margin: 0; } p#paragraph1 { margin: 0; } a:hover { text-decoration: none; } a:hover { text-decoration: none; } #news p { color: blue; } #news p { color: blue; } Здесь приведено шесть правил с селекторами p, h2,.note, p#paragraph1, a:hover и #news p. Здесь приведено шесть правил с селекторами p, h2,.note, p#paragraph1, a:hover и #news p. В первых двух правилах HTML-элементам p (параграфу) и h2 (заголовку второго уровня) назначаются стили. Параграфы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем. В первых двух правилах HTML-элементам p (параграфу) и h2 (заголовку второго уровня) назначаются стили. Параграфы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.GaramondserifкеглемGaramondserifкеглем Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например: Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например: Этот параграф будет выведен полужирным шрифтом красного цвета на желтом фоне. Этот параграф будет выведен полужирным шрифтом красного цвета на желтом фоне. Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin). Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin). Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами. Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами. Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news». Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news».

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

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

CSS-вёрстка background-image:url(dog.jpg) данный фоновый рисунок можно копировать по разным сторонам, к примеру: background-image:url(dog.jpg) данный фоновый рисунок можно копировать по разным сторонам, к примеру: Данное значение позволяет снабдить страницу фоном, а также копировать его при помощи атрибута repeat: repeat-x – копии по горизонтали, repeat-y – копии по вертикал и no-repeat – без копий. Данное значение позволяет снабдить страницу фоном, а также копировать его при помощи атрибута repeat: repeat-x – копии по горизонтали, repeat-y – копии по вертикал и no-repeat – без копий.

CSS-вёрстка Можно использовать трехзначную запись #123 вместо # Можно использовать трехзначную запись #123 вместо # Далее, для того, чтобы отцентрировать текст по одной из сторон используется атрибут text-align:center Далее, для того, чтобы отцентрировать текст по одной из сторон используется атрибут text-align:center

CSS-вёрстка Для задания размеров шрифта, а также его цвета и гарнитуры используется следующие свойства. Для задания размеров шрифта, а также его цвета и гарнитуры используется следующие свойства. Font-size: larger – относительное увеличение, smaller – относительное уменьшение, Font-size: larger – относительное увеличение, smaller – относительное уменьшение, 120% - процентное выражение, 120% - процентное выражение, 18px – задание размера в пикселях, 18px – задание размера в пикселях, абсолютное задание размера – xx-small, x-small, small, medium, large, x-large, xx-large, абсолютное задание размера – xx-small, x-small, small, medium, large, x-large, xx-large, либо в других единицах: рх, мм, см, in (дюйм). либо в других единицах: рх, мм, см, in (дюйм).

CSS-вёрстка Изменить можно не только сам шрифт, но также регистр символов текста с помощью стилевого свойства Изменить можно не только сам шрифт, но также регистр символов текста с помощью стилевого свойства text-transform: capitalize (верхний регистр первых букв всех слов), text-transform: capitalize (верхний регистр первых букв всех слов), uppercase (все буквы в верхнем регистре), uppercase (все буквы в верхнем регистре), lower-case (все в нижнем), lower-case (все в нижнем), none (регистр отсутствует). none (регистр отсутствует).

CSS-вёрстка Элемент можно заменить на Элемент можно заменить на font-weight: bold, normal, font-weight: bold, normal, (причем 400- normal, а 700- bold), относительные значения – bolder и lighter. (причем 400- normal, а 700- bold), относительные значения – bolder и lighter.

CSS-вёрстка Стиль написания фраз задается атрибутом font-style: italic (курсив), Стиль написания фраз задается атрибутом font-style: italic (курсив), normal (обычный), normal (обычный), oblique (наклонный шрифт). oblique (наклонный шрифт).

CSS-вёрстка Атрибут заменяется на свойство margin, с помощью которого можно регулировать поля со всех сторон элемента, а для индивидуальной регулировки полей с каждой стороны можно использовать свойства margin-top, bottom, left, right. Атрибут заменяется на свойство margin, с помощью которого можно регулировать поля со всех сторон элемента, а для индивидуальной регулировки полей с каждой стороны можно использовать свойства margin-top, bottom, left, right. Значения задаются в пикселях. Значения задаются в пикселях.

CSS-вёрстка Практически для всех элементов можно так же определить отступы Практически для всех элементов можно так же определить отступы padding (padding: 60px; padding-left: 20px;). padding (padding: 60px; padding-left: 20px;). Различие между полем и отступом заключается в том, что отступ находится внутри рамки элемента, а поле – вне нее. Различие между полем и отступом заключается в том, что отступ находится внутри рамки элемента, а поле – вне нее. Также определенный абзац можно не только выровнять по определенной стороне, но и задать размеры блока, в который будет вписан абзац Также определенный абзац можно не только выровнять по определенной стороне, но и задать размеры блока, в который будет вписан абзац

CSS-вёрстка Абзацный отступ или красную строку (раньше мы использовали сочетание символов - ) можно создать при помощи стилевого свойства text-indent: отступ в любых единицах, к примеру: Абзацный отступ или красную строку (раньше мы использовали сочетание символов - ) можно создать при помощи стилевого свойства text-indent: отступ в любых единицах, к примеру: px – пиксели, MM – миллиметры, CM – сантиметры, IN – дюймы, PT – пункты, px – пиксели, MM – миллиметры, CM – сантиметры, IN – дюймы, PT – пункты, EX – отступ, равный высоте строчных букв, EM – отступ, равный высоте шрифта в целом. EX – отступ, равный высоте строчных букв, EM – отступ, равный высоте шрифта в целом.

CSS-вёрстка Более гибко можно выбирать свойства шрифта: его начертание, размер, степень жирности, гарнитуру и оформление. Свойства font-style, font- weight, font-size мы уже рассмотрели, теперь рассмотрим еще 2 не менее важных свойства. Более гибко можно выбирать свойства шрифта: его начертание, размер, степень жирности, гарнитуру и оформление. Свойства font-style, font- weight, font-size мы уже рассмотрели, теперь рассмотрим еще 2 не менее важных свойства. 1) text-decoration: underline (подчеркнутый), overline (надчеркнутый), 1) text-decoration: underline (подчеркнутый), overline (надчеркнутый), line-through (зачеркнутый) и line-through (зачеркнутый) и blink (мигающий, правда он поддерживается Оpera и Netscape). blink (мигающий, правда он поддерживается Оpera и Netscape).

CSS-вёрстка 2) Задать гарнитуру шрифта можно следующим образом: 2) Задать гарнитуру шрифта можно следующим образом: font-family: Gando BT,Arial font-family: Gando BT,Arial Для задания расстояния между буквами используется свойство Для задания расстояния между буквами используется свойство letter-spacing: 0.05 em; letter-spacing: 0.05 em; а line-height: 100 px; задает высоту строк. а line-height: 100 px; задает высоту строк.

CSS-вёрстка Для создания списков с маркерами или буквами и цифрами необходимо применить стилевое свойство: Для создания списков с маркерами или буквами и цифрами необходимо применить стилевое свойство: UL {list-style: square, circle, disc} UL {list-style: square, circle, disc} OL { list-style: decimal, lower-roman, upper- roman} OL { list-style: decimal, lower-roman, upper- roman} Для создания графических маркеров списка используется свойство Для создания графических маркеров списка используется свойство

CSS-вёрстка Чтобы задать рамку объекта, необходимо определить свойство border-style (по умолчанию рамка отсутствует), вид рамки: solid (обычная), double (двойная), groove (вогнутая с обеих сторон), ridge (выпуклая с обеих сторон), inset (вогнутая), outsеt (выпуклая), dotted (точечная) и dashed (пунктирная). Чтобы задать рамку объекта, необходимо определить свойство border-style (по умолчанию рамка отсутствует), вид рамки: solid (обычная), double (двойная), groove (вогнутая с обеих сторон), ridge (выпуклая с обеих сторон), inset (вогнутая), outsеt (выпуклая), dotted (точечная) и dashed (пунктирная). Чтобы рамка не терялась на фоне больших букв, необходимо задать свойство border-width: thick (толстая рамка), thin (тонкая) и medium (средняя). Чтобы рамка не терялась на фоне больших букв, необходимо задать свойство border-width: thick (толстая рамка), thin (тонкая) и medium (средняя). Цвет рамки - border-color: red. Цвет рамки - border-color: red. Обтекание текстом (применительно к конкретному элементу) float: right, left Обтекание текстом (применительно к конкретному элементу) float: right, left

CSS-вёрстка cursor cursor Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров. Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров. Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть. Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.

CSS-вёрстка Синтаксис Синтаксис cursor: auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w- resize | wait || url('путь к курсору') cursor: auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w- resize | wait || url('путь к курсору') Аргументы Аргументы auto auto Вид курсора по умолчанию для текущего элемента. Вид курсора по умолчанию для текущего элемента. url url Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу, в котором указана форма курсора, в формате CUR или ANI. Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу, в котором указана форма курсора, в формате CUR или ANI.

Виды курсоров default P {cursor:default} crosshair P {cursor:crosshair} help P {cursor:help} move P {cursor:move} pointer P {cursor:pointer} progress P {cursor:progress} text P {cursor:text} wait P {cursor:wait} n-resize P {cursor:n-resize} ne-resize P {cursor:ne-resize} e-resize P {cursor:e-resize} se-resize P {cursor:se-resize} s-resize P {cursor:s-resize} sw-resize P {cursor:sw-resiz w-resize P {cursor:w-resize} nw-resize P {cursor:nw-resize}

Создание фильтров Браузер IE, начиная с версии 4, имеет специфическое CSS-свойство Filter, с помощью которого можно создать какой- либо визуальный эффект. Браузер IE, начиная с версии 4, имеет специфическое CSS-свойство Filter, с помощью которого можно создать какой- либо визуальный эффект. Синтаксис использования CSS свойства Filter (фильтр) в IE имеет следующий вид. Синтаксис использования CSS свойства Filter (фильтр) в IE имеет следующий вид. Filter: ; Filter: ;

Создание фильтров Фильтр принимает следующие аргументы: Фильтр принимает следующие аргументы: Blur – размытие объекта Blur – размытие объекта Fliph – отражение объекта по горизонтали влево Fliph – отражение объекта по горизонтали влево Flipv - – отражение объекта по вертикали вверх Flipv - – отражение объекта по вертикали вверх Glow – отмена изменений Glow – отмена изменений Wawe – создание полос Wawe – создание полос Shadow – создает тень от объекта (direction – задает направление тени и ее наличие - enabled) Shadow – создает тень от объекта (direction – задает направление тени и ее наличие - enabled)

Стилевое позиционирование Можно задать тип позиционирования position, т.е. где будет расположен текст, в каком месте странички. Существует 2 типа позиционирования – абсолютный (absolute) и относительный (relative). В относительном позиционировании отсчет ведется от той позиции, которую должен был бы занимать этот элемент, если бы позиционирование не было задано. А абсолютное позиционирование означает, что отсчет ведется от верхнего левого угла окна браузера. Еще у этого свойства может быть значение static, означающее, что элемент не позиционируется индивидуально, и значение fixed (фиксированная позиция – элемент позиционируется абсолютно и не прокручивается вместе с остальным содержимым страницы). Можно задать тип позиционирования position, т.е. где будет расположен текст, в каком месте странички. Существует 2 типа позиционирования – абсолютный (absolute) и относительный (relative). В относительном позиционировании отсчет ведется от той позиции, которую должен был бы занимать этот элемент, если бы позиционирование не было задано. А абсолютное позиционирование означает, что отсчет ведется от верхнего левого угла окна браузера. Еще у этого свойства может быть значение static, означающее, что элемент не позиционируется индивидуально, и значение fixed (фиксированная позиция – элемент позиционируется абсолютно и не прокручивается вместе с остальным содержимым страницы).

Стилевое позиционирование Static Static Это способ по умолчанию, можно сказать, отстутствие какого бы то ни было специального позиционирования, а просто выкладывание боксов одного за другим сверху вниз. Этот порядок как раз и есть упомянутый мной прямой поток. Это способ по умолчанию, можно сказать, отстутствие какого бы то ни было специального позиционирования, а просто выкладывание боксов одного за другим сверху вниз. Этот порядок как раз и есть упомянутый мной прямой поток. Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким- либо результатам. Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким- либо результатам.

Стилевое позиционирование Absolute Absolute Бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется, и в этом месте сразу начинают раскладываться следующие боксы. Говорят, что он "исключается из потока". Бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется, и в этом месте сразу начинают раскладываться следующие боксы. Говорят, что он "исключается из потока". Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера. Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.

Стилевое позиционирование Fixed Fixed Ведет себя так же, как absolute, но при этом он не скролится вместе с остальной страницей. Ведет себя так же, как absolute, но при этом он не скролится вместе с остальной страницей. По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб- страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент. По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб- страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.

Стилевое позиционирование Relative Relative Такой бокс можно сдвинуть относительно того места, где он был бы в потоке, но при этом из потока он не исключается, а продолжает занимать там свое место. То есть сдвигается со своего места он только визуально, а положение всех боксов вокруг него никак не меняется. Такой бокс можно сдвинуть относительно того места, где он был бы в потоке, но при этом из потока он не исключается, а продолжает занимать там свое место. То есть сдвигается со своего места он только визуально, а положение всех боксов вокруг него никак не меняется. Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра. Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.

Абсолютное позиционирование Со свойством position тесно связаны еще 2 свойства – top и left, которые задают позицию верхнего левого угла по горизонтали и по вертикали. Чем больше значение top, тем ниже расположен элемент, и, соответственно, чем больше значение left, тем элемент правее. Чтобы приподнять текст примерно на высоту одной строки, можно написать след-е: top: - 18px. Со свойством position тесно связаны еще 2 свойства – top и left, которые задают позицию верхнего левого угла по горизонтали и по вертикали. Чем больше значение top, тем ниже расположен элемент, и, соответственно, чем больше значение left, тем элемент правее. Чтобы приподнять текст примерно на высоту одной строки, можно написать след-е: top: - 18px.

Примеры использования позиционирования div {position:absolute; left:10px; top:20px} div {position:absolute; left:10px; top:20px} p.abz {position:relative; left:10px; top:20px} p.abz {position:relative; left:10px; top:20px}

Внутренние таблицы стилей Таблица стилей обычно располагается в заголовке, в разделе HEAD. Она занимает место между тегами и. Таблица стилей обычно располагается в заголовке, в разделе HEAD. Она занимает место между тегами и. body {background-color: blue; color: red;} body {background-color: blue; color: red;} Пробелы здесь не имеют значения, так же, как и переводы строк. Элементы, к которым задают форматирование, перечисляется через запятую. Пробелы здесь не имеют значения, так же, как и переводы строк. Элементы, к которым задают форматирование, перечисляется через запятую. н 1, н 2 {text-align:center;} н 1, н 2 {text-align:center;} Гиперссылки определяется следующим образом: Гиперссылки определяется следующим образом: A:link, a:visited {color: #634438;} A:link, a:visited {color: #634438;} A:active{color: black;} A:active{color: black;} A:hover {color: white; } – при наведение на мышку будет подсвечиваться белым цветом. A:hover {color: white; } – при наведение на мышку будет подсвечиваться белым цветом.

Стили классов К примеру у нас должно быть 3 разных стилевых варианта для элемента. В CSS они называются классами. Чтобы отличить эти элементы друг от друга, у них придется установить атрибут CLASS=. Но для начала надо задать сами варианты прописав в таблице стилей. К примеру у нас должно быть 3 разных стилевых варианта для элемента. В CSS они называются классами. Чтобы отличить эти элементы друг от друга, у них придется установить атрибут CLASS=. Но для начала надо задать сами варианты прописав в таблице стилей. <!--DIV.epig {text-align: justify; font-size: smaller; width: 130;} <!--DIV.epig {text-align: justify; font-size: smaller; width: 130;} DIV.pdps {font-style: italic; text-align: right;} DIV.pdps {font-style: italic; text-align: right;} DIV.ab {-align: justify; text-indent: 2 em;} DIV.ab {-align: justify; text-indent: 2 em;} Далее задаем эти абзацы, данные имена можно образовать от имен самих абзацев, к примеру: эпиграф, подпись и абзац. Определяем эти классы. Далее задаем эти абзацы, данные имена можно образовать от имен самих абзацев, к примеру: эпиграф, подпись и абзац. Определяем эти классы. ………… ………… Между прочим, другие элементы также могут иметь атрибут CLASS. Если надо, чтобы опредение класса было доступно всем элементам, его можно определить так: Между прочим, другие элементы также могут иметь атрибут CLASS. Если надо, чтобы опредение класса было доступно всем элементам, его можно определить так:.pdps {font-style: italic; text-align: right;}.pdps {font-style: italic; text-align: right;} То есть, при определении нен указывается имя конкретного элемента, а указывается только имя класса, которое в любом случае начинается с точки. То есть, при определении нен указывается имя конкретного элемента, а указывается только имя класса, которое в любом случае начинается с точки. Атрибут ID позволяет применить стиль к отдельному элементу WEB-страницы с помощью листа стилей. Имя-идентификатор должно быть уникальным. Атрибут ID позволяет применить стиль к отдельному элементу WEB-страницы с помощью листа стилей. Имя-идентификатор должно быть уникальным. P#commontext {font-style:italic;color:red} P#commontext {font-style:italic;color:red} проба id проба id У нас также появилось сочетание, которое относится к комментариям, но в данном случае данная запись определяет законы синтаксиса STYLE, а не HTML. Так что те браузеры, которые не понимают тег STYLE могут вывести все ее содержимое на экран монитора, данная запись нужна, чтобы все было проинтерпретировано должным образом. У нас также появилось сочетание, которое относится к комментариям, но в данном случае данная запись определяет законы синтаксиса STYLE, а не HTML. Так что те браузеры, которые не понимают тег STYLE могут вывести все ее содержимое на экран монитора, данная запись нужна, чтобы все было проинтерпретировано должным образом.

Отличие CLASS и ID #style1 {...}.style2 {...} #style1 {...}.style2 {...} ID ID ID задает уникальный идентификатор для элемента на странице, например для div-блока. В последующем, через этот ID мы можем обратиться к нашему div-блоку с помощью Javascript и динамически изменять его атрибуты (в том числе и CSS стили). Еще раз повторюсь - id должен быть уникальным, т.е. на странице не может быть например 2 div-блока с одним идентификатором. ID задает уникальный идентификатор для элемента на странице, например для div-блока. В последующем, через этот ID мы можем обратиться к нашему div-блоку с помощью Javascript и динамически изменять его атрибуты (в том числе и CSS стили). Еще раз повторюсь - id должен быть уникальным, т.е. на странице не может быть например 2 div-блока с одним идентификатором.

Отличие CLASS и ID CLASS CLASS CLASS всего лишь задает стили оформления для тегов. Можно также указывать сразу несколько классов в одном через пробел: CLASS всего лишь задает стили оформления для тегов. Можно также указывать сразу несколько классов в одном через пробел: Правда, здесь есть одна особенность. Если у классов style1 и style2 значения одного и того же параметра (допустим background) различаются, то тегу в результате будет присвоен параметр того класса, который определен в CSS последним. Пример: Правда, здесь есть одна особенность. Если у классов style1 и style2 значения одного и того же параметра (допустим background) различаются, то тегу в результате будет присвоен параметр того класса, который определен в CSS последним. Пример:.style1 { background: red; }.style2 { background: green; }....style1 { background: red; }.style2 { background: green; }... В этом случае у блока будет зеленый бэкграунд, так как style2 определен в стилях последним. В этом случае у блока будет зеленый бэкграунд, так как style2 определен в стилях последним.

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

Достоинства CSS 1 Способствует сохранению единого стиля 2 Представляет возможность быстро изменить что-либо сразу во многих файлах

Внешние стилевые таблицы Для этого необходимо написать всю страницу стилей в отдельном документе с расширением.css (без тегов STYLE), а затем подключить его во всей файлы. Для этого необходимо написать всю страницу стилей в отдельном документе с расширением.css (без тегов STYLE), а затем подключить его во всей файлы. файл таблицы стилей назовем mainstyle.css и выглядеть она будет следующим образом: файл таблицы стилей назовем mainstyle.css и выглядеть она будет следующим образом: div{text-align: justify; font-size: smaller; width: 130;} div{text-align: justify; font-size: smaller; width: 130;} a:link, a:visited {font-style: italic; text-align: right;} a:link, a:visited {font-style: italic; text-align: right;} input.text {background-color:yellow} input.text {background-color:yellow}

Внешние стилевые таблицы Тогда имя файла таблицы стилей mainstyle.css, в виде следующих записей, внедрим в каждый раздел каждого из использующих ее HTML-документов. Тогда имя файла таблицы стилей mainstyle.css, в виде следующих записей, внедрим в каждый раздел каждого из использующих ее HTML-документов. или url(mainstyle.css);