1 HTML 5 DOCTYPE html head titletitle meta

  • Slides: 20
Download presentation

Виды стилей 1)Внедренные в страницу HTML 5 <!DOCTYPE html> <head> <title></title> <meta content=""> <style></style>

Виды стилей 1)Внедренные в страницу HTML 5 <!DOCTYPE html> <head> <title></title> <meta content=""> <style></style> </head> <body></body> </html> 2)Встроенные в страницу HTML 5 <!DOCTYPE html> <head> <title></title> <meta content=""> </head> <body></body> </html> 3)Внешние <!DOCTYPE html> <head> <title></title> <link rel='stylesheet' href='css/contact. css'/> </head> <body></body> </html>

ID селектор #abzac { font-weight: bold; }

ID селектор #abzac { font-weight: bold; }

Цвета в CSS 1)color: rgb(0. 0. 255); 2)color: blue; 3)color: #fff; color: #ffffff; Цветовая

Цвета в CSS 1)color: rgb(0. 0. 255); 2)color: blue; 3)color: #fff; color: #ffffff; Цветовая палитра

margin, padding. first { width: 200 px; height: 200 px; border: 2 px solid

margin, padding. first { width: 200 px; height: 200 px; border: 2 px solid green; margin: 200 px 100 px; }. two { width: 200 px; height: 200 px; border: 2 px solid red; padding: 200 px 100 px; } m a r g i n Пример h e ii g h t width p a d d i n g

Стили для текста font-family: verdana, Tahoma; -шрифт font-size: 12 pt-размер шрифта font-weight: bold; -жирность

Стили для текста font-family: verdana, Tahoma; -шрифт font-size: 12 pt-размер шрифта font-weight: bold; -жирность font-style: (oblique-наклонный; italic-курсив); text-indent: 40 px; красная строка text-decoration: (none, overline; underline, line-through) подчеркивание text-align: (center; right; center; left) выравнивание Пример

Добавление фона на сайт body { background: #00 ff 00 url("smiley. gif") no-repeat fixed

Добавление фона на сайт body { background: #00 ff 00 url("smiley. gif") no-repeat fixed center; } h 1 { background-color: #00 ff 00; } div { background-image: url("paper. gif"); background-color: #cccccc; } Пример

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>position</title> <style>. layer 1 { position: relative; /* Относительное

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>position</title> <style>. layer 1 { position: relative; /* Относительное позиционирование */ background: #f 0 f 0 f 0; /* Цвет фона */ height: 200 px; /* Высота блока */ }. layer 2 { position: absolute; /* Абсолютное позиционирование */ bottom: 15 px; /* Положение от нижнего края */ right: 15 px; /* Положение от правого края */ line-height: 1 px; } </style> </head> <body> <div class="layer 1"> <div class="layer 2"> <img src="images/girl. jpg" alt="Девочка" /> </div> </body> </html> Пример