Каскадные таблицы стилей (CSS)

. На рисунке показано отображение текста примера 8 в браузере. Пример 8 Пример 8 4.2.1.4. Селекторы потомков Селекторы потомков записываются через пробел после родительского селектора, например, h1 p {color:red;}. Это правило сделает красным контент элемента p, который является потомком элемента h1. В селекторе потомков может быть использовано несколько элементов, например, ul li a {color:red;}. Правило применит красный цвет к ссылкам, находящимся в элементах li маркированного списка. 4.2.1.5. Селекторы атрибутов Селекторы атрибутов могут применяться для выбора элементов на основании их атрибутов и значений этих атрибутов. Селекторы атрибутов были введены в стандарте CSS2 и уточнялись в стандартах CSS2.1 и CSS3. Для выбора всех заголовков h1, имеющих атрибут class и окрашивания текста этих заголовков в серый цвет можно использовать правило h1[class] {color:gray} или для выделения полужирным шрифтом текст любой гиперссылки, которая имеет и атрибут title и атрибут href можно записать a[title][href] {font-weight: bold}. 4.2.1.6. Псевдоклассы и псевдоэлементы В CSS2.1 определены псевдоклассы и псевдоэлементы. Традиционно псевдоклассы используются для оформления гиперссылок. Они описывают свойства ссылок непосещенных (:link), посещенных (:visited), над которыми находится курсор мыши (т.е. свойства ссылок "при наведении" курсора мыши) (:hover) и активных ссылок (:active). 11 Пример 9 На рисунке показано отображение в браузере результата действия псевдокласса :hover - наведения мыши на вторую гиперссылку. Пример 9
Переход к файлу "классы_1.html"
Переход к файлу "классы.html" В CSS2.1 определены четыре псевдоэлемента, для которых могут быть применены специальные стили: первая буква (:first-letter), первая строка (:first-line), до (:before) и после (:after) элемента. Например, правило h3:first-letter {font-size:150%} увеличит первую букву заголовка в полтора раза по отношению к остальному тексту. А правило p:first-line {color:red} сделает символы первой строки абзаца красными. 12 Для body:after {content: "The end"} добавляет в конец документа текст "The end". 4.3. Связывание стиля При связывании стиля все стилевые описания производятся по тем же правилам, что и при внедрении, но хранятся они в отдельном файле, имеющем расширение .css. Сам файл должен находиться в корневом каталоге сайта, в противном случае нужно корректно указать связь с ним. Преимуществом связывания является то, что стилевые описания применяются ко всем страницам сайта и при необходимости изменения оформления достаточно внести новшества в файл, содержащий эти описания. В приведенном примере иллюстрируется использование внешней таблицы стилей. Пример Файл с именем my_style.css содержит только правила стилей: body { background: #000000; color: #ffffff; } a { color: #ff0000; text-decoration:none; } Документ HTML, который ссылается на этот файл, должен содержать в части head следующую ссылку, использующую элемент link: 13 Аналогом элемента link является директива @import url (url). Директива @import также указывает браузеру на необходимость загрузки внешней таблицы стилей. Размещается директива в контейнере Из примера видно, что может быть использовано несколько директив @import для присоединения нескольких файлов с таблицами стилей. В последней директиве указано устройство, для которого создана присоединенная таблица 14 4.4. Текстовые свойства CSS 1. text-align - выравнивание текста cо значениями: left (по левому краю), right (по правому краю), center (по центру), justify (по обоим краям). 2. text-indent - отступ в первой строке блока (абзаца, раздела) со стандартными значениями длины (pt, px, cm, mm). 3. text-decoration - оформление текста подчеркиванием со значениями: none (отсутствует - по умолчанию), underline (подчеркивание), overline (линия над текстом), line-through (перечеркивание), blink (мерцание). 4. text-transform - перевод букв в верхний или нижний регистр со значениями: none (отсутствует - по умолчанию), capitalize (первая буква каждого слова становится прописной), uppercase (переводит все буквы в верхний регистр), lowercase (переводит все буквы в нижний регистр). 5. letter-spacing - расстояние между символами текста со стандартными значениями длины (pt, px, cm, mm, em,ex). 6. word-spacing - расстояние между словами со стандартными значениями длины (pt, px, cm, mm). Кроме стандартных единиц измерения длины px, pt (равный 0,35мм), mm, cm, может использоваться em (1em равен ширине буквы m в шрифте заданного размера), ex (1ex равен высоте шрифта), px (1px равен ширине пиксела). 15 CSS3 7. Разбиение текста на столбцы с помощью свойства column-count, расстояния между столбцами - column-gap и ширины столбцов - column-width в обычных единицах длины (чаще в пикселах) и оформления столбцов с помощью свойства column-rule - ширину, стиль и цвет (column-rule:5px dotted #ffff00). Данные свойства поддерживаются в браузерах IE10+ и Opera. Для браузеров Chrome и Safari перед свойством требуется добавить префикс -webkit-, а для Firefox префикс -mozНапример. { column-count:3; -moz-column-count:3; -webkit-column-count:3;} 16 Пример 12

Текст абзаца выравнивается по ширине, имеет отступ первой строки 20 пунктов и использует белый цвет символов на черном фоне.

В тексте абзаца используется подчеркивание, увеличение расстояния между символами , а также перевод символов в верхний регистр.

17 4.5. Цвет и фон 1. color - цвет текста - значение, соответствующее стандарту (именованная константа (например, black); с помощью RGB значения ('rgb(255,0,0)' - красный цвет); с помощью шестнадцатеричного значения (например, #0000ff - синий цвет)). 2. background-color - цвет фона - любое значение, соответствующее стандарту. 3. background-image:URL("URL") - фоновое изображение - значение URL. 4. background-repeat- направление повторения фонового изображения со значениями: repeat (повторение по горизонтали и вертикали ), repeat-x (повторение по горизонтали), repeat-y (повторение по вертикали), no-repeat (отсутствие повторения). 5. background-position - положение фонового изображения относительно верхнего левого угла содержащего его элемента со значениями: расстояние по горизонтали, расстояние по вертикали в стандартных единицах длины или в процентном соотношении. Значение 50% по горизонтали и 50% по вертикали дает расположение фонового изображения по центру. Размещение фонового изображения может быть также top (по верхнему краю),center (по центру), bottom (по нижнему краю), left (по левому) и right (правому) краям. 6. background-attachment - прокрутка фонового изображения вместе с документом со значениями: scroll (прокрутка - по умолчанию) или fixed (фиксация) изображения в окне браузера. 7. Для описания сразу всех параметров фона можно использовать свойство background: background-color background-image background-repeat background-attachment background-position 18 CSS3 8. Градиенты поддерживается во всех современных браузерах, но требует добавления специального префикса. Для браузера IE10+ требуется префикс ms, для Chrome и Safari префикс -webkit, для Opera префикс -o и для Firefox префикс -moz. Линейные градиенты создаются с помощью CSS3 метода linear-gradient, который должен указываться в значение свойства background. Для того, чтобы создать линейный градиент необходимо указать его направление (может задаваться с помощью ключевых слов или градусов) и цвета перехода, которые задаются в выбранных точках перехода, которых может быть несколько. Координаты точек перехода удобно задавать в процентах Например, background:linear-gradient(top,white,green); или background:linear-gradient(left,white 0%,green 50%,red 70%, black 100%); С префиксом: background:-webkit-linear-gradient(top,white,green); С помощью свойства radial-gradient можно задавать сферические градиенты, например, background:radial-gradient(white 10%,blue 50%); или background:radial-gradient(circle, red 0%,white 30%,black 60%); 19 Пример 13_1

В данном абзаце фоновое изображение позиционировано по центру и распространяется по вертикали.

В данном абзаце фоновое изображение позиционировано по центру и распространяется по горизонтали.

На рисунке показано отображение текста примера 13_1 в браузере. 20 4.6. Шрифты 1. font-family - семейство шрифтов. Может быть несколько семейств, отделенных друг от друга запятыми. Значением может быть имя типового шрифта (serif/sansserif/cursive/fantasy/monospace). 2. font-style - начертание шрифта со значениями: normal (обычное по умолчанию), курсив (italic), наклонное начертание (oblique). 3. font-weight - толщина выводимого шрифта со значениями: normal (обычная - по умолчанию), bold (полужирный), bolder (жирный), lighter (светлый) или числовыми значениями: 100-светлый, 400-обычный, 700-полужирный, 900-жирный. 4. font-size - высота символов (кегль). Значением является соответствующая стандартам высота. Значения абсолютного размера могут быть записаны в виде ключевых слов: xx-small (крайне малый), small (малый), medium (средний -по умолчанию), large (большой), x-large (очень большой), xx-large (крайне большой). Значения относительного размера могут быть записаны в виде ключевых слов: larger (больше) и smaller (меньше). CSS3 5. В предыдущих версиях CSS разработчики использованы только шрифты, которые установлены на компьютере пользователя, в CSS3 можно использовать любые шрифты. Шрифт размещается на сервере и подключается с помощью свойства @font-face. Подключенный шрифт будет загружен при посещении страницы . @font-face { font-family:"opensans"; /* Имя шрифта */ src:url('opensans.woff') /* Местонахождение шрифта */ 21 } Пример 14

Для абзаца применен шрифт Impact стиля oblique, 18 пунктов

Для абзаца применен шрифт Verdana, large

На рисунке показано отображение текста примера 14 в браузере. 22 4.7. Блочная модель Все элементы в CSS являются прямоугольными блоками. Каждый такой блок имеет зону content, в которой располагается содержимое элемента (т.е. текст, изображения и т.д.). Вокруг зоны content могут располагаться необязательные зоны: padding, border и margin. Зона padding окружает зону content. Данная зона используется для задания величины отступа содержимого элемента (зона content) от его границы (зона border). Зона может быть разбита на четыре части, которые могут оформляться независимо: padding-top, padding-right, padding-bottom, padding-left. Зона border окружает зону padding. Данная зона позволяет задать элементу границу произвольной ширины, стиля и цвета. Зона может быть разбита на: bordertop, border-right, border-bottom, border-left. Зона margin окружает зону border. Данная зона позволяет задать величину внешнего отступа данного элемента от окружающих. Зона может быть разбита на: margin-top, margin-right, margin-bottom, margin-left. 23 1. margin - ширина полей для всех сторон элемента. У этого свойства может быть от одного до четырех значений. Одно значение присваивается всем полям, из двух значений первое присваивается верхнему и нижнему полю, а второе – левому и правому. При трех: первое -верхнему полю, второе – левому и правому, а третье – нижнему. margin-top, margin-right, margin-bottom, margin-left –присвоение ширины отдельного поля 2. padding - ширина промежутка между содержимым элемента и определенным участком его границы для всех сторон элемента. У этого свойства может быть от одного до четырех значений также как у свойства margin. padding-top, padding-right, padding-bottom, padding-left – присвоение ширины отдельного промежутка. 3. border – рамка. Для описания всех свойств рамки можно использовать это конструкцию: border: border-width border-style border-color. Свойствами являются border-width (ширина рамки), border-style (стиль рамки) и border-color (цвет рамки). 3.1 border-width - ширина рамки. Значениями являются: thin (тонкая линия), medium (средняя – по умолчанию), thick (толстая), а также стандартные значения ширины. Можно также устанавливать значения ширины рамки для определенной стороны. Для этого используются свойства: border-top-width, border-right-width, border-bottom-width, border-left-width с аналогичными значениями. 24 3.2 border-style - стиль рамки. Значениями являются: none (отсутствие – по умолчанию), hidden (скрытая), dotted (пунктир), solid (сплошная), double (двойная), dashed (штрих-пунктир), groove (двойная борозда), ridge (гребень), inset (врезка), outset (орнамент). Можно также устанавливать значения стиля рамки для определенной стороны. Для этого используются свойства: border-top-style, border-right-style, border-bottom-style, border-left-style. 3.3. border-color - цвет рамки. Значением является любое, соответствующее стандарту. Можно также устанавливать значения цвета рамки для определенной стороны. Для этого используются свойства: border-top-color, border-right-color, border-bottom-color, border-left-color CSS3 4. С помощью нового CSS3 свойства border-radius можно делать углы элементов сглаженными, например, border-radius:5px;. Данное свойство может применяться не ко всем углам элемента, а только к определенным: border-top-left-radius делает сглаженным только верхний левый угол элемента; border-top-right-radius делает сглаженным только верхний правый угол элемента; border-bottom-left-radius делает сглаженным только нижний левый угол элемента; border-bottom-right-radius делает сглаженным только нижний правый угол элемента. 25 Пример 15

Текст абзаца помещен в двойную рамку красного цвета, толщиной 10 пикселей. Установлены поля шириной 100 пикселей справа и снизу и 50 пикселей сверху и слева, а промежуток между текстом абзаца и рамкой установлен 20 пикселей со всех сторон.

На рисунке показано отображение текста примера 15 в браузере. 26 4.8. Плавающая модель для размещения изображений и других элементов До появления последних стандартов CSS для обтекания текстом изображений пользовались атрибутом align элемента img со значениями left и right. В настоящее время стандартизовано свойство float со значениями left и right, которое может быть применено не только к изображениям, но и к другим элементам HTML. В сочетании со свойством float часто применяют свойство clear со значениями left и right или both для того, чтобы освободить место слева или (и) справа от других элементов Web-страницы. Пример 16_1

Для обтекания текстом изображения слева вместо атрибута align тега img используется свойство float со значением left

Для обтекания текстом изображения справа вместо атрибута align тега img используется свойство float со значением right.

27 На рисунке показано отображение текста примера 16_1 в браузере. 28 4.9. Позиционирование и визуализация Применение позиционирования предполагает использование ряда понятий: Ограниченная область (блок-контейнер) – невидимая прямоугольная область, определенная браузером. Таблицы стилей позволяют управлять этой областью, устанавливая ее положение на странице с использованием абсолютных или относительных значений позиционирования. Абсолютное позиционирование – технология, позволяющая задавать координаты блока относительно его блока–контейнера, которым может быть другой (родительский) элемент документа или начальный блок–контейнер – прямоугольник, соответствующий окну просмотра браузера.. Относительное позиционирование - технология, позволяющая задавать координаты блока относительно его несмещенного положения в потоке документа. При относительном позиционировании элемент сдвигается со своего обычного места, но пространство, которое он должен был занимать, не исчезает. Фиксированное позиционирование – технология, позволяющая задавать координаты блока относительно начального блока – контейнера (окна просмотра браузера). 1. position - метод позиционирования блока, по умолчанию имеет значение static, другими значениями являются absolute (абсолютное) и relative (относительное) позиционирование, а также значение – fixed, при котором позиционирование блока является смещением, как в случае абсолютного позиционирования, но блок фиксируется в окне браузера и не перемещается при прокрутке окна. 29 4.9. Позиционирование и визуализация Применение позиционирования предполагает использование ряда понятий: Ограниченная область (блок-контейнер) – невидимая прямоугольная область, определенная браузером. Таблицы стилей позволяют управлять этой областью, устанавливая ее положение на странице с использованием абсолютных или относительных значений позиционирования. Абсолютное позиционирование – технология, позволяющая задавать координаты блока относительно его блока–контейнера, которым может быть другой (родительский) элемент документа или начальный блок–контейнер – прямоугольник, соответствующий окну просмотра браузера. При этом блок элемента полностью удаляется из потока документа и позиционируется относительно его блока– контейнера. Относительное позиционирование - технология, позволяющая задавать координаты блока относительно его несмещенного положения в потоке документа. При относительном позиционировании элемент сдвигается со своего обычного места, но пространство, которое он должен был занимать, не исчезает. Фиксированное позиционирование – технология, позволяющая задавать координаты блока относительно начального блока – контейнера (окна просмотра браузера). 1. position - метод позиционирования блока, по умолчанию имеет значение static, другими значениями являются absolute (абсолютное) и relative (относительное) позиционирование, а также значение – fixed, при котором позиционирование блока является смещением, как в случае абсолютного позиционирования, но блок фиксируется в окне браузера и не перемещается при прокрутке окна. 30 2. top - величина смещения вниз от верха его блока – контейнера, bottom – вверх от нижней стороны блока - контейнера, left – соответственно, влево, а right – вправо от левой и правой сторон блока - контейнера. Значениями являются любые, соответствующие стандарту длины, а также процентное значение: отношение в процентах длины смещения к ширине (высоте) блока, а также допустимы отрицательные значения указанных свойств смещения. 3. width - ширина блока. Значениями являются любые, соответствующие стандарту длины, а также процентное значение: отношение в процентах длины смещения к ширине окна. 4. height - высота блока. Значениями являются любые, соответствующие стандарту длины, а также процентное значение: отношение в процентах длины смещения к высоте окна. 5. z-index - z-индекс определяет порядок расположения блоков. Значениями являются целые числа (положительные и отрицательные), причем блоки с большими значениями z-индекса будут появляться над блоками с меньшими значениями. 6. visibility – видимость. Определяет, является ли элемент видимым - visible или скрытым - hidden. 7. display – представление элемента со значениями none, inline, block, list-item, table, inline-table и другие значения. (display:none скрывает элемент). 31 Пример 17_2 На рисунке красный цвет заменен на светло-розовый, а синий цвет заменен на темно-розовый 32 z-index . На рисунке показано действие свойства z-индекс. Пример 17_3 демонстрирует использование свойства z-index, которое позволяет задать порядок (уровень) расположения элемента. В верхней части рисунка z-index серого слоя больше (равен 1) чем z-index текста, тогда как текст имеет по умолчанию z-index равный 0. В результате слой текста находится на заднем плане, а серый слой – на переднем плане. В нижней части примера z-index серого слоя отрицателен (равен –1), а текст лежит в нулевом слое. При этом текст оказывается на переднем плане, а серый слой – за текстом. 33 4.10. Анимация в CSS3 Для создания анимации в CSS3 используется свойство @keyframes. Это свойство используется как контейнер, в который помещаются свойства оформления, подлежащие анимированию. @keyframes имяАнимации { from {CSS свойства} /* Оформление элемента перед началом анимации */ to {CSS свойства} /* Оформление элемента после завершения анимации */ } К элементу, который должен быть анимирован, необходимо добавить свойство animation и указать в нем имя анимации (1-е значение), время в секундах, в течение которого она будет выполняться (2-е значение), количество повторов анимации (3-е значение) и направление анимации с помощью значения alternate (4-е значение).При этом в нечетные разы анимация будет выполняться в заданном порядке, а в четные – в обратном. Если это значение не задано, то анимация выполняется в обычном порядке. В примере 22.1 показана анимация в виде движущегося текста, помещенного в абзац. Абзац позиционирован и имеет координаты, определенные свойствами left и top, одна из которых (left) изменяется в ходе анимации. Анимация выполняется в течение 4-х секунд три раза и во второй раз она выполняется в обратном порядке (от 500px до 25px) благодаря свойству alternate. 34 Пример 22.1 35 Внимание! Для выполнения заданий по Cascading Style Sheets (CSS) необходимо использовать файл Конспекта, расположенного в «Методических материалах для студентов 3-го курса по дисциплине Web-девелопмент и web-дизайн в электронном бизнесе» на сайте факультета ЦЭУБИ. Номера примеров в заданиях соответствуют номерам примеров в Конспекте. 36 Лабораторные задания по теме «Каскадные листы стилей (Cascading Style Sheets)» Задание 1_CSS Цель: Знакомство со способами применения стилей в документе HTML. 1.Познакомьтесь с возможностью встраивания стиля в документ HTML. Cоздайте HTML-документ, используя в качестве содержимого текст примеров 1-3. Просмотрите полученные результаты в браузере. 2. Познакомьтесь с возможностью внедрения стиля в документ HTML. Cоздайте HTML-документ, используя в качестве содержимого текст примера 4. Просмотрите полученные результаты в браузере. 3. Познакомьтесь с использованием классов в документе HTML. Создайте HTMLдокумент, используя в качестве содержимого текст примера 7. Просмотрите полученные результаты в браузере. 4.Познакомьтесь с использованием селектора ID в объявлении стиля в документе HTML. Cоздайте HTML-документ, используя в качестве содержимого текст примера Измените объявление стиля. Просмотрите полученные результаты в браузере. 5. Познакомьтесь с использованием связывания стиля в документе HTML. Cоздайте HTML -документ и файл my_style.css, используя в качестве образца тексты примера раздела 3.3. Просмотрите полученные результаты в браузере. 37 Предъявите полученные результаты преподавателю. Задание 2_CSS Цель: Знакомство с текстовыми свойствами, установкой цвета и фона, параметрами шрифта и свойствами блочной модели, с использованием плавающей модели размещения элементов. 1. Познакомьтесь с использованием текстовых свойств CSS. Cоздайте HTMLдокумент, используя в качестве содержимого текст примера 12. Просмотрите полученные результаты в браузере. 1.1. Измените class1, применив собственные установки текстовых свойств для форматирования абзацев. Просмотрите полученные результаты в браузере. 1.2. Добавьте в HTML-код элемент