CSS. Cascading Style Sheets, каскадные таблицы стилей

Март 9, 2021

Главная
Информатика
CSS. Cascading Style Sheets, каскадные таблицы стилей

Содержание

2. CSS Cascading Style Sheets (каскадные таблицы стилей) – это набор параметров форматирования, который применяется к элементам,
3. Оформление HTML-документа Табличная верстка – устарела; Блочная верстка (верстка с помощью слоев) – HTML 4 ;
4. Оформление HTML-документа
5. Основные особенности блочной верстки Разделение содержания (логики) HTML-документа и его оформления; Расширенные по сравнению с HTML
6. Типы стилей Стиль браузера – оформление, применяемое к HTML-документу по умолчанию браузером. Стиль разработчика (автора) –
7. Способы применения CSS в HTML Вложение (inline); Встраивание (embeding); Связывание (linking); Импорт (import), IE.
8. Вложение Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил. Сам атрибут
9. Встраивание Cвойства CSS описываются в самом HTML-документе и располагаются в заголовке веб-страницы внутри тэга . H1
10. Связывание При использовании связанных свойства CSS располагается в отдельном файле (.css); для связывания HTML-документа с этим
11. Основы CSS-синтаксиса CSS состоит из набора стилевых правил, которые описываются в виде отличного от HTML-синтаксиса. Базовым
12. Группировка селекторов
13. Единицы измерения Для задания размеров различных элементов в CSS используются абсолютные и относительные единицы измерения. Абсолютные:
14. Использование цвета Задать цвет можно: по названию; в формате rgb; по шестнадцатеричному значению.
15. Пример использования цвета
16. Адреса Адреса (URI) применяются для указания пути к файлу, например, для установки фоновой картинки на странице.
17. Наследование Наследование - это перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними,
18. Пример наследования
19. Оформление текстовых элементов: работа со шрифтами font-family: семейства шрифта|тип шрифта font-family:Arial,Geneva,Helvetica,sans-serif; font-size: величина | % абсолютная
20. Оформление текстовых элементов: работа с текстом text-align: left|right|center|justify text-align:right; text-decoration: none|overline(|)underline(|)linethrough text-decoration:underline; text-indent: величина|% text-indent:10px; text-transform:
21. Оформление текстовых элементов: оформление списков list-style-type: none | circle | disc | square | decimal|lower-alpha|upperalpha |
22. Отступы и рамки
23. Отступы снаружи margin-top: auto|величина|% margin-right: auto|величина|% margin-bottom: auto|величина|% margin-left: auto|величина|% margin: margin-top margin-right margin-bottom margin-left margin:10px
24. Отступы изнутри padding-top: величина|% padding-right: величина|% padding-bottom: величина|% padding-left: величина|% padding: padding-top padding-right padding-bottom padding-left padding:10px
26. Скачать презентацию

CSS
Cascading Style Sheets (каскадные таблицы стилей) – это набор параметров форматирования, который

применяется к элементам, атрибутам и/или частям HTML-документа для изменения его внешнего вида.

Оформление HTML-документа
Табличная верстка – устарела;
Блочная верстка (верстка с помощью слоев) – HTML

;
Блочная верстка (верстка с помощью слоев) – HTML5

Оформление HTML-документа

Основные особенности блочной верстки
Разделение содержания (логики) HTML-документа и его оформления;
Расширенные по сравнению

с HTML возможности оформления документа;
Применение таблиц только для представления данных в табличной форме;
Разное оформление для разных устройств;
Единое стилевое оформление множества документов;
Ускорение загрузки сайта.

Слайд 6

Типы стилей
Стиль браузера – оформление, применяемое к HTML-документу по умолчанию браузером.
Стиль

разработчика (автора) – оформление, добавленное автором сайта при верстке.
Стиль пользователя – настройки стиля в конкретном браузере пользователем.

Слайд 7

Способы применения CSS в HTML
Вложение (inline);
Встраивание (embeding);
Связывание (linking);
Импорт (import), IE.

Слайд 8

Вложение
Для определения стиля используется атрибут style, а его значением выступает набор стилевых

правил. Сам атрибут style расширяет описываемый HTML-элемент.

Данные

Слайд 9

