421115
столько раз учителя, ученики и родители
посетили официальный сайт ООО «Инфоурок»
за прошедшие 24 часа
Добавить материал и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015

Скидка 0%

112 курсов профессиональной переподготовки от 3540 руб.

268 курсов повышения квалификации от 840 руб.

МОСКОВСКИЕ ДОКУМЕНТЫ ДЛЯ АТТЕСТАЦИИ

Лицензия на осуществление образовательной деятельности №038767 выдана 26 сентября 2017 г. Департаменотом образования города Москвы

Инфоурок Информатика ПрезентацииУрок 7. HTML использование стилей

Приглашаем Вас в наш детский летний "ИНФОЛАГЕРЬ" (для детей от 8 до 17 лет), который начинает свою работу этим летом в Беларуси!

‣ Мы снизили стоимость путёвок на первую смену до 24.900 рос.руб.!;
‣ Доступна оплата в рассрочку без переплат. Для бронирования места достаточно оплатить всего 50% стоимости.

Двухместные номера, 6-разовое питание, авторская анимационная программа!

Подробнее об "Инфолагере"

Позвоните нам: +7 (985) 507-73-73 (Россия), +375 (29) 884-91-48 (Беларусь)
Или напишите и мы ответим на все Ваши вопросы: infolager@infourok.ru


Урок 7. HTML использование стилей

библиотека
материалов
Использование стилей В создании презентации использованы контент сайта puzzle...
Атрибут style Атрибут style используется для стилизации элементов непосредств...
Посмотрите на цвета и стили  Этот текст написан красным цветов с помощью ш...
Задний фон Задний фон элемента задается с помощью свойства background-color,...
Цвет текста Цвет текста элемента задается с помощью свойства color. Благодаря...
Цвет текста Наиболее простым способом задать цвет в CSS является указание его...
Цвет текста Вот как это можно сделать: color: rgb(80%, 40%, 0%); Можно также...
Цвет текста color: rgb(204, 102, 0); Определение цвета через шестнадцатеричны...
Шрифт Шрифты могут очень сильно влиять на дизайн страниц. В CSS они разделены...
Размер Размер шрифта очень сильно влияет на дизайн веб-страницы и читабельнос...
Выравнивание текста Выравнивание текста в HTML документе задаётся с помощью с...

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

1 слайд Использование стилей В создании презентации использованы контент сайта puzzle
Описание слайда:

Использование стилей В создании презентации использованы контент сайта puzzleweb.ru

2 слайд Атрибут style Атрибут style используется для стилизации элементов непосредств
Описание слайда:

Атрибут style Атрибут style используется для стилизации элементов непосредственно в HTML коде. Цель атрибута style заключается в предоставлении простого способа изменения внешнего вида практически любого HTML элемента. Примечание: тут мы рассматриваем атрибут style для формирования общего представления об использовании CSS стилей для оформления веб-страниц. Код примера познакомит вас с новым способом форматирования документа:

3 слайд Посмотрите на цвета и стили  Этот текст написан красным цветов с помощью ш
Описание слайда:

<html> <body style="background-color:Gray;"> <h1>Посмотрите на цвета и стили</h1> <p style="font-family:verdana;color:red;"> Этот текст написан красным цветов с помощью шрифта Verdana. </p> <p style="font-family:times;color:green;"> Этот текст написан зеленым цветом с помощью шрифта Times. </p> <p style="font-size:30px;">Этот текст имеет размер 30 пикселей.</p> </body> </html>

4 слайд Задний фон Задний фон элемента задается с помощью свойства background-color,
Описание слайда:

Задний фон Задний фон элемента задается с помощью свойства background-color, которое в качестве значения может принимать любое доступное значение цвета (про различные значения цветов смотрите ниже), после свойства обязательно должно идти двоеточие и значение, после значения обязательно ставится точка с запятой, эти правила распространяются на все свойства атрибута style. Если нужно задать несколько свойств стиля для одного элемента, то каждое последующее свойство записывается после ";" предыдущего свойства.

5 слайд Цвет текста Цвет текста элемента задается с помощью свойства color. Благодаря
Описание слайда:

Цвет текста Цвет текста элемента задается с помощью свойства color. Благодаря этому свойству можно задать любой цвет для текстового содержимого. В качестве значения свойство color может принимать названия цветов, задание цвета посредством процентного соотношения красного, зеленого и синего или использовать шестнадцатеричные коды. Определение цвета по названию

6 слайд Цвет текста Наиболее простым способом задать цвет в CSS является указание его
Описание слайда:

