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

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


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

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

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

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

Презентация на тему Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты

Содержание

CSS: что это? CSS (Cascading Style Sheets) - Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу - элементу, так и одновременно
Учебный курс  Введение в HTML и CSS   Лекция 5 CSS: что это? CSS (Cascading Style Sheets) - Каскадные таблицы стилей - это CSS: В чем прелесть? Спецификация CSS (Cascading Style Sheets) позволяет остаться в CSS: влияние на технологию Сначала нужно определиться с номенклатурой страниц, т.е. все CSS: влияние на технологию Для каждого стандартного компонента страницы разрабатывается стиль его Способы применения CSSпереопределение стиля в элементе разметки размещение описания стиля в заголовке Внедрение CSS в HTML документ1. Написать стилевое описание непосредственно в самом элементе. Внедрение CSS в HTML документ2. Написать стилевое описание для всех идентичных элементов Внедрение CSS в HTML документ3. Вынести стилевое описание элементов HTML в отдельный Переопределение стиля	Под переопределением стиля в элементе разметки мы понимаем применение атрибута STYLE Элемент STYLE	Элемент STYLE позволяет определить стиль отображения для: стандартных элементов HTML-разметки произвольных Пишется так: это параграф с индивидуальным стилем Всё что будет написано между Пример   Атрибут style   Всё о дизайне На этом Ссылка на описание стиля	Ссылка на описание стиля, расположенное за пределами документа, осуществляется Тег Для того, что бы описать необходимые элементы одновременно на всей странице Тег style  body {background-color: #c5ffa0} h1 {color: #0000ff; Тег  принято внедрять в заголовок HTML документа между тегами .Атрибут тега  type - сообщает браузеру, Импорт стиля	Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, Синтаксис	Синтаксис описания стилей в общем виде представляется следующим образом: selector[, selector[, ...]]{attribute:value; 	[atribute:value;...]} или Описание селектораСелектор - имя элемента разметки i, em {color:#003366,font-style:normal}a, i {font-style:normal;font-weight:bold; 	text-decoration:line-through}Первая Селектор - имя класса.kuku {color:darkred;background-color:white;}Этот параграф мы отобразим темно-красным цветом по белому Селектор - идентификатор объекта	Описание стиля для объекта задается строкой, в которой селектор Наследование и переопределениеСначала применяются стили умолчания браузера Стили умолчания браузера переопределяются прилинкованными Элемент DIV	DIV позволяет применить атрибуты стиля, связанные с границей блокаDIV позволяет применить Элемент SPAN	Элемент разметки SPAN - это обобщенный строковый элемент разметки, применение которого Свойства блоков Отступы (margins)p {margin-left:50px;margin-right:5px; margin-top:15px;margin-bottom:50px; padding:0px; text-align:left;} Набивка (padding)p {padding-left:100px; padding-right:50px; padding-top:20px; padding-bottom:10px; text-align:left; border-width:1px;} Обтекание блока текстаАтрибут float определяет плавающий блок текста. Он может принимать значения: Управление цветомЦвет текста:td {color:darkred;}p {color:darkred;}i {color:#003366;font-style:normal;}Цвет фона:......как строковые элементы разметкиp {background: gray Шрифтыfont-family - семейство начертаний шрифта (гарнитура);font-style - прямое начертание или курсив;font-weight - ГарнитураЭта строка набрана пропорциональным шрифтом с засечками.Эта строка набрана пропорциональным шрифтом без Кегль (font-size)Кегль параграфа установлен в 12 пунктовКегль параграфа установлен в 12 пикселейКегль НачертаниеПрямое начертаниеКурсивКурсив Межбуквенные расстоянияМежбуквенное расстояние 10pt Учебникhttp://munasipov.com/lesson/uroki_css.html ЗаданияНа цветаДля решения задач данного блока вам понадобятся следующие CSS свойства: color. Сделайте все ЗаданияНа styleДля решения задач данного блока вам понадобятся следующие HTML атрибуты: style. Сделайте первый ЗаданияНа ширину и высотуДля решения задач данного блока вам понадобятся следующие CSS ЗаданияНа выравниваниеДля решения задач данного блока вам понадобятся следующие CSS свойства: text-align. Поставьте все  по ЗаданияНа жирностьДля решения задач данного блока вам понадобятся следующие CSS свойства: font-weight. Сделайте все  жирным. Сделайте  нежирным. Сделайте одновременно ,  и  нежирным. ЗаданияНа курсивДля решения задач данного блока вам понадобятся следующие CSS свойства: font-style. Сделайте все  курсивом. Сделайте ЗаданияНа размер шрифтаДля решения задач данного блока вам понадобятся следующие CSS свойства: font-size. Сделайте все  20px. Сделайте все абзацы  15px. ЗаданияНа семействоДля решения задач данного блока вам понадобятся следующие CSS свойства: font-family. Сделайте для ЗаданияНа межстрочный интервалДля решения задач данного блока вам понадобятся следующие CSS свойства: line-height. Сделайте ЗаданияНа свойство-сокращение fontДля решения задач данного блока вам понадобятся следующие CSS свойства: font. Закомментируйте ЗаданияНа красную строкуДля решения задач данного блока вам понадобятся следующие CSS свойства: text-indent. Сделайте ЗаданияПовторите страницу по образцу:
Слайды презентации

Слайд 2 CSS: что это?
CSS (Cascading Style Sheets) - Каскадные

CSS: что это? CSS (Cascading Style Sheets) - Каскадные таблицы стилей -

таблицы стилей - это свод стилевых описаний, тех или

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

Слайд 3 CSS: В чем прелесть?
Спецификация CSS (Cascading Style

CSS: В чем прелесть? Спецификация CSS (Cascading Style Sheets) позволяет остаться

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

и дает полный контроль над формой представления элементов HTML-разметки

Слайд 4 CSS: влияние на технологию
Сначала нужно определиться с

CSS: влияние на технологию Сначала нужно определиться с номенклатурой страниц, т.е.

номенклатурой страниц, т.е. все страницы проектируемого Web-узла разбить на

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

Слайд 5 CSS: влияние на технологию
Для каждого стандартного компонента

CSS: влияние на технологию Для каждого стандартного компонента страницы разрабатывается стиль

страницы разрабатывается стиль его отображения (CSS-описатель).
Теперь остается только

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

Слайд 6 Способы применения CSS
переопределение стиля в элементе разметки
размещение

Способы применения CSSпереопределение стиля в элементе разметки размещение описания стиля в

описания стиля в заголовке документа в элементе STYLE
размещение

ссылки на внешнее описание через элемент LINK
импорт описания стиля в документ

Слайд 7 Внедрение CSS в HTML документ

1. Написать стилевое описание

Внедрение CSS в HTML документ1. Написать стилевое описание непосредственно в самом

непосредственно в самом элементе. Такой способ хорош лишь в

том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.

Слайд 8 Внедрение CSS в HTML документ
2. Написать стилевое описание

Внедрение CSS в HTML документ2. Написать стилевое описание для всех идентичных

для всех идентичных элементов HTML документа. Такой способ оправдывает

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

Слайд 9 Внедрение CSS в HTML документ
3. Вынести стилевое описание

Внедрение CSS в HTML документ3. Вынести стилевое описание элементов HTML в

элементов HTML в отдельный файл CSS. Это позволит управлять

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

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

Переопределение стиля	Под переопределением стиля в элементе разметки мы понимаем применение атрибута

понимаем применение атрибута STYLE у данного элемента разметки: Заголовок

первого уровня

Слайд 11 Элемент STYLE
Элемент STYLE позволяет определить стиль отображения для:

Элемент STYLE	Элемент STYLE позволяет определить стиль отображения для: стандартных элементов HTML-разметки


стандартных элементов HTML-разметки
произвольных классов (селектор class)
HTML-объектов (селектор

id)

Слайд 12 Пишется так:
это параграф с индивидуальным стилем Всё

Пишется так: это параграф с индивидуальным стилем Всё что будет написано

что будет написано между кавычками атрибута style и будет являться стилевым

описанием для данного элемента, в данном случае элемента 

.
 например:
это параграф с индивидуальным стилем


В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей. По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента


Слайд 13 Пример
Атрибут

Пример  Атрибут style  Всё о дизайне На этом сайте

style Всё о дизайне На этом

сайте Вы найдёте любую информацию о дизайне.

Заказать дизайн сайта У нас Вы можете по выгодным ценам приобрести лучший шаблон!!

Как стать дизайнером Только у нас Вы можете за 3 месяца стать верстальщиком сайтов!!



Слайд 14 Ссылка на описание стиля
Ссылка на описание стиля, расположенное

Ссылка на описание стиля	Ссылка на описание стиля, расположенное за пределами документа,

за пределами документа, осуществляется при помощи элемента LINK, который

размещают в элементе HEAD.




Слайд 15 Тег
Для того, что бы описать необходимые элементы

Тег Для того, что бы описать необходимые элементы одновременно на всей

одновременно на всей странице в заголовок HTML документа внедряют

тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

Слайд 16 Тег

Тег style body {background-color: #c5ffa0} h1 {color: #0000ff; font-size:18px}

style body {background-color: #c5ffa0} h1 {color: #0000ff; font-size:18px} h2 {color: #0000ff;

font-size:16px} p {color: #ff0000; font-size:14px}

Всё о дизайне

На этом сайте Вы найдёте любую информацию о дизайне.

Заказать дизайн

У нас Вы можете по выгодным ценам приобрести лучший шаблон!!

Как стать дизайнером

Только у нас Вы можете за 3 месяца стать верстальщиком сайтов!!



Слайд 17
Тег  принято внедрять в заголовок HTML документа между тегами .
Атрибут

Тег  принято внедрять в заголовок HTML документа между тегами .Атрибут тега  type - сообщает

тега  type - сообщает браузеру, какой синтаксис использовать для правильной

интерпретации стилей. Для правильной интерпретации браузерами CSS значение type (MIME тип данных) должно равняться text/css.
Внутри тега  идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:
Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.


Слайд 18 Импорт стиля
Импортировать стиль можно либо внутрь элемента STYLE,

Импорт стиля	Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего

либо внутрь внешнего файла, который представляет собой описатель стиля.

Оператор импорта стиля должен предшествовать всем прочим описателям стилей:


Слайд 19 Синтаксис
Синтаксис описания стилей в общем виде представляется следующим

Синтаксис	Синтаксис описания стилей в общем виде представляется следующим образом: selector[, selector[, ...]]{attribute:value; 	[atribute:value;...]}

образом: selector[, selector[, ...]]{attribute:value; [atribute:value;...]} или selector selector [selector ...]  {attribute:value;[atribute:value;...]}
Первый вариант перечисляет селекторы, для которых действует данное

описание стиля. Второй вариант задает иерархию вложенности селекторов, для совокупности которых определен стиль.

Слайд 20 Описание селектора
Селектор - имя элемента разметки
i, em

Описание селектораСелектор - имя элемента разметки i, em {color:#003366,font-style:normal}a, i {font-style:normal;font-weight:bold;

{color:#003366,font-style:normal}
a, i {font-style:normal;font-weight:bold; text-decoration:line-through}
Первая строка этого описания перечисляет селекторы-элементы, которые

будут отображаться одинаково:
Это курсив и это тоже курсив Это курсив и это тоже курсив
Последняя строка определяет стиль отображения вложенного в гипертекстовую ссылку курсива: kuku kuku

Слайд 21 Селектор - имя класса

.kuku {color:darkred;background-color:white;}

Этот параграф мы

Селектор - имя класса.kuku {color:darkred;background-color:white;}Этот параграф мы отобразим темно-красным цветом по

отобразим темно-красным цветом по белому фону.
Эту гипертекстовую ссылку

мы отобразим темно-красным цветом по белому фону.


Этот параграф мы отобразим темно-красным цветом по белому фону.
Эту гипертекстовую ссылку мы отобразим темно-красным цветом по белому фону.

Слайд 22 Селектор - идентификатор объекта
Описание стиля для объекта задается

Селектор - идентификатор объекта	Описание стиля для объекта задается строкой, в которой

строкой, в которой селектор представляет собой имя этого объекта

с лидирующим символом "#": a.mainlink {color:darkred;text-decoration:underline;font-style:italic;} #blue {color:#003366} основная гипертекстовая ссылка модифицированная гипертекстовая ссылка основная гипертекстовая ссылка модифицированная гипертекстовая ссылка

Слайд 23 Наследование и переопределение
Сначала применяются стили умолчания браузера
Стили

Наследование и переопределениеСначала применяются стили умолчания браузера Стили умолчания браузера переопределяются

умолчания браузера переопределяются прилинкованными стилями (элемент LINK заголовка документа).


Прилинкованные стили переопределяются описаниями стилей в элементе STYLE
Стили элемента STYLE переопределяются атрибутом STYLE в любом из элементов разметки

Слайд 24 Элемент DIV
DIV позволяет применить атрибуты стиля, связанные с

Элемент DIV	DIV позволяет применить атрибуты стиля, связанные с границей блокаDIV позволяет

границей блокаDIV позволяет применить атрибуты стиля, связанные с границей

блока, отступами блока от границ старшего элементаDIV позволяет применить атрибуты стиля, связанные с границей блока, отступами блока от границ старшего элемента и "набивку", т.е. отступ от границы блока до границы вложенного элемента:
...


Слайд 25 Элемент SPAN
Элемент разметки SPAN - это обобщенный строковый

Элемент SPAN	Элемент разметки SPAN - это обобщенный строковый элемент разметки, применение

элемент разметки, применение которого не приводит к образованию блока

текста. Он может заменить собой элементы: FONT, I, B, U, SUB, SUP и т.п.

Стили могут пересекаться

Слайд 26 Свойства блоков


Свойства блоков

Слайд 27 Отступы (margins)
p {margin-left:50px;margin-right:5px; margin-top:15px;margin-bottom:50px; padding:0px; text-align:left;}




Отступы (margins)p {margin-left:50px;margin-right:5px; margin-top:15px;margin-bottom:50px; padding:0px; text-align:left;}

Слайд 28 Набивка (padding)
p {padding-left:100px; padding-right:50px; padding-top:20px; padding-bottom:10px; text-align:left; border-width:1px;}


Набивка (padding)p {padding-left:100px; padding-right:50px; padding-top:20px; padding-bottom:10px; text-align:left; border-width:1px;}

Слайд 29 Обтекание блока текста
Атрибут float определяет плавающий блок текста.

Обтекание блока текстаАтрибут float определяет плавающий блок текста. Он может принимать

Он может принимать значения:
left - блок прижат к

левой границе охватывающего блок элемента;
rigth - блок прижат к правой границе охватывающего блок элемента;
both - текст может обтекать блок с обеих сторон.
Атрибут clean – запрет обтекания:

У этого блока запрещен \"плавающий\" блок справа, поэтому он начинается ниже прижатого вправо ограниченного блока.



Слайд 30 Управление цветом
Цвет текста:
td {color:darkred;}
p {color:darkred;}
i {color:#003366;font-style:normal;}

Цвет фона:
...
...

Управление цветомЦвет текста:td {color:darkred;}p {color:darkred;}i {color:#003366;font-style:normal;}Цвет фона:......как строковые элементы разметкиp {background:

style="background-color:#003366; color:white;">как строковые элементы разметки
p {background: gray http://kuku.ru/kuku.gif no-repeat fixed

center center;}

Слайд 31 Шрифты
font-family - семейство начертаний шрифта (гарнитура);
font-style - прямое

Шрифтыfont-family - семейство начертаний шрифта (гарнитура);font-style - прямое начертание или курсив;font-weight

начертание или курсив;
font-weight - "усиление" (насыщенность) шрифта, "жирность" букв;
font-size

- размер шрифта (кегль). Задается в пикселях (px) и типографских пунктах (pt);
font-variant - вариант начертания (обычный или мелкими буквами - капитель).

Слайд 32 Гарнитура
Эта строка набрана пропорциональным шрифтом с

ГарнитураЭта строка набрана пропорциональным шрифтом с засечками.Эта строка набрана пропорциональным шрифтом

засечками.
Эта строка набрана пропорциональным шрифтом без засечек.

align=left style="font-size:24px; font-family:monospace;color:darkred;">Эта строка набрана моноширинным шрифтом.



Слайд 33 Кегль (font-size)
Кегль параграфа установлен в 12 пунктов

Кегль (font-size)Кегль параграфа установлен в 12 пунктовКегль параграфа установлен в 12

style="font-size:12px;">Кегль параграфа установлен в 12 пикселей
Кегль параграфа установлен

в 120% от размера букв охватывающего параграф элемента


Размер кегля large



Слайд 34 Начертание
Прямое начертание
Курсив
Курсив

НачертаниеПрямое начертаниеКурсивКурсив

Слайд 35 Межбуквенные расстояния

Межбуквенное расстояние 10pt


Межбуквенные расстоянияМежбуквенное расстояние 10pt

Слайд 36 Учебник
http://munasipov.com/lesson/uroki_css.html


Учебникhttp://munasipov.com/lesson/uroki_css.html

Слайд 37 Задания
На цвета
Для решения задач данного блока вам понадобятся

ЗаданияНа цветаДля решения задач данного блока вам понадобятся следующие CSS свойства: color. Сделайте

следующие CSS свойства: color.
 Сделайте все абзацы  красного цвета.
 Сделайте все  зеленого цвета.
 Сделайте все  голубого

цвета.
 Сделайте все 

 оранжевого цвета.




Слайд 38 Задания
На style
Для решения задач данного блока вам понадобятся

ЗаданияНа styleДля решения задач данного блока вам понадобятся следующие HTML атрибуты: style. Сделайте

следующие HTML атрибуты: style.
 Сделайте первый на странице абзац  зеленого цвета.
 Сделайте второй

на странице абзац 

 красного цвета.




Слайд 39 Задания
На ширину и высоту
Для решения задач данного блока

ЗаданияНа ширину и высотуДля решения задач данного блока вам понадобятся следующие

вам понадобятся следующие CSS свойства: widthДля решения задач данного блока

вам понадобятся следующие CSS свойства: width, height.
 Сделайте все абзацы 

 шириной 300px.
 Сделайте все таблицы  шириной 400px, высотой 200px.




Слайд 40 Задания
На выравнивание
Для решения задач данного блока вам понадобятся

ЗаданияНа выравниваниеДля решения задач данного блока вам понадобятся следующие CSS свойства: text-align. Поставьте

следующие CSS свойства: text-align.
 Поставьте все  по центру.
 Поставьте все  по правому краю.
 Сделайте так,

чтобы текст в абзацах 

 был выровнен одновременно и по правому и по левому краю.
 Сделайте так, чтобы во втором абзаце 

 текст был выровнен по центру.
 Поставьте все 

 по левому краю.
 Поставьте все 
 по центру.




Слайд 41 Задания
На жирность
Для решения задач данного блока вам понадобятся

ЗаданияНа жирностьДля решения задач данного блока вам понадобятся следующие CSS свойства: font-weight. Сделайте все  жирным. Сделайте  нежирным. Сделайте одновременно ,  и  нежирным.

следующие CSS свойства: font-weight.
 Сделайте все  жирным.
 Сделайте  нежирным.
 Сделайте одновременно ,  и  нежирным.



Слайд 42 Задания
На курсив
Для решения задач данного блока вам понадобятся

ЗаданияНа курсивДля решения задач данного блока вам понадобятся следующие CSS свойства: font-style. Сделайте

следующие CSS свойства: font-style.
 Сделайте все  курсивом.
 Сделайте все абзацы  курсивом, а первый абзац

- нет.




Слайд 43 Задания
На размер шрифта
Для решения задач данного блока вам

ЗаданияНа размер шрифтаДля решения задач данного блока вам понадобятся следующие CSS свойства: font-size. Сделайте все  20px. Сделайте все абзацы  15px.

понадобятся следующие CSS свойства: font-size.
 Сделайте все  20px.
 Сделайте все абзацы  15px.



Слайд 44 Задания
На семейство
Для решения задач данного блока вам понадобятся

ЗаданияНа семействоДля решения задач данного блока вам понадобятся следующие CSS свойства: font-family. Сделайте

следующие CSS свойства: font-family.
 Сделайте для абзацев  шрифт Arial.
 Сделайте для  шрифт Times New

Roman.
 Сделайте для 

 любой шрифт без засечек.




Слайд 45 Задания
На межстрочный интервал
Для решения задач данного блока вам

ЗаданияНа межстрочный интервалДля решения задач данного блока вам понадобятся следующие CSS

понадобятся следующие CSS свойства: line-height.
 Сделайте межстрочный интервал для абзацев  в 30px.



Слайд 46 Задания
На свойство-сокращение font
Для решения задач данного блока вам

ЗаданияНа свойство-сокращение fontДля решения задач данного блока вам понадобятся следующие CSS

понадобятся следующие CSS свойства: font.
 Закомментируйте все стили для абзацев.
 Для  сделайте шрифт

Arial, 16 пикселей, курсив, жирный, межстрочный интервал в 30px.
 Для 

 сделайте следующий шрифт: нежирный, 20 пикселей, Verdana.




Слайд 47 Задания
На красную строку
Для решения задач данного блока вам

ЗаданияНа красную строкуДля решения задач данного блока вам понадобятся следующие CSS

понадобятся следующие CSS свойства: text-indent.
 Сделайте красную строку в абзацах 30px.
 Для

второго абзаца 

 уберите красную строку.

На вертикальное выравнивание
Для решения задач данного блока вам понадобятся следующие CSS свойства: vertical-align.
 Поставьте текст в таблице 

 по верхнему краю по вертикали.
 Поставьте текст в 
 по центру по вертикали.




  • Имя файла: kaskadnye-tablitsy-stiley-css-–-naznachenie-i-primeneniya-blochnye-i-strochnye-elementy-tsvet-i-shrifty.pptx
  • Количество просмотров: 117
  • Количество скачиваний: 0