Встраивание
Cвойства CSS описываются в самом HTML-документе и располагаются в заголовке веб-страницы внутри

тэга

Слайд 10

Связывание
При использовании связанных свойства CSS располагается в отдельном файле (.css); для связывания

HTML-документа с этим файлом применяется тег , располагающийся в .

Слайд 11

Основы CSS-синтаксиса
CSS состоит из набора стилевых правил, которые описываются в виде отличного

от HTML-синтаксиса.
Базовым понятием CSS является селектор – т.е. имя стиля, для которого добавляются элементы форматирования. Общий вид записи:
Тег {
свойство1: значение;
свойство2: значение;
...
}

Слайд 12

Группировка селекторов

Слайд 13

Единицы измерения
Для задания размеров различных элементов в CSS используются абсолютные и

относительные единицы измерения.
Абсолютные: in (inches, дюймы), cm, mm, pt (points, пункты, 1pt = 1/72 in ~ 0,35 mm), pc (picas, пики, 1pc = 12pt).
Относительные: em (высота используемого элементом шрифта), ex (высота символа “x” используемого шрифта), px (pixels, пиксели), %.

Слайд 14

Использование цвета
Задать цвет можно:
по названию;
в формате rgb;
по шестнадцатеричному значению.

Слайд 15

Пример использования цвета

Слайд 16

Адреса
Адреса (URI) применяются для указания пути к файлу, например, для установки фоновой

