Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

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

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

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

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

Презентация на тему Каскадные таблицы стилей CSS

Содержание

Зачем это?СSS предназначен для форматирования веб-страницСелектор {Свойство: Значение;}Структура кода
Каскадныетаблицы стилейCSS Зачем это?СSS предназначен для форматирования веб-страницСелектор {Свойство: Значение;}Структура кода Способы применения css кода к html страницам1) In-lineпри помощи атрибута styleПредназначен для Способы применения css кода к html страницам2) Внутреннийпри помощи тэга stylep {color: 3) Внешнийпри помощи внешнего файла *.css (style.css)html файл: link rel= 1. Фон Backgroundbackground-color – цвет фонаЗначения: 16-ый код цвета (#ff0000) или английское название цвета Background2) background-image – фоновое изображениеЗначение: url-адрес изображения форматов .jpg, .gif, .png - Background3) background-repeat – повторение фонового изображенияЗначения: repeat – повторять по обеим осям; Background4) background-attachment – фиксация фонового изображенияЗначения: scroll – прокручивать вместе с содержимым; Background5) background-position – положение левого верхнего угла фонового изображенияЗначения: координаты (x,y), установленные: Backgroundbody { background-color: #ff0000; background-image: url(“flame.jpg”); 2. Шрифт 1) font-style – курсивный шрифтЗначения: italic – курсив; 2) font-variant – начертание строчных букв Значения: normal – обычный; 3) font-weight – насыщенность буквЗначения: normal – обычный; 4) font-size – размер буквЗначения: pt – пункты; 5) font-family – тип и семейство шрифтаПример: p { h1 { font: italic normal bold 30px arial, sans-serif;}Font 3. Текст 1) text-indent – красная строкаЗначения: pt – пункты; 1) text-align – выравнивание текста по ширинеЗначения: left, right, center, justifyПример: Пример: а { text-decoration: none; }Текст 1) text-transform – управление регистромЗначения: none – не меняет регистрlowercase – 4. Типы селекторов Типы селекторовТегиКлассыИдентификаторы Предназначены для оформления групп сходных элементов. К одному тегу может применяться несколько Предназначены для оформления уникальных элементов. К одному тегу может применяться только 1 5. Псевдоклассы.Ссылки. Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а :activeПроисходит при активации пользователем элемента. Используется преимущественно для ссылок. Пример: a:active { 2) :linkПрименяется к непосещенным ссылкам. Запись A {...} и A:link {...} по своему результату равноценна, 3) :hoverАктивизируется, при наведении курсора мыши на элемент, но щелчка по 4) :visitedПрименяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет 5) :first-childПрименяется к первому дочернему элементу селектора, который расположен в дереве 6) :first-letterОпределяет стиль первого символа в тексте элемента. Это позволяет создавать 6. Позиционированиеэлементов Позиционирование (расположение) элементов задается свойствами: position (тип позиционирования), а также свойствами top 1) position: absolute;Абсолютное позиционирование. Точно располагает элемент внутри окна браузера или 2) position: relative;Относительное позиционирование. Изменяет расположение элемента относительного его прежнего положения.Пример: 3) position: fixed;Фиксированное позиционирование. Привязывает элемент к точке в окне браузера 4) position: static;Значение по умолчанию.Элементы не имеющие позиционирования (или родительских элементов 7. Блочные и строчные элементы. Создание блоков.Верстка. Типы элементов:Строчные – являются частью строки, не обособляются отступами, переносятся на другую displayЗадает тип элемента. Значения: block – блочный элементin-line – строчный элементnone – Описывает контейнеры html-элементовБоксовая модельСвойства групп margin и padding задают отступы, а группа Для качественного восприятия контента его разделяют в разметке при помощи блоков. Оформление Фиксированный. Ширина макета задана в px.+ Упрощает дизайн и работу с контентом, 2) Резиновый. Ширина колонок задаётся в процентах или сочетаются проценты и пикселы 3) Адаптивный. Подстраивается под разрешение монитора и окна браузера, меняя ширину макета, 4) Комбинированный. Предполагает использование разной ширины для отдельных частей страницы, например, шапку
Слайды презентации

Слайд 2 Зачем это?
СSS предназначен для форматирования веб-страниц
Селектор {
Свойство: Значение;
}
Структура

Зачем это?СSS предназначен для форматирования веб-страницСелектор {Свойство: Значение;}Структура кода

кода

Слайд 3 Способы применения css кода к html страницам
1) In-line
при

