Свойства в css3

Содержание

Слайд 2

Типография CSS предлагает много разных свойств для редактирования внешнего вида текста

Типография

CSS предлагает много разных свойств для редактирования внешнего вида текста на

странице. Эти свойства входят в две категории: свойства шрифта и свойства текста.
Слайд 3

Типография Свойства шрифта: font-family - для объявления, какой шрифт, а также

Типография

Свойства шрифта:
font-family - для объявления, какой шрифт, а также какие

резервные или заменяющие шрифты должны быть использованы для отображения текста
Слайд 4

Типография При разработке убедитесь, что набор шрифтов подходит ко всем операционным

Типография

При разработке убедитесь, что
набор шрифтов подходит ко всем операционным

системам
набор шрифтов содержит либо все шрифты sans serif (без засечек) либо serif (с засечками) (для согласованности шрифтов)
шрифты в наборе имеют схожую пропорциональность
Слайд 5

Типография Встраивание шрифтов Есть возможность загружать шрифты с сервера и включать

Типография

Встраивание шрифтов

Есть возможность загружать шрифты с сервера и включать их

на сайт через стилевое правило @font-face

1. Используем правило @font-face, чтобы определить имя шрифта через свойство font-family, а также исходник шрифта (путь к файлу, содержащему выбранный шрифт) через свойство src
2. Используем шрифт, включая его имя в качестве значения свойства font-family

Слайд 6

Типография font-size - даёт возможность установить размер текста, используя типовые значения

Типография

font-size - даёт возможность установить размер текста, используя типовые значения

размера, включая пиксели, em, проценты, пункты или ключевые слова

Единицы измерения:
- абсолютные (явно указываем значение в определенных единицах типа пикселей, т.е. точные размеры)
- относительные (их размеры зависят от font-size, применённого к их родительским элементам. Возможные единицы: em, %)

Слайд 7

Типография font-style - задает стиль шрифта, возможные значения: normal (по умолчанию)

Типография

font-style - задает стиль шрифта, возможные значения:
normal (по умолчанию)

- обычный текст
italic - курсив
oblique - наклонное начертание
inherit - наследует значение от родительского элемента

font-variant - определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера (капитель)
normal (по умолчанию) - обычный текст
small-caps - капитель
inherit - наследует значение от родительского элемента

Слайд 8

Типография font-weight - насыщенность (толщина) шрифта. Принимаемые значения: normal (обычный текст),

Типография

font-weight - насыщенность (толщина) шрифта. Принимаемые значения:
normal (обычный текст), bold (жирный), bolder

(жирнее), lighter (тоньше) и inherit (наследуется от родителя)
числовые значения 100, 200, 300, …, 900 (указывают жирность). Значение normal соответствует числу 400, bold - 700

line-height - межстрочный интервал. Значения в пикселях, %, числах

Слайд 9

Типография Универсальное свойство font: Все свойства шрифта могут быть объединены в

Типография

Универсальное свойство font:
Все свойства шрифта могут быть объединены в одном

универсальном свойстве font. Порядок значений слева направо: font-style, font-variant, font-weight, font-size, line-height и font-family
Слайд 10

Цвета На уровне элементов HTML, всему можно присвоить цвет. Значения цвета:

Цвета

На уровне элементов HTML, всему можно присвоить цвет.
Значения цвета:
color:

rgb(255,255,255)
color: #FFFFFF;
color: rgba(255, 255, 255, 0.5)

Свойство color определяет цвет текста HTML элемента
Свойство background-color определяет цвет фона элемента

Слайд 11

Базовые свойства для работы с текстом text-align - выравнивание текста. Возможные

Базовые свойства для работы с текстом

text-align - выравнивание текста. Возможные

значения:
left (по левому краю)
right (по правому краю)
center (по центру)
justify (по ширине)
inherit (наследуется значение от родителя)
Слайд 12

Базовые свойства для работы с текстом text-decoration - декорация текста. Возможные

Базовые свойства для работы с текстом

text-decoration - декорация текста. Возможные

значения:
none (убирает эффекты, декорацию)
underline (подчеркивание снизу)
overline (надчеркивание сверху)
line-through (зачеркнутый текст)
inherit (наследуется значение от родителя)
Слайд 13

Базовые свойства для работы с текстом text-indent- для создания красной строки

Базовые свойства для работы с текстом

text-indent- для создания красной строки

внутри элемента. Положительные значения делают отступ текста внутрь, в то время как отрицательные значения делают отступ наружу.
text-shadow - позволяет добавить тень или несколько теней к тексту. Свойство обычно принимает четыре значения, все они перечисляются друг за другом слева направо. Первые три значения — это размер, а последнее значение — цвет.
Слайд 14

Базовые свойства для работы с текстом text-transform - управляет преобразованием текста

Базовые свойства для работы с текстом

text-transform - управляет преобразованием текста

элемента в заглавные или прописные символы. Принимаемые значения:
capitalize (делает заглавной первую букву каждого слова)
uppercase (устанавливает заглавной каждую букву)
 lowercase (делает каждую букву строчной)
none (отмена вышеперечисленных значений)
letter-spacing - регулирует расстояние между буквами
word-spacing - регулирует расстояние между словами в элементе
Слайд 15

Базовые свойства для работы с текстом color - цвет текста и

Базовые свойства для работы с текстом

color - цвет текста и

любого оформления текста (подчёркивание, линии на текстом, перечёркивание и т.д.)
background-color - цвет фона текста
Слайд 16

Блочная модель Отображение элементов на странице: Блочные элементы занимают всю доступную

Блочная модель

Отображение элементов на странице:

Блочные элементы
занимают всю доступную ширину независимо от

их содержимого и начинаются с новой строки

Строчные элементы
занимают ширину, которая требуется для содержимого и выстраиваются на одной строке, друг за другом

Слайд 17

Блочная модель Отображение элементов на странице (блочные элемент/строчный элемент) задается свойством

Блочная модель

Отображение элементов на странице (блочные элемент/строчный элемент) задается свойством display:

display: block - элемент отображается как блочный
display: inline - элемент отображается как строчный
display: inline-block - элемент ведет себя как блочный, включая все свойства блочной модели (рассмотрим далее). Но элемент будет отображаться на строке с другими элементами, а не будет начинаться с новой строки по умолчанию
display: none - элемент полностью скрывается и страница отображается так, словно этого элемента не существует
Слайд 18

Блочная модель

Блочная модель

Слайд 19

Блочная модель каждый элемент на странице представляет собой прямоугольный блок и

Блочная модель
каждый элемент на странице представляет собой прямоугольный блок и

может иметь ширину, высоту, поля, границы и отступы
у каждого блока есть 4 области: margin (внешние отступы), border (рамка), padding (внутренние поля), и content (контент или содержимое)
Слайд 20

Блочная модель размер каждой области определяется соответствующими свойствами и может быть

Блочная модель
размер каждой области определяется соответствующими свойствами и может быть

нулевым, или, в случае margin, отрицательным
Значение полей и отступов по умолчанию равно 0. Но некоторые браузеры добавляют этим свойствам положительные значения по умолчанию на основе своих таблиц стилей. Очистить стили можно при помощи универсального селектора:
Слайд 21

Отступы элемента Отступы окружают край рамки элемента, обеспечивая расстояние между соседними

Отступы элемента

Отступы окружают край рамки элемента, обеспечивая расстояние между соседними

блоками. Свойства отступов определяют их толщину. Применяются ко всем элементам, кроме внутренних элементов таблицы.

margin-top/margin-left/margin-right/margin-bottom - задает верхний/левый/правый/нижний отступ блока элемента соответственно (допускаются отрицательные значения)
margin - задает отступы для всех четырех сторон (если указано одно значение: применяется ко всем сторонам, если два значения: верхний и нижний отступы - первое значение, левый и правый - второе значение, если четыре значения - применяются сверху, справа, снизу и слева соответственно)

Слайд 22