Цвет текста Наиболее простым способом задать цвет в CSS является указание его названия. Предположим, вы хотите задать серебристый цвет для текста в элементе: color: silver; Итак, чтобы задать цвет таким образом, нужно просто указать его название в качестве значения свойства. При этом не имеет значения, пишите вы названия строчными или прописными буквами, поэтому можно написать silver, Silver или SILVER, и все это будет работать. Определение цвета через значение, задаваемое сочетанием красного, зеленого и синего Можно определить цвет, указав сочетание красного, зеленого и синего в определенной пропорции. Допустим, вам нужно задать оранжевый цвет, который состоит из 80% красного, 40% зеленого и 0% синего.

7 слайд Цвет текста Вот как это можно сделать: color: rgb(80%, 40%, 0%); Можно также
Описание слайда:

Цвет текста Вот как это можно сделать: color: rgb(80%, 40%, 0%); Можно также задавать значение красного, зеленого и синего числами от 0 до 255. Например, вместо 80% красного, 40% зеленого и 0% синего можно писать 204 красного, 102 зеленого и 0 синего. Посмотрите, как для задания цветов используются обычные числовые значения:

8 слайд Цвет текста color: rgb(204, 102, 0); Определение цвета через шестнадцатеричны
Описание слайда:

Цвет текста color: rgb(204, 102, 0); Определение цвета через шестнадцатеричный код Теперь перейдем к шестнадцатеричным кодам. Каждый набор двух цифр такого кода представляет красную, зеленую и синюю составляющую цвета. Так, первые две цифры представляют красный цвет, следующие две - зеленый и последние две -синий: color: #cc6600;

9 слайд Шрифт Шрифты могут очень сильно влиять на дизайн страниц. В CSS они разделены
Описание слайда:

Шрифт Шрифты могут очень сильно влиять на дизайн страниц. В CSS они разделены на семейства, в которых вы можете выбрать, какой шрифт лучше подходит для определенного элемента на странице. font-family: Verdana, Geneva, Arial, sans-serif; Свойство font-family дает возможность задать список предпочтительных шрифтов, которые указываются через запятую. Если имя шрифта состоит из нескольких слов, то такое название следует заключить в двойные кавычки, например: "Courier New".

10 слайд Размер Размер шрифта очень сильно влияет на дизайн веб-страницы и читабельнос
Описание слайда:

Размер Размер шрифта очень сильно влияет на дизайн веб-страницы и читабельность ее текста. В CSS есть несколько единиц измерения, с помощью которых можно задавать размер для текста, все они подробно описаны в разделе Единицы измерения CSS. Также имеется возможность задавать размер с помощью ключевых слов: font-size: medium;

11 слайд Выравнивание текста Выравнивание текста в HTML документе задаётся с помощью с
Описание слайда:

Выравнивание текста Выравнивание текста в HTML документе задаётся с помощью свойства text-align, которое позволяет выравнять текст по правой или левой строне, а так же задать выравнивание текста по ширине. Свойство text-align работает только с блочными элементами, выравнивая все строчные элементы внутри блочного: <html> <body style="background-color: black; color: white;"> <h1 style="font-family: verdana;">Заголовок</h1> <p style="font-size: 10px;">Очень маленький размер текста.</p> <p style="text-align: right;">Этот текст будет выровнен по правому краю.</p> </body> </html>

Курс профессиональной переподготовки
Учитель информатики
Курс профессиональной переподготовки
Учитель математики и информатики
Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:
также Вы можете выбрать тип материала:
Общая информация
ВНИМАНИЮ УЧИТЕЛЕЙ: хотите организовать и вести кружок по ментальной арифметике в своей школе? Спрос на данную методику постоянно растёт, а Вам для её освоения достаточно будет пройти один курс повышения квалификации (72 часа) прямо в Вашем личном кабинете на сайте "Инфоурок".

Пройдя курс Вы получите:
- Удостоверение о повышении квалификации;
- Подробный план уроков (150 стр.);
- Задачник для обучающихся (83 стр.);
- Вводную тетрадь «Знакомство со счетами и правилами»;
- БЕСПЛАТНЫЙ доступ к CRM-системе, Личному кабинету для проведения занятий;
- Возможность дополнительного источника дохода (до 60.000 руб. в месяц)!

Пройдите дистанционный курс «Ментальная арифметика» на проекте "Инфоурок"!

Подать заявку

Вам будут интересны эти курсы:

Курс повышения квалификации «Методика преподавания информатики в начальных классах»
Курс повышения квалификации «Внедрение системы компьютерной математики в процесс обучения математике в старших классах в рамках реализации ФГОС»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс профессиональной переподготовки «Информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Облачные технологии в образовании»
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»
Курс профессиональной переподготовки «Математика и информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Современные тенденции цифровизации образования»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»
Курс повышения квалификации «Применение интерактивных образовательных платформ на примере платформы Moodle»
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.