Презентация на тему «Каскадные таблицы стилей» |
| Таблицы | ||
| << Морфология в таблицах и схемах | Таблица деления >> |
Презентация на тему: «Каскадные таблицы стилей». Автор: Ирина. Файл: «Каскадные таблицы стилей.ppt». Размер zip-архива: 280 КБ.
Каскадные таблицы стилей
содержание презентации «Каскадные таблицы стилей.ppt»| № | Слайд | Текст |
| 1 |  |
Каскадные таблицы стилейЛекция 7 |
| 2 |  |
Cascading Style SheetsCSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML и др.. |
| 3 |  |
Cascading Style SheetsСтандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми. Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений. Схематически это можно показать так: селектор, селектор { свойство: значение; свойство: значение; свойство: значение; } |
| 4 |  |
Cascading Style SheetsНапример: p { font-family: Garamond, serif; } h2 { font-size: 110 %; color: red; background: white; } .note { color: red; background: yellow; font-weight: bold; } p#paragraph1 { margin: 0; } a:hover { text-decoration: none; } #news p { color: blue; } Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p. В первых двух правилах HTML-элементам p (параграфу) и h2 (заголовку второго уровня) назначаются стили. Параграфы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем. Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например: <p class="note">Этот параграф будет выведен полужирным шрифтом красного цвета на желтом фоне.</p> Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin). Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами. Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news». |
| 5 |  |
Css-вёрсткаДо появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления. Преимущества CSS вёрстки: Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым. Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и кэшируется. Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл. Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы. |
| 6 |  |
Css-вёрсткаДля того, чтобы создать домашнюю страничку или сайт, необходимо воспользоваться CSS, поскольку данный способ оформления страницы очень удобен и прост. Сравним записи: <BODY bgcolor=”#DFDFF0” text=”#1D1D18”> <body style=”backround-color: #DFDFF0; color:#1D1D18”> |
| 7 |  |
Css-вёрсткаbackground-image:url(dog.jpg) данный фоновый рисунок можно копировать по разным сторонам, к примеру: <body style=”backround-image:url(); background-repeat: repeat-y; backround-attachment:fixed”> Данное значение позволяет снабдить страницу фоном, а также копировать его при помощи атрибута repeat: repeat-x – копии по горизонтали, repeat-y – копии по вертикал и no-repeat – без копий. |
| 8 |  |
Css-вёрсткаМожно использовать трехзначную запись #123 вместо #112233. Далее, для того, чтобы отцентрировать текст по одной из сторон используется атрибут text-align:center |
| 9 |  |
Css-вёрсткаДля задания размеров шрифта, а также его цвета и гарнитуры используется следующие свойства. Font-size: larger – относительное увеличение, smaller – относительное уменьшение, 120% - процентное выражение, 18px – задание размера в пикселях, абсолютное задание размера – xx-small, x-small, small, medium, large, x-large, xx-large, либо в других единицах: рх, мм, см, in (дюйм). |
| 10 |  |
Css-вёрсткаИзменить можно не только сам шрифт, но также регистр символов текста с помощью стилевого свойства text-transform: capitalize (верхний регистр первых букв всех слов), uppercase (все буквы в верхнем регистре), lower-case (все в нижнем), none (регистр отсутствует). |
| 11 |  |
Css-вёрсткаЭлемент <b> можно заменить на font-weight: bold, normal, 100-900 (причем 400- normal, а 700- bold), относительные значения – bolder и lighter. |
| 12 |  |
Css-вёрсткаСтиль написания фраз задается атрибутом font-style: italic (курсив), normal (обычный), oblique (наклонный шрифт). |
| 13 |  |
Css-вёрсткаАтрибут <br> заменяется на свойство margin, с помощью которого можно регулировать поля со всех сторон элемента, а для индивидуальной регулировки полей с каждой стороны можно использовать свойства margin-top, bottom, left, right. Значения задаются в пикселях. |
| 14 |  |
Css-вёрсткаПрактически для всех элементов можно так же определить отступы padding (padding: 60px; padding-left: 20px;). Различие между полем и отступом заключается в том, что отступ находится внутри рамки элемента, а поле – вне нее. Также определенный абзац можно не только выровнять по определенной стороне, но и задать размеры блока, в который будет вписан абзац <p style=”text-align:justify; width:35%; height:40%” > |
| 15 |  |
Css-вёрсткаАбзацный отступ или красную строку (раньше мы использовали сочетание символов - ) можно создать при помощи стилевого свойства text-indent: отступ в любых единицах, к примеру: px – пиксели, MM – миллиметры, CM – сантиметры, IN – дюймы, PT – пункты, EX – отступ, равный высоте строчных букв, EM – отступ, равный высоте шрифта в целом. |
| 16 |  |
Css-вёрсткаБолее гибко можно выбирать свойства шрифта: его начертание, размер, степень жирности, гарнитуру и оформление. Свойства font-style, font-weight, font-size мы уже рассмотрели, теперь рассмотрим еще 2 не менее важных свойства. 1) text-decoration: underline (подчеркнутый), overline (надчеркнутый), line-through (зачеркнутый) и blink (мигающий, правда он поддерживается Оpera и Netscape). |
| 17 |  |
Css-вёрстка2) Задать гарнитуру шрифта можно следующим образом: font-family: Gando BT,Arial Для задания расстояния между буквами используется свойство letter-spacing: 0.05 em; а line-height: 100 px; задает высоту строк. |
| 18 |  |
Css-вёрсткаДля создания списков с маркерами или буквами и цифрами необходимо применить стилевое свойство: <style> UL {list-style: square, circle, disс} OL { list-style: decimal, lower-roman, upper-roman} Для создания графических маркеров списка используется свойство <ul style=”list-style-image: url (marker.gif);”> |
| 19 |  |
Css-вёрсткаЧтобы задать рамку объекта, необходимо определить свойство border-style (по умолчанию рамка отсутствует), вид рамки: solid (обычная), double (двойная), groove (вогнутая с обеих сторон), ridge (выпуклая с обеих сторон), inset (вогнутая), outsеt (выпуклая), dotted (точечная) и dashed (пунктирная). Чтобы рамка не терялась на фоне больших букв, необходимо задать свойство border-width: thick (толстая рамка), thin (тонкая) и medium (средняя). Цвет рамки - border-color: red. Обтекание текстом (применительно к конкретному элементу) float: right, left |
| 20 |  |
Css-вёрстка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('путь к курсору') Аргументы auto Вид курсора по умолчанию для текущего элемента. url Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу, в котором указана форма курсора, в формате 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 |  |
Создание фильтровБраузер IE, начиная с версии 4, имеет специфическое CSS-свойство Filter, с помощью которого можно создать какой-либо визуальный эффект. Синтаксис использования CSS свойства Filter (фильтр) в IE имеет следующий вид. Filter: <название фильтра>; |
| 24 |  |
Создание фильтровФильтр принимает следующие аргументы: Blur – размытие объекта Fliph – отражение объекта по горизонтали влево Flipv - – отражение объекта по вертикали вверх Glow – отмена изменений Wawe – создание полос Shadow – создает тень от объекта (direction – задает направление тени и ее наличие - enabled) |
| 25 |  |
Стилевое позиционированиеМожно задать тип позиционирования position, т.е. где будет расположен текст, в каком месте странички. Существует 2 типа позиционирования – абсолютный (absolute) и относительный (relative). В относительном позиционировании отсчет ведется от той позиции, которую должен был бы занимать этот элемент, если бы позиционирование не было задано. А абсолютное позиционирование означает, что отсчет ведется от верхнего левого угла окна браузера. Еще у этого свойства может быть значение static, означающее, что элемент не позиционируется индивидуально, и значение fixed (фиксированная позиция – элемент позиционируется абсолютно и не прокручивается вместе с остальным содержимым страницы). |
| 26 |  |
Стилевое позиционированиеStatic Это способ по умолчанию, можно сказать, отстутствие какого бы то ни было специального позиционирования, а просто выкладывание боксов одного за другим сверху вниз. Этот порядок как раз и есть упомянутый мной прямой поток. Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам. |
| 27 | |
Стилевое позиционированиеAbsolute Бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется, и в этом месте сразу начинают раскладываться следующие боксы. Говорят, что он "исключается из потока". Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера. |
| 28 |  |
Стилевое позиционированиеFixed Ведет себя так же, как absolute, но при этом он не скролится вместе с остальной страницей. По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент. |
| 29 | |
Стилевое позиционированиеRelative Такой бокс можно сдвинуть относительно того места, где он был бы в потоке, но при этом из потока он не исключается, а продолжает занимать там свое место. То есть сдвигается со своего места он только визуально, а положение всех боксов вокруг него никак не меняется. Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра. |
| 30 |  |
Абсолютное позиционированиеСо свойством position тесно связаны еще 2 свойства – top и left, которые задают позицию верхнего левого угла по горизонтали и по вертикали. Чем больше значение top, тем ниже расположен элемент, и, соответственно, чем больше значение left , тем элемент правее. Чтобы приподнять текст примерно на высоту одной строки, можно написать след-е: top: -18px. |
| 31 |  |
Внутренние тадицы стилейТаблица стилей обычно располагается в заголовке, в разделе 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; } – при наведение на мышку будет подсвечиваться белым цветом. |
| 32 |  |
Стили классовК примеру у нас должно быть 3 разных стилевых варианта для элемента <DIV>. В CSS они называются классами. Чтобы отличить эти элементы друг от друга, у них придется установить атрибут CLASS=. Но для начала надо задать сами варианты прописав в таблице стилей. <STYLE> <!--DIV.epig {text-align: justify; font-size: smaller; width: 130;} DIV.pdps {font-style: italic; text-align: right;} DIV.ab {-align: justify; text-indent: 2 em;}? </STYLE> Далее задаем эти абзацы, данные имена можно образовать от имен самих абзацев, к примеру: эпиграф, подпись и абзац. Определяем эти классы. <DIV CLASS=”epig”>…………</DIV> <DIV CLASS=”pdps”>…………</DIV> <DIV CLASS=”ab”>…………</DIV> Между прочим, другие элементы также могут иметь атрибут CLASS. Если надо, чтобы опредение класса было доступно всем элементам, его можно определить так: .pdps {font-style: italic; text-align: right;} То есть, при определении нен указывается имя конкретного элемента, а указывается только имя класса, которое в любом случае начинается с точки. Атрибут ID позволяет применить стиль к отдельному элементу WEB-страницы с помощью листа стилей. Имя-идентификатор должно быть уникальным. <style> P#commontext {font-style:italic;color:red} </style> <body> <p id=”commontext”>проба id </p> У нас также появилось сочетание, которое относится к комментариям <!-- -->, но в данном случае данная запись определяет законы синтаксиса STYLE, а не HTML. Так что те браузеры, которые не понимают тег STYLE могут вывести все ее содержимое на экран монитора, данная запись нужна, чтобы все было проинтерпретировано должным образом. |
| 33 |  |
Внешние стилевые таблицыЕще одно замечательное свойство стилевых таблиц заключается в том, что с помощью одной таблицы, находящейся в отдельном файле, можно задавать стили для целого набора веб-страниц. |
| 34 |  |
Достоинства CSS1 Способствует сохранению единого стиля 2 Представляет возможность быстро изменить что-либо сразу во многих файлах |
| 35 |  |
Внешние стилевые таблицыДля этого необходимо написать всю страницу стилей в отдельном документе с расширением .css (без тегов STYLE), а затем подключить его во всей файлы. Например, файл таблицы стилей называется mainstyle.css, то в раздел <HEAD> каждого из использующих ее HTML-документов, необходимо вставить следующую строку. |
| 36 |  |
Внешние стилевые таблицы<LINK rel=“stylesheet” href=“mainstyle.Css” type=“text/css”> или <STYLE type=“text/css”> @import url(mainstyle.Css); </STYLE> |
| «Каскадные таблицы стилей» | ||
