🗊Презентация Каскадные таблицы стилей – CSS. (Тема 6)

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Каскадные таблицы стилей – CSS. (Тема 6), слайд №1Каскадные таблицы стилей – CSS. (Тема 6), слайд №2Каскадные таблицы стилей – CSS. (Тема 6), слайд №3Каскадные таблицы стилей – CSS. (Тема 6), слайд №4Каскадные таблицы стилей – CSS. (Тема 6), слайд №5Каскадные таблицы стилей – CSS. (Тема 6), слайд №6Каскадные таблицы стилей – CSS. (Тема 6), слайд №7Каскадные таблицы стилей – CSS. (Тема 6), слайд №8Каскадные таблицы стилей – CSS. (Тема 6), слайд №9Каскадные таблицы стилей – CSS. (Тема 6), слайд №10Каскадные таблицы стилей – CSS. (Тема 6), слайд №11Каскадные таблицы стилей – CSS. (Тема 6), слайд №12Каскадные таблицы стилей – CSS. (Тема 6), слайд №13Каскадные таблицы стилей – CSS. (Тема 6), слайд №14Каскадные таблицы стилей – CSS. (Тема 6), слайд №15Каскадные таблицы стилей – CSS. (Тема 6), слайд №16Каскадные таблицы стилей – CSS. (Тема 6), слайд №17Каскадные таблицы стилей – CSS. (Тема 6), слайд №18Каскадные таблицы стилей – CSS. (Тема 6), слайд №19Каскадные таблицы стилей – CSS. (Тема 6), слайд №20Каскадные таблицы стилей – CSS. (Тема 6), слайд №21Каскадные таблицы стилей – CSS. (Тема 6), слайд №22Каскадные таблицы стилей – CSS. (Тема 6), слайд №23Каскадные таблицы стилей – CSS. (Тема 6), слайд №24Каскадные таблицы стилей – CSS. (Тема 6), слайд №25Каскадные таблицы стилей – CSS. (Тема 6), слайд №26Каскадные таблицы стилей – CSS. (Тема 6), слайд №27Каскадные таблицы стилей – CSS. (Тема 6), слайд №28Каскадные таблицы стилей – CSS. (Тема 6), слайд №29Каскадные таблицы стилей – CSS. (Тема 6), слайд №30Каскадные таблицы стилей – CSS. (Тема 6), слайд №31Каскадные таблицы стилей – CSS. (Тема 6), слайд №32Каскадные таблицы стилей – CSS. (Тема 6), слайд №33Каскадные таблицы стилей – CSS. (Тема 6), слайд №34Каскадные таблицы стилей – CSS. (Тема 6), слайд №35Каскадные таблицы стилей – CSS. (Тема 6), слайд №36Каскадные таблицы стилей – CSS. (Тема 6), слайд №37Каскадные таблицы стилей – CSS. (Тема 6), слайд №38Каскадные таблицы стилей – CSS. (Тема 6), слайд №39Каскадные таблицы стилей – CSS. (Тема 6), слайд №40Каскадные таблицы стилей – CSS. (Тема 6), слайд №41Каскадные таблицы стилей – CSS. (Тема 6), слайд №42Каскадные таблицы стилей – CSS. (Тема 6), слайд №43Каскадные таблицы стилей – CSS. (Тема 6), слайд №44Каскадные таблицы стилей – CSS. (Тема 6), слайд №45Каскадные таблицы стилей – CSS. (Тема 6), слайд №46Каскадные таблицы стилей – CSS. (Тема 6), слайд №47Каскадные таблицы стилей – CSS. (Тема 6), слайд №48Каскадные таблицы стилей – CSS. (Тема 6), слайд №49Каскадные таблицы стилей – CSS. (Тема 6), слайд №50Каскадные таблицы стилей – CSS. (Тема 6), слайд №51Каскадные таблицы стилей – CSS. (Тема 6), слайд №52Каскадные таблицы стилей – CSS. (Тема 6), слайд №53Каскадные таблицы стилей – CSS. (Тема 6), слайд №54Каскадные таблицы стилей – CSS. (Тема 6), слайд №55Каскадные таблицы стилей – CSS. (Тема 6), слайд №56Каскадные таблицы стилей – CSS. (Тема 6), слайд №57Каскадные таблицы стилей – CSS. (Тема 6), слайд №58Каскадные таблицы стилей – CSS. (Тема 6), слайд №59
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Каскадные таблицы стилей – CSS. (Тема 6). Доклад-сообщение содержит 59 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Tema 6. Каскадные таблицы стилей – CSS
Описание слайда:
Tema 6. Каскадные таблицы стилей – CSS

Слайд 2


Определите Понятие: Стиль
Описание слайда:
Определите Понятие: Стиль

Слайд 3


СОДЕРЖАНИЕ Введение в CSS Синтаксис CSS Селекторы Типы селекторов Возможности использования CSS c HTML
Описание слайда:
СОДЕРЖАНИЕ Введение в CSS Синтаксис CSS Селекторы Типы селекторов Возможности использования CSS c HTML

Слайд 4


ПРИМЕР ДОКУМЕНТА БЕЗ ОПРЕДЕЛЕНИЯ СТИЛЕЙ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Comentarii</title> </head> <body> <div class="comment"> <div class="comment-avatar"></div> <div class="comment-author">Агафонов Агафон</div> <div class="comment-text"> У меня хорошее впечатление о товаре, но не очень хорошее о персонале компании. <div class="comment-date">16.09.2015</div> </div> <a href="#reply" title="Raspuns" class="comment-reply"></a> </div> </body></html>
Описание слайда:
ПРИМЕР ДОКУМЕНТА БЕЗ ОПРЕДЕЛЕНИЯ СТИЛЕЙ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Comentarii</title> </head> <body> <div class="comment"> <div class="comment-avatar"></div> <div class="comment-author">Агафонов Агафон</div> <div class="comment-text"> У меня хорошее впечатление о товаре, но не очень хорошее о персонале компании. <div class="comment-date">16.09.2015</div> </div> <a href="#reply" title="Raspuns" class="comment-reply"></a> </div> </body></html>

Слайд 5


