CSS. Цвет и фон, шрифт, текст презентация

Содержание

CSS (Cascading Style Sheets)  Каскадные таблицы стилей CSS - это свод стилевых описаний, тех или иных HTML тегов, который может быть применён как к отдельному тегу - элементу, так и одновременно

Слайд 1CSS
ЦВЕТ И ФОН

Шрифт
Текст

Слайд 2CSS (Cascading Style Sheets)  Каскадные таблицы стилей
CSS - это свод стилевых описаний,

тех или иных HTML тегов, который может быть применён как к отдельному тегу - элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта.

CSS является дополнением к HTML, которое значительно расширяет его возможности.

Слайд 3Возможности CSS1:
Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля —

обычного, курсивного или полужирного.
Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы).
Выравнивание для текста, изображений, таблиц и других элементов.
Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.
И др.

Слайд 4Возможности CSS 2:

Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением

элементов по странице без табличной верстки.
Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.
И др.

Слайд 5Возможности CSS3:
Box-shadows
Text shadows
фоны из нескольких изображений
фоны из нескольких

изображений (Multiple backgrounds)
рамка из изображений (Border images)
уровни прозрачности (Opacity levels)
RGBA coloring 
закругленные углы (Rounded corners) 
анимация
введение переменных (variables)
И др.

Слайд 6БАЗОВЫЙ СИНТАКСИС CSS

Слайд 7Способы применения CSS
Инлайн / in-line (атрибут style)

Внутренний (тэг style)

Внешний

/ external (ссылка на таблицу стилей)

Слайд 8Инлайн / in-line (атрибут style)
Пример: Красный цвет фона

Example


This is a red page



Слайд 9Внутренний (тэг style)

Example





This is a red page



Слайд 10Внешний / external
1. Создаём HTML-документ, например default.htm
2. Создаём таблицу стилей,

например style.css

Слайд 11

My document

href= "style/style.css">

Слайд 12ЦВЕТ И ФОН

Слайд 13Повторение/мультипликация фонового изображения

Слайд 14Блокировка фонового изображения

Слайд 15Расположение фонового рисунка
Можно использовать слова top, bottom, center, left и

right

Слайд 17Пример1

h1 { color: #ff0000; }

Слайд 18Пример2
body { background-color: #FFCC66; }

h1 {
color: #990000;
background-color: #FC9804;
}

Слайд 19Пример3
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}

h1 {

color: #990000;
background-color: #FC9804;
}

Слайд 20Пример4
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;

background-color: #FC9804;
}

Слайд 21Пример5
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1

{
color: #990000;
background-color: #FC9804;
}

Слайд 22Пример6
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;

background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Слайд 23Порядок свойств:
background-color 
background-image 
background-repeat 
background-attachment 
background-position

Слайд 24body {
background-color: #FFCC66;
background-image: url("butterfly.gif");

background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}

ИЛИ

body {
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
}

Слайд 25ШРИФТЫ

Слайд 26два типа имён
имя семейства/family-name;
общее/родовое семейство/generic family;

Слайд 27Пример7

h1 {font-family: arial, verdana, sans-serif;}


h2 {font-family: "Times New Roman", serif;}

Слайд 28Стиль шрифта [font-style]
h1 {
font-family: arial, verdana, sans-serif;
}

h2 {

font-family: "Times New Roman", serif;
font-style: italic;
}




Слайд 29Вариант шрифта [font-variant]
h1 {font-variant: small-caps;}




h2 {font-variant: normal;}

Слайд 30Вес шрифта [font-weight]
p {font-family: arial, verdana, sans-serif;}


td {
font-family: arial, verdana,

sans-serif;
font-weight: bold;
}

Слайд 31Размер шрифта [font-size]
h1 {font-size: 30px;}

h2 {font-size: 12pt;}

p {font-size: 120%;}
'px' и

'pt' дают абсолютное значение размера шрифта,
'%' - относительное.

Слайд 32Порядок свойств font
font-style
font-variant
font-weight
font-size
font-family

Слайд 33Пример8
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

Слайд 34Сокращенная запись


font: font-style font-variant font-weight font-size font-family


p { font: normal small-caps 12px Courier; }

p { font: italic bold 30px arial, sans-serif; }

Слайд 35Пример9
p { font: 12pt/10pt sans-serif; }


p { font: bold italic 150%

serif; }

Слайд 36ТЕКСТ

Слайд 37Отступы [text-indent]

p { text-indent: 30px; }

Слайд 38Выравнивание текста [text-align]

th { text-align: right; }

td { text-align: center; }

p { text-align: justify; }

Слайд 39Декоративный вариант [text-decoration]

h1 { text-decoration: underline; }

h2 { text-decoration: overline; }

h3 { text-decoration: line-through;

}

ТЕКСТ

ТЕКСТ

Слайд 40Интервал между буквами [letter-spacing]


h1 { letter-spacing: 6px; }

p { letter-spacing: 3px; }

Слайд 41Трансформация текста [text-transform]

Слайд 42Пример10

h1 { text-transform: uppercase; }

li { text-transform: capitalize; }

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

Калькулятор. Принцип работі 319
Атмосферное давление и жизнь на Земле 293
Космический эксперимент Радиоскаф спутник Томск-ТПУ 120 192
Коррозия металлов 220
Тема проекта 196
Школа №97 236

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей

Яндекс.Метрика