CSS

908 views

Published on

Коротко об основных возможностях CSS

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
908
On SlideShare
0
From Embeds
0
Number of Embeds
366
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS

  1. 1. CSS
  2. 2. CSS Появление CSS стало революцией в мире web-дизайна— управление отображением множества документов с помощью одной таблицы стилей;— более точный контроль над внешним видом страниц;— различные представления для разных носителей информации (экран, печать, и т. д.);— сложная и проработанная техника дизайна.
  3. 3. Синтаксис CSS В HTML:<h2 style="color:#ff0000;">Заголовок</h2> В CSS: h2 { color:#ff0000; }
  4. 4. Синтаксис CSS selector { property: value; } Селектор Свойство Значение тег, к которому объекта свойствабудет применен стиль
  5. 5. Применение CSS Лучший метод — создать отдельныйфайл, подключенный для всех страниц CSS
  6. 6. Color — цветh2 { color:#ff0000; }Задает цвет объекта
  7. 7. Background — фонbody { background-color:#ff0000; } Задает цвет фона
  8. 8. Background — фон body { background-color:#ff0000; } Задает цвет фонаbody { background-image:url(image.jpg); } Задает фоновую картинку
  9. 9. Background — фонbody { background-repeat:repeat-x; } Задает повторение изображения
  10. 10. Background — фон body { background-repeat:repeat-x; } Задает повторение изображения body { background-position:left top; }Задает положение. По горизонту, затем по вертикали
  11. 11. Font — шрифтp { font-family:arial, verdana, sans-serif; } Выбирает шрифт
  12. 12. Font — шрифтp { font-family:arial, verdana, sans-serif; } Выбирает шрифт p { font-style:italic; } Определяет начертание шрифта
  13. 13. Font — шрифт p { font-weight:bold; }Вес шрифта. Некоторые браузеры поддерживают числовое значение
  14. 14. Font — шрифт p { font-weight:bold; }Вес шрифта. Некоторые браузеры поддерживают числовое значение p { font-size:120%; } Размер шрифта. Значения: px, pt, em, %
  15. 15. Text — текстp { text-align:center; }Выравнивание текста
  16. 16. Text — текст p { text-align:center; } Выравнивание текста p { text-decoration:underline; }Отвечает за подчеркивание, зачеркивание
  17. 17. Text — текстp { text-indent:20px; } Регулирует отступ
  18. 18. Text — текст p { text-indent:20px; } Регулирует отступ p { text-transform:uppercase; }Определяет строчные/прописные буквы
  19. 19. a — ссылка a:hover { color:#ff0000; }Определяет поведение при наведении
  20. 20. a — ссылка a:hover { color:#ff0000; } Определяет вид при наведении a:visited { color:#ff0000; }Определяет вид посещенной ссылки
  21. 21. a — ссылка a:active { color:#ff0000; }Определяет вид при нажатии
  22. 22. ИдентификаторыClass. В HTML-коде для любого элемента можно указать класс. <ul class=”list”> <li>Элемент списка</li> <li>Элемент списка</li> </ul>
  23. 23. ИдентификаторыВ файле стилей класс прописывается через точку ul.list { color:#ff0000; }
  24. 24. ИдентификаторыId. В HTML-коде для любого элемента можно указать идентификатор. В отличии от класса идентификаторс определенным именем может быть только один на странице
  25. 25. ИдентификаторыHTML: <ul id=”list”> <li>Элемент списка</li> <li>Элемент списка</li> </ul>CSS: #list { color:#ff0000; }
  26. 26. Группировка стилей ul.list { color:#ff0000; }
  27. 27. Группировка стилей ul.list { color:#ff0000; } Не обязательно указывать тег .list { color:#ff0000; }
  28. 28. Группировка стилей ul.list { color:#ff0000; } Не обязательно указывать тег .list { color:#ff0000; }Можно указывать несколько классов .list, .list2 { color:#ff0000; }
  29. 29. Группировка элементов <span>Предназначен для выделения внутри тегов<p>Элемент ничего не добавляет к содержимомудокумента. Но, в сочетании с <span>CSS</span>,может использоваться для визуальных эффектовприменимо к отдельным блокам текста</p>
  30. 30. Группировка элементовspan { color:#ff0000; font-weight:bold; }Элемент ничего не добавляет к содержимомудокумента. Но, в сочетании с CSS, можетиспользоваться для визуальных эффектовприменимо к отдельным блокам текста
  31. 31. Группировка элементов <div>Предназначен для выделения нескольких тегов в общий блок
  32. 32. Блочная модель DIV
  33. 33. Блочная модель padding DIV
  34. 34. Блочная модель border DIV
  35. 35. Блочная модель margin DIV
  36. 36. Всплывающие элементы div { float:left; }
  37. 37. Всплывающие элементы Этот div всплывает влево А пустое место заполняется следующим далее содержимым
  38. 38. Всплывающие элементы При помощи всплывания можно создать колонкиdiv { div { div {float:left; float:left; float:left;width:30%; width:30%; width:30%;} } }
  39. 39. Вопросы? United Design uniteddesign.ru

×