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

Содержание

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

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

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

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

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

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

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

различаются своими возможностями и назначением.
При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег .
Данный тег помещается в контейнер
Пример Подключение таблицы связанных стилей


Стили



Заголовок

Текст


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

Слайд 4Подключение отдельного CSS-файла
Значения параметров тега  — rel и type остаются неизменными, как приведено в данном примере. 
Содержимое

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

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


 
Самый

лучший Блог
 

Тут пример: отображение CSS-стилей в документе HTML





Прописываем стили непосредственно в самом html файле (первый способ)  Самый лучший Блог  Тут пример: отображение CSS-стилей в

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



CSS



.p{
color:

red;
}

пример отображения CSS-стилей в документе HTML





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

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

с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом.
И далее выполняем следующие действия:






Стили CSS


Тут пример: отображение CSS-стилей в документе HTML





Ссылка на CSS-файл внутри файла этого же типаМы создаем несколько файлов с CSS-стилями. Пусть их названия будут

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

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

Правило CSSПравило CSS - это структурная единица таблицы стилей, которая содержит описание стилей для определенного элемента. Правило состоит

Слайд 9Правило стиля
В общем случае правило стиля можно задать так:
селектор[,селектор,]... { свойство1: значение;

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

Правило стиляВ общем случае правило стиля можно задать так:селектор[,селектор,]... { свойство1: значение; свойство2: значение; ...}, гдеселектор (указатель), селектор,...

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

пункт=1/72дюйма),
выравнивание заголовка выполняется по центру окна или ячейки таблицы, где он размещен,
цвет - зеленый, фон, на котором он будет отображен – белый

Для заголовка третьего уровня задано правило стиля в CSS

, в браузере увидим:

Для заголовка третьего уровня задано правило стиля в CSS

Описание примерашрифт заголовка - Arial, размер шрифта - 10 пунктов (один пункт=1/72дюйма), выравнивание заголовка выполняется по центру

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

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

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


Слайд 12Селекторы классов
.prim {font-weight: bold; text-alight: center; color:"#cccccc";},
здесь текст выделяется полужирным шрифтом

и выравнивается по центру окна документа или ячейки таблицы, цвет текста - серый.
Точка перед названием класса обязательна.
Наберем html-код:
             ,     
Данная ячейка оформлена стилем класса “prim"

Текст этого абзаца оформлен стилем класса “prim"



Селекторы классов.prim {font-weight: bold; text-alight: center; color:

Слайд 13Селекторы идентификаторов
#prim_id { font-weight: bold; font-size: 12pt; font-style: italic; text-align: center;

color: "#0000FF"; } ,
шрифт - полужирный, размер - 12 пунктов, начертание шрифта - курсив, текст выравнивается по центру, цвет - синий.
Знак # перед именем идентификатора является обязательным и обозначает, что данный селектор есть идентификатор.
Применим описанный идентификатор к одному из абзацев веб-страницы:

Стиль текста этого абзаца описан идентификатором "prim_id"

.
В результате получим следующее:
Стиль текста этого абзаца описан идентификатором "prim_id"

Селекторы идентификаторов#prim_id { font-weight: bold; font-size: 12pt; font-style: italic; text-align: center; color:

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

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

Что такое shareslide.ru?

Это сайт презентаций, где можно хранить и обмениваться своими презентациями, докладами, проектами, шаблонами в формате PowerPoint с другими пользователями. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами.


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

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

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

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