Способы применения css кода к html страницам1) In-lineпри помощи атрибута styleПредназначен

помощи атрибута style

Предназначен для оформления одного

элемента на одной странице

Слайд 4 Способы применения css кода к html страницам
2) Внутренний
при

Способы применения css кода к html страницам2) Внутреннийпри помощи тэга stylep

помощи тэга style


p {
color: #ff0000;
}


Предназначен для оформления нескольких

элементов на одной странице

Слайд 5 3) Внешний
при помощи внешнего файла *.css (style.css)
html файл:

Предназначен для оформления нескольких элементов на нескольких страницахcss файл: p {color: #ffffff; }Способы применения css кода к html страницам">3) Внешнийпри помощи внешнего файла *.css (style.css)html файл: link rel=

link rel="stylesheet" type="text/css" href=“style.css" />

Предназначен для

оформления нескольких элементов на нескольких страницах

css файл:
p {
color: #ffffff;
}

Способы применения css кода к html страницам

Слайд 6 1. Фон

1. Фон

Слайд 7 Background
background-color – цвет фона
Значения: 16-ый код цвета (#ff0000)

Backgroundbackground-color – цвет фонаЗначения: 16-ый код цвета (#ff0000) или английское название

или английское название цвета (red).
Пример:
p {

background-color: #ff0000;
}

Слайд 8 Background
2) background-image – фоновое изображение
Значение: url-адрес изображения форматов

Background2) background-image – фоновое изображениеЗначение: url-адрес изображения форматов .jpg, .gif, .png

.jpg, .gif, .png - url(“img/bgd.jpg”);
Пример:
body {

background-image: url(“flame.jpg”);
}

Слайд 9 Background
3) background-repeat – повторение фонового изображения
Значения: repeat –

Background3) background-repeat – повторение фонового изображенияЗначения: repeat – повторять по обеим

повторять по обеим осям;

repeat-x – повторять по оси х;
repeat-y – повторять по оси y;
no-repeat – не повторять.

Пример:
body {
background-image: url(“flame.jpg”);
background-repeat: no-repeat;
}

Слайд 10 Background
4) background-attachment – фиксация фонового изображения
Значения: scroll –

Background4) background-attachment – фиксация фонового изображенияЗначения: scroll – прокручивать вместе с

прокручивать вместе с содержимым;

fixed – зафиксировать.

Пример:
body {
background-image: url(“flame.jpg”);
background-attachment: fixed;
}

Слайд 11 Background
5) background-position – положение левого верхнего угла фонового

Background5) background-position – положение левого верхнего угла фонового изображенияЗначения: координаты (x,y),

изображения
Значения: координаты (x,y), установленные:
- в cm, px,

%;
- ключевыми словами top, bottom, left, right, center.

Пример:
body {
background-image: url(“flame.jpg”);
background-position: 100px 200px;
}

Слайд 12 Background
body {
background-color: #ff0000;

Backgroundbody { background-color: #ff0000; background-image: url(“flame.jpg”); background-repeat: no-repeat;

background-image: url(“flame.jpg”);
background-repeat: no-repeat;
background-attachment:

fixed;
background-position: 100px 200px;
}

body {
background: #ff0000 url(“flame.jpg”) no-repeat fixed 100px 200px;
}

Слайд 13 2. Шрифт

2. Шрифт

Слайд 14 1) font-style – курсивный шрифт
Значения: italic – курсив;

1) font-style – курсивный шрифтЗначения: italic – курсив;