Отступы элемента Схлопывание отступов: смежные вертикальные отступы двух или более элементов

Отступы элемента

Схлопывание отступов: смежные вертикальные отступы двух или более элементов в

блочной модели схлопываются (перекрываются). При этом ширина общего отступа равна ширине большего из исходных.
Для предотвращения проблемы схлопывания рекомендуется задавать для всех элементов только верхний или нижний margin

Не схлопываются отступы:
Между плавающим блоком и любым другим блоком
У плавающих элементов и элементов со значением overflow, отличным от visible, со своими дочерними элементами в потоке
У абсолютно позиционированных элементов, даже с их дочерними элементами
У строчно-блочных элементов

Слайд 23

Поля элемента Область полей представляет собой пространство между краем области содержимого

Поля элемента

Область полей представляет собой пространство между краем области содержимого и

рамкой элемента. Свойства полей определяют толщину их области. Применяются ко всем элементам, кроме внутренних элементов таблицы.

padding-top/padding-left/padding-right/padding-bottom - задает верхнее/левое/правое/нижнее поле блока элемента соответственно (отрицательные значения недопустимы)
padding - задает поле для всех четырех сторон (если указано одно значение: применяется ко всем сторонам, если два значения: верхнее и нижнее поле - первое значение, левое и правое - второе значение, если четыре значения - применяются сверху, справа, снизу и слева соответственно)

Слайд 24

Границы элемента Границы располагаются между отступами и полями, создавая рамку вокруг

Границы элемента

Границы располагаются между отступами и полями, создавая рамку вокруг элемента.

Для

задания границ используется свойство border, которому передаются значения: ширина, стиль и цвет

Значения ширина, стиль и цвет могут быть разбиты на 3 отдельных свойства:
border-width - ширина границ (в абсолютных или относительных единицах)
border-style - внешний вид границ (solid, dashed, dotted, none)
border-color - цвет границ

Можно отдельно задавать границы для сторон:
border-top/border-bottom/border-left/border-right (верхняя/нижняя/левая/правая граница)

Слайд 25

Границы элемента Свойство border-radius позволяет закруглять углы элемента. Значение - единицы

Границы элемента

Свойство border-radius позволяет закруглять углы элемента. Значение - единицы размера

(px, %), которые определяют радиус скругления углов элемента.

Свойство border-radius также может быть разбито на ряд свойств, которые позволяют нам изменить радиусы отдельных углов элемента. Эти свойства начинается с border, продолжаются с положения угла по вертикали (top или bottom) и горизонтали (left или right) и завершаются radius. Например, для изменения правого верхнего угла 

 может быть использовано свойство border-top-right-radius
Слайд 26

Размеры элементов width - ширина элемента (px, %) height - высота

Размеры элементов

width - ширина элемента (px, %)
height - высота

элемента (px, %)

По умолчанию реальная ширина элемента = width + padding + border + margin

Свойство box-sizing позволяет менять то, как вычисляются размеры элемента. Значения:
content-box (по умолчанию) - к высоте/ширине элемента прибавляются значения margin, padding и border
padding-box - значение padding вкючается внутри width и height
border-box (лучшее значение) - значения padding и border включены внутри width и height

Слайд 27

Фон элемента Каждый блок html-элемента имеет фоновый слой, который может быть

Фон элемента

Каждый блок html-элемента имеет фоновый слой, который может быть

полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями.
Свойства:

backgroud-color - устанавливает цвет фона элемента
background-image - устанавливает фоновое изображение (одно или несколько) элемента. Значения:
none - есть слой изображения, но ничего не рисуется
url(image.png) - указывается абсолютный или относительный путь к изображению
linear-gradient(white, gray) - в качестве фонового изображения устанавливается градиент

Слайд 28

Фон элемента background-repeat - определяет, как фоновые изображения укладываются в области

Фон элемента

background-repeat - определяет, как фоновые изображения укладываются в области

фона после того, как для них установлены размеры и позиционирование. Если значение свойства имеет два ключевых слова, первое используется для горизонтального направления, второе — для вертикального. Значения:
Слайд 29

