🗊Презентация Стилі CSS. (Лекція 5)

Лекція 5 Стилі CSS Межі Курсори Відступи Смуга прокрутки Псевдоелементи Позиціонування Розмір елементу Посилання

Межі Специфікація CSS2 описує атрибут стилю border, який дозволяє задати вид меж навколо об'єктів. Атрибут border може бути застосований до будь-яких об'єктів.

<STYLE type="text/css"> <STYLE type="text/css"> table {border-width: 3px;border-color: red;border-style: dashed;} .gro {border-style: groove;} </STYLE> <h4 style=border-style:dotted;border-top-color:green;> Верхня частина заголовка зеленого кольору (dotted) </h4> <table style=border-style:dashed;border-top-color:blue;>

Курсори

Приклад

Відступи

Відступи

Смуга прокрутки

Приклади: <STYLE type="text/css"> .SBColor { scrollbar-3dlight-color:blue;scrollbar-arrow-color: white; scrollbar-base-color:green;scrollbar-face-color:pink; scrollbar-track-color: aqua;} </STYLE>

Псевдоелементи Псевдоелементи є особливою групою, що дозволяють об'єднувати декілька стилів для якого-небудь об'єкту. Наприклад, можна задати властивості для першої букви параграфа. Для цього призначається для тега P псевдоелемент first-letter, в якому встановлюєте різні стили: p:first-letter { float:right;font-size:2em;color:red;}

<STYLE type="text/css"> <STYLE type="text/css"> A.pr:visited { color:blue } A.pr:active { font-weight:bold; color:brown } A.pr:link { color:#00FF00 } A.pr:hover { color:red; text-decoration: none} p:first-letter { float:right;font-size:2em;color:red;} p:first-line {color:green;} </STYLE>

Позиціонування

<div align="center" style="position: absolute; z-index:5; width: 350px; height: 100px; top: 120px; left: 0px; color: #0000ff; font-size:100px">z-index</div> <div style="position: absolute; z-index:3; width: 150px; height: 150px; top: 0px; left: 100px; background-color: #ff00ff"> </div> <div style="position: absolute; z-index:4; width: 150px; height: 150px; top: 100px; left: 0px; background-color: #ff0000"> </div> <div align="center" style="position: absolute; z-index:5; width: 350px; height: 100px; top: 120px; left: 0px; color: #0000ff; font-size:100px">z-index</div> <div style="position: absolute; z-index:3; width: 150px; height: 150px; top: 0px; left: 100px; background-color: #ff00ff"> </div> <div style="position: absolute; z-index:4; width: 150px; height: 150px; top: 100px; left: 0px; background-color: #ff0000"> </div>

<style type="text/css"> body {background-color: #c5ffa0} a {position: absolute;z-index:auto ;top: 100px;border: #000000 1px solid;} a:hover {position: absolute;z-index:1;top: 80px;border: #800000 1px solid;} </style> <a href="#" style="left: 10px"><img src="graphics/z-index1.gif"></a>

Розмір елементу

Посилання

Приклад використання параметра HOVER <style type="text/css"> A:link {text-decoration: none} // прибирає підкреслення для ссылок A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline; color: red;} // робить посилання червоним і підкресленим при наведенні на неї курсора </style>

Розміщення рисунка на кнопці <form> <input type=button style="background: url(bgbutton.gif); height:20px; line-height:12px;" value="Кнопка з фоном"> </form>