Выбор по подстроке
В качестве примеров трех типов селекторов по подстрокам рассмотрим следующие правила:
span[class^=”bar”] {background: silver}
span[class$=”y”] {font-weight: bold}
span[class*=”cloud”] {font-style: italic}
в применении к следующим строкам HTML-страницы:
<span class=”barren rocky”>Mercury</span>
<span class=”cloudy barren”>Venus</span>
<span class=”life-bearing cloudy”>Earth</span>
Селектор первого из трех правил выбирает любой элемент span, значение атрибута class которого начинается с подстроки bar. Таким элементом является только элемент Mercury (Меркурий), так как его атрибут class имеет значение barren rocky.
Селектор второго правила выбирает любой элемент span, значение атрибута class которого заканчивается односимвольной подстрокой y. Таких элементов два: Mercury (Меркурий) и Earth (Земля).
Наконец, селектор третьего правила выбирает любой элемент span, значение атрибута class которого содержит подстроку cloud. Такими планетами являются Venus (Венера) и Earth (Земля), так эти элементы в значении атрибута class содержат слово cloudy.
Таким образом, в результате действия трех правил браузер отобразит на экране следующее:
Mercury
Venus
Earth
Естественно, селекторы по подстроке могут применяться не только с атрибутом class, но и с атрибутами href, src, id, title, alt и другими.
Применение свойства text-shadow (css3)
Если использовать тени, то по мне только для заголовков, рассмотрим простейший пример:
h1 { text-shadow: 2px 3px 1px #ddd; }
Первое значение (2px) — смещение тени по горизонтали. При положительном значении смещает тень вправо, при отрицательном – влево;
Второе значение (3px) — смещение тени по вертикали. При положительное значении смещает тень вниз, при отрицательном – вверх;
Третье значение (1px) — размытие тени. Параметр не обязателен и поддерживается не всеми браузерами.
Четвертое значение (#ddd) — цвет тени. Параметр не обязателен, по-умолчанию используется цвет текста
Свойство opacity (css3)
Синтаксис:
opacity: <прозрачность>
Internet Explorer:
filter: alpha(opacity = <прозрачность-ie>)
Значения:
<прозрачность>
значение прозрачности цвета от 0 до 1
<прозрачность-ie>
значение прозрачности цвета от 0 до 100
Пример:
opacity:0.2;
filter:alpha(opacity=20);
Создание слоев
CSS дает возможность работы со слоями: фрагментами HTML, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела.
|
Рис.1 |
Код HTML для приведенного на рис. 1 примера показан ниже.
<html> <body> Слой 1 наверху <div style="position:relative; font-size:50px; z-index:2; color: navy">Слой 1</div> <div style="position:relative; top:-55; left:5; color:orange; font-size:80px; z-index:1">Слой 2</div> Слой 2 наверху <div style="position:relative; font-size:50px; z-index:3; color: navy">Слой 1</div> <div style="position:relative; top:-55; left:5; color:orange; font-size:80px; z-index:4">Слой 2</div> </body> </html>
Для создания слоев следует использовать тег DIV или SPAN. Эти теги взаимозаменяемы и различаются лишь внешним видом в браузере. Если требуются отступы до и после текста, следует использовать элемент DIV. При размещении текста внутри параграфа применяется тег SPAN.
Тип позиционирования определяется параметром position, положение элемента двумя координатами top и left, а порядок слоя значением z-index (слой с z-index=3 окажется над слоем с z-index=2 ).