Фон элемента background-attachment - указывает, является ли фоновое изображение фиксированными относительно

Фон элемента

background-attachment - указывает, является ли фоновое изображение фиксированными относительно

области просмотра или прокручивается вместе с элементом или его содержимым. Значения:

background-position - указывает начальные значения фоновых изображений. Значения - top/left/right/center/bottom/ пиксели / %

Слайд 30

Фон элемента background-clip - определяет область рисования фона. Значения: background-size - устанавливает размер фоновых изображений. Значения:

Фон элемента

background-clip - определяет область рисования фона. Значения:

background-size -

устанавливает размер фоновых изображений. Значения:
Слайд 31

Фон элемента Фон блока элемента может иметь несколько слоев в CSS3.

Фон элемента

Фон блока элемента может иметь несколько слоев в CSS3.

Количество слоев определяется количеством значений, разделенных запятыми, указанных в свойстве background-image. Значение none также создает слой.
Первое изображение в списке — это слой, отображаемый ближайший к пользователю, следующий отрисовывается за первым, и так далее. Цвет фона, если он есть, закрашивается под всеми остальными слоями.
Слайд 32

Фон элемента Установка прозрачности: Использование функции rgba(), в которой последний параметр

Фон элемента

Установка прозрачности:
Использование функции rgba(), в которой последний параметр задает

значение прозрачности, которое может быть в диапазоне от 0 (полная прозрачность) до 1 (полная непрозрачность).
Использовании свойства opacity, значение которого устанавливается в диапазоне от 0 до 1, позволяя сделать любой элемент полупрозрачным.

Когда использовать свойство opacity предпочтительнее?
нужно сделать полупрозрачными несколько цветов. Свойство opacity позволяет сделать полупрозрачными цвет фона, текста и рамки элемента.
нужно сделать что-то полупрозрачным, даже не зная его цвет, например, потому, что цвет может устанавливаться другой таблицей стилей
нужно сделать полупрозрачным изображение
нужно использовать переход, т.е. эффект анимации, который делает элемент постепенно появляющимся или исчезающим

Слайд 33