normal

– обычный.

Пример:
h2 {
font-style: italic;
}

Font

Слайд 15 2) font-variant – начертание строчных букв
Значения: normal

2) font-variant – начертание строчных букв Значения: normal – обычный;

– обычный;

small-caps – капитель.

Пример:
h2 {
font-variant: small-caps;
}

Font

Слайд 16 3) font-weight – насыщенность букв
Значения: normal – обычный;

3) font-weight – насыщенность буквЗначения: normal – обычный;

bold

– насыщенный.

Пример:
h2 {
font-weight: bold;
}

Font

Слайд 17 4) font-size – размер букв
Значения: pt – пункты;

4) font-size – размер буквЗначения: pt – пункты;

px

– пиксели;
% – проценты.

Пример:
p {
font-size: 14pt;
}

Font

Слайд 18 5) font-family – тип и семейство шрифта

Пример:

5) font-family – тип и семейство шрифтаПример: p { font-family: arial, verdana, sans-serif; }Font

p {
font-family: arial, verdana, sans-serif;

}

Font

Слайд 19 h1 {
font: italic normal bold 30px

h1 { font: italic normal bold 30px arial, sans-serif;}Font

arial, sans-serif;
}
Font

Слайд 20 3. Текст

3. Текст

Слайд 21 1) text-indent – красная строка
Значения: pt – пункты;

1) text-indent – красная строкаЗначения: pt – пункты;

px

– пиксели;
% – проценты.

Пример:
p {
text-indent: 30px;
}

Текст

Слайд 22 1) text-align – выравнивание текста по ширине
Значения: left,

1) text-align – выравнивание текста по ширинеЗначения: left, right, center, justifyПример:

right, center, justify
Пример:
p {
text-align:

justify;
}

Текст

Слайд 23 Пример:
а {
text-decoration: none;

Пример: а { text-decoration: none; }Текст

}
Текст

Слайд 24 1) text-transform – управление регистром
Значения:
none –

1) text-transform – управление регистромЗначения: none – не меняет регистрlowercase –

не меняет регистр
lowercase – нижний регистр
uppercase – ВЕРХНИЙ РЕГИСТР
capitalize

– Начинать С Прописных

Пример:
b {
text-transform: uppercase;
}

Текст

Слайд 25 4. Типы
селекторов

4. Типы селекторов

Слайд 26 Типы селекторов
Теги
Классы
Идентификаторы

Типы селекторовТегиКлассыИдентификаторы

Слайд 27 Предназначены для оформления групп сходных элементов. К одному

Предназначены для оформления групп сходных элементов. К одному тегу может применяться

тегу может применяться несколько классов. Для создания в html-коде

используют атрибут class.

html:

Адын


Дыва


Классы

сss:
p.one { color: #ff0000; }
.two { font-size: 20pt; }

Слайд 28 Предназначены для оформления уникальных элементов. К одному тегу

Предназначены для оформления уникальных элементов. К одному тегу может применяться только

может применяться только 1 идентификатор. Для создания в html-коде

используют атрибут id.

html:

Адын


Дыва


Идентификаторы

сss:
#one { color: #ff0000; }
#two { font-size: 20pt; }

Слайд 29 5. Псевдоклассы.
Ссылки.

5. Псевдоклассы.Ссылки.

Слайд 30 Псевдоклассы определяют динамическое состояние элементов, которое изменяется с

Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя,

помощью действий пользователя, а также положение в дереве документа.
Селектор:Псевдокласс

{ Описание правил стиля }

Что это?

Слайд 31 :active
Происходит при активации пользователем элемента. Используется преимущественно для

:activeПроисходит при активации пользователем элемента. Используется преимущественно для ссылок. Пример: a:active { text-transform: uppercase; }Псевдоклассы

ссылок. 
Пример:
a:active {
text-transform: uppercase;

}

Псевдоклассы

Слайд 32 2) :link
Применяется к непосещенным ссылкам. Запись A {...} и A:link

