Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Презентации / Презентация по информатике на тему "Каскадные таблицы стилей CSS"
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 26 апреля.

Подать заявку на курс
  • Информатика

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

библиотека
материалов
Каскадные таблицы стилей CSS CSS – это язык, содержащий набор свойств для опр...
Четыре способа подключение CSS стилей к html: Четыре способа подключение CSS...
Подключение отдельного CSS-файла Для добавления стилей на веб-страницу сущест...
Подключение отдельного CSS-файла Значения параметров тега  — rel и type остаю...
Прописываем стили непосредственно в самом html файле (первый способ)      Сам...
Прописываем стили непосредственно в сама html файле (второй способ)     CSS...
Ссылка на CSS-файл внутри файла этого же типа Мы создаем несколько файлов с C...
Правило CSS Правило CSS - это структурная единица таблицы стилей, которая сод...
Правило стиля В общем случае правило стиля можно задать так: селектор[,селект...
Описание примера шрифт заголовка - Arial, размер шрифта - 10 пунктов (один пу...
Таким образом, все заголовки страницы (а если вы сохранили это правило в отде...
Селекторы классов .prim {font-weight: bold; text-alight: center; color:"#cccc...
Селекторы идентификаторов #prim_id { font-weight: bold; font-size: 12pt; font...
Один стиль для нескольких селекторов Применяя одно описание стиля для несколь...
Блочная модель браузеров Практически все элементы языка HTML воспринимаются б...
Прямоугольная область состоит из: содержимого (контента) веб-элемента; - внут...
16 1

"Инфоурок" приглашает всех педагогов и детей к участию в самой массовой интернет-олимпиаде «Весна 2017» с рекордно низкой оплатой за одного ученика - всего 45 рублей

В олимпиадах "Инфоурок" лучшие условия для учителей и учеников:

1. невероятно низкий размер орг.взноса — всего 58 рублей, из которых 13 рублей остаётся учителю на компенсацию расходов;
2. подходящие по сложности для большинства учеников задания;
3. призовой фонд 1.000.000 рублей для самых активных учителей;
4. официальные наградные документы для учителей бесплатно(от организатора - ООО "Инфоурок" - имеющего образовательную лицензию и свидетельство СМИ) - при участии от 10 учеников
5. бесплатный доступ ко всем видеоурокам проекта "Инфоурок";
6. легко подать заявку, не нужно отправлять ответы в бумажном виде;
7. родителям всех учеников - благодарственные письма от «Инфоурок».
и многое другое...

Подайте заявку сейчас - https://infourok.ru/konkurs

Описание презентации по отдельным слайдам:

№ слайда 1 Каскадные таблицы стилей CSS CSS – это язык, содержащий набор свойств для опр
Описание слайда:

Каскадные таблицы стилей CSS CSS – это язык, содержащий набор свойств для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами. CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.

№ слайда 2 Четыре способа подключение CSS стилей к html: Четыре способа подключение CSS
Описание слайда:

Четыре способа подключение CSS стилей к html: Четыре способа подключение CSS стилей к html: 1. Подключение отдельного CSS-файла  2. Прописываем стили непосредственно в самом html файле (первый способ) 3. Прописываем стили непосредственно в сама html файле (второй способ) 4. Ссылка на CSS-файл внутри файла этого же типа

№ слайда 3 Подключение отдельного CSS-файла Для добавления стилей на веб-страницу сущест
Описание слайда:

Подключение отдельного CSS-файла Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK>. Данный тег помещается в контейнер<HEAD> Пример Подключение таблицы связанных стилей <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Стили</title> <link rel="stylesheet" type="text/css" href="mysite.css"> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <h1>Заголовок</h1> <p>Текст</p> </body> </html>

№ слайда 4 Подключение отдельного CSS-файла Значения параметров тега  — rel и type остаю
Описание слайда:

Подключение отдельного CSS-файла Значения параметров тега <LINK> — rel и type остаются неизменными, как приведено в данном примере.  Содержимое файла mysite.css подключаемого посредством тега <LINK>  Пример Файл со стилем H1 { color: blue; font-size: 200%; font-family: Arial, Verdana, sans-serif; text-align: center; } P { padding-left: 20px; } Если у padding'а задано только одно значение, то оно устанавливает отступ со всех сторон элемента - сверху, справа, снизу и слева.

№ слайда 5 Прописываем стили непосредственно в самом html файле (первый способ)      Сам
Описание слайда:

Прописываем стили непосредственно в самом html файле (первый способ) <!DOCTYPE html> <html> <head>  <title> Самый лучший Блог </title> </head>  <body> <p style="color:red;">Тут пример: отображение CSS-стилей в документе HTML </p> </body> </html>

№ слайда 6 Прописываем стили непосредственно в сама html файле (второй способ)     CSS
Описание слайда:

Прописываем стили непосредственно в сама html файле (второй способ) <!DOCTYPE html> <html> <head> <title> CSS</title> </head> <body> <style> .p{ color: red; } </style> <p>пример отображения CSS-стилей в документе HTML </p> </body> </html>

№ слайда 7 Ссылка на CSS-файл внутри файла этого же типа Мы создаем несколько файлов с C
Описание слайда:

Ссылка на CSS-файл внутри файла этого же типа Мы создаем несколько файлов с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом. И далее выполняем следующие действия: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style-1.css"> <link rel="stylesheet" type="text/css" href="style-2.css"> <meta charset="utf-8"> <title> Стили CSS </title> </head> <body> <p>Тут пример: отображение CSS-стилей в документе HTML </p> </body> </html>

№ слайда 8 Правило CSS Правило CSS - это структурная единица таблицы стилей, которая сод
Описание слайда:

Правило CSS Правило CSS - это структурная единица таблицы стилей, которая содержит описание стилей для определенного элемента.  Правило состоит из селектора, который всегда располагается слева, и блока объявления стилей, который заключается в фигурные скобки и следует непосредственно за селектором (рисунок). Каждое объявление в свою очередь состоит из свойства и его значения. Именно свойство и определяет вид стиля, который будет применяться к элементу.

№ слайда 9 Правило стиля В общем случае правило стиля можно задать так: селектор[,селект
Описание слайда:

Правило стиля В общем случае правило стиля можно задать так: селектор[,селектор,]... { свойство1: значение; свойство2: значение; ...}, где селектор (указатель), селектор,... - перечень имен тегов, классов, идентификаторов, для которых определяется стиль, разделенных запятыми; - свойство1: значение; ... - список задаваемых свойств и присваиваемых им значений, разделенных точками с запятой и заключенных в {...}. Например h3 {font-family: arial; font-size: 10pt; text-align: center; color: green; background: white; },

№ слайда 10 Описание примера шрифт заголовка - Arial, размер шрифта - 10 пунктов (один пу
Описание слайда:

Описание примера шрифт заголовка - Arial, размер шрифта - 10 пунктов (один пункт=1/72дюйма), выравнивание заголовка выполняется по центру окна или ячейки таблицы, где он размещен, цвет - зеленый, фон, на котором он будет отображен – белый <h3> Для заголовка третьего уровня задано правило стиля в CSS </h3>, в браузере увидим: Для заголовка третьего уровня задано правило стиля в CSS

№ слайда 11 Таким образом, все заголовки страницы (а если вы сохранили это правило в отде
Описание слайда:

Таким образом, все заголовки страницы (а если вы сохранили это правило в отдельном файле стилей и сделали ссылки на него в других страницах, то и у них) будут оформлены одинаково (указанным стилем). Аналогично можно и для других элементов веб-документов задать описание правил стилей (<p>, <a> и т.д.). А если нужно, чтобы таким же стилем были оформлены и некоторые другие элементы страницы (разных типов), не все на странице, а выборочно. Вариант вставки указанного стиля, непосредственно в тег каждого элемента, исключаем. Для решения этой проблемы применяются следующие атрибуты: class="имя_класса"; id="имя_идентификатора". class означает, что многим элементам страницы присваивается определенный стиль, своего рода, целому классу.  id (идентификатор) - используется тогда, когда только один элемент на странице соответствует этому стилю, например id="header", id="main", id="bottom", т.е по одному идентификатору для "шапки", основной и заключительной части страницы.

№ слайда 12 Селекторы классов .prim {font-weight: bold; text-alight: center; color:&quot;#cccc
Описание слайда:

Селекторы классов .prim {font-weight: bold; text-alight: center; color:"#cccccc";}, здесь текст выделяется полужирным шрифтом и выравнивается по центру окна документа или ячейки таблицы, цвет текста - серый. Точка перед названием класса обязательна. Наберем html-код: <table width="100%">     <tr>         <td class=“prim"> Данная ячейка оформлена стилем класса “prim" </td>,     </tr> </table> <p class=“prim"> Текст этого абзаца оформлен стилем класса “prim" </p>

№ слайда 13 Селекторы идентификаторов #prim_id { font-weight: bold; font-size: 12pt; font
Описание слайда:

Селекторы идентификаторов #prim_id { font-weight: bold; font-size: 12pt; font-style: italic; text-align: center; color: "#0000FF"; } , шрифт - полужирный, размер - 12 пунктов, начертание шрифта - курсив, текст выравнивается по центру, цвет - синий. Знак # перед именем идентификатора является обязательным и обозначает, что данный селектор есть идентификатор. Применим описанный идентификатор к одному из абзацев веб-страницы: <p id="prim_id"> Стиль текста этого абзаца описан идентификатором "prim_id" </p>. В результате получим следующее: Стиль текста этого абзаца описан идентификатором "prim_id"

№ слайда 14 Один стиль для нескольких селекторов Применяя одно описание стиля для несколь
Описание слайда:

Один стиль для нескольких селекторов Применяя одно описание стиля для нескольких селекторов, перечисленных через запятую, мы определяем для них один стиль. .prim, a, h5 {font-weight: bold; text-alight: left; color="#660000"} Для класса prim, элементов а и h5 задан один стиль, определенный значениями свойств элементов, заключенных в фигурные скобки. Селекторы наследования В CSS применим механизм наследования. Задавая в правиле стиля селекторы через пробел, мы получаем вложение одних в другие. В приведенном ниже правиле, p a {font-weight: bold; color: green;}, все ссылки, находящиеся внутри абзацев будут выделены полужирным шрифтом зеленого цвета.

№ слайда 15 Блочная модель браузеров Практически все элементы языка HTML воспринимаются б
Описание слайда:

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

№ слайда 16 Прямоугольная область состоит из: содержимого (контента) веб-элемента; - внут
Описание слайда:

Прямоугольная область состоит из: содержимого (контента) веб-элемента; - внутреннего отступа от содержимого до бордюра (границы) ("padding"); - бордюра (границы) элемента ("border"); - внешнего поля вокруг элемента ("margin"). Свойства элементов языка HTML

Автор
Дата добавления 28.10.2015
Раздел Информатика
Подраздел Презентации
Просмотров780
Номер материала ДВ-105903
Получить свидетельство о публикации

"Инфоурок" приглашает всех педагогов и детей к участию в самой массовой интернет-олимпиаде «Весна 2017» с рекордно низкой оплатой за одного ученика - всего 45 рублей

В олимпиадах "Инфоурок" лучшие условия для учителей и учеников:

1. невероятно низкий размер орг.взноса — всего 58 рублей, из которых 13 рублей остаётся учителю на компенсацию расходов;
2. подходящие по сложности для большинства учеников задания;
3. призовой фонд 1.000.000 рублей для самых активных учителей;
4. официальные наградные документы для учителей бесплатно(от организатора - ООО "Инфоурок" - имеющего образовательную лицензию и свидетельство СМИ) - при участии от 10 учеников
5. бесплатный доступ ко всем видеоурокам проекта "Инфоурок";
6. легко подать заявку, не нужно отправлять ответы в бумажном виде;
7. родителям всех учеников - благодарственные письма от «Инфоурок».
и многое другое...

Подайте заявку сейчас - https://infourok.ru/konkurs


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ


Идёт приём заявок на международный конкурс по математике "Весенний марафон" для учеников 1-11 классов и дошкольников

Уникальность конкурса в преимуществах для учителей и учеников:

1. Задания подходят для учеников с любым уровнем знаний;
2. Бесплатные наградные документы для учителей;
3. Невероятно низкий орг.взнос - всего 38 рублей;
4. Публикация рейтинга классов по итогам конкурса;
и многое другое...

Подайте заявку сейчас - https://urokimatematiki.ru

Похожие материалы

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