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

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

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


Слайд 2Межі
Специфікація CSS2 описує атрибут стилю border, який дозволяє задати вид меж

навколо об'єктів. Атрибут border може бути застосований до будь-яких об'єктів.


Слайд 3
table {border-width: 3px;border-color: red;border-style: dashed;}
.gro {border-style: groove;}


Верхня частина заголовка

зеленого кольору (dotted)



Слайд 5Курсори


Слайд 8Приклад

all-scroll
auto
col-resize
crosshair
default
hand


Слайд 9Відступи


Слайд 10Відступи


Слайд 12Смуга прокрутки


Слайд 14Приклади:

.SBColor { scrollbar-3dlight-color:blue;scrollbar-arrow-color: white;
scrollbar-base-color:green;scrollbar-face-color:pink;
scrollbar-track-color: aqua;}



Слайд 15Псевдоелементи
Псевдоелементи є особливою групою, що дозволяють об'єднувати декілька стилів для якого-небудь

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

Слайд 18
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;}



Слайд 19Позиціонування


Слайд 22

color: #0000ff; font-size:100px">z-index
 
 


Слайд 23

#ffff00"> 
 


Слайд 25

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;}



Слайд 27Розмір елементу


Слайд 29

Высота даного осередку рівна 35 пікселям.
Отже

вміст в осередок не влізає і обрізається



Минимальная Висота даного осередку
рівна 150 пікселям. Отже текст в неї влізає і не обрізається


Слайд 30Посилання


Слайд 31Приклад використання параметра HOVER
A:link {text-decoration: none} // прибирає підкреслення

для ссылок A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline; color: red;} // робить посилання червоним і підкресленим при наведенні на неї курсора


Слайд 32Розміщення рисунка на кнопці

фоном">


Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


Для правообладателей

Яндекс.Метрика