Базовое руководство по CSS. Поведение элементов страницы
Правила применения CSS. Наступление событий
Поведение регулирует представление элементов при наступлении определенных условий
К коду предыдущей страницы добавим определение класса, которому и зададим атрибуты поведения.
Сделайте пустой HTML документ и в пространство между <head> и </head> внесите CSS код.
<style type="text/css">
p {
position: absolute;/*позиционирование элемента */
left: 100px;
top: 20px;
width: 400px;
height: auto;
padding: 15px;
margin: 40px;
background-color:#336699;
border: 8px solid #663300;
font:12px Verdana, Arial, Helvetica, sans-serif;
color: #CC9966;
}
.class {/*поведение элемента*/
float: left; /*значения left, both, right. Oсновной текст будет "обтекать" этот класс слева */
overflow: scroll; /*задает поведение элемента при выходе за границы разметки. Значения hidden, visible, auto. Все понятно вроде*/
visibility: visible; /* будет ли видим элемент */
z-index: 100; /* уберите атрибут overflow и посмотрите на Вашу страничку. Потом
измените значение элемента на -100. Слой с большим значением z-index оказывается наверху */
width: 100px;/* здесь для наглядности */
height: 100px;/* здесь для наглядности */
background-color:#CCCCCC;/* здесь для наглядности */
}
</style>
Напишите что-нибудь в 10-15 строк внутри тега <body>
и вставьте HTML тег <span class="class">Здесь любое содержание</span> внутрь тега <p></p>
Замечание: Если установить для элемента p значения position:relative; и background-color: (любое), то Вы не увидите своего обтекаемого элемента в IE, какое бы значение z-index не устанавливали
Дальше установка поведения ссылки при пересечении ее курсором мыши
a:link, a:visited {/*состояние ссылки до наведения курсора и после перехода по ссылке*/
font-family: Arial; /*тип шрифта */
font-size: 12px; /*размер шрифта*/
color: #000; /* цвет шрифта */
background-color:#ff9900;/* цвет фона */
}
a:hover {/*состояние ссылки при пересечении ее курсором мыши*/
font-family: Arial; /*тип шрифта */
font-size: 12px; /*размер шрифта*/
color: #f90; /* цвет шрифта */
background-color:#000;/* цвет фона */
}
Меняйте значения атрибутов и просматривайте файл в браузере.
