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

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

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

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

4 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; }

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

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

7 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 – без копий.

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

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

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

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

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

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

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

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

16 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 (зачеркнутый).

17 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; задает высоту строк.

18 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} Для создания графических маркеров списка используется свойство Для создания графических маркеров списка используется свойство

19 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

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

21 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.

22 Виды курсоров 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}

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

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

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

26 Стилевое позиционирование 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 и ниже не поддерживает данный аргумент.

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

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

29 Примеры использования позиционирования 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}

30 Внутренние таблицы стилей Таблица стилей обычно располагается в заголовке, в разделе 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; } – при наведение на мышку будет подсвечиваться белым цветом.

31 Стили классов К примеру у нас должно быть 3 разных стилевых варианта для элемента. В CSS они называются классами. Чтобы отличить эти элементы друг от друга, у них придется установить атрибут CLASS=. Но для начала надо задать сами варианты прописав в таблице стилей. К примеру у нас должно быть 3 разных стилевых варианта для элемента. В CSS они называются классами. Чтобы отличить эти элементы друг от друга, у них придется установить атрибут CLASS=. Но для начала надо задать сами варианты прописав в таблице стилей.