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

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



Московские документы для аттестации!

124 курса профессиональной переподготовки от 4 795 руб.
274 курса повышения квалификации от 1 225 руб.

Для выбора курса воспользуйтесь поиском на сайте KURSY.ORG


Вы получите официальный Диплом или Удостоверение установленного образца в соответствии с требованиями государства (образовательная Лицензия № 038767 выдана ООО "Столичный учебный центр" Департаментом образования города МОСКВА).

ДИПЛОМ от Столичного учебного центра: KURSY.ORG


библиотека
материалов
Каскадные таблицы стилей 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

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

№ слайда 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

Очень низкие цены на курсы переподготовки от Московского учебного центра для педагогов

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

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

Подайте заявку на интересующий Вас курс сейчас: KURSY.ORG


Общая информация

Номер материала: ДВ-105903

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