ОСНОВЫ CSS Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной среде. CSS - это сокращение от Cascading Style. - презентация

1 ОСНОВЫ CSS Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной среде. CSS - это сокращение от Cascading Style Sheets - в переводе Каскадные таблицы стилей. Уникальное изобретение человечества, значительно облегчающее создание веб-сайтов. CSS работает со шрифтами, полями, таблицами, отступами, картинками и др. и представляет значительно более широкие возможности, чем простой html

2 Основные преимущества CSS управление дизайном любого количества документов с помощью одной таблицы стилей; более точный дизайн страниц, поддерживаемый всеми браузерами; разделение документа на две составляющие: структура и дизайн, благодаря чему исходный код становится чистым и легко читаемым; новые расширенные возможности по сравнению с обычным html.

3 Синтаксис и принцип работы CSS. Пример 1 Работаем со стилями h1{color:blue;font-size:14px} Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета

4 Синтаксис и принцип работы CSS. Пример 2 Работаем со стилями Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета

5 Как подключить CSS таблицу к HTML документу?

6 index.html в окне браузера style.css index.html Работаем со стилями Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразится высотой всего лишь 14 пикселей и будет голубого цвета h1{color:blue;font-size:14px}

7 Цвет и фон в CSS color background-color background-image background-repeat background-attachment background-position background

8 Свойство COLOR H1 { color: red ; } P { color: green ; } Свойство BACKGROUND- COLOR BODY { background-color : #FFEE8C ; } H1 { color: red ; background-color :blue ; } P { color: green ; }

9 Свойство BACKGROUND- IMAGE BODY { background-color : #FFEE8C ; background-image : url(smile.png) ; } Свойство BACKGROUND- REPEAT Background-repeat: repeat-x ;повторение по горизонтали Background-repeat: repeat-y ;повторение по вертикали Background-repeat: repeat ;по вертикали и по горизонтали (значение по-умолчанию) Background-repeat: no-repeat ;не повторяется

10 Свойство BACKGROUND- ATTACHMENT BODY { background-image : url(smile.png) ; background-repeat: no-repeat; background-attachment: scroll ; } фон прокручивается вместе с содержимым BODY { background-image : url(smile.png) ; background-repeat: no-repeat; background-attachment: fixed ; } фон строго зафиксирован

11 Свойство BACKGROUND- POSITION BODY { background-image : url(smile.png) ; background-repeat: no-repeat; background-position: top right; } background-position: 300px 500px ; background-position: 75% 25%;

12 Сокращенная форма записи - BACKGROUND BODY { background-color:#ffee8c ; background-image : url(smile.png) ; background-repeat: no-repeat; background-attachment: fixed; background-position: top right; } BODY { background: #ffee8c url(smile.png) no-repeat fixed top right ; } Порядок свойств элемента: background-color_background-image_background-repeat_background-attachment _background-position

13 Шрифты в CSS font-family font-style font-variant font-weight font-size font

14 Свойство FONT-FAMILY h1 {font-family: verdana, arial, sans-serif;} p {font-family: "Times New Roman", serif;}

15 Свойство FONT-STYLE h1{ font-family: verdana, arial, sans-serif; font-style:normal; } h2{ font-family: verdana, arial, sans-serif; font-style:italic ; } h3{ font-family: verdana, arial, sans-serif; font-style:oblique; } Italic означает использование встроенного в шрифт курсивного начертания. Ведь почти каждый шрифт включает в себя все символы и буквы в нормальном исполнении, в полужирном исполнении и в курсивном. Oblique - это искусственно созданный курсив, т.е. созданный наклоном стандартных букв на определенный угол.

16 Свойство FONT-VARIANT h1{ font-family: verdana, arial, sans-serif; font-variant:small-caps; } h2{font-family: verdana, arial, sans-serif;} Свойство FONT-WEIGHT P {font-family: arial, verdana, sans-serif;} DIV { font-family: arial, verdana, sans-serif; font-weight: bold; } Свойство FONT-SIZE h1 { font-family: arial, verdana, sans-serif; font-size: 18px; }

17 Сокращенная запись. Свойство FONT P{ font-style: italic; font-variant: normal ; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } P{ font : italic normal bold 30px arial,sans-serif; } Порядок свойств элемента: font-style_ font-variant_font-weight_font-size_font-family

18 Текст в CSS text-align text-decoration text-indent text-transform letter-spacing word-spacing

19 Свойство TEXT-ALIGN h1{ text-align:center;} h2 {text-align:left;} h3 {text-align:right;} p {text-align:justify;} Свойство TEXT- DECORATION h1 { text-align:center; text-decoration:underline; } h2 { text-align:center; text-decoration:overline; } h3 { text-align:center; text-decoration:line-through; }

20 Свойство TEXT-INDENT h1{text-align:center;} p { text-indent: 40px; } h1{text-align:center;} p { text-indent: 20%; } Свойство LETTER-SPACING h1 { letter-spacing: 10px;} p{ letter-spacing :4px; } Свойство WORD-SPACING h1 { word-spacing: 20px;} p{ word-spacing :10px; }

21 Списки в CSS list-style-type list-style-position list-style-image list-style

22 Свойство LIST-STYLE-TYPE disk - маркер в виде закрашенного круга; circle - маркер в виде незакрашенного круга; square - маркер в виде закрашенного квадрата; decimal - обычные десятичные числа, например 1,2,3,4,5 и т. д. ; upper-roman - большие римские цифры, типа I, II, III, IV, V и т.д. ; lower-roman - маленькие римские цифры типа i, ii, iii, iv, v и т.д. upper-alpha - большие буквы A, B, C, D, E и так далее; lower-alpha - малые буквы типа a,b,c,d,e и т.д.; none - маркер списка отсутствует;

23 Свойство LIST-STYLE- POSITION ul { list-style-type:square; list-style-position: inside; list-style-image: url(galka.gif); } ul {list-style:square inside url(galka.gif) } Свойство LIST-STYLE-IMAGE ul { list-style-image: url(galka.gif); }

24 Ссылки в CSS A:link {... стиль оформления обычной ссылки... } A:active {... стиль оформления ссылки в момент нажатия... } A:visited {... стиль оформления посещенной ссылки... } А:hover {... стиль оформления ссылки, на которую наведен указатель мыши... } a:link { color: blue; } a:visited { color:gray; } a:hover { color:red ; text-decoration:none; font-weight:bold; } a:active { color:green; text-decoration:none; text-transform:uppercase; }