- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
CSS. Цвет и фон, шрифт, текст презентация
Содержание
- 1. CSS. Цвет и фон, шрифт, текст
- 2. CSS (Cascading Style Sheets) Каскадные таблицы стилей
- 3. Возможности CSS1: Параметры шрифтов. Возможности по заданию гарнитуры
- 4. Возможности CSS 2: Блочная верстка. Появились относительное,
- 5. Возможности CSS3: Box-shadows Text shadows
- 6. БАЗОВЫЙ СИНТАКСИС CSS
- 7. Способы применения CSS Инлайн / in-line
- 8. Инлайн / in-line (атрибут style) Пример: Красный
- 9. Внутренний (тэг style)
- 10. Внешний / external 1. Создаём HTML-документ, например
- 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;
- 20. Пример4 body { background-color: #FFCC66;
- 21. Пример5 body { background-color: #FFCC66;
- 22. Пример6 body { background-color: #FFCC66;
- 23. Порядок свойств: background-color background-image background-repeat background-attachment background-position
- 24. body { background-color:
- 25. ШРИФТЫ
- 26. два типа имён имя семейства/family-name; общее/родовое семейство/generic family;
- 27. Пример7 h1 {font-family: arial, verdana, sans-serif;}
- 28. Стиль шрифта [font-style] h1 {
- 29. Вариант шрифта [font-variant] h1 {font-variant: small-caps;} h2 {font-variant: normal;}
- 30. Вес шрифта [font-weight] p {font-family: arial,
- 31. Размер шрифта [font-size] h1 {font-size: 30px;}
- 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
- 35. Пример9 p { font: 12pt/10pt sans-serif; }
- 36. ТЕКСТ
- 37. Отступы [text-indent] p { text-indent: 30px; }
- 38. Выравнивание текста [text-align] th { text-align:
- 39. Декоративный вариант [text-decoration] h1 { text-decoration:
- 40. Интервал между буквами [letter-spacing] h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }
- 41. Трансформация текста [text-transform]
- 42. Пример10 h1 { text-transform: uppercase; } li { text-transform: capitalize; }
CSS (Cascading Style Sheets)
Каскадные таблицы стилей CSS - это свод стилевых описаний, тех или иных HTML тегов, который может быть применён как к отдельному тегу - элементу, так и одновременно
Слайд 2CSS (Cascading Style Sheets)
Каскадные таблицы стилей
CSS - это свод стилевых описаний,
тех или иных HTML тегов, который может быть применён как к отдельному тегу - элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта.
CSS является дополнением к HTML, которое значительно расширяет его возможности.
CSS является дополнением к HTML, которое значительно расширяет его возможности.
Слайд 3Возможности CSS1:
Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля —
обычного, курсивного или полужирного.
Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы).
Выравнивание для текста, изображений, таблиц и других элементов.
Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.
И др.
Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы).
Выравнивание для текста, изображений, таблиц и других элементов.
Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.
И др.
Слайд 4Возможности CSS 2:
Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением
элементов по странице без табличной верстки.
Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.
И др.
Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.
И др.
Слайд 5Возможности CSS3:
Box-shadows
Text shadows
фоны из нескольких изображений
фоны из нескольких
изображений (Multiple backgrounds)
рамка из изображений (Border images)
уровни прозрачности (Opacity levels)
RGBA coloring
закругленные углы (Rounded corners)
анимация
введение переменных (variables)
И др.
рамка из изображений (Border images)
уровни прозрачности (Opacity levels)
RGBA coloring
закругленные углы (Rounded corners)
анимация
введение переменных (variables)
И др.
Слайд 7Способы применения CSS
Инлайн / in-line (атрибут style)
Внутренний (тэг style)
Внешний
/ external (ссылка на таблицу стилей)
Слайд 10Внешний / external
1. Создаём HTML-документ, например default.htm
2. Создаём таблицу стилей,
например style.css
Слайд 19Пример3
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
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;
}
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;
}
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;
}
background-attachment: fixed;
background-position: right bottom;
}
ИЛИ
body {
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
}
Слайд 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;
}
font-style: italic;
}
Слайд 30Вес шрифта
[font-weight]
p {font-family: arial, verdana, sans-serif;}
td {
font-family: arial, verdana,
sans-serif;
font-weight: bold;
}
font-weight: bold;
}
Слайд 31Размер шрифта
[font-size]
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
p {font-size: 120%;}
'px' и
'pt' дают абсолютное значение размера шрифта,
'%' - относительное.
'%' - относительное.
Слайд 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; }
Слайд 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; }