картинки на странице. Для этого используется ключевое слово url(), внутри скобок пишется относительный или абсолютный адрес файла:
body {
background: url(http://mysite.ru) no-repeat;
}
div { background: url(images/warning.png) no-repeat;
padding-left: 20px;
margin-left: 200px;
}

Слайд 17

Наследование
Наследование - это перенос правил форматирования для элементов, находящихся внутри других. Такие

элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.

Слайд 18

Пример наследования

Слайд 19

Оформление текстовых элементов: работа со шрифтами
font-family: семейства шрифта|тип шрифта
font-family:Arial,Geneva,Helvetica,sans-serif;
font-size: величина | %
абсолютная

величина: xx-small, x-small, small, medium, large, x-large, xx-large.
относительная величина: larger, smaller
font-size:10px;
font-weight: normal|bold|bolder|lighter|число от 100 до 900
400 = normal, 700 = bold
font-style:bold;
font-style: normal|italic
font-style:italic;
font: font-style font-variant font-weigth fontsize
font-family
Порядок важен. Можно все опустить, кроме font-size и font-family.
font:bold 10px Arial;

Слайд 20

Оформление текстовых элементов: работа с текстом
text-align: left|right|center|justify
text-align:right;
text-decoration: none|overline(|)underline(|)linethrough
text-decoration:underline;
text-indent: величина|%
text-indent:10px;
text-transform: none|capitalize|uppercase|lowercase
text-transform:uppercase;
letter-spacing: normal|величина
letter-spacing:10px;
word-spacing: normal|величина
word-spacing:10px;
white-space:

normal|pre|nowrap
white-space:pre;

Слайд 21

Оформление текстовых элементов: оформление списков
list-style-type: none | circle | disc | square

| decimal|lower-alpha|upperalpha |
lower-roman | upper-roman
list-style-type:square;
list-style-position: outside|inside
list-style-position:inside;
list-style-image: none|url
list-style-image:url(“picture.gif");
list-style: list-style-type list-style-position list-style-image
list-style:decimal inside;

Слайд 22

Отступы и рамки

Слайд 23

Отступы снаружи
margin-top: auto|величина|%
margin-right: auto|величина|%
margin-bottom: auto|величина|%
margin-left: auto|величина|%
margin: margin-top margin-right margin-bottom margin-left
margin:10px 20px 20px

30px;
margin:15px;
margin-left: 10px; margin-right: 5px;

Отступы и рамки

Слайд 24

Отступы изнутри
padding-top: величина|%
padding-right: величина|%
padding-bottom: величина|%
padding-left: величина|%
padding: padding-top padding-right padding-bottom padding-left
padding:10px 20px 20px

30px;
padding:15px;

Отступы и рамки

CSS. Cascading Style Sheets, каскадные таблицы стилей

Содержание

CSSCascading Style Sheets (каскадные таблицы стилей) – это набор параметров форматирования, который

Оформление HTML-документаТабличная верстка – устарела;Блочная верстка (верстка с помощью слоев) – HTML

Оформление HTML-документа

Основные особенности блочной версткиРазделение содержания (логики) HTML-документа и его оформления;Расширенные по сравнению

Типы стилейСтиль браузера – оформление, применяемое к HTML-документу по умолчанию браузером. Стиль

Способы применения CSS в HTMLВложение (inline);Встраивание (embeding);Связывание (linking);Импорт (import), IE.

ВложениеДля определения стиля используется атрибут style, а его значением выступает набор стилевых

ВстраиваниеCвойства CSS описываются в самом HTML-документе и располагаются в заголовке веб-страницы внутри

СвязываниеПри использовании связанных свойства CSS располагается в отдельном файле (.css); для связывания

Основы CSS-синтаксисаCSS состоит из набора стилевых правил, которые описываются в виде отличного

Группировка селекторов

Единицы измерения Для задания размеров различных элементов в CSS используются абсолютные и

Использование цветаЗадать цвет можно: по названию; в формате rgb; по шестнадцатеричному значению.

Пример использования цвета

АдресаАдреса (URI) применяются для указания пути к файлу, например, для установки фоновой

НаследованиеНаследование - это перенос правил форматирования для элементов, находящихся внутри других. Такие

Пример наследования

Оформление текстовых элементов: работа со шрифтамиfont-family: семейства шрифта|тип шрифтаfont-family:Arial,Geneva,Helvetica,sans-serif;font-size: величина | %абсолютная

Оформление текстовых элементов: оформление списковlist-style-type: none | circle | disc | square

Отступы и рамки

Отступы снаружиmargin-top: auto|величина|%margin-right: auto|величина|%margin-bottom: auto|величина|%margin-left: auto|величина|%margin: margin-top margin-right margin-bottom margin-leftmargin:10px 20px 20px

Отступы изнутриpadding-top: величина|%padding-right: величина|%padding-bottom: величина|%padding-left: величина|%padding: padding-top padding-right padding-bottom padding-leftpadding:10px 20px 20px

Похожие презентации

CSS
Cascading Style Sheets (каскадные таблицы стилей) – это набор параметров форматирования, который

Оформление HTML-документа
Табличная верстка – устарела;
Блочная верстка (верстка с помощью слоев) – HTML

Основные особенности блочной верстки
Разделение содержания (логики) HTML-документа и его оформления;
Расширенные по сравнению

Типы стилей
Стиль браузера – оформление, применяемое к HTML-документу по умолчанию браузером.
Стиль

Способы применения CSS в HTML
Вложение (inline);
Встраивание (embeding);
Связывание (linking);
Импорт (import), IE.

Вложение
Для определения стиля используется атрибут style, а его значением выступает набор стилевых

Встраивание
Cвойства CSS описываются в самом HTML-документе и располагаются в заголовке веб-страницы внутри

Связывание
При использовании связанных свойства CSS располагается в отдельном файле (.css); для связывания

Основы CSS-синтаксиса
CSS состоит из набора стилевых правил, которые описываются в виде отличного

Единицы измерения
Для задания размеров различных элементов в CSS используются абсолютные и

Использование цвета
Задать цвет можно:
по названию;
в формате rgb;
по шестнадцатеричному значению.

Адреса
Адреса (URI) применяются для указания пути к файлу, например, для установки фоновой

Наследование
Наследование - это перенос правил форматирования для элементов, находящихся внутри других. Такие

Оформление текстовых элементов: работа со шрифтами
font-family: семейства шрифта|тип шрифта
font-family:Arial,Geneva,Helvetica,sans-serif;
font-size: величина | %
абсолютная

Оформление текстовых элементов: оформление списков
list-style-type: none | circle | disc | square

Отступы снаружи
margin-top: auto|величина|%
margin-right: auto|величина|%
margin-bottom: auto|величина|%
margin-left: auto|величина|%
margin: margin-top margin-right margin-bottom margin-left
margin:10px 20px 20px

Отступы изнутри
padding-top: величина|%
padding-right: величина|%
padding-bottom: величина|%
padding-left: величина|%
padding: padding-top padding-right padding-bottom padding-left
padding:10px 20px 20px