1 HTML 5 DOCTYPE html head titletitle meta
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-1.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-2.jpg)
![Виды стилей 1)Внедренные в страницу HTML 5 <!DOCTYPE html> <head> <title></title> <meta content=""> <style></style> Виды стилей 1)Внедренные в страницу HTML 5 <!DOCTYPE html> <head> <title></title> <meta content=""> <style></style>](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-3.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-4.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-5.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-6.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-7.jpg)
![ID селектор #abzac { font-weight: bold; } ID селектор #abzac { font-weight: bold; }](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-8.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-9.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-10.jpg)
![Цвета в 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; Цветовая](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-11.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-12.jpg)
![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](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-13.jpg)
![Стили для текста font-family: verdana, Tahoma; -шрифт font-size: 12 pt-размер шрифта font-weight: bold; -жирность Стили для текста font-family: verdana, Tahoma; -шрифт font-size: 12 pt-размер шрифта font-weight: bold; -жирность](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-14.jpg)
![Добавление фона на сайт body { background: #00 ff 00 url("smiley. gif") no-repeat fixed Добавление фона на сайт body { background: #00 ff 00 url("smiley. gif") no-repeat fixed](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-15.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-16.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-17.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-18.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-19.jpg)
![<!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; /* Относительное](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-20.jpg)
- Slides: 20
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-1.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-2.jpg)
![Виды стилей 1Внедренные в страницу HTML 5 DOCTYPE html head titletitle meta content stylestyle Виды стилей 1)Внедренные в страницу HTML 5 <!DOCTYPE html> <head> <title></title> <meta content=""> <style></style>](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-3.jpg)
Виды стилей 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>
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-4.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-5.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-6.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-7.jpg)
![ID селектор abzac fontweight bold ID селектор #abzac { font-weight: bold; }](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-8.jpg)
ID селектор #abzac { font-weight: bold; }
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-9.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-10.jpg)
![Цвета в CSS 1color rgb0 0 255 2color blue 3color fff color ffffff Цветовая Цвета в CSS 1)color: rgb(0. 0. 255); 2)color: blue; 3)color: #fff; color: #ffffff; Цветовая](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-11.jpg)
Цвета в CSS 1)color: rgb(0. 0. 255); 2)color: blue; 3)color: #fff; color: #ffffff; Цветовая палитра
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-12.jpg)
![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](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-13.jpg)
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
![Стили для текста fontfamily verdana Tahoma шрифт fontsize 12 ptразмер шрифта fontweight bold жирность Стили для текста font-family: verdana, Tahoma; -шрифт font-size: 12 pt-размер шрифта font-weight: bold; -жирность](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-14.jpg)
Стили для текста 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 urlsmiley gif norepeat fixed Добавление фона на сайт body { background: #00 ff 00 url("smiley. gif") no-repeat fixed](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-15.jpg)
Добавление фона на сайт 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; } Пример
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-16.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-17.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-18.jpg)
![](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-19.jpg)
![DOCTYPE html head meta charsetutf8 titlepositiontitle style layer 1 position relative Относительное <!DOCTYPE html> <head> <meta charset="utf-8"> <title>position</title> <style>. layer 1 { position: relative; /* Относительное](https://slidetodoc.com/presentation_image_h/bbed66eae76ecc23988ef931c998e5b6/image-20.jpg)
<!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> Пример