Рабочие листы
к вашим урокам
Скачать
1 слайд
CASCADING STYLE SHEETS, CSS
Каскадные таблицы стилей
2 слайд
CASCADING STYLE SHEETS, CSS
Каскадные таблицы стилей
CSS (англ. CASCADING STYLE SHEETS - Каскадные таблицы стилей) - технология описания внешнего вида документа, написанного языком разметки
CSS представляют собой средство разделения логической структуры документа и формы его представления. Логическая структура документа определяется элементами HTML-разметки, в то время как форма представления каждого из этих элементов задается CSS-описателем элемента.
3 слайд
Описание и применение стилей CSS
При работе с CSS предусматривается, что сначала стиль создаётся, а потом применяется. Поэтому отдельно рассматриваются способы (области) ОПИСАНИЯ стилей и способы ПРИМЕНЕНИЯ стилей
Тем не менее есть способ описания и использования в КОНКРЕТНОМ МЕСТЕ. В этом случае стиль одновременно создаётся и используется. При этом теряются основные преимущества CSS по сравнению со стандартными средствами HTML для оформления документов.
4 слайд
Основные преимущества CSS по отношению к стандартным средствам HTML для оформления документов
Отделение описание внешнего вида документа от его разметки, что делает код более читабельным
Возможность применения одного стиля несколько раз.
Более широкие возможности для оформления документа
5 слайд
Способы описания стилей CSS
Описание (и использование) стиля
В КОНКРЕТНОМ МЕСТЕ непосредственно в элементе разметки (прямо внутри тега);
Описание стиля в отдельной области:
размещение описания стиля в шапке документа в элементе <STYLE>;
размещение описания стиля в файле CSS
6 слайд
Способы применения и синтаксис
Способы применения
В КОНКРЕТНОМ МЕСТЕ непосредственно внутри элемента разметки
Переопределение стиля тега (элемента разметки)
Использование классов
7 слайд
Суть основных способов применения стилей
Переопределение стиля тэга (элемента разметки)
При этом способе, задав один раз стиль (например, выравнивание по центру, тёмно-синий цвет, большой шрифт) для определенного тэга (например, <h1>), каждый раз при использовании данного тэга, будет применен заданный стиль.
Т.е. всё заголовки (h1) будут тёмно-синими, большими, выравненными по центру
Использование классов
При этом способе стиль описывается один раз, а используется в указанных местах (тэгах) HTML-кодах. Т.е. можно сделать, чтобы данный стиль был применен к некоторым заголовкам и некоторым параграфам, а к остальным не применен. Данный способ наиболее универсальный.
8 слайд
Способы применения и синтаксис
<style>
Связь с файлом CSS
<link rel="stylesheet" type="text/css" href="styles.css">
Синтаксис создания стиля
аттр.:зн-ие; аттр.:зн-ие…
Пример:
font-size:14pt; background-color:yellow; text-align:right
9 слайд
Синтаксис описания и применения стилей
10 слайд
Синтаксис составных конструкций при описании стилей
1. Перечисление селекторов, для которых действует данное описание стиля
selector[, selector[, ...]]{ attribute:value;[atribute:value;...] }
2. Иерархия вложенности селекторов, для совокупности которых определен стиль.
selector selector [selector ...] { attribute:value;[atribute:value;...] }
11 слайд
Переопределение стиля в конкретном месте непосредственно в элементе разметки (прямо внутри тега)
Синтаксис:
<тэг style=“аттр1.:зн-ие1;аттр2.:зн-ие2;…”>
Примеры:
<H1 STYLE="font-weight: normal;
font-style:italic;font-size:10pt;">
Заголовок первого уровня</H1>
<HR STYLE="width:100px;">
<P STYLE=“font-size:14pt; background-color:yellow; text-align:right”>пример параграфа</p>
12 слайд
Размещение описания стиля в заголовке документа в элементе STYLE
<HEAD>
<STYLE>
p { color:darkred;text-align:justify;font-size:8pt; }
</STYLE>
</HEAD>
<BODY>
...
<P>
Этот параграф мы используем как пример применения описания стиля для стандартного элемента HTML-разметки.
</P>
...
</BODY>
13 слайд
Размещение ссылки на внешнее описание
Размещение ссылки на внешнее описание через элемент LINK
<link rel="stylesheet" type="text/css" href="styles.css">
Импорт описания стиля в документ
<STYLE>
@import:url(http://intuit.ru/styles.css)
</STYLE>
14 слайд
Styles.css
body
{
font-family: Garamond, Times New Roman, Times;
background-color: rgb(51,102,204);
color: rgb(255,255,153);
}
table
{
table-border-color-light: rgb(153,255,204);
table-border-color-dark: rgb(0,0,51);
}
h1, h2, h3, h4, h5, h6
{font-family: Verdana, Arial, Helvetica; color: rgb(255,204,0);}
div .menu
{background-color: rgb (0,200,50)}
15 слайд
Атрибуты CSS
16 слайд
Свойства блоков
width, height - ширина и высота
margin, padding - Внешние и внутренние отступы
margin (padding) – отступы со всех сторон сразу
margin-left (padding-left) - слева
-”- - right
-”- - top
-”- - bottom
17 слайд
Свойства блоков
display – Отображаемость. Значения: block (видим), none (невидим)
position – Положение. Значения: relative (относительное), absolute (абсолютное)
18 слайд
Настройки цвета и текста
Цвет (red; rgb(255,255,153))
color - цвет текста
background-color – цвет фона
Текст
text-align - выравнивание. значения: left, right, center
text-decoration – оформление текста. значения: underline (подчеркнутый), line-through (перечеркнутый), none (нет);
19 слайд
Настройки шрифта
font-family – семейство (arial, times)
font-size – размер (указывать pt). пример: font-size:14pt;
font-weight – жирность. значения: bold (жирный), normal
font-style – стиль. значения: italic (курсив), normal
20 слайд
Контрольные вопросы
21 слайд
Контрольные вопросы
Что такое CSS? Каков смысл CSS?
Основные преимущества CSS по сравнению со стандартными средствами HTML для оформления документов
Основные способы описания стилей CSS
Основные способы применения стилей CSS. В чём их суть?
Каков синтаксис создания стиля?
Каков синтаксис описания и применения стилей?
Назовите основные атрибуты CSS
22 слайд
Контрольные вопросы
Какой атрибут используется для задания ширины?
Какой атрибут используется для задания высоты?
Какой атрибут используется для задания внешних отступов?
Какой атрибут используется для задания внутренних отступов?
Какой атрибут используется для задания отображаемости?
Какой атрибут используется для задания положения?
Какой атрибут используется для задания цвета текста?
Какой атрибут используется для задания цвета фона?
23 слайд
Контрольные вопросы
Какой атрибут используется для задания выравнивания?
Какой атрибут используется для задания подчеркивания?
Какой атрибут используется для задания семейства шрифта?
Какой атрибут используется для задания размера шрифта?
Какой атрибут используется для задания курсива?
Какой атрибут используется для задания полужирности?
Рабочие листы
к вашим урокам
Скачать
6 666 022 материала в базе
Настоящий материал опубликован пользователем Дзоблаева Алёна Владимировна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
72/180 ч.
Курс профессиональной переподготовки
600 ч.
Курс профессиональной переподготовки
300/600 ч.
Мини-курс
10 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.