Каскадные таблицы стилей Лекция 7. Cascading Style Sheets CSS (англ. Cascading Style Sheets каскадные таблицы стилей) технология описания внешнего вида.

Презентация:



Advertisements
Похожие презентации
Каскадные таблицы стилей Лекция 7. Cascading Style Sheets CSS (англ. Cascading Style Sheets каскадные таблицы стилей) технология описания внешнего вида.
Advertisements

1 Cascading Style Sheets каскадные таблицы стилей 2.
CSSCSS (англ. Cascading Style Sheets каскадные таблицы стилей) язык описания внешнего вида документа, написанного с использованием языка разметки.англ.
4.3 Каскадные таблицы стилей. Каскадные таблицы стилей (Cascading Style Sheets, CSS) способ оформления страниц HTML, позволяющий с помощью параметров.
CSS: основные понятия и особенности. Способы добавления стилей на Веб-страницу. Использование стилей при создании сайта.
ОСНОВЫ CSS Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной среде. CSS - это сокращение от Cascading Style.
Каскадные таблицы стилей CSS Блоковая модель. Синтаксис CSS.
Цвет фона background-color: цвет | transparent | inherit цвет можно задавать тремя способами: 1.red, blue, green… 2.#666999, #FF0000, #00FF55… 3.rgb (255,0,0),
Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.
Таблицы стилей Язык HTML. Каскадные таблицы стилей CSS CSS (от английского Cascading Style Sheets). Таблицы стилей позволяют разделить смысловое содержимое.
Динамический HTML (dynamic HTML или DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML-страниц.
Каскадные таблицы стилей CSS. Стиль – набор параметров, задающий внешнее представление объекта. Таблица стилей – это инструмент языка html, предоставляющий.
CSS технология ( Каскадные таблицы стилей ) Понятие CSS Внедрение CSS в документ Атрибут Stile Тег STILE Внешний CSS файл.
Каскадные таблицы стилей Блочные и строковые элементы.
Гвасалия Д.А.. Определение Каскадные таблицы стилей (Cascade Style Sheets, CSS) Каскадные таблицы стилей (Cascade Style Sheets, CSS) – технология описания.
CSS & WEB Суть и преимущества CSS CSS (Cascading Style Sheets – каскадные таблицы стилей) – язык описания внешнего вида документа, созданного при помощи.
CSS Cascading Style Sheets. Структура css селектор { свойство1: значение1; свойство2: значение2; }
Стили в HTML Лекция по курсу «Компьютерный дизайн»
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Что такое CSS Несколько CSS свойств Использование каскадной таблицы.
Cascading Style Sheets каскадные таблицы стилей CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный.
Транксрипт:

Каскадные таблицы стилей Лекция 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; }

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 – задание размера в пикселях, либо в других единицах: рх, мм, см, 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 (зачеркнутый).

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: 10 px; задает высоту строк. а line-height: 10 px; задает высоту строк.

CSS-вёрстка Для создания списков с маркерами или буквами и цифрами необходимо применить стилевое свойство: Для создания списков с маркерами или буквами и цифрами необходимо применить стилевое свойство: UL {list-style: square, circle, disс} UL {list-style: square, circle, disс} 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}

Стилевое позиционирование Можно задать тип позиционирования 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);