2) :linkПрименяется к непосещенным ссылкам. Запись A {...} и A:link {...} по своему результату

{...} по своему результату равноценна, поскольку в браузере даёт один

и тот же эффект, поэтому псевдокласс :link можно не указывать. Исключением являются якоря, на них действие :link не распространяется.

Пример:
a:link {
text-transform: uppercase;
}

Псевдоклассы

Слайд 33 3) :hover
Активизируется, при наведении курсора мыши на

3) :hoverАктивизируется, при наведении курсора мыши на элемент, но щелчка

элемент, но щелчка по нему не происходит.
Пример:

a:hover {
text-decoration : underline;
}

Псевдоклассы

Слайд 34 4) :visited
Применяется к посещенным ссылкам.
Обычно такая

4) :visitedПрименяется к посещенным ссылкам. Обычно такая ссылка меняет свой

ссылка меняет свой цвет по умолчанию на фиолетовый, но

с помощью стилей цвет и другие параметры можно задать самостоятельно 

Пример:
a:visited {
color: #ffff00;
}

Псевдоклассы

Слайд 35 5) :first-child
Применяется к первому дочернему элементу селектора,

5) :first-childПрименяется к первому дочернему элементу селектора, который расположен в

который расположен в дереве элементов документа.
Пример:
p:first-child {


color: red;
}

Псевдоклассы

Слайд 36 6) :first-letter
Определяет стиль первого символа в тексте

6) :first-letterОпределяет стиль первого символа в тексте элемента. Это позволяет

элемента. Это позволяет создавать в тексте буквицу и выступающий

инициал.

Псевдоэлемент

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

Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.

Слайд 37 6. Позиционирование
элементов

6. Позиционированиеэлементов

Слайд 38 Позиционирование (расположение) элементов задается свойствами: position (тип позиционирования),

Позиционирование (расположение) элементов задается свойствами: position (тип позиционирования), а также свойствами

а также свойствами top (bottom) и left (right), задающими

отступы.

Как делать?

Слайд 39 1) position: absolute;
Абсолютное позиционирование. Точно располагает элемент

1) position: absolute;Абсолютное позиционирование. Точно располагает элемент внутри окна браузера

внутри окна браузера или родительского элемента с заданным позиционированием

(fixed, relative, absolute).

Пример:
#banner {
position: absolute;
top: 15px;
left: 15px;
}

Виды позиционирования

Слайд 40 2) position: relative;
Относительное позиционирование. Изменяет расположение элемента

2) position: relative;Относительное позиционирование. Изменяет расположение элемента относительного его прежнего

относительного его прежнего положения.
Пример:
img:hover {
position: relative;

top: 15px;
left: 15px;
}

Виды позиционирования

Слайд 41 3) position: fixed;
Фиксированное позиционирование. Привязывает элемент к

3) position: fixed;Фиксированное позиционирование. Привязывает элемент к точке в окне

точке в окне браузера и не меняет его положения

при прокрутке страницы.

Пример:
#logo {
position: fixed;
top: 15px;
left: 15px;
}

Виды позиционирования

Слайд 42 4) position: static;
Значение по умолчанию.

Элементы не имеющие

4) position: static;Значение по умолчанию.Элементы не имеющие позиционирования (или родительских

позиционирования (или родительских элементов с позиционированием) располагаются на странице

игнорируя положение позиционированных элементов.

Виды позиционирования

Слайд 43 7. Блочные и строчные элементы.
Создание блоков.
Верстка.

7. Блочные и строчные элементы. Создание блоков.Верстка.

Слайд 44 Типы элементов:
Строчные – являются частью строки, не обособляются

Типы элементов:Строчные – являются частью строки, не обособляются отступами, переносятся на

отступами, переносятся на другую строку при необходимости (примеры, ,

, , , ).
Блочные – размечается в виде прямоугольника, занимает всю доступную ширину, высота определяется содержимым, всегда начинается с новой строки (
,
,

,...,

,
,

,

,