CSS (Cascading Style Sheets)

Сентябрь 3, 2022

Главная
Алгебра
CSS (Cascading Style Sheets)

Содержание

2. Вводные замечания CSS (Cascading Style Sheets) – каскадные таблицы стилей – набор правил или свойств, которые
3. Возможности CSS 1. Осуществлять выбор элемента или группы элементов, к которым будет применен тот или иной
4. Возможности CSS 2. Осуществлять создание блоков; устанавливать размеры самих блоков, отступов, полей и рамок; устанавливать тип
5. Возможности CSS 5. Управлять фоном на странице: устанавливать цвет фона или фоновое изображение блока; управлять повторением
6. Способы внедрения стиля в HTML-документ Включение непосредственно в тег Описание стиля в заголовке документа Подключение стилевого
7. Способы внедрения стиля в HTML-документ Примеры Этот текст будет выровнен по ширине P {text-align: justify} 3.
8. Свойства текста text-indent Определяет длину отступа в первой строке блока Например P {text-indent: 2cm}
9. Свойства текста text-align Определяет выравнивание текста в элементе Возможные значения: left (по левому краю), right (по
10. Свойства текста text-decoration Определяет оформление текста Возможные значения: none (нет оформления), underline (подчеркивание), overline (линия над
11. Свойства текста letter-spacing Определяет интервал между символами текста Например H1 {letter-spacing: 3mm}
12. Свойства текста word-spacing Определяет интервалы между словами Например P {word-spacing: 4mm}
13. Свойства цвета и фона color Определяет цвет текста Примеры P {color: green} TD {color: rgb(22, 255,
14. Свойства цвета и фона background-color Определяет цвет фона элемента Примеры P {background-color: green} TD {background-color: rgb(22,
15. Свойства цвета и фона background-image Определяет фоновое изображение элемента Пример body {background-image: url(“pic.gif”)}
16. Свойства цвета и фона background-repeat Определяет направление, по которому экран будет заполняться копиями фонового изображения Значения
17. Свойства шрифта font-family Определяет семейство шрифта, используемое в тексте элемента. Если перечислено несколько семейств (через запятую),
18. Свойства шрифта font-style Определяет начертание шрифта Значения italic – курсив oblique – наклонное начертание Пример TD
19. Свойства шрифта font-weight Определяет толщину шрифта Значения normal bold bolder lighter 100-900 (100 – lighter; 900
20. Свойства шрифта font-size Определяет кегль (высоту символов) шрифта Значения Задаются в пунктах (пт), или в процентах
21. Свойства блоков margin-top, margin-right, margin-bottom, margin-left Устанавливают ширину поля для определенной стороны элемента Пример P {margin-top:
22. Свойства блоков padding-top, padding-right, padding-bottom, padding-left Устанавливают ширину промежутка между содержимым элемента и определенным участком его
23. Свойства блоков border-top-width, border-right-width, border-bottom-width, border-left-width Устанавливают ширину рамки для определенной стороны. Рамка проходит между полем
24. Свойства блоков border-top-color, border-right-color, border-bottom-color, border-left-color Устанавливают цвет рамки для определенной стороны. Рамка проходит между полем
25. Свойства блоков border-top-style, border-right-style, border-bottom-style, border-left-style Устанавливают стиль рамки для определенной стороны. Рамка проходит между полем
26. Свойства списков list-style-type Определяет стиль маркеров или номеров списка Значения disc – маркер в виде диска
27. Свойства списков list-style-type Значения (продолжение) upper-roman – списки, нумерованные с помощью заглавные римских цифр lower-latin –
28. Свойства списков list-style-image Определяет изображение, которое будет использовано в качестве маркера списка Значение – адрес (URL)
30. Скачать презентацию

Слайд 2

Вводные замечания
CSS (Cascading Style Sheets) – каскадные таблицы стилей – набор

правил или свойств, которые описывают, как тот или иной элемент или группа элементов будут отображаться на экране монитора в браузере.
Действуют два стандарта CSS – CSS1 и CSS2.
В разработке – стандарт CSS3

Слайд 3

Возможности CSS
1. Осуществлять выбор элемента или группы элементов, к которым будет

применен тот или иной стиль. Это делается с помощью так называемых селекторов. Они позволяют применять стили:
ко всем элементам данной группы, например, ко всем элементам

;
к элементам с определенным классом или id, которые указываются непосредственно в коде страницы
например, к элементам <Н1 class="topHeader">;
к элементам, содержащимся внутри другого элемента
например, к элементу <ем> в таком контексте

3аголовок с <ЕМ>выделенным словом;
к первой букве элемента, например <р>, что позволяет создавать буквицы;
к первой строке элемента;
к посещенным, непосещенным и активным ссылкам.

Слайд 4

Возможности CSS
2. Осуществлять создание блоков; устанавливать размеры самих блоков, отступов, полей

и рамок; устанавливать тип и цвет рамок.
3. Осуществлять некоторое позиционирование блоков:
выравнивание по горизонтали;
обтекание блоков текстом.
4. Управлять шрифтом на странице:
устанавливать начертание;
устанавливать насыщенность;
устанавливать размер и стиль шрифта.

Слайд 5

Возможности CSS
5. Управлять фоном на странице:
устанавливать цвет фона или фоновое изображение

блока;
управлять повторением фонового изображения;
позиционировать фоновое изображение.
6. Писать стили для текста:
устанавливать расстояние между словами и буквами;
устанавливать атрибуты оформления, например подчеркивание и перечеркивание текста;
выравнивать текст по горизонтали и вертикали;
устанавливать высоту строки;
устанавливать цвет текста. 7. Управлять списками:
устанавливать тип маркера в начале каждого пункта списка;
использовать в качестве маркера графические изображения;
позиционировать маркеры.

Слайд 6

Способы внедрения стиля в HTML-документ
Включение непосредственно в тег
Описание стиля в заголовке

документа
Подключение стилевого файла (описание стиля хранится в отдельном файле)

Слайд 7

Способы внедрения стиля в HTML-документ
Примеры
Этот текст будет выровнен

по ширине

3. Подключение стилевого файла st.css, где содержится полное описание стиля (записывается в заголовке документа):

Слайд 8

Свойства текста
text-indent
Определяет длину отступа в первой строке блока
Например
P {text-indent: 2cm}

Слайд 9

Свойства текста
text-align
Определяет выравнивание текста в элементе
Возможные значения: left (по левому краю),

right (по правому краю), center (по центру), justify (по ширине)
Например
P {text-align: justify}

Слайд 10

Свойства текста
text-decoration
Определяет оформление текста
Возможные значения: none (нет оформления), underline (подчеркивание), overline

(линия над текстом), line-through (перечеркивание)
Например
H1 {text-decoration: underline}

Слайд 11

Свойства текста
letter-spacing
Определяет интервал между символами текста
Например
H1 {letter-spacing: 3mm}

Слайд 12

Свойства текста
word-spacing
Определяет интервалы между словами
Например
P {word-spacing: 4mm}

Слайд 13

Свойства цвета и фона
color
Определяет цвет текста
Примеры
P {color: green}
TD {color: rgb(22, 255,

22)}

Слайд 14

Свойства цвета и фона
background-color
Определяет цвет фона элемента
Примеры
P {background-color: green}
TD {background-color: rgb(22,

255, 22)}

Слайд 15

Свойства цвета и фона
background-image
Определяет фоновое изображение элемента
Пример
body {background-image: url(“pic.gif”)}

Слайд 16

Свойства цвета и фона
background-repeat
Определяет направление, по которому экран будет заполняться копиями

фонового изображения
Значения
repeat – фоновое изображение повторяется по горизонтали и по вертикали (по умолчанию)
repeat-x – фоновое изображение повторяется только по горизонтали
repeat-y – фоновое изображение повторяется только по вертикали
Пример
body {background-repeat: repeat-x}

Слайд 17

Свойства шрифта
font-family
Определяет семейство шрифта, используемое в тексте элемента. Если перечислено несколько

семейств (через запятую), то приоритет определяется порядком их следования в перечислении.
Пример
BODY { font-family: Baskerville, "Heisi Mincho W3", serif, arial, times}

Слайд 18

Свойства шрифта
font-style
Определяет начертание шрифта
Значения
italic – курсив
oblique – наклонное начертание
Пример
TD {font-style: italic}

Слайд 19

Свойства шрифта
font-weight
Определяет толщину шрифта
Значения
normal
bold
bolder
lighter
100-900 (100 – lighter; 900 – bolder; 400

– normal)
Пример
H1 {font-weight: bolder}

Слайд 20

Свойства шрифта
font-size
Определяет кегль (высоту символов) шрифта
Значения
Задаются в пунктах (пт), или в

процентах от базового значения, или
xx-small
small
medium
large
x-large
xx-large
Примеры
P {font-size: 14pt}

Слайд 21

Свойства блоков
margin-top, margin-right, margin-bottom, margin-left
Устанавливают ширину поля для определенной стороны элемента
Пример
P

{margin-top: 20px}
margin
Body {margin: 30px 20px 10px 20px}

Слайд 22

Свойства блоков
padding-top, padding-right, padding-bottom, padding-left
Устанавливают ширину промежутка между содержимым элемента и

определенным участком его границы
Пример
P {padding-top: 20px}
padding

Слайд 23

Свойства блоков
border-top-width, border-right-width, border-bottom-width, border-left-width
Устанавливают ширину рамки для определенной стороны. Рамка

проходит между полем и остальной частью документа
Пример
P {border-top-width: 20px}
border-width

Слайд 24

Свойства блоков
border-top-color, border-right-color, border-bottom-color, border-left-color
Устанавливают цвет рамки для определенной стороны. Рамка

проходит между полем и остальной частью документа
Пример
P {border-top-color: red}
border-color

Слайд 25

Свойства блоков
border-top-style, border-right-style, border-bottom-style, border-left-style
Устанавливают стиль рамки для определенной стороны. Рамка

проходит между полем и остальной частью документа
Значения
none
hidden
dotted
dashed
solid
double
groove
rigde
inset
outset
Пример
P {border-top-style: dotted}
border-style

Слайд 26

Свойства списков
list-style-type
Определяет стиль маркеров или номеров списка
Значения
disc – маркер в виде

диска
circle – маркер в виде окружности
square – маркер в виде квадрата
decimal – списки, пронумерованные с помощью чисел
decimal-leading-zero – списки, нумерованные с помощью десятичных чисел с лидирующими нулями
lower-roman – с помощью строчных римских цифр

Слайд 27

Свойства списков
list-style-type
Значения (продолжение)
upper-roman – списки, нумерованные с помощью заглавные римских цифр
lower-latin

– строчные латинские ASCII символы
upper-latin – заглавные латинские ASCII символы
lower-greek – строчные греческие буквы

Слайд 28

Свойства списков
list-style-image
Определяет изображение, которое будет использовано в качестве маркера списка
Значение –

адрес (URL) изображения
Пример
UL {list-style-image: url(“1.gif”)}

CSS (Cascading Style Sheets)

Содержание

Вводные замечания CSS (Cascading Style Sheets) – каскадные таблицы стилей – набор

Возможности CSS 1. Осуществлять выбор элемента или группы элементов, к которым будет

Возможности CSS 2. Осуществлять создание блоков; устанавливать размеры самих блоков, отступов, полей

Возможности CSS 5. Управлять фоном на странице:устанавливать цвет фона или фоновое изображение

Способы внедрения стиля в HTML-документВключение непосредственно в тегОписание стиля в заголовке

Способы внедрения стиля в HTML-документПримеры Этот текст будет выровнен

Свойства текстаtext-indent Определяет длину отступа в первой строке блокаНапримерP {text-indent: 2cm}

Свойства текстаtext-align Определяет выравнивание текста в элементе Возможные значения: left (по левому краю),

Свойства текстаtext-decoration Определяет оформление текста Возможные значения: none (нет оформления), underline (подчеркивание), overline

Свойства текстаletter-spacing Определяет интервал между символами текстаНапримерH1 {letter-spacing: 3mm}

Свойства текстаword-spacingОпределяет интервалы между словамиНапримерP {word-spacing: 4mm}

Свойства цвета и фонаcolorОпределяет цвет текста ПримерыP {color: green}TD {color: rgb(22, 255,

Свойства цвета и фонаbackground-colorОпределяет цвет фона элемента ПримерыP {background-color: green}TD {background-color: rgb(22,

Свойства цвета и фонаbackground-image Определяет фоновое изображение элементаПримерbody {background-image: url(“pic.gif”)}

Свойства цвета и фонаbackground-repeat Определяет направление, по которому экран будет заполняться копиями

Свойства шрифтаfont-family Определяет семейство шрифта, используемое в тексте элемента. Если перечислено несколько

Свойства шрифтаfont-styleОпределяет начертание шрифтаЗначенияitalic – курсивoblique – наклонное начертаниеПримерTD {font-style: italic}

Свойства шрифтаfont-weightОпределяет толщину шрифтаЗначенияnormalboldbolderlighter 100-900 (100 – lighter; 900 – bolder; 400

Свойства шрифтаfont-size Определяет кегль (высоту символов) шрифтаЗначения Задаются в пунктах (пт), или в

Свойства блоков margin-top, margin-right, margin-bottom, margin-left Устанавливают ширину поля для определенной стороны элементаПримерP

Свойства блоков padding-top, padding-right, padding-bottom, padding-left Устанавливают ширину промежутка между содержимым элемента и

Свойства блоков border-top-width, border-right-width, border-bottom-width, border-left-width Устанавливают ширину рамки для определенной стороны. Рамка

Свойства блоков border-top-color, border-right-color, border-bottom-color, border-left-color Устанавливают цвет рамки для определенной стороны. Рамка

Свойства блоковborder-top-style, border-right-style, border-bottom-style, border-left-style Устанавливают стиль рамки для определенной стороны. Рамка

Свойства списковlist-style-type Определяет стиль маркеров или номеров спискаЗначения disc – маркер в виде

Свойства списковlist-style-typeЗначения (продолжение) upper-roman – списки, нумерованные с помощью заглавные римских цифр lower-latin

Свойства списковlist-style-image Определяет изображение, которое будет использовано в качестве маркера спискаЗначение –

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