Тени элемента Тени элементов в CSS3: Блочные тени, свойство box-shadow (высокий

Тени элемента

Тени элементов в CSS3:

Блочные тени, свойство
box-shadow
(высокий уровень поддержки браузерами)

Текстовые тени,

свойство
text-shadow
(Не работает в Internet Explorer)
Слайд 34

Тени элемента Свойство box-shadow добавляет элементу одну или более теней. Тень

Тени элемента

Свойство box-shadow добавляет элементу одну или более теней. Тень представляет

собой копию элемента, смещенную на указанное расстояние.

box-shadow: x-offset y-offset blur spread color

Смещение по ширине

Смещение по высоте

Радиус размытия

Растяжение

Цвет тени

Слайд 35

Градиент CSS-градиент представляет собой переходы от одного цвета к другому. Градиентный

Градиент

CSS-градиент представляет собой переходы от одного цвета к другому. Градиентный фон можно

устанавливать в свойствах background, background-image, border-image и list-style-image.
Слайд 36

Градиент Линейный градиент создается с помощью двух и более цветов, для

Градиент

Линейный градиент создается с помощью двух и более цветов, для которых

задано направление, или линия градиента.
CSS-свойство linear-gradient()
Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.

background: linear-gradient(направление, цвет1, цвет2, …)

Слайд 37

Градиент linear-gradient() Направление: Угол наклона в градусах deg, значение которого определяет

Градиент

linear-gradient()
Направление:
Угол наклона в градусах deg, значение которого определяет угол наклона линии

внутри элемента.
Ключевые слова ‘to top’, ‘to right’, ‘to bottom’, ‘to left’, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно.
Направление можно задавать парой ключевых слов (например, to top left)
Слайд 38

Градиент linear-gradient() Цвет: Для неравномерного распределения цветов указывается начальная позиция каждого

Градиент

linear-gradient()

Цвет:
Для неравномерного распределения цветов указывается начальная позиция каждого цвета через

точки остановки градиента.
Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка
Слайд 39

Градиент Радиальный градиент - цвета выходят из одной точки (центра градиента)

Градиент

Радиальный градиент - цвета выходят из одной точки (центра градиента)

и равномерно распределяются наружу, рисуя форму круга или эллипса
CSS-свойство radial-gradient()

background: radial-gradient(форма/размер/позиция центра, цвет1, цвет2, …)

Слайд 40

Градиент radial-gradient() Форма градиента: circle - круг ellipse (по умолчанию) -

Градиент

radial-gradient()
Форма градиента:
circle - круг
ellipse (по умолчанию) - эллипс
Позиция центра:

at top/at center (по умолчанию)/at bottom/at left/at right
Слайд 41

Градиент radial-gradient() Размер градиента: closest-side - Размер градиента рассчитывается из расстояния

Градиент

radial-gradient()
Размер градиента:
closest-side - Размер градиента рассчитывается из расстояния до любой

ближней стороны блока для circle или до ближних сторон по X и по У для ellipse
farthest-side - Размер рассчитывается из расстояния до дальних сторон
closest-corner - Размер рассчитывается из расстояния до ближних углов
farthest-corner - Размер рассчитывается из расстояния до дальних углов
Слайд 42

Градиент Создание фигуры мяч

Градиент

Создание фигуры мяч

Слайд 43

Градиент Повтор градиента: Создается функций repeating-linear-gradient() и repeating-radial-gradient()

Градиент

Повтор градиента:
Создается функций repeating-linear-gradient() и repeating-radial-gradient()

Слайд 44

Градиент Комбинация градиента и фонового изображения: Без градиента:

Градиент

Комбинация градиента и фонового изображения:

Без градиента:

Слайд 45

Позиционирование CSS-позиционирование описывает, как любой из элементов может быть размещен независимо

Позиционирование

CSS-позиционирование описывает, как любой из элементов может быть размещен независимо

от порядка документа, т.е. извлечен из общего «потока» элементов.
Каждый элемент дерева документа генерирует в соответствии с блочной моделью 0 или более блоков.
Расположение этих блоков регулируется:
размерами и типом элемента,
схемой позиционирования (нормальный поток, обтекание и абсолютное позиционирование),
отношениями между элементами в дереве документа
внешней информацией (например, размер области просмотра, внутренними размерами изображений и т.д.)
Слайд 46

Позиционирование Схемы позиционирования: Нормальный поток - блочный контекст форматирования (элементы с

Позиционирование

Схемы позиционирования:
Нормальный поток - блочный контекст форматирования (элементы с display block, list-item или table),

строчный (встроенный) контекст форматирования (элементы с display inline, inline-block или inline-table), и относительное и «липкое» позиционирование элементов уровня блока и строки.
Обтекание - блок удаляется из нормального потока и позиционируется влево или вправо. Содержимое обтекает правую сторону элемента с float: left и левую сторону элемента с float: right
Абсолютное позиционирование - блок полностью удаляется из нормального потока и ему присваивается позиция относительно содержащего блока. Абсолютное позиционирование реализуется с помощью значений position: absolute; и position: fixed
Слайд 47

Позиционирование Позиционирование позволяет переопределять поведение базового потока документа. Позиционирование задается свойством

Позиционирование

Позиционирование позволяет переопределять поведение базового потока документа.
Позиционирование задается свойством position.
Виды

позиционирования:
static - статическое (по умолчанию).
relative - относительное. Можно модифицировать окончательное положение позиционируемого объекта (задавать смещение с помощью свойств: top, bottom, left, right)
absolute - абсолютное. Элемент не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального и ведет себя так, будто других элементов вокруг не существует.
Слайд 48

Позиционирование Позиционирование позволяет переопределять поведение базового потока документа. Позиционирование задается свойством

Позиционирование

Позиционирование позволяет переопределять поведение базового потока документа.
Позиционирование задается свойством position.
Виды

позиционирования:
sticky - липкое. Позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки, после чего становится фиксированным.
fixed - фиксированное. Элемент всегда располагается относительно окна браузера, родительские элементы при этом игнорируются, элемент не смещается при прокручивании страницы.
Слайд 49

Позиционирование Контекст позиционирования - относительно какого элемента позиционируется позиционируемый элемент. Например,

Позиционирование

Контекст позиционирования - относительно какого элемента позиционируется позиционируемый элемент.
Например, чтобы

абсолютно позиционировать какой-то элемент не относительно окна браузреа, а относительно какого-нибудь элемента, то этому элементу добавляют position: relative
Слайд 50

Позиционирование Обтекание - позволяет блокам смещаться влево или вправо на текущей

Позиционирование

Обтекание - позволяет блокам смещаться влево или вправо на текущей строке.
Свойство

float. Значения:
left - элемент перемещается влево, содержимое обтекает плавающий блок по правому краю.
right - элемент перемещается вправо, содержимое обтекает плавающий блок по левому краю.
Слайд 51

Позиционирование Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов

Позиционирование
Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов

и рамок. Верхние и нижние отступы margin плавающих элементов не схлопываются.
Плавающие элементы могут использовать отрицательные отступы margin, чтобы перемещаться за пределы области содержимого их родительского элемента.
Свойство не оказывает влияние на элементы с display: flex и display: inline-flex. Не применяется к абсолютно позиционированным элементам.
Слайд 52

Позиционирование Свойство z-index позволяет изменить порядок наложения элементов Каждый блок имеет

Позиционирование
Свойство z-index позволяет изменить порядок наложения элементов
Каждый блок имеет

позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом.
Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения.
Слайд 53

Позиционирование Контекст наложения Если для элементов свойства z-index и position не

Позиционирование
Контекст наложения
Если для элементов свойства z-index и position не заданы явно, контекст наложения

равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке:
Корневой элемент , который содержит все элементы веб-странице.
Блочные элементы, неплавающие и непозиционированные
Плавающие  непозиционированные элементы в порядке их расположения в исходном коде
Строковые непозиционированные элементы (текст, изображения).
Позиционированные  элементы в порядке их следования в исходном коде
- Предыдущая
Книга памяти села Стриганского
Следующая -
Здоровое питание

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

Гаджимурадова Жанна Магомедовна учитель информатики МБОУ «СОШ №11» г. Чебоксары Всероссийский сетевой педагогический проект: «А
Программный комплекс Система автоматического контроля на конвейере ДЖМ-К
Дополнительная профессиональная программа профессиональной переподготовки по курсу: Интернет-маркетолог
1С:Бухгалтерия 8.0, редакция 1.5 – новый уровень автоматизации учета
Исследование методов решения задач представления чисел с помощью систем счисления
Пневматический манипулятор с 3-мя степенями свободы под управлением ПЛК
Что такое компьютер? Обзорный урок
Классическая модель разработки программного обеспечения. Модификации модели, жизненный цикл, достоинства и недостатки
Магистратура – твой путь к успеху
Презентация "Цвет предметов" - скачать презентации по Информатике
Информатика и ИКТ
Знаешь ли ты названия носителей информации
Web-страницы. Язык HTML
Operating manual
Электронные таблицы Сортировка данных в таблице. Подготовка таблицы к печати.
Построение карты плотности Омской области в программе CorelDRAW
Форматирование текста
Web-аукционы, виртуальные сообщества и Web-порталы
Создание базы данных
Флэш-карты. Работа с файлами
Объектно-ориентированное программирование. Интегрированная среда разработки Visual Basic
Первое занятие по C#
Понятие как форма мышления Урок информатики в 6 классе
Поиск слов в текстовом документе. Простой поиск
Классификация по уровню детализации приложения (по уровню тестирования)
Образовательные ресурсы сети Интернет
Презентация "Функциональное устройство компьютера" - скачать презентации по Информатике
Магия чисел
Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть