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

Зарегистрируйтесь, чтобы просмотреть полный документ!

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

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

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

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

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

CSS-вёрстка n n Для того, чтобы создать домашнюю страничку или сайт, необходимо воспользоваться CSS, поскольку данный способ оформления страницы очень удобен и прост. Сравним записи: <BODY bgcolor=”#DFDFF 0” text=”#1 D 1 D 18”> <body style=”backround-color: #DFDFF 0; color: #1 D 1 D 18”>

CSS-вёрстка n n n background-image: url(dog. jpg) данный фоновый рисунок можно копировать по разным сторонам, к примеру: <body style=”backround-image: url(); backgroundrepeat: repeat-y; backround-attachment: fixed”> Данное значение позволяет снабдить страницу фоном, а также копировать его при помощи атрибута repeat: repeat-x – копии по горизонтали, repeat-y – копии по вертикал и no-repeat – без копий.

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

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

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

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

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

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

CSS-вёрстка n n n Практически для всех элементов можно так же определить отступы padding (padding: 60 px; padding-left: 20 px; ). Различие между полем и отступом заключается в том, что отступ находится внутри рамки элемента, а поле – вне нее. Также определенный абзац можно не только выровнять по определенной стороне, но и задать размеры блока, в который будет вписан абзац <p style=”text-align: justify; width: 35%; height: 40%” >

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

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

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

CSS-вёрстка n n n Для создания списков с маркерами или буквами и цифрами необходимо применить стилевое свойство: <style> UL {list-style: square, circle, disс} OL { list-style: decimal, lower-roman, upperroman} Для создания графических маркеров списка используется свойство <ul style=”list-style-image: url (marker. gif); ”>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Внешние стилевые таблицы n Для этого необходимо написать всю страницу стилей в отдельном документе с расширением. css (без тегов STYLE), а затем подключить его во всей файлы. Например, файл таблицы стилей называется mainstyle. css, то в раздел <HEAD> каждого из использующих ее HTML-документов, необходимо вставить следующую строку.

Внешние стилевые таблицы n n n <LINK REL=“Style. Sheet” HREF=“mainstyle. css” TYPE=“text/css”> или <STYLE TYPE=“text/css”> @import url(mainstyle. css); </STYLE>

Скачать презентацию Каскадные таблицы стилей Лекция 7 Cascading Style

55a5522cbeb2258725a6f86892221e41.ppt

Количество слайдов: 36