РЕЗУЛЬТАТ
Описание слайда:
РЕЗУЛЬТАТ

Слайд 6


… РЕЗУЛЬТАТ С ПРИМЕНЕНИЕМ СТИЛЕЙ
Описание слайда:
… РЕЗУЛЬТАТ С ПРИМЕНЕНИЕМ СТИЛЕЙ

Слайд 7


ВВЕДЕНИЕ В CSS HTML-теги первоначально были предназначены для определения содержимого документа. Способ отображения / представления сайта было поручено браузерам, не используя никаких тегов форматирования В целях решения этой проблемы, консорциум W3C (World Wide Web Consortium), ответственный за технические стандартизации WEB, создал стили и добавил их к спецификациям HTML 4.0 Начиная с HTML 4.0, всё форматирование может быть удалено из HTML документа и хранить в отдельном CSS файле, то что позволяет пользователям легко изменить внешний вид всех страниц сайта, изменив содержание всего одного файла CSS (Cascading Style Sheets) -  каскадные таблицы стилей - это группы свойств, которые определяют внешний вид документа, написанного с использованием языка HTML и как отображать В настоящее время все браузеры поддерживают CSS
Описание слайда:
ВВЕДЕНИЕ В CSS HTML-теги первоначально были предназначены для определения содержимого документа. Способ отображения / представления сайта было поручено браузерам, не используя никаких тегов форматирования В целях решения этой проблемы, консорциум W3C (World Wide Web Consortium), ответственный за технические стандартизации WEB, создал стили и добавил их к спецификациям HTML 4.0 Начиная с HTML 4.0, всё форматирование может быть удалено из HTML документа и хранить в отдельном CSS файле, то что позволяет пользователям легко изменить внешний вид всех страниц сайта, изменив содержание всего одного файла CSS (Cascading Style Sheets) -  каскадные таблицы стилей - это группы свойств, которые определяют внешний вид документа, написанного с использованием языка HTML и как отображать В настоящее время все браузеры поддерживают CSS

Слайд 8


СЕМАНТИКА И СИНТАКСИС Когда браузер считывает таблицу стилей, он отформатирует страницу на основе данных таблицы стилей Стиль управляет цветом и шрифтами, используемые на странице, а также цветом и шрифтами, используемые для отображения элементов HTML Каждое правило CSS из таблицы стилей имеет две основные части — селектор и блок объявлений (одно или несколько): селектор { свойство1: значение1; свойство2: значение2; … свойствоN: значениеN; } где: Селектор - определяет, на какие части документа распространяется правило {…} - в них помещается блок объявлений Примечание: Все объявления CSS завершаются ";"
Описание слайда:
СЕМАНТИКА И СИНТАКСИС Когда браузер считывает таблицу стилей, он отформатирует страницу на основе данных таблицы стилей Стиль управляет цветом и шрифтами, используемые на странице, а также цветом и шрифтами, используемые для отображения элементов HTML Каждое правило CSS из таблицы стилей имеет две основные части — селектор и блок объявлений (одно или несколько): селектор { свойство1: значение1; свойство2: значение2; … свойствоN: значениеN; } где: Селектор - определяет, на какие части документа распространяется правило {…} - в них помещается блок объявлений Примечание: Все объявления CSS завершаются ";"

Слайд 9


ТИПЫ СВОЙСТВ В CSS существует огромное количество свойств. Их можно разбить на следующие группы: оформление текста; работа с размерами и отступами; позиционирование элементов; создание сеток; декоративные: цвета, фон, тени; другие.
Описание слайда:
ТИПЫ СВОЙСТВ В CSS существует огромное количество свойств. Их можно разбить на следующие группы: оформление текста; работа с размерами и отступами; позиционирование элементов; создание сеток; декоративные: цвета, фон, тени; другие.

Слайд 10


СЕЛЕКТОРЫ В CSS CSS селектор выбирает соответствующие HTML элементы из HTML документа, которым будут применены определенные стили Например, если необходимо, отобразить содержимое параграфов, определенных тегом <р> - выравненное по центру, с размером 14, полужирным фонтом и зеленого цвета, необходимо написать: p {      text-align: center; font-size: 14px; font-weight: bold; color: green; } Примечание: Внимание с использованием пробелов в объявлениях!!!
Описание слайда:
СЕЛЕКТОРЫ В CSS CSS селектор выбирает соответствующие HTML элементы из HTML документа, которым будут применены определенные стили Например, если необходимо, отобразить содержимое параграфов, определенных тегом <р> - выравненное по центру, с размером 14, полужирным фонтом и зеленого цвета, необходимо написать: p {      text-align: center; font-size: 14px; font-weight: bold; color: green; } Примечание: Внимание с использованием пробелов в объявлениях!!!

Слайд 11


ГРУППИРОВКА СЕЛЕКТОРОВ Если несколько селекторов определяют одни и те же стили, как например:
Описание слайда:
ГРУППИРОВКА СЕЛЕКТОРОВ Если несколько селекторов определяют одни и те же стили, как например:

Слайд 12


СПОСОБЫ ОПРЕДЕЛЕНИЯ СТИЛЕЙ Существуют 3 способа определения стилей: Внешние таблицы стилей Стили определяются во внешнем файле с расширением .css Внутренние таблицы стилей Стили определяются в теге „head” HTML-документа In-line-таблицы стилей Стили определяются непосредственно в HTML-элементе, используя атрибут „style”
Описание слайда:
СПОСОБЫ ОПРЕДЕЛЕНИЯ СТИЛЕЙ Существуют 3 способа определения стилей: Внешние таблицы стилей Стили определяются во внешнем файле с расширением .css Внутренние таблицы стилей Стили определяются в теге „head” HTML-документа In-line-таблицы стилей Стили определяются непосредственно в HTML-элементе, используя атрибут „style”

Слайд 13


ВНЕШНИЕ ТАБЛИЦЫ СТИЛЕЙ Внешняя таблица стилей требуется, когда стили применяются к нескольким страницам сайта (или ко всем) Изменится внешний вид всего сайта, изменив всего один файл Каждая страница должна содержать ссылку на файл с таблицами стилей, используя тег link, расположенный внутри тега head <link rel="stylesheet" type="text/css” href="file.css"> где: атрибут rel - определяет связь между двумя файлами (HTML и CSS). Может иметь несколько возможных значений, но в данном случае значение должно быть stylesheet атрибут  href - определяет URL- адресс для файла со стилями атрибут  type - определяет тип связанного файла или тип ресурса (расширение файла недостаточно) - в данном случае значение должно быть text/css Примечание: Внешняя таблица стилей может быть создана и в Notepad, но данный файл не содержит HTML-теги и имеет расширение .css
Описание слайда:
ВНЕШНИЕ ТАБЛИЦЫ СТИЛЕЙ Внешняя таблица стилей требуется, когда стили применяются к нескольким страницам сайта (или ко всем) Изменится внешний вид всего сайта, изменив всего один файл Каждая страница должна содержать ссылку на файл с таблицами стилей, используя тег link, расположенный внутри тега head <link rel="stylesheet" type="text/css” href="file.css"> где: атрибут rel - определяет связь между двумя файлами (HTML и CSS). Может иметь несколько возможных значений, но в данном случае значение должно быть stylesheet атрибут  href - определяет URL- адресс для файла со стилями атрибут  type - определяет тип связанного файла или тип ресурса (расширение файла недостаточно) - в данном случае значение должно быть text/css Примечание: Внешняя таблица стилей может быть создана и в Notepad, но данный файл не содержит HTML-теги и имеет расширение .css

Слайд 14


ПРИМЕР ИСПОЛЬЗОВАНИЯ ВНЕШНИХ СТИЛЕЙ Файл stil1.css body{ background:linear-gradient(to right, rgba(10,250,0,0), rgba(10,250,0,1)); padding-top:10px; padding-left:10px;} h1{ text-align:center; color:brown; } p{ text-align:left; font-size:14px; font-weight:bold; color:green; }
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ ВНЕШНИХ СТИЛЕЙ Файл stil1.css body{ background:linear-gradient(to right, rgba(10,250,0,0), rgba(10,250,0,1)); padding-top:10px; padding-left:10px;} h1{ text-align:center; color:brown; } p{ text-align:left; font-size:14px; font-weight:bold; color:green; }

Слайд 15


РЕЗУЛЬТАТ ПРИМЕРА
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА

Слайд 16


ВНУТРЕНИЕ ТАБЛИЦЫ СТИЛЕЙ Таблица стилей описана в самом документе Она располагаться между тегами <style> и </style>, которые, в свою очередь, располагаются в этом документе между тегами <head> и </head> Все правила этой таблицы действуют на протяжении данного документа Синтаксис: <style> Определение стилей </style>
Описание слайда:
ВНУТРЕНИЕ ТАБЛИЦЫ СТИЛЕЙ Таблица стилей описана в самом документе Она располагаться между тегами <style> и </style>, которые, в свою очередь, располагаются в этом документе между тегами <head> и </head> Все правила этой таблицы действуют на протяжении данного документа Синтаксис: <style> Определение стилей </style>

Слайд 17


ПРИМЕР ИСПОЛЬЗОВАНИЯ ВНУТРЕННИХ СТИЛЕЙ <!DOCTYPE html> <html> <head><title> Использование стилей </title> <style> body{ background:linear-gradient(to right, rgba(10,250,0,0), rgba(10,250,0,1)); padding-top:10px; padding-left:10px;} h1{ text-align:center; color:brown; } p{ text-align:left; font-size:14px; font-weight:bold; color:green; } </style> </head>
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ ВНУТРЕННИХ СТИЛЕЙ <!DOCTYPE html> <html> <head><title> Использование стилей </title> <style> body{ background:linear-gradient(to right, rgba(10,250,0,0), rgba(10,250,0,1)); padding-top:10px; padding-left:10px;} h1{ text-align:center; color:brown; } p{ text-align:left; font-size:14px; font-weight:bold; color:green; } </style> </head>

Слайд 18


РЕЗУЛЬТАТ ПРИМЕРА
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА

Слайд 19


IN-LINE ТАБЛИЦЫ СТИЛЕЙ Не рекомендуется преувеличивать в использовании этого метода вставки стилей!!! Этот метод напоминает использование атрибутов в HTML-тегах, когда содержание определяется вместе с презентацией Чтобы определить стили в in-line, используется атрибут style внутри соответствующего тега Атрибут style поддерживается всеми HTML-тегами Ex: <p style="color: red;">Salut!</p> Примечание: Значения атрибута style включены между кавычками!!! Будьте внимательны в использовании кавычек!!!
Описание слайда:
IN-LINE ТАБЛИЦЫ СТИЛЕЙ Не рекомендуется преувеличивать в использовании этого метода вставки стилей!!! Этот метод напоминает использование атрибутов в HTML-тегах, когда содержание определяется вместе с презентацией Чтобы определить стили в in-line, используется атрибут style внутри соответствующего тега Атрибут style поддерживается всеми HTML-тегами Ex: <p style="color: red;">Salut!</p> Примечание: Значения атрибута style включены между кавычками!!! Будьте внимательны в использовании кавычек!!!

Слайд 20


ПРИМЕР ОПРЕДЕЛЕНИЯ IN-LINE СТИЛЕЙ <!DOCTYPE html> <html> <head> < title>Использование стилей</title> </head> <body style="background:linear-gradient(to right, rgba(10,250,0,0), rgba(10,250,0,1)); padding-top:10px;padding-left:10px;"> <h1 style="text-align:center;color:brown;"> h1>Кишинёв — столица и крупнейший город Молдавии </h1> <p style="text-align:left;font-size:14px;font-weight:bold;color:green;">p>Изначально топонимы с элементом кишенёв встречаются … а тюркское происхождение.</p> <br /> Другие версии связывают название с венгерским Kisjenо — «маленький Йено». <p style="text-align:left;font-size:14px;font-weight:bold;color:green;">p>После распада Советского Союза, наметилась тенденция к изменению названий населённых пунктов Молдавии, в частности, началось активное внедрение слова «Кишинэу» в русский язык.</p> </body> </html>
Описание слайда:
ПРИМЕР ОПРЕДЕЛЕНИЯ IN-LINE СТИЛЕЙ <!DOCTYPE html> <html> <head> < title>Использование стилей</title> </head> <body style="background:linear-gradient(to right, rgba(10,250,0,0), rgba(10,250,0,1)); padding-top:10px;padding-left:10px;"> <h1 style="text-align:center;color:brown;"> h1>Кишинёв — столица и крупнейший город Молдавии </h1> <p style="text-align:left;font-size:14px;font-weight:bold;color:green;">p>Изначально топонимы с элементом кишенёв встречаются … а тюркское происхождение.</p> <br /> Другие версии связывают название с венгерским Kisjenо — «маленький Йено». <p style="text-align:left;font-size:14px;font-weight:bold;color:green;">p>После распада Советского Союза, наметилась тенденция к изменению названий населённых пунктов Молдавии, в частности, началось активное внедрение слова «Кишинэу» в русский язык.</p> </body> </html>

Слайд 21


РЕЗУЛЬТАТ ПРИМЕРА
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА

Слайд 22


МНОЖЕСТВЕННЫЕ ТАБЛИЦЫ СТИЛЕЙ <!DOCTYPE html> <html> <head> <title>Использование стилей</title> <link rel="stylesheet" type="text/css" href="stiluri/stil1.css"> </head> <body> <h1>Кишинёв — столица и крупнейший город Молдавии</h1> <p style="color:blue;">Изначально топонимы с элементом кишенёв встречаются … а тюркское происхождение.</p> <br /> Другие версии связывают название с венгерским Kisjenо — «маленький Йено». <p>После распада Советского Союза,…, началось активное внедрение слова «Кишинэу» в русский язык.</p> </body> </html>
Описание слайда:
МНОЖЕСТВЕННЫЕ ТАБЛИЦЫ СТИЛЕЙ <!DOCTYPE html> <html> <head> <title>Использование стилей</title> <link rel="stylesheet" type="text/css" href="stiluri/stil1.css"> </head> <body> <h1>Кишинёв — столица и крупнейший город Молдавии</h1> <p style="color:blue;">Изначально топонимы с элементом кишенёв встречаются … а тюркское происхождение.</p> <br /> Другие версии связывают название с венгерским Kisjenо — «маленький Йено». <p>После распада Советского Союза,…, началось активное внедрение слова «Кишинэу» в русский язык.</p> </body> </html>

Слайд 23


РЕЗУЛЬТАТ ПРИМЕРА
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА

Слайд 24


КАСКАДНОЕ ПРИМЕНЕНИЕ СТИЛЕЙ Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты вводятся правила приоритета Порядок применения каскадных стилей: Наиболее низким приоритетом обладает стиль браузера Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу Еще более высоким приоритетом обладают стили, заданные во внутренних таблицах стилей Высшем приоритетом обладают стили объявленные непосредственно в теге данного элемента, посредством атрибута style этого тега Более высоким приоритетом имеют декларации со словом "!important“ Тогда когда приоритеты те же для одного селектора, применяются последние определенные
Описание слайда:
КАСКАДНОЕ ПРИМЕНЕНИЕ СТИЛЕЙ Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты вводятся правила приоритета Порядок применения каскадных стилей: Наиболее низким приоритетом обладает стиль браузера Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу Еще более высоким приоритетом обладают стили, заданные во внутренних таблицах стилей Высшем приоритетом обладают стили объявленные непосредственно в теге данного элемента, посредством атрибута style этого тега Более высоким приоритетом имеют декларации со словом "!important“ Тогда когда приоритеты те же для одного селектора, применяются последние определенные

Слайд 25


СПЕЦИФИЧНОСТЬ ПРИМЕНЕНИЯ СТИЛЕЙ Когда для одного и того же элемента есть несколько CSS-правил с одинаковыми свойствами, браузер использует понятия приоритетов и специфичности, чтобы выбрать значение свойства из нескольких возможных Дополнительно анализируется специфичность селекторов: Для селектора типа идентификатор (#id) считается [1:0:0] Для селектора типа класс или псевдокласс (.ClasaMea :pseudoClasa)— [0:1:0] Для каждого селектора типа-тег (div a …) — [0:0:1] В подсчете специфичности используется следующее выражение [1:0:0] > [0:x:y] > [0:0:x]
Описание слайда:
СПЕЦИФИЧНОСТЬ ПРИМЕНЕНИЯ СТИЛЕЙ Когда для одного и того же элемента есть несколько CSS-правил с одинаковыми свойствами, браузер использует понятия приоритетов и специфичности, чтобы выбрать значение свойства из нескольких возможных Дополнительно анализируется специфичность селекторов: Для селектора типа идентификатор (#id) считается [1:0:0] Для селектора типа класс или псевдокласс (.ClasaMea :pseudoClasa)— [0:1:0] Для каждого селектора типа-тег (div a …) — [0:0:1] В подсчете специфичности используется следующее выражение [1:0:0] > [0:x:y] > [0:0:x]

Слайд 26


ЗАДАНИЕ: какой из следующих стилей будет применен тексту? Для следующей последовательности <body> <div id="floor"> <span class=“content">Content</span> </div> </body> И данных стилей: span { background-color:#27ae60; /* Зеленный */ } div span { background-color:#2980b9; /* Синий */ } #floor .content { background-color: #34495e; /* Темно-серый */ } .content { background-color: #8e44ad; /* Фиолетовый */ } #floor span { background-color: #c0392b; /* Красный */ } div .content { background-color: #e67e22; /* Оранжевый */ }
Описание слайда:
ЗАДАНИЕ: какой из следующих стилей будет применен тексту? Для следующей последовательности <body> <div id="floor"> <span class=“content">Content</span> </div> </body> И данных стилей: span { background-color:#27ae60; /* Зеленный */ } div span { background-color:#2980b9; /* Синий */ } #floor .content { background-color: #34495e; /* Темно-серый */ } .content { background-color: #8e44ad; /* Фиолетовый */ } #floor span { background-color: #c0392b; /* Красный */ } div .content { background-color: #e67e22; /* Оранжевый */ }

Слайд 27


ВЫВОДЫ ДЛЯ ПРИОРИТЕТОВ Когда к одному элементу применяются несколько CSS-правил, то приоритетность этих правил определяется по их селектору Если селекторы однотипные, то тогда более приоритетным является CSS-правило, которое расположено ниже в коде Одному и тому же элементу можно назначать несколько классов. Благодаря механизму каскадности, CSS-правила этих классов будут комбинироваться, а при конфликте свойств будет применяться механизм приоритетов
Описание слайда:
ВЫВОДЫ ДЛЯ ПРИОРИТЕТОВ Когда к одному элементу применяются несколько CSS-правил, то приоритетность этих правил определяется по их селектору Если селекторы однотипные, то тогда более приоритетным является CSS-правило, которое расположено ниже в коде Одному и тому же элементу можно назначать несколько классов. Благодаря механизму каскадности, CSS-правила этих классов будут комбинироваться, а при конфликте свойств будет применяться механизм приоритетов

Слайд 28


ИЕРАРХИЧЕСКОЕ ДЕРЕВО Структура HTML-документа представляет собой иерархическое дерево Это означает, что у каждого элемента (кроме корневого) есть только один родитель, т.е. элемент, внутри которого он располагается. У корневого раздела родитель отсутствует. Рассмотрим простейшую страницу: <html> <head></head> <body> <p>Текст документа</p> <p class="text">Выделенная <span>строка</span> </p> </body> </html> Это иерархическое дерево схематически отображает структуру вложенности элементов Иерархическая структура документа определяет основы концепции наследования
Описание слайда:
ИЕРАРХИЧЕСКОЕ ДЕРЕВО Структура HTML-документа представляет собой иерархическое дерево Это означает, что у каждого элемента (кроме корневого) есть только один родитель, т.е. элемент, внутри которого он располагается. У корневого раздела родитель отсутствует. Рассмотрим простейшую страницу: <html> <head></head> <body> <p>Текст документа</p> <p class="text">Выделенная <span>строка</span> </p> </body> </html> Это иерархическое дерево схематически отображает структуру вложенности элементов Иерархическая структура документа определяет основы концепции наследования

Слайд 29


БОЛЕЕ СЛОЖНОЕ ИЕРАРХИЧЕСКОЕ ДЕРЕВО <!DOCTYPE html> <html> <head><title> Incercare</title></head> <body> <div><h1>Titlu1</h1><p>Tra-la-la-la</p></div> <div class="empty"></div> <ul> <li class="first">A</li> <li>B</li> <li>C</li> </ul> </body> </html>
Описание слайда:
БОЛЕЕ СЛОЖНОЕ ИЕРАРХИЧЕСКОЕ ДЕРЕВО <!DOCTYPE html> <html> <head><title> Incercare</title></head> <body> <div><h1>Titlu1</h1><p>Tra-la-la-la</p></div> <div class="empty"></div> <ul> <li class="first">A</li> <li>B</li> <li>C</li> </ul> </body> </html>

Слайд 30


НАСЛЕДОВАНИЕ Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к body, чтобы все элементы внутри имели те же свойства Наследование позволяет сократить размер таблицы стилей, но если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится сложнее Чаще всего наследуются свойствами текста: font-size, font-family, font-style, font-weight, color, text-align,text-transform, text-indent, line-height, letter-spacing, word-spacing,white-space, direction
Описание слайда:
НАСЛЕДОВАНИЕ Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к body, чтобы все элементы внутри имели те же свойства Наследование позволяет сократить размер таблицы стилей, но если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится сложнее Чаще всего наследуются свойствами текста: font-size, font-family, font-style, font-weight, color, text-align,text-transform, text-indent, line-height, letter-spacing, word-spacing,white-space, direction

Слайд 31


НЕНАСЛЕДУЕМЫЕ СВОЙСТВА Все остальные относятся к ненаследуемым Это параметры позиционирования, размеров, отступов, фона, рамок и т. д. А именно: background, border, padding, margin, width, height, position и др
Описание слайда:
НЕНАСЛЕДУЕМЫЕ СВОЙСТВА Все остальные относятся к ненаследуемым Это параметры позиционирования, размеров, отступов, фона, рамок и т. д. А именно: background, border, padding, margin, width, height, position и др

Слайд 32


ДОЧЕРНИЕ СЕЛЕКТОРЫ Потомком называются любые элементы, расположенные внутри родительского элемента. А дочерними элементами называются ближайшие потомки Пример: <ul> <li><span>...</span></li> <li><span>...</span></li> </ul> По отношению к <ul> , <li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы Контекстные селекторы влияют на всех потомков, что не всегда удобно. Иногда необходимо задать стили только для дочерних элементов. Особенно это полезно при работе с многоуровневыми списками Для этого существует дочерний селектор, в котором используется символ > Например: ul > li или ul > li > span
Описание слайда:
ДОЧЕРНИЕ СЕЛЕКТОРЫ Потомком называются любые элементы, расположенные внутри родительского элемента. А дочерними элементами называются ближайшие потомки Пример: <ul> <li><span>...</span></li> <li><span>...</span></li> </ul> По отношению к <ul> , <li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы Контекстные селекторы влияют на всех потомков, что не всегда удобно. Иногда необходимо задать стили только для дочерних элементов. Особенно это полезно при работе с многоуровневыми списками Для этого существует дочерний селектор, в котором используется символ > Например: ul > li или ul > li > span

Слайд 33


КОНТЕКСТНЫЕ СЕЛЕКТОРЫ Селектор может состоять из нескольких частей, разделённых пробелом, например: p strong { ... } - выбрать все теги strong внутри тегов p ul .hit { ... } - выбрать все элементы с классом hit внутри тегов ul .footer .menu a { ... } - выбрать все ссылки внутри элементов с классом .menu, которые лежат внутри элементов с классом .footer Такие селекторы называют контекстными или вложенными. Их используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент Например, селектор .menu a сработает для ссылки a только в том случае, если она расположена внутри элемента с классом  .footer Читать их проще всего справа налево: Таким образом, можно задавать элементам различные стили в зависимости от их контекста
Описание слайда:
КОНТЕКСТНЫЕ СЕЛЕКТОРЫ Селектор может состоять из нескольких частей, разделённых пробелом, например: p strong { ... } - выбрать все теги strong внутри тегов p ul .hit { ... } - выбрать все элементы с классом hit внутри тегов ul .footer .menu a { ... } - выбрать все ссылки внутри элементов с классом .menu, которые лежат внутри элементов с классом .footer Такие селекторы называют контекстными или вложенными. Их используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент Например, селектор .menu a сработает для ссылки a только в том случае, если она расположена внутри элемента с классом  .footer Читать их проще всего справа налево: Таким образом, можно задавать элементам различные стили в зависимости от их контекста

Слайд 34


СТИЛИ ДЛЯ ФОНА CSS-свойства для фона используются для определения эффектов фона какого-то HTML-элемента. Примеры CSS свойств используемые для спецификации эффектов фона: background-color background-image background-repeat background-attachment background-position
Описание слайда:
СТИЛИ ДЛЯ ФОНА CSS-свойства для фона используются для определения эффектов фона какого-то HTML-элемента. Примеры CSS свойств используемые для спецификации эффектов фона: background-color background-image background-repeat background-attachment background-position

Слайд 35


СВОЙСТВО „background-color” Это свойство используется для определения цвета фона HTML-элемента Цвет фона определяется 3-мя известными способами: Спецификация названии цвета (“red”, “blue” etc.) http://www.w3schools.com/cssref/css_colors.asp Спецификация цвета используя шестнадцатеричный код ("#ffaa22") Спецификация цвета в формате RGB ("rgb(255,255,0)") Прим: Цвета могут быть определены и в формате RGBA – поддерживается IE9+, Firefox 3+, Chrome, Safari, Opera 10+. Значения цветов RGBA представляют расширение RGB значений с альфа-каналом - который определяет прозрачность объекта. Значение для RGBA цвета определяется: rgba (red, green, blue, alfa). Параметр alfa это число от 0,0 (совершенно прозрачный) и 1,0 (полностью непрозрачный) Примечание: Посмотрите и цвета в формате HSL и HSLA
Описание слайда:
СВОЙСТВО „background-color” Это свойство используется для определения цвета фона HTML-элемента Цвет фона определяется 3-мя известными способами: Спецификация названии цвета (“red”, “blue” etc.) http://www.w3schools.com/cssref/css_colors.asp Спецификация цвета используя шестнадцатеричный код ("#ffaa22") Спецификация цвета в формате RGB ("rgb(255,255,0)") Прим: Цвета могут быть определены и в формате RGBA – поддерживается IE9+, Firefox 3+, Chrome, Safari, Opera 10+. Значения цветов RGBA представляют расширение RGB значений с альфа-каналом - который определяет прозрачность объекта. Значение для RGBA цвета определяется: rgba (red, green, blue, alfa). Параметр alfa это число от 0,0 (совершенно прозрачный) и 1,0 (полностью непрозрачный) Примечание: Посмотрите и цвета в формате HSL и HSLA

Слайд 36


ПРИМЕР „background-color” body{ background-color:rgba(10,250,0,0.2); padding-top:10px; padding-left:10px;} h1{ background-color:pink; text-align:center; color:brown; } p{ background-color:#CC66aa; text-align:left; font-size:14px; font-weight:bold; color:dark-green; }
Описание слайда:
ПРИМЕР „background-color” body{ background-color:rgba(10,250,0,0.2); padding-top:10px; padding-left:10px;} h1{ background-color:pink; text-align:center; color:brown; } p{ background-color:#CC66aa; text-align:left; font-size:14px; font-weight:bold; color:dark-green; }

Слайд 37


РЕЗУЛЬТАТ ПРИМЕРА
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА

Слайд 38


СВОЙСТВО „background-image” Используется, чтобы указать фоновое изображение По умолчанию фоновое изображение, повторяется и охватывают всю страницу Пример: background-image:url("imagini/fluturi.png");
Описание слайда:
СВОЙСТВО „background-image” Используется, чтобы указать фоновое изображение По умолчанию фоновое изображение, повторяется и охватывают всю страницу Пример: background-image:url("imagini/fluturi.png");

Слайд 39


СВОЙСТВО „background-repeat” По умолчанию фоновое изображение повторяется и по горизонтали и по вертикали Свойство „background-repeat” определяет повтор фонового изображения по горизонтали либо по вертикали Свойство „background-repeat” может определить тот факт что изображение фиксировано, и не повторяется Пример 1: background-repeat: repeat-x; Пример 2: background-repeat: repeat-y; Пример 3: background-repeat: no-repeat;
Описание слайда:
СВОЙСТВО „background-repeat” По умолчанию фоновое изображение повторяется и по горизонтали и по вертикали Свойство „background-repeat” определяет повтор фонового изображения по горизонтали либо по вертикали Свойство „background-repeat” может определить тот факт что изображение фиксировано, и не повторяется Пример 1: background-repeat: repeat-x; Пример 2: background-repeat: repeat-y; Пример 3: background-repeat: no-repeat;

Слайд 40


Каскадные таблицы стилей – CSS. (Тема 6), слайд №40
Описание слайда:

Слайд 41


Пример no-repeat
Описание слайда:
Пример no-repeat

Слайд 42


CВОЙСТВО BACKGROUND-POSITION Cвойство background-position управляет расположением фонового изображения. Значение свойства состоит из двух частей, разделенных пробелом: x y x задаёт расположение по горизонтали, а y по вертикали В качестве значения x можно использовать ключевые слова left, center, right, значения в процентах и в пикселях В качестве значения y можно использовать ключевые слова top, center, bottom, значения в процентах и в пикселях
Описание слайда:
CВОЙСТВО BACKGROUND-POSITION Cвойство background-position управляет расположением фонового изображения. Значение свойства состоит из двух частей, разделенных пробелом: x y x задаёт расположение по горизонтали, а y по вертикали В качестве значения x можно использовать ключевые слова left, center, right, значения в процентах и в пикселях В качестве значения y можно использовать ключевые слова top, center, bottom, значения в процентах и в пикселях

Слайд 43


СВОЙСТВО „background-position” ПРИМЕР: {background-image:url("../imagini/strop.png"); background-repeat:no-repeat; background-position:top right;} Другие примеры background-position: 50% 50%; background-position: right bottom; background-position: 50px 100px; background-position: 0 100%; background-position: left bottom;
Описание слайда:
СВОЙСТВО „background-position” ПРИМЕР: {background-image:url("../imagini/strop.png"); background-repeat:no-repeat; background-position:top right;} Другие примеры background-position: 50% 50%; background-position: right bottom; background-position: 50px 100px; background-position: 0 100%; background-position: left bottom;

Слайд 44


СОКРАЩЕННАЯ ФОРМА СВОЙСТВА „BACKGROUND” Чтобы указать несколько свойств фона может сократить объявление, используя одно свойство - «background» Для предыдущих примерах можно написать: background:#CCCCFF url("../imagini/strop.png") no-repeat right top;
Описание слайда:
СОКРАЩЕННАЯ ФОРМА СВОЙСТВА „BACKGROUND” Чтобы указать несколько свойств фона может сократить объявление, используя одно свойство - «background» Для предыдущих примерах можно написать: background:#CCCCFF url("../imagini/strop.png") no-repeat right top;

Слайд 45


СВОЙСТВО BACKGROUND-ATTACHMENT С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокручивании. Значение свойства: scroll — фон прокручивается вместе с содержимым. Это значение по умолчанию. fixed — фон не прокручивается, зафиксирован на одном месте.
Описание слайда:
СВОЙСТВО BACKGROUND-ATTACHMENT С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокручивании. Значение свойства: scroll — фон прокручивается вместе с содержимым. Это значение по умолчанию. fixed — фон не прокручивается, зафиксирован на одном месте.

Слайд 46


СОКРАЩЕННАЯ ФОРМА СВОЙСТВА „BACKGROUND” При использовании сокращенной формы свойства background необходимо соблюдать следующий порядок значений свойств: background-color background-image background-repeat background-attachment background-position Пример: background:#CCCCFF url("imagini/strop.png") no-repeat fixed right top;
Описание слайда:
СОКРАЩЕННАЯ ФОРМА СВОЙСТВА „BACKGROUND” При использовании сокращенной формы свойства background необходимо соблюдать следующий порядок значений свойств: background-color background-image background-repeat background-attachment background-position Пример: background:#CCCCFF url("imagini/strop.png") no-repeat fixed right top;

Слайд 47


ПРИМЕРЫ Если какой-то компонент не указан, то берется значение по умолчанию. Несколько примеров: background: #e74c3c; - просто задан цвет фона background: url("img.png") no-repeat; - задано не повторяющееся фоновое изображение, а также по умолчанию прозрачный цвет фона, расположение в левом верхнем углу background: url("img.png") 10px 20px- задано фоновое изображение и его расположение, а также по умолчанию прозрачный цвет фона и режим повторения во все стороны
Описание слайда:
ПРИМЕРЫ Если какой-то компонент не указан, то берется значение по умолчанию. Несколько примеров: background: #e74c3c; - просто задан цвет фона background: url("img.png") no-repeat; - задано не повторяющееся фоновое изображение, а также по умолчанию прозрачный цвет фона, расположение в левом верхнем углу background: url("img.png") 10px 20px- задано фоновое изображение и его расположение, а также по умолчанию прозрачный цвет фона и режим повторения во все стороны

Слайд 48


НЕСКОЛЬКО ФОНОВЫХ ИЗОБРАЖЕНИЙ Можно накладывать фоны друг на друга с помощью вложенных элементов, а можно использовать множественные фоновые изображения В свойстве background перечисляются картинки через запятую Пример: background: url("img1.png") no-repeat 0 0, url("img2.png") repeat-x 50% 50%, url("img3.png");
Описание слайда:
НЕСКОЛЬКО ФОНОВЫХ ИЗОБРАЖЕНИЙ Можно накладывать фоны друг на друга с помощью вложенных элементов, а можно использовать множественные фоновые изображения В свойстве background перечисляются картинки через запятую Пример: background: url("img1.png") no-repeat 0 0, url("img2.png") repeat-x 50% 50%, url("img3.png");

Слайд 49


СТИЛИ ДЛЯ ФОРМАТИРОВАНИЯ ТЕКСТА Цвет текста определяется при помощи свойства „color” для любого HTML-элемента Текст выравнивается при помощи свойства „text-align” Текст может быть украшен или нет (вырезанный, подчеркнутый или украшенный линией сверху используя свойство „text-decoration” Текст может быть преобразован из нижнего регистра в верхний и наоборот, используя свойство „text-transform” Текст может быть иметь отступ - свойство „text-indent” Другие свойства: direction, letter-spacing, line-height, text-shadow, vertical-align, word-spacing
Описание слайда:
СТИЛИ ДЛЯ ФОРМАТИРОВАНИЯ ТЕКСТА Цвет текста определяется при помощи свойства „color” для любого HTML-элемента Текст выравнивается при помощи свойства „text-align” Текст может быть украшен или нет (вырезанный, подчеркнутый или украшенный линией сверху используя свойство „text-decoration” Текст может быть преобразован из нижнего регистра в верхний и наоборот, используя свойство „text-transform” Текст может быть иметь отступ - свойство „text-indent” Другие свойства: direction, letter-spacing, line-height, text-shadow, vertical-align, word-spacing

Слайд 50


ПРИМЕР ИСПОЛЬЗОВАНИЯ СВОЙСТВ ДЛЯ ФОРМАТИРОВАНИЯ ТЕКСТА p{color:purple; text-align:left; text-transform: uppercase; font-size:14px; text-indent: 50px; letter-spacing: 4px; line-height: 90%; text-shadow: 1px 1px #222222;}
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ СВОЙСТВ ДЛЯ ФОРМАТИРОВАНИЯ ТЕКСТА p{color:purple; text-align:left; text-transform: uppercase; font-size:14px; text-indent: 50px; letter-spacing: 4px; line-height: 90%; text-shadow: 1px 1px #222222;}

Слайд 51


СТИЛИ ДЛЯ ФОНТА Представляет свойства используемые для определения семейства шрифтов, размера шрифта и ширины текста Могут использоваться группы семейств шрифтов (generic family) и семейств шрифтов (font family) Прим: В UI шрифты из группы Sans-serif являются самыми рекомендуемыми
Описание слайда:
СТИЛИ ДЛЯ ФОНТА Представляет свойства используемые для определения семейства шрифтов, размера шрифта и ширины текста Могут использоваться группы семейств шрифтов (generic family) и семейств шрифтов (font family) Прим: В UI шрифты из группы Sans-serif являются самыми рекомендуемыми

Слайд 52


ПРИМЕР ИСПОЛЬЗОВАНИЯ СВОЙСТВА font-family <body> <h1>Кишинёв — столица и крупнейший город Молдавии</h1> <p style="font-family: Times New Roman, Times, serif;">Изначально топонимы… имеет не романское, а тюркское происхождение.</p> <br /> Другие версии связывают название с венгерским Kisjenо — «маленький Йено». <p style="font-family: Arial, Helvetica, sans-serif;">После …язык.</p> </body>
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ СВОЙСТВА font-family <body> <h1>Кишинёв — столица и крупнейший город Молдавии</h1> <p style="font-family: Times New Roman, Times, serif;">Изначально топонимы… имеет не романское, а тюркское происхождение.</p> <br /> Другие версии связывают название с венгерским Kisjenо — «маленький Йено». <p style="font-family: Arial, Helvetica, sans-serif;">После …язык.</p> </body>

Слайд 53


ПРИМЕР ИСПОЛЬЗОВАНИЯ СВОЙСТВА font-style Данное свойство имеет 3 возможных значений: normal – текст в нормальном формате italic – наклоненный текст oblique – тоже наклоненный текст Пример: <p style="font-style: italic;">Изначально топонимы… что название города имеет не романское, а тюркское происхождение.</p> <br /> Другие версии связывают название с венгерским Kisjenо — «маленький Йено». <p style="font-style: oblique;">После распада … началось активное внедрение слова «Кишинэу» в русский язык.</p>
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ СВОЙСТВА font-style Данное свойство имеет 3 возможных значений: normal – текст в нормальном формате italic – наклоненный текст oblique – тоже наклоненный текст Пример: <p style="font-style: italic;">Изначально топонимы… что название города имеет не романское, а тюркское происхождение.</p> <br /> Другие версии связывают название с венгерским Kisjenо — «маленький Йено». <p style="font-style: oblique;">После распада … началось активное внедрение слова «Кишинэу» в русский язык.</p>

Слайд 54


РЕЗУЛЬТАТ ПРИМЕРА СВОЙСТВА font-style
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА СВОЙСТВА font-style

Слайд 55


ПРИМЕР ИСПОЛЬЗОВАНИЯ СВОЙСТВА font-size Используется для определения размера текста Размер текста задается используя абсолютные и относительные значения: Абсолютные значения: Устанавливает текст определенного размера Не позволяют пользователю изменять размер текста в разных браузерах (не удобно для доступности) Фактический размер полезен, когда физический размер выхода известен Относительные значения: Устанавливает размер текста по отношению к другим элементам контекста Позволяет пользователю изменять размер текста в браузерах Прим: Рекомендуется задавать размеры шрифтов при помощи относительных значений
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ СВОЙСТВА font-size Используется для определения размера текста Размер текста задается используя абсолютные и относительные значения: Абсолютные значения: Устанавливает текст определенного размера Не позволяют пользователю изменять размер текста в разных браузерах (не удобно для доступности) Фактический размер полезен, когда физический размер выхода известен Относительные значения: Устанавливает размер текста по отношению к другим элементам контекста Позволяет пользователю изменять размер текста в браузерах Прим: Рекомендуется задавать размеры шрифтов при помощи относительных значений

Слайд 56


ПРИМЕР ИСПОЛЬЗОВАНИЯ СВОЙСТВА font-size <h1 style="font-size:30px;">Кишинёв — столица и крупнейший город Молдавии</h1> <p style="font-size:20px;">Изначально … а тюркское происхождение.</p> <br /> Другие версии связывают название с венгерским Kisjenо — «маленький Йено». <p style="font-size:12px;">После распада Советского Союза</p>
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ СВОЙСТВА font-size <h1 style="font-size:30px;">Кишинёв — столица и крупнейший город Молдавии</h1> <p style="font-size:20px;">Изначально … а тюркское происхождение.</p> <br /> Другие версии связывают название с венгерским Kisjenо — «маленький Йено». <p style="font-size:12px;">После распада Советского Союза</p>

Слайд 57


ПРИМЕР ИСПОЛЬЗОВАНИЯ font-weight Может иметь одно из 3-х значений: normal, lighter, bold <p style="font-weight: lighter;">Изначально …происхождение.</p> <br /> Другие версии связывают название с венгерским Kisjenо — «маленький Йено». <p style="font-weight: bold;">После распада … в русский язык.</p>
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ font-weight Может иметь одно из 3-х значений: normal, lighter, bold <p style="font-weight: lighter;">Изначально …происхождение.</p> <br /> Другие версии связывают название с венгерским Kisjenо — «маленький Йено». <p style="font-weight: bold;">После распада … в русский язык.</p>

Слайд 58


СВОЙСТВО FONT Точно так же, как свойства "background” и свойство "font" можно использовать в сокращенной форме Необходимо соблюдать следующий порядок использования: font-style font-variant font-weight font-size/line-height font-family Пример: <p style="font: italic small-caps bold 14px Georgia, serif;">...</p>
Описание слайда:
СВОЙСТВО FONT Точно так же, как свойства "background” и свойство "font" можно использовать в сокращенной форме Необходимо соблюдать следующий порядок использования: font-style font-variant font-weight font-size/line-height font-family Пример: <p style="font: italic small-caps bold 14px Georgia, serif;">...</p>

Слайд 59


!!! 3 новых понятий 2 вопроса 1 предложение для следующей темы
Описание слайда:
!!! 3 новых понятий 2 вопроса 1 предложение для следующей темы

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию