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

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

CSS: В чем прелесть?
Спецификация CSS (Cascading Style Sheets) позволяет остаться в рамках декларативного характера разметки страницы и дает полный контроль над формой представления элементов HTML-разметки

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

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

Способы применения CSS
переопределение стиля в элементе разметки
размещение описания стиля в заголовке документа в элементе STYLE
размещение ссылки на внешнее описание через элемент LINK
импорт описания стиля в документ

Внедрение CSS в HTML документ
1. Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.

Внедрение CSS в HTML документ
2. Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).

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

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

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

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

Пример
Атрибут style font-size:18px">Всё о дизайне
На этом сайте Вы найдёте любую информацию о дизайне.
Заказать дизайн сайта
У нас Вы можете по выгодным ценам приобрести лучший шаблон!!
Как стать дизайнером
Только у нас Вы можете за 3 месяца стать верстальщиком сайтов!!

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

Тег
<br><p>Для того, что бы описать необходимые элементы одновременно на всей</div></h2><div class="slides-content">странице в заголовок HTML документа внедряют тег <style>
(не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

Тег style
body {background-color:</div></h2><div class="slides-content">#c5ffa0}
h1 {color: #0000ff; font-size:18px}
h2 {color: #0000ff; font-size:16px}
p {color: #ff0000; font-size:14px}
Всё о дизайне
На этом сайте Вы найдёте любую информацию о дизайне.
Заказать дизайн
У нас Вы можете по выгодным ценам приобрести лучший шаблон!!
Как стать дизайнером
Только у нас Вы можете за 3 месяца стать верстальщиком сайтов!!

Тег
принято внедрять в заголовок HTML документа между тегами <head></head>.<br>Атрибут тега <style> type - сообщает</div></h2><div class="slides-content">браузеру, какой синтаксис использовать для правильной интерпретации стилей. Для правильной интерпретации браузерами CSS значение type (MIME тип данных) должно равняться text/css.<br>Внутри тега <style>
идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:
Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.

Импорт стиля
Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей:
@import:url(http://kuku.ru/style.css)
a {color:cyan;text-decoration:underline;}

Синтаксис
Синтаксис описания стилей в общем виде представляется следующим образом:
selector[, selector[, ...]]{attribute:value;
[atribute:value;...]}
или
selector 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
kuku

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

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

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

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

Элемент SPAN
Элемент разметки SPAN - это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он может заменить собой элементы: FONT, I, B, U, SUB, SUP и т.п.
Стили
могут
пересекаться

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

Отступы (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 определяет плавающий блок текста. Он может принимать значения:
left - блок прижат к левой границе охватывающего блок элемента;
rigth - блок прижат к правой границе охватывающего блок элемента;
both - текст может обтекать блок с обеих сторон.
Атрибут clean – запрет обтекания:
У этого блока запрещен \"плавающий\" блок справа, поэтому он начинается ниже прижатого вправо ограниченного блока.

Управление цветом
Цвет текста:
td {color:darkred;}
p {color:darkred;}
i {color:#003366;font-style:normal;}
Цвет фона:
...
...
как строковые элементы разметки
p {background: gray http://kuku.ru/kuku.gif no-repeat fixed center center;}

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

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

Кегль (font-size)
Кегль параграфа установлен в 12 пунктов
Кегль параграфа установлен в 12 пикселей
Кегль параграфа установлен в 120% от размера букв охватывающего параграф элемента
Размер кегля large

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

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

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

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

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

Задания
На ширину и высоту
Для решения задач данного блока вам понадобятся следующие CSS свойства: widthДля решения задач данного блока вам понадобятся следующие CSS свойства: width, height.
Сделайте все абзацы
шириной 300px.
Сделайте все таблицы шириной 400px, высотой 200px.
Слайд 40
Задания
На выравнивание
Для решения задач данного блока вам понадобятся следующие CSS свойства: text-align.
Поставьте
все
по центру.
Поставьте все
по правому краю.
Сделайте так, чтобы текст в абзацах
был выровнен одновременно и по правому и по левому краю.
Сделайте так, чтобы во втором абзаце
текст был выровнен по центру.
Поставьте все
по левому краю.
Поставьте все
по центру.
Слайд 41
Задания
На жирность
Для решения задач данного блока вам понадобятся следующие CSS свойства: font-weight.
Сделайте
все
жирным.
Сделайте
нежирным.
Сделайте одновременно
,
и
нежирным.
Слайд 42
Задания
На курсив
Для решения задач данного блока вам понадобятся следующие CSS свойства: font-style.
Сделайте
все
курсивом.
Сделайте все абзацы
курсивом, а первый абзац - нет.
Слайд 43
Задания
На размер шрифта
Для решения задач данного блока вам понадобятся следующие CSS
свойства: font-size.
Сделайте все
20px.
Сделайте все абзацы
15px.
Слайд 44
Задания
На семейство
Для решения задач данного блока вам понадобятся следующие CSS свойства: font-family.
Сделайте
для абзацев
шрифт Arial.
Сделайте для
шрифт Times New Roman.
Сделайте для
любой шрифт без засечек.
Слайд 45
Задания
На межстрочный интервал
Для решения задач данного блока вам понадобятся следующие CSS
свойства: line-height.
Сделайте межстрочный интервал для абзацев
в 30px.
Слайд 46
Задания
На свойство-сокращение font
Для решения задач данного блока вам понадобятся следующие CSS
свойства: font.
Закомментируйте все стили для абзацев.
Для
сделайте шрифт Arial, 16 пикселей, курсив, жирный, межстрочный интервал в 30px.
Для
сделайте следующий шрифт: нежирный, 20 пикселей, Verdana.
Слайд 47
Задания
На красную строку
Для решения задач данного блока вам понадобятся следующие CSS
свойства: text-indent.
Сделайте красную строку в абзацах 30px.
Для второго абзаца
уберите красную строку.
На вертикальное выравнивание
Для решения задач данного блока вам понадобятся следующие CSS свойства: vertical-align.
Поставьте текст в таблице
по верхнему краю по вертикали.
Поставьте текст в
по центру по вертикали.
Имя файла: Каскадные-таблицы-стилей-(CSS)-–-назначение-и-применения.-Блочные-и-строчные-элементы.-Цвет-и-шрифты.pptx
Количество просмотров: 56
Количество скачиваний: 0
Скачать
- Предыдущая
Спирохеты. Таксономия спирохет,имеющих клиническое значение
Следующая -
Как звери зимой в лесу живут
Похожие презентации
Архитектура ЭВМ. Компьютер
Мобильное приложение
Компьютерные сети. Модель OSI. Стэк протоколов TCP/IP. Уровень сетевых интерфейсов
Лайфхаки Word
Подходы к понятию информации и измерение информации
Процессор. Процесс обработки данных и управление этим процессом
Цифровое государственное управление
Фільтрація та сортування
Сортировки. Алгоритмы и структуры данных
Наследование. Отношения объектов. Принципы SOLID. GRASP. Лекция 3
Инфологическое (концептуальное) моделирование предметной области - подход Oracle
Презентация к уроку информатики в 9 классе по теме Логические операции
Word мәтіндік редакторында кесте құру
Безопасность в интернете
Знакомство с языком программирования Python
Первинна профілактика торгівлі людьми
SFT.CM.06 Oracle. Oracle 11g RDBMS introduction
Автоматизированная система дистанционного тестирования знаний студентов на основе технологии ASP.NET
Протоколы работы с именами и адресами ARP &amp; DNS
Модели жизненного цикла разработки программного продукта. (Тема 5)
ОС Linux Ubuntu. Разделы, файловые системы, загрузчик, администратор. (Лекция 18)
Побудова звітів
Дистанционный урок – урок с использованием учебного материала либо полностью размещенного в Интернете
Внеклассное мероприятие по информатике Сто к одному
Жүйелік және қолданбалы программалау. Системное и прикладное программирование
CPR 101. Welcome to Computer Skills for Programmers
Хакерские улиты и защита от них
Модели жизненного цикла программного обеспечения
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q){return {data:{meta:{result:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},categories:{result:[{id:G,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:G,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:H,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]},item:{result:{id:218673,name:m,category:H,count:48,jpg:"jpg\u002F218673",hits:56,download:b,h1:"Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты презентация",meta:{h1:m,title:m,description:"Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты презентация на тему, доклад, Информатика",keywords:"Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты из раздела Информатика. Презентация на заданную тему содержит 48 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003ECSS: что это? \u003Cbr\u003E\u003Cp\u003ECSS (Cascading Style Sheets) - Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу - элементу, так и одновременно ко всем идентичн",file:"Каскадные-таблицы-стилей-(CSS)-–-назначение-и-применения.-Блочные-и-строчные-элементы.-Цвет-и-шрифты.pptx",texts:["\u003Cp\u003EУчебный курс\r\n Введение в HTML и CSS \r\n Лекция 5\r\nКаскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты. \u003Cbr\u003E","\u003Cp\u003ECSS: что это? \u003Cbr\u003E\u003Cp\u003ECSS (Cascading Style Sheets) - Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу - элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.\u003Cbr\u003E","\u003Cp\u003ECSS: В чем прелесть? \u003Cbr\u003E\u003Cp\u003EСпецификация CSS (Cascading Style Sheets) позволяет остаться в рамках декларативного характера разметки страницы и дает полный контроль над формой представления элементов HTML-разметки\u003Cbr\u003E","\u003Cp\u003ECSS: влияние на технологию \u003Cbr\u003E\u003Cp\u003EСначала нужно определиться с номенклатурой страниц, т.е. все страницы проектируемого Web-узла разбить на типы, например,: домашняя страница, навигационные страницы, информационные страницы, коммуникационные страницы и т.п.. У каждого узла этот перечень может быть своим. \u003Cbr\u003EДля каждого из типов страниц разрабатывается определенная логическая структура (стандартный набор компонентов страницы). \u003Cbr\u003EПосле этого разрабатывается навигационная карта узла и форма ее реализации на страница \u003Cbr\u003E","\u003Cp\u003ECSS: влияние на технологию \u003Cbr\u003E\u003Cp\u003EДля каждого стандартного компонента страницы разрабатывается стиль его отображения (CSS-описатель). \u003Cbr\u003EТеперь остается только рисовать картинки, создавать анимацию, писать программы, вручную вводить текст и графику или генерировать содержание страниц автоматически во время обращения к ним. \u003Cbr\u003E","\u003Cp\u003EСпособы применения CSS\u003Cbr\u003E\u003Cp\u003Eпереопределение стиля в элементе разметки \u003Cbr\u003Eразмещение описания стиля в заголовке документа в элементе STYLE \u003Cbr\u003Eразмещение ссылки на внешнее описание через элемент LINK \u003Cbr\u003Eимпорт описания стиля в документ\u003Cbr\u003E","\u003Cp\u003EВнедрение CSS в HTML документ\u003Cbr\u003E1. Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.\u003Cbr\u003E","\u003Cp\u003EВнедрение CSS в HTML документ\u003Cbr\u003E\u003Cp\u003E2. Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).\u003Cbr\u003E","\u003Cp\u003EВнедрение CSS в HTML документ\u003Cbr\u003E\u003Cp\u003E3. Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.\u003Cbr\u003E","\u003Cp\u003EПереопределение стиля\u003Cbr\u003E\u003Cp\u003E\tПод переопределением стиля в элементе разметки мы понимаем применение атрибута STYLE у данного элемента разметки:\r\n\r\n\u003Ch1 style=\"font-weight:normal;\r\nfont-style:italic;\r\nfont-size:10pt;\"\u003E\r\nЗаголовок первого уровня\r\n\u003C\u002Fh1\u003E\u003Cbr\u003E","\u003Cp\u003EЭлемент STYLE\u003Cbr\u003E\u003Cp\u003E\tЭлемент STYLE позволяет определить стиль отображения для: \u003Cbr\u003Eстандартных элементов HTML-разметки \u003Cbr\u003Eпроизвольных классов (селектор class) \u003Cbr\u003EHTML-объектов (селектор id)\u003Cbr\u003E","\u003Cp\u003EПишется так:\u003Cbr\u003E\u003Cp style=\"\"\u003E это параграф с индивидуальным стилем \u003C\u002Fp\u003EВсё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента \u003Cp\u003E.\u003Cbr\u003E например:\u003Cbr\u003E\u003Cp style=\"color: #ff0000; font-size:12px\"\u003E это параграф с индивидуальным стилем\u003C\u002Fp\u003E\u003Cbr\u003EВ данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей. По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента\u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE HTML PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Transitional\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Floose.dtd\"\u003E\r\n\u003Chtml\u003E\r\n\u003Chead\u003E\r\n\u003Ctitle\u003EАтрибут style\u003C\u002Ftitle\u003E\r\n\u003C\u002Fhead\u003E\r\n\u003Cbody style=\"background-color: #c5ffa0\"\u003E\r\n\u003Ch1 style=\"color: #0000ff; font-size:18px\"\u003EВсё о дизайне\u003C\u002Fh1\u003E\r\n\u003Cp style=\"color: #ff0000; font-size:14px\"\u003EНа этом сайте Вы найдёте любую информацию о дизайне.\u003C\u002Fp\u003E\r\n\u003Ch2 style=\"color: #0000ff; font-size:16px\"\u003EЗаказать дизайн сайта\u003C\u002Fh2\u003E\r\n\u003Cp style=\"color: #ff0000; font-size:14px\"\u003EУ нас Вы можете по выгодным ценам приобрести лучший шаблон!!\u003C\u002Fp\u003E\r\n\u003Ch2 style=\"color: #0000ff; font-size:16px\"\u003EКак стать дизайнером\u003C\u002Fh2\u003E\r\n\u003Cp style=\"color: #ff0000; font-size:14px\"\u003EТолько у нас Вы можете за 3 месяца стать верстальщиком сайтов!!\u003C\u002Fp\u003E\r\n\u003C\u002Fbody\u003E\r\n\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EСсылка на описание стиля\u003Cbr\u003E\u003Cp\u003E\tСсылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD.\u003Cbr\u003E\u003Clink type=\"text\u002Fcss\" rel=\"stylesheet\" href=\"http:\u002F\u002Fkuku.ru\u002Fmy_css.css\"\u003E \u003Cbr\u003E","\u003Cp\u003EТег \u003Cstyle\u003E\u003Cbr\u003E\u003Cp\u003EДля того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег \u003Cstyle\u003E \u003C\u002Fstyle\u003E(не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.\u003Cbr\u003E","\u003Cp\u003E\u003C!DOCTYPE HTML PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Transitional\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Floose.dtd\"\u003E\r\n\u003Chtml\u003E\r\n\u003Chead\u003E\r\n\u003Ctitle\u003EТег style\u003C\u002Ftitle\u003E\r\n\u003Cstyle type=\"text\u002Fcss\"\u003E\r\nbody {background-color: #c5ffa0}\r\nh1 {color: #0000ff; font-size:18px}\r\nh2 {color: #0000ff; font-size:16px}\r\np {color: #ff0000; font-size:14px}\r\n\u003C\u002Fstyle\u003E\r\n\u003C\u002Fhead\u003E\r\n\u003Cbody\u003E\r\n\u003Ch1\u003EВсё о дизайне\u003C\u002Fh1\u003E\r\n\u003Cp\u003EНа этом сайте Вы найдёте любую информацию о дизайне.\u003C\u002Fp\u003E\r\n\u003Ch2\u003EЗаказать дизайн\u003C\u002Fh2\u003E\r\n\u003Cp\u003EУ нас Вы можете по выгодным ценам приобрести лучший шаблон!!\u003C\u002Fp\u003E\r\n\u003Ch2\u003EКак стать дизайнером\u003C\u002Fh2\u003E\r\n\u003Cp\u003E Только у нас Вы можете за 3 месяца стать верстальщиком сайтов!!\u003C\u002Fp\u003E\r\n\u003C\u002Fbody\u003E\r\n\u003C\u002Fhtml\u003E\u003Cbr\u003E","Тег \u003Cstyle\u003E принято внедрять в заголовок HTML документа между тегами \u003Chead\u003E\u003C\u002Fhead\u003E.\u003Cbr\u003EАтрибут тега \u003Cstyle\u003E type - сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей. Для правильной интерпретации браузерами CSS значение type (MIME тип данных) должно равняться text\u002Fcss.\u003Cbr\u003EВнутри тега \u003Cstyle\u003E \u003C\u002Fstyle\u003E идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:\u003Cbr\u003EЕсли в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.\u003Cbr\u003E","\u003Cp\u003EИмпорт стиля\u003Cbr\u003E\u003Cp\u003E\tИмпортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей:\r\n\r\n\u003Cstyle\u003E\r\n@import:url(http:\u002F\u002Fkuku.ru\u002Fstyle.css)\r\na {color:cyan;text-decoration:underline;}\r\n\u003C\u002Fstyle\u003E \u003Cbr\u003E","\u003Cp\u003EСинтаксис\u003Cbr\u003E\u003Cp\u003E\tСинтаксис описания стилей в общем виде представляется следующим образом:\r\nselector[, selector[, ...]]{attribute:value;\r\n\t[atribute:value;...]}\r\nили\r\nselector selector [selector ...] \r\n\t{attribute:value;[atribute:value;...]} \u003Cbr\u003E\tПервый вариант перечисляет селекторы, для которых действует данное описание стиля. Второй вариант задает иерархию вложенности селекторов, для совокупности которых определен стиль.\u003Cbr\u003E","\u003Cp\u003EОписание селектора\u003Cbr\u003E\u003Cp\u003EСелектор - имя элемента разметки \u003Cbr\u003Ei, em {color:#003366,font-style:normal}\u003Cbr\u003Ea, i {font-style:normal;font-weight:bold;\r\n\ttext-decoration:line-through}\u003Cbr\u003EПервая строка этого описания перечисляет селекторы-элементы, которые будут отображаться одинаково:\u003Cbr\u003E\u003Ci\u003EЭто курсив\u003C\u002Fi\u003E и это тоже \u003Cem\u003Eкурсив\u003C\u002Fem\u003E\r\nЭто курсив и это тоже курсив \u003Cbr\u003EПоследняя строка определяет стиль отображения вложенного в гипертекстовую ссылку курсива:\r\n\u003Ca name=empty\u003E\u003Ci\u003Ekuku\u003C\u002Fi\u003E\u003C\u002Fa\u003E\r\nkuku \u003Cbr\u003E","\u003Cp\u003EСелектор - имя класса\u003Cbr\u003E\u003Cp\u003E\u003Cstyle\u003E\u003Cbr\u003E.kuku {color:darkred;background-color:white;}\u003Cbr\u003E\u003C\u002Fstyle\u003E\u003Cbr\u003E\u003Cp class=kuku\u003EЭтот параграф мы отобразим темно-красным цветом по белому фону.\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EЭту \u003Ca class=kuku\u003Eгипертекстовую ссылку\u003C\u002Fa\u003E мы отобразим темно-красным цветом по белому фону.\u003C\u002Fp\u003E\u003Cbr\u003EЭтот параграф мы отобразим темно-красным цветом по белому фону.\u003Cbr\u003EЭту гипертекстовую ссылку мы отобразим темно-красным цветом по белому фону. \u003Cbr\u003E","\u003Cp\u003EСелектор - идентификатор объекта\u003Cbr\u003E\u003Cp\u003E\tОписание стиля для объекта задается строкой, в которой селектор представляет собой имя этого объекта с лидирующим символом \"#\":\r\n\r\na.mainlink {color:darkred;text-decoration:underline;font-style:italic;}\r\n#blue {color:#003366}\r\n\u003Ca class=mainlink\u003Eосновная гипертекстовая ссылка\u003C\u002Fa\u003E\r\n\u003Ca class=mainlink id=blue\u003Eмодифицированная гипертекстовая ссылка\u003C\u002Fa\u003E\r\n\r\nосновная гипертекстовая ссылка\r\nмодифицированная гипертекстовая ссылка\u003Cbr\u003E","\u003Cp\u003EНаследование и переопределение\u003Cbr\u003E\u003Cp\u003EСначала применяются стили умолчания браузера \u003Cbr\u003EСтили умолчания браузера переопределяются прилинкованными стилями (элемент LINK заголовка документа). \u003Cbr\u003EПрилинкованные стили переопределяются описаниями стилей в элементе STYLE \u003Cbr\u003EСтили элемента STYLE переопределяются атрибутом STYLE в любом из элементов разметки\u003Cbr\u003E","\u003Cp\u003EЭлемент DIV\u003Cbr\u003E\u003Cp\u003E\tDIV позволяет применить атрибуты стиля, связанные с границей блокаDIV позволяет применить атрибуты стиля, связанные с границей блока, отступами блока от границ старшего элементаDIV позволяет применить атрибуты стиля, связанные с границей блока, отступами блока от границ старшего элемента и \"набивку\", т.е. отступ от границы блока до границы вложенного элемента:\r\n\u003Cbr\u003E\t\u003Cdiv style=\"border-color:#003366;\r\nborder-width:1px;\r\nmargin:20px;\r\npadding:10px;\"\u003E\r\n...\r\n\u003C\u002Fdiv\u003E\u003Cbr\u003E","\u003Cp\u003EЭлемент SPAN\u003Cbr\u003E\u003Cp\u003E\tЭлемент разметки SPAN - это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он может заменить собой элементы: FONT, I, B, U, SUB, SUP и т.п.\u003Cbr\u003E\u003Cspan style=\"font-weight:bold;\"\u003EСтили \r\n\u003Cspan style=\"font-style:italic;\"\u003Eмогут \u003C\u002Fspan\u003E пересекаться\u003C\u002Fspan\u003E\u003Cbr\u003E","\u003Cp\u003EСвойства блоков\u003Cbr\u003E","\u003Cp\u003EОтступы (margins)\u003Cbr\u003E\u003Cp\u003Ep {margin-left:50px;margin-right:5px;\r\nmargin-top:15px;margin-bottom:50px;\r\npadding:0px; text-align:left;}\u003Cbr\u003E","\u003Cp\u003EНабивка (padding)\u003Cbr\u003E\u003Cp\u003Ep {padding-left:100px;\r\npadding-right:50px;\r\npadding-top:20px;\r\npadding-bottom:10px;\r\ntext-align:left;\r\nborder-width:1px;} \u003Cbr\u003E","\u003Cp\u003EОбтекание блока текста\u003Cbr\u003E\u003Cp\u003EАтрибут float определяет плавающий блок текста. Он может принимать значения: \u003Cbr\u003Eleft - блок прижат к левой границе охватывающего блок элемента;\u003Cbr\u003Erigth - блок прижат к правой границе охватывающего блок элемента;\u003Cbr\u003Eboth - текст может обтекать блок с обеих сторон. \u003Cbr\u003EАтрибут clean – запрет обтекания:\u003Cbr\u003E\u003Cp style='clear:right;text-align:justify;'\u003EУ этого блока запрещен \\\"плавающий\\\" блок справа, поэтому он начинается ниже прижатого вправо ограниченного блока.\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003EУправление цветом\u003Cbr\u003E\u003Cp\u003EЦвет текста:\u003Cbr\u003Etd {color:darkred;}\u003Cbr\u003Ep {color:darkred;}\u003Cbr\u003Ei {color:#003366;font-style:normal;}\u003Cbr\u003EЦвет фона:\u003Cbr\u003E\u003Cbody bgcolor=...\u003E...\u003C\u002Fbody\u003E\u003Cbr\u003E\u003Ctable bgcolor=...\u003E...\u003C\u002Ftable\u003E\u003Cbr\u003E\u003Cspan style=\"background-color:#003366;\r\ncolor:white;\"\u003Eкак строковые элементы разметки\u003C\u002Fspan\u003E\u003Cbr\u003Ep {background: gray http:\u002F\u002Fkuku.ru\u002Fkuku.gif no-repeat fixed center center;}\u003Cbr\u003E","\u003Cp\u003EШрифты\u003Cbr\u003E\u003Cp\u003Efont-family - семейство начертаний шрифта (гарнитура);\u003Cbr\u003Efont-style - прямое начертание или курсив;\u003Cbr\u003Efont-weight - \"усиление\" (насыщенность) шрифта, \"жирность\" букв;\u003Cbr\u003Efont-size - размер шрифта (кегль). Задается в пикселях (px) и типографских пунктах (pt);\u003Cbr\u003Efont-variant - вариант начертания (обычный или мелкими буквами - капитель). \u003Cbr\u003E","\u003Cp\u003EГарнитура\u003Cbr\u003E\u003Cp\u003E\u003Cp align=left style=\"font-size:24px;\r\nfont-family:serif;color:darkred;\"\u003EЭта строка набрана пропорциональным шрифтом с засечками.\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp align=left style=\"font-size:24px;\r\nfont-family:sans-serif;color:darkred;\"\u003EЭта строка набрана пропорциональным шрифтом без засечек.\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp align=left style=\"font-size:24px;\r\nfont-family:monospace;color:darkred;\"\u003EЭта строка набрана моноширинным шрифтом.\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003EКегль (font-size)\u003Cbr\u003E\u003Cp\u003E\u003Cp style=\"font-size:12pt;\"\u003EКегль параграфа установлен в 12 пунктов\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp style=\"font-size:12px;\"\u003EКегль параграфа установлен в 12 пикселей\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp style=\"font-size:120%;\"\u003EКегль параграфа установлен в 120% от размера букв охватывающего параграф элемента\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp style=\"font-size:large;\"\u003EРазмер кегля large\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003EНачертание\u003Cbr\u003E\u003Cp\u003E\u003Cp style=\"color:darkred;\r\nfont-style:normal;\"\u003EПрямое начертание\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp style=\"color:darkred;\r\nfont-style:italic;\"\u003EКурсив\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp style=\"color:darkred;font-style:italic;\r\nfont-weight:bold;\"\u003EКурсив\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003EМежбуквенные расстояния\u003Cbr\u003E\u003Cp\u003E\u003Cp style=\"font-family:monospace;\u003Cbr\u003Eletter-spacing:10pt;color:darkred\"\u003E\u003Cbr\u003EМежбуквенное расстояние 10pt\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003EУчебник\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Fmunasipov.com\u002Flesson\u002Furoki_css.html\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа цвета\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: color.\u003Cbr\u003E Сделайте все абзацы \u003Cp\u003E красного цвета.\u003Cbr\u003E Сделайте все \u003Ch1\u003E зеленого цвета.\u003Cbr\u003E Сделайте все \u003Ch2\u003E голубого цвета.\u003Cbr\u003E Сделайте все \u003Ch3\u003E оранжевого цвета.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа style\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие HTML атрибуты: style.\u003Cbr\u003E Сделайте первый на странице абзац \u003Cp\u003E зеленого цвета.\u003Cbr\u003E Сделайте второй на странице абзац \u003Cp\u003E красного цвета.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа ширину и высоту\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: widthДля решения задач данного блока вам понадобятся следующие CSS свойства: width, height.\u003Cbr\u003E Сделайте все абзацы \u003Ch2\u003E шириной 300px.\u003Cbr\u003E Сделайте все таблицы \u003Ctable\u003E шириной 400px, высотой 200px.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа выравнивание\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: text-align.\u003Cbr\u003E Поставьте все \u003Ch1\u003E по центру.\u003Cbr\u003E Поставьте все \u003Ch2\u003E по правому краю.\u003Cbr\u003E Сделайте так, чтобы текст в абзацах \u003Cp\u003E был выровнен одновременно и по правому и по левому краю.\u003Cbr\u003E Сделайте так, чтобы во втором абзаце \u003Cp\u003E текст был выровнен по центру.\u003Cbr\u003E Поставьте все \u003Cth\u003E по левому краю.\u003Cbr\u003E Поставьте все \u003Ctd\u003E по центру.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа жирность\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: font-weight.\u003Cbr\u003E Сделайте все \u003Ctd\u003E жирным.\u003Cbr\u003E Сделайте \u003Ch1\u003E нежирным.\u003Cbr\u003E Сделайте одновременно \u003Cth\u003E, \u003Ch1\u003E и \u003Ch2\u003E нежирным.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа курсив\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: font-style.\u003Cbr\u003E Сделайте все \u003Ch2\u003E курсивом.\u003Cbr\u003E Сделайте все абзацы \u003Cp\u003E курсивом, а первый абзац - нет.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа размер шрифта\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: font-size.\u003Cbr\u003E Сделайте все \u003Ch2\u003E 20px.\u003Cbr\u003E Сделайте все абзацы \u003Cp\u003E 15px.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа семейство\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: font-family.\u003Cbr\u003E Сделайте для абзацев \u003Cp\u003E шрифт Arial.\u003Cbr\u003E Сделайте для \u003Ch2\u003E шрифт Times New Roman.\u003Cbr\u003E Сделайте для \u003Ch3\u003E любой шрифт без засечек.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа межстрочный интервал\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: line-height.\u003Cbr\u003E Сделайте межстрочный интервал для абзацев \u003Cp\u003E в 30px.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа свойство-сокращение font\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: font.\u003Cbr\u003E Закомментируйте все стили для абзацев.\u003Cbr\u003E Для \u003Cp\u003E сделайте шрифт Arial, 16 пикселей, курсив, жирный, межстрочный интервал в 30px.\u003Cbr\u003E Для \u003Ch1\u003E сделайте следующий шрифт: нежирный, 20 пикселей, Verdana.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа красную строку\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: text-indent.\u003Cbr\u003E Сделайте красную строку в абзацах 30px.\u003Cbr\u003E Для второго абзаца \u003Cp\u003E уберите красную строку.\u003Cbr\u003EНа вертикальное выравнивание\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: vertical-align.\u003Cbr\u003E Поставьте текст в таблице \u003Ctable\u003E по верхнему краю по вертикали.\u003Cbr\u003E Поставьте текст в \u003Cth\u003E по центру по вертикали.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EПовторите страницу по образцу:\u003Cbr\u003E"],href:"\u002Finformatika\u002Fkaskadnye-tablitsy-stiley-css--naznachenie",href_category:"\u002Finformatika",date:1637054424,related:[{id:309736,name:"Архитектура ЭВМ. Компьютер",href:"\u002Finformatika\u002Farhitektura-evm-kompyuter-1",jpg:"jpg\u002F309736"},{id:576561,name:"Мобильное приложение",href:"\u002Finformatika\u002Fmobilnoe-prilozhenie-3",jpg:"jpg\u002F576561"},{id:246719,name:"Компьютерные сети. Модель OSI. Стэк протоколов TCP\u002FIP. Уровень сетевых интерфейсов",href:"\u002Finformatika\u002Fkompyuternye-seti-model-osi-stek-protokolov",jpg:"jpg\u002F246719"},{id:105611,name:"Лайфхаки Word",href:"\u002Finformatika\u002Flayfhaki-word-2",jpg:"jpg\u002F105611"},{id:279939,name:"Подходы к понятию информации и измерение информации",href:"\u002Finformatika\u002Fpodhody-k-ponyatiyu-informatsii-i-izmerenie",jpg:"jpg\u002F279939"},{id:340680,name:"Процессор. Процесс обработки данных и управление этим процессом",href:"\u002Finformatika\u002Fprotsessor-protsess-obrabotki-dannyh-i-upravlenie",jpg:"jpg\u002F340680"},{id:264141,name:"Цифровое государственное управление",href:"\u002Finformatika\u002Ftsifrovoe-gosudarstvennoe-upravlenie",jpg:"jpg\u002F264141"},{id:284113,name:"Фільтрація та сортування",href:"\u002Finformatika\u002Ffltratsya-ta-sortuvannya",jpg:"jpg\u002F284113"},{id:583630,name:"Сортировки. Алгоритмы и структуры данных",href:"\u002Finformatika\u002Fsortirovki-algoritmy-i-struktury-dannyh",jpg:"jpg\u002F583630"},{id:347267,name:"Наследование. Отношения объектов. Принципы SOLID. GRASP. Лекция 3",href:"\u002Finformatika\u002Fnasledovanie-otnosheniya-obektov-printsipy-solid-grasp",jpg:"jpg\u002F347267"},{id:430668,name:"Инфологическое (концептуальное) моделирование предметной области - подход Oracle",href:"\u002Finformatika\u002Finfologicheskoe-kontseptualnoe-modelirovanie-predmetnoy-oblasti-podhod",jpg:"jpg\u002F430668"},{id:451702,name:"Презентация к уроку информатики в 9 классе по теме Логические операции",href:"\u002Finformatika\u002Fprezentatsiya-k-uroku-informatiki-v-9-11",jpg:"jpg\u002F451702"},{id:405366,name:"Word мәтіндік редакторында кесте құру",href:"\u002Finformatika\u002Fword-mtndk-redaktorynda-keste-ru",jpg:"jpg\u002F405366"},{id:174818,name:"Безопасность в интернете",href:"\u002Finformatika\u002Fbezopasnost-v-internete-6",jpg:"jpg\u002F174818"},{id:9764,name:"Знакомство с языком программирования Python",href:"\u002Finformatika\u002Fznakomstvo-s-yazykom-programmirovaniya-python",jpg:"jpg\u002F9764"},{id:391082,name:"Первинна профілактика торгівлі людьми",href:"\u002Finformatika\u002Fpervinna-proflaktika-torgvl-lyudmi",jpg:"jpg\u002F391082"},{id:362900,name:"SFT.CM.06 Oracle. Oracle 11g RDBMS introduction",href:"\u002Finformatika\u002Fsftcm06-oracle-oracle-11g-rdbms-introduction",jpg:"jpg\u002F362900"},{id:337466,name:"Автоматизированная система дистанционного тестирования знаний студентов на основе технологии ASP.NET",href:"\u002Finformatika\u002Favtomatizirovannaya-sistema-distantsionnogo-testirovaniya-znaniy-studentov",jpg:"jpg\u002F337466"},{id:22531,name:"Протоколы работы с именами и адресами ARP &amp; DNS",href:"\u002Finformatika\u002Fprotokoly-raboty-s-imenami-i-adresami",jpg:"jpg\u002F22531"},{id:200626,name:"Модели жизненного цикла разработки программного продукта. (Тема 5)",href:"\u002Finformatika\u002Fmodeli-zhiznennogo-tsikla-razrabotki-programmnogo-produkta",jpg:"jpg\u002F200626"},{id:103619,name:"ОС Linux Ubuntu. Разделы, файловые системы, загрузчик, администратор. (Лекция 18)",href:"\u002Finformatika\u002Fos-linux-ubuntu-razdely-faylovye-sistemy",jpg:"jpg\u002F103619"},{id:142929,name:"Побудова звітів",href:"\u002Finformatika\u002Fpobudova-zvtv",jpg:"jpg\u002F142929"},{id:263262,name:"Дистанционный урок – урок с использованием учебного материала либо полностью размещенного в Интернете",href:"\u002Finformatika\u002Fdistantsionnyy-urok--urok-s-ispolzovaniem",jpg:"jpg\u002F263262"},{id:547193,name:"Внеклассное мероприятие по информатике Сто к одному",href:"\u002Finformatika\u002Fvneklassnoe-meropriyatie-po-informatike-sto-k",jpg:"jpg\u002F547193"},{id:17081,name:"Жүйелік және қолданбалы программалау. Системное и прикладное программирование",href:"\u002Finformatika\u002Fzhyelk-zhne-oldanbaly-programmalau-sistemnoe-i",jpg:"jpg\u002F17081"},{id:249345,name:"CPR 101. Welcome to Computer Skills for Programmers",href:"\u002Finformatika\u002Fcpr-101-welcome-to-computer-skills",jpg:"jpg\u002F249345"},{id:233097,name:"Хакерские улиты и защита от них",href:"\u002Finformatika\u002Fhakerskie-ulity-i-zashchita-ot-nih",jpg:"jpg\u002F233097"},{id:253637,name:"Модели жизненного цикла программного обеспечения",href:"\u002Finformatika\u002Fmodeli-zhiznennogo-tsikla-programmnogo-obespecheniya-1",jpg:"jpg\u002F253637"}],navigation:{next:"\u002Fbiologiya\u002Fkak-zveri-zimoy-v-lesu-zhivut",next_name:"Как звери зимой в лесу живут",prev:"\u002Fmedetsina\u002Fspirohety-taksonomiya-spirohetimeyushchih-klinicheskoe-znachenie",prev_name:"Спирохеты. Таксономия спирохет,имеющих клиническое значение"}}}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:I,SITE_HOST:"mypreza.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E",1,"Информатика","Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

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

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

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

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

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

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

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

Задания
На красную строку
Для решения задач данного блока вам понадобятся следующие CSS свойства: text-indent.
Сделайте красную строку в абзацах 30px.
Для второго абзаца
уберите красную строку.
На вертикальное выравнивание
Для решения задач данного блока вам понадобятся следующие CSS свойства: vertical-align.
Поставьте текст в таблице
по верхнему краю по вертикали.
Поставьте текст в
по центру по вертикали.
Имя файла: Каскадные-таблицы-стилей-(CSS)-–-назначение-и-применения.-Блочные-и-строчные-элементы.-Цвет-и-шрифты.pptx
Количество просмотров: 56
Количество скачиваний: 0
Скачать
- Предыдущая
Спирохеты. Таксономия спирохет,имеющих клиническое значение
Следующая -
Как звери зимой в лесу живут
Похожие презентации
Архитектура ЭВМ. Компьютер
Мобильное приложение
Компьютерные сети. Модель OSI. Стэк протоколов TCP/IP. Уровень сетевых интерфейсов
Лайфхаки Word
Подходы к понятию информации и измерение информации
Процессор. Процесс обработки данных и управление этим процессом
Цифровое государственное управление
Фільтрація та сортування
Сортировки. Алгоритмы и структуры данных
Наследование. Отношения объектов. Принципы SOLID. GRASP. Лекция 3
Инфологическое (концептуальное) моделирование предметной области - подход Oracle
Презентация к уроку информатики в 9 классе по теме Логические операции
Word мәтіндік редакторында кесте құру
Безопасность в интернете
Знакомство с языком программирования Python
Первинна профілактика торгівлі людьми
SFT.CM.06 Oracle. Oracle 11g RDBMS introduction
Автоматизированная система дистанционного тестирования знаний студентов на основе технологии ASP.NET
Протоколы работы с именами и адресами ARP &amp; DNS
Модели жизненного цикла разработки программного продукта. (Тема 5)
ОС Linux Ubuntu. Разделы, файловые системы, загрузчик, администратор. (Лекция 18)
Побудова звітів
Дистанционный урок – урок с использованием учебного материала либо полностью размещенного в Интернете
Внеклассное мероприятие по информатике Сто к одному
Жүйелік және қолданбалы программалау. Системное и прикладное программирование
CPR 101. Welcome to Computer Skills for Programmers
Хакерские улиты и защита от них
Модели жизненного цикла программного обеспечения
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q){return {data:{meta:{result:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},categories:{result:[{id:G,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:G,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:H,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]},item:{result:{id:218673,name:m,category:H,count:48,jpg:"jpg\u002F218673",hits:56,download:b,h1:"Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты презентация",meta:{h1:m,title:m,description:"Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты презентация на тему, доклад, Информатика",keywords:"Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты из раздела Информатика. Презентация на заданную тему содержит 48 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003ECSS: что это? \u003Cbr\u003E\u003Cp\u003ECSS (Cascading Style Sheets) - Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу - элементу, так и одновременно ко всем идентичн",file:"Каскадные-таблицы-стилей-(CSS)-–-назначение-и-применения.-Блочные-и-строчные-элементы.-Цвет-и-шрифты.pptx",texts:["\u003Cp\u003EУчебный курс\r\n Введение в HTML и CSS \r\n Лекция 5\r\nКаскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты. \u003Cbr\u003E","\u003Cp\u003ECSS: что это? \u003Cbr\u003E\u003Cp\u003ECSS (Cascading Style Sheets) - Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу - элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.\u003Cbr\u003E","\u003Cp\u003ECSS: В чем прелесть? \u003Cbr\u003E\u003Cp\u003EСпецификация CSS (Cascading Style Sheets) позволяет остаться в рамках декларативного характера разметки страницы и дает полный контроль над формой представления элементов HTML-разметки\u003Cbr\u003E","\u003Cp\u003ECSS: влияние на технологию \u003Cbr\u003E\u003Cp\u003EСначала нужно определиться с номенклатурой страниц, т.е. все страницы проектируемого Web-узла разбить на типы, например,: домашняя страница, навигационные страницы, информационные страницы, коммуникационные страницы и т.п.. У каждого узла этот перечень может быть своим. \u003Cbr\u003EДля каждого из типов страниц разрабатывается определенная логическая структура (стандартный набор компонентов страницы). \u003Cbr\u003EПосле этого разрабатывается навигационная карта узла и форма ее реализации на страница \u003Cbr\u003E","\u003Cp\u003ECSS: влияние на технологию \u003Cbr\u003E\u003Cp\u003EДля каждого стандартного компонента страницы разрабатывается стиль его отображения (CSS-описатель). \u003Cbr\u003EТеперь остается только рисовать картинки, создавать анимацию, писать программы, вручную вводить текст и графику или генерировать содержание страниц автоматически во время обращения к ним. \u003Cbr\u003E","\u003Cp\u003EСпособы применения CSS\u003Cbr\u003E\u003Cp\u003Eпереопределение стиля в элементе разметки \u003Cbr\u003Eразмещение описания стиля в заголовке документа в элементе STYLE \u003Cbr\u003Eразмещение ссылки на внешнее описание через элемент LINK \u003Cbr\u003Eимпорт описания стиля в документ\u003Cbr\u003E","\u003Cp\u003EВнедрение CSS в HTML документ\u003Cbr\u003E1. Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.\u003Cbr\u003E","\u003Cp\u003EВнедрение CSS в HTML документ\u003Cbr\u003E\u003Cp\u003E2. Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).\u003Cbr\u003E","\u003Cp\u003EВнедрение CSS в HTML документ\u003Cbr\u003E\u003Cp\u003E3. Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.\u003Cbr\u003E","\u003Cp\u003EПереопределение стиля\u003Cbr\u003E\u003Cp\u003E\tПод переопределением стиля в элементе разметки мы понимаем применение атрибута STYLE у данного элемента разметки:\r\n\r\n\u003Ch1 style=\"font-weight:normal;\r\nfont-style:italic;\r\nfont-size:10pt;\"\u003E\r\nЗаголовок первого уровня\r\n\u003C\u002Fh1\u003E\u003Cbr\u003E","\u003Cp\u003EЭлемент STYLE\u003Cbr\u003E\u003Cp\u003E\tЭлемент STYLE позволяет определить стиль отображения для: \u003Cbr\u003Eстандартных элементов HTML-разметки \u003Cbr\u003Eпроизвольных классов (селектор class) \u003Cbr\u003EHTML-объектов (селектор id)\u003Cbr\u003E","\u003Cp\u003EПишется так:\u003Cbr\u003E\u003Cp style=\"\"\u003E это параграф с индивидуальным стилем \u003C\u002Fp\u003EВсё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента \u003Cp\u003E.\u003Cbr\u003E например:\u003Cbr\u003E\u003Cp style=\"color: #ff0000; font-size:12px\"\u003E это параграф с индивидуальным стилем\u003C\u002Fp\u003E\u003Cbr\u003EВ данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей. По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента\u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE HTML PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Transitional\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Floose.dtd\"\u003E\r\n\u003Chtml\u003E\r\n\u003Chead\u003E\r\n\u003Ctitle\u003EАтрибут style\u003C\u002Ftitle\u003E\r\n\u003C\u002Fhead\u003E\r\n\u003Cbody style=\"background-color: #c5ffa0\"\u003E\r\n\u003Ch1 style=\"color: #0000ff; font-size:18px\"\u003EВсё о дизайне\u003C\u002Fh1\u003E\r\n\u003Cp style=\"color: #ff0000; font-size:14px\"\u003EНа этом сайте Вы найдёте любую информацию о дизайне.\u003C\u002Fp\u003E\r\n\u003Ch2 style=\"color: #0000ff; font-size:16px\"\u003EЗаказать дизайн сайта\u003C\u002Fh2\u003E\r\n\u003Cp style=\"color: #ff0000; font-size:14px\"\u003EУ нас Вы можете по выгодным ценам приобрести лучший шаблон!!\u003C\u002Fp\u003E\r\n\u003Ch2 style=\"color: #0000ff; font-size:16px\"\u003EКак стать дизайнером\u003C\u002Fh2\u003E\r\n\u003Cp style=\"color: #ff0000; font-size:14px\"\u003EТолько у нас Вы можете за 3 месяца стать верстальщиком сайтов!!\u003C\u002Fp\u003E\r\n\u003C\u002Fbody\u003E\r\n\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EСсылка на описание стиля\u003Cbr\u003E\u003Cp\u003E\tСсылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD.\u003Cbr\u003E\u003Clink type=\"text\u002Fcss\" rel=\"stylesheet\" href=\"http:\u002F\u002Fkuku.ru\u002Fmy_css.css\"\u003E \u003Cbr\u003E","\u003Cp\u003EТег \u003Cstyle\u003E\u003Cbr\u003E\u003Cp\u003EДля того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег \u003Cstyle\u003E \u003C\u002Fstyle\u003E(не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.\u003Cbr\u003E","\u003Cp\u003E\u003C!DOCTYPE HTML PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Transitional\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Floose.dtd\"\u003E\r\n\u003Chtml\u003E\r\n\u003Chead\u003E\r\n\u003Ctitle\u003EТег style\u003C\u002Ftitle\u003E\r\n\u003Cstyle type=\"text\u002Fcss\"\u003E\r\nbody {background-color: #c5ffa0}\r\nh1 {color: #0000ff; font-size:18px}\r\nh2 {color: #0000ff; font-size:16px}\r\np {color: #ff0000; font-size:14px}\r\n\u003C\u002Fstyle\u003E\r\n\u003C\u002Fhead\u003E\r\n\u003Cbody\u003E\r\n\u003Ch1\u003EВсё о дизайне\u003C\u002Fh1\u003E\r\n\u003Cp\u003EНа этом сайте Вы найдёте любую информацию о дизайне.\u003C\u002Fp\u003E\r\n\u003Ch2\u003EЗаказать дизайн\u003C\u002Fh2\u003E\r\n\u003Cp\u003EУ нас Вы можете по выгодным ценам приобрести лучший шаблон!!\u003C\u002Fp\u003E\r\n\u003Ch2\u003EКак стать дизайнером\u003C\u002Fh2\u003E\r\n\u003Cp\u003E Только у нас Вы можете за 3 месяца стать верстальщиком сайтов!!\u003C\u002Fp\u003E\r\n\u003C\u002Fbody\u003E\r\n\u003C\u002Fhtml\u003E\u003Cbr\u003E","Тег \u003Cstyle\u003E принято внедрять в заголовок HTML документа между тегами \u003Chead\u003E\u003C\u002Fhead\u003E.\u003Cbr\u003EАтрибут тега \u003Cstyle\u003E type - сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей. Для правильной интерпретации браузерами CSS значение type (MIME тип данных) должно равняться text\u002Fcss.\u003Cbr\u003EВнутри тега \u003Cstyle\u003E \u003C\u002Fstyle\u003E идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:\u003Cbr\u003EЕсли в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.\u003Cbr\u003E","\u003Cp\u003EИмпорт стиля\u003Cbr\u003E\u003Cp\u003E\tИмпортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей:\r\n\r\n\u003Cstyle\u003E\r\n@import:url(http:\u002F\u002Fkuku.ru\u002Fstyle.css)\r\na {color:cyan;text-decoration:underline;}\r\n\u003C\u002Fstyle\u003E \u003Cbr\u003E","\u003Cp\u003EСинтаксис\u003Cbr\u003E\u003Cp\u003E\tСинтаксис описания стилей в общем виде представляется следующим образом:\r\nselector[, selector[, ...]]{attribute:value;\r\n\t[atribute:value;...]}\r\nили\r\nselector selector [selector ...] \r\n\t{attribute:value;[atribute:value;...]} \u003Cbr\u003E\tПервый вариант перечисляет селекторы, для которых действует данное описание стиля. Второй вариант задает иерархию вложенности селекторов, для совокупности которых определен стиль.\u003Cbr\u003E","\u003Cp\u003EОписание селектора\u003Cbr\u003E\u003Cp\u003EСелектор - имя элемента разметки \u003Cbr\u003Ei, em {color:#003366,font-style:normal}\u003Cbr\u003Ea, i {font-style:normal;font-weight:bold;\r\n\ttext-decoration:line-through}\u003Cbr\u003EПервая строка этого описания перечисляет селекторы-элементы, которые будут отображаться одинаково:\u003Cbr\u003E\u003Ci\u003EЭто курсив\u003C\u002Fi\u003E и это тоже \u003Cem\u003Eкурсив\u003C\u002Fem\u003E\r\nЭто курсив и это тоже курсив \u003Cbr\u003EПоследняя строка определяет стиль отображения вложенного в гипертекстовую ссылку курсива:\r\n\u003Ca name=empty\u003E\u003Ci\u003Ekuku\u003C\u002Fi\u003E\u003C\u002Fa\u003E\r\nkuku \u003Cbr\u003E","\u003Cp\u003EСелектор - имя класса\u003Cbr\u003E\u003Cp\u003E\u003Cstyle\u003E\u003Cbr\u003E.kuku {color:darkred;background-color:white;}\u003Cbr\u003E\u003C\u002Fstyle\u003E\u003Cbr\u003E\u003Cp class=kuku\u003EЭтот параграф мы отобразим темно-красным цветом по белому фону.\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EЭту \u003Ca class=kuku\u003Eгипертекстовую ссылку\u003C\u002Fa\u003E мы отобразим темно-красным цветом по белому фону.\u003C\u002Fp\u003E\u003Cbr\u003EЭтот параграф мы отобразим темно-красным цветом по белому фону.\u003Cbr\u003EЭту гипертекстовую ссылку мы отобразим темно-красным цветом по белому фону. \u003Cbr\u003E","\u003Cp\u003EСелектор - идентификатор объекта\u003Cbr\u003E\u003Cp\u003E\tОписание стиля для объекта задается строкой, в которой селектор представляет собой имя этого объекта с лидирующим символом \"#\":\r\n\r\na.mainlink {color:darkred;text-decoration:underline;font-style:italic;}\r\n#blue {color:#003366}\r\n\u003Ca class=mainlink\u003Eосновная гипертекстовая ссылка\u003C\u002Fa\u003E\r\n\u003Ca class=mainlink id=blue\u003Eмодифицированная гипертекстовая ссылка\u003C\u002Fa\u003E\r\n\r\nосновная гипертекстовая ссылка\r\nмодифицированная гипертекстовая ссылка\u003Cbr\u003E","\u003Cp\u003EНаследование и переопределение\u003Cbr\u003E\u003Cp\u003EСначала применяются стили умолчания браузера \u003Cbr\u003EСтили умолчания браузера переопределяются прилинкованными стилями (элемент LINK заголовка документа). \u003Cbr\u003EПрилинкованные стили переопределяются описаниями стилей в элементе STYLE \u003Cbr\u003EСтили элемента STYLE переопределяются атрибутом STYLE в любом из элементов разметки\u003Cbr\u003E","\u003Cp\u003EЭлемент DIV\u003Cbr\u003E\u003Cp\u003E\tDIV позволяет применить атрибуты стиля, связанные с границей блокаDIV позволяет применить атрибуты стиля, связанные с границей блока, отступами блока от границ старшего элементаDIV позволяет применить атрибуты стиля, связанные с границей блока, отступами блока от границ старшего элемента и \"набивку\", т.е. отступ от границы блока до границы вложенного элемента:\r\n\u003Cbr\u003E\t\u003Cdiv style=\"border-color:#003366;\r\nborder-width:1px;\r\nmargin:20px;\r\npadding:10px;\"\u003E\r\n...\r\n\u003C\u002Fdiv\u003E\u003Cbr\u003E","\u003Cp\u003EЭлемент SPAN\u003Cbr\u003E\u003Cp\u003E\tЭлемент разметки SPAN - это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он может заменить собой элементы: FONT, I, B, U, SUB, SUP и т.п.\u003Cbr\u003E\u003Cspan style=\"font-weight:bold;\"\u003EСтили \r\n\u003Cspan style=\"font-style:italic;\"\u003Eмогут \u003C\u002Fspan\u003E пересекаться\u003C\u002Fspan\u003E\u003Cbr\u003E","\u003Cp\u003EСвойства блоков\u003Cbr\u003E","\u003Cp\u003EОтступы (margins)\u003Cbr\u003E\u003Cp\u003Ep {margin-left:50px;margin-right:5px;\r\nmargin-top:15px;margin-bottom:50px;\r\npadding:0px; text-align:left;}\u003Cbr\u003E","\u003Cp\u003EНабивка (padding)\u003Cbr\u003E\u003Cp\u003Ep {padding-left:100px;\r\npadding-right:50px;\r\npadding-top:20px;\r\npadding-bottom:10px;\r\ntext-align:left;\r\nborder-width:1px;} \u003Cbr\u003E","\u003Cp\u003EОбтекание блока текста\u003Cbr\u003E\u003Cp\u003EАтрибут float определяет плавающий блок текста. Он может принимать значения: \u003Cbr\u003Eleft - блок прижат к левой границе охватывающего блок элемента;\u003Cbr\u003Erigth - блок прижат к правой границе охватывающего блок элемента;\u003Cbr\u003Eboth - текст может обтекать блок с обеих сторон. \u003Cbr\u003EАтрибут clean – запрет обтекания:\u003Cbr\u003E\u003Cp style='clear:right;text-align:justify;'\u003EУ этого блока запрещен \\\"плавающий\\\" блок справа, поэтому он начинается ниже прижатого вправо ограниченного блока.\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003EУправление цветом\u003Cbr\u003E\u003Cp\u003EЦвет текста:\u003Cbr\u003Etd {color:darkred;}\u003Cbr\u003Ep {color:darkred;}\u003Cbr\u003Ei {color:#003366;font-style:normal;}\u003Cbr\u003EЦвет фона:\u003Cbr\u003E\u003Cbody bgcolor=...\u003E...\u003C\u002Fbody\u003E\u003Cbr\u003E\u003Ctable bgcolor=...\u003E...\u003C\u002Ftable\u003E\u003Cbr\u003E\u003Cspan style=\"background-color:#003366;\r\ncolor:white;\"\u003Eкак строковые элементы разметки\u003C\u002Fspan\u003E\u003Cbr\u003Ep {background: gray http:\u002F\u002Fkuku.ru\u002Fkuku.gif no-repeat fixed center center;}\u003Cbr\u003E","\u003Cp\u003EШрифты\u003Cbr\u003E\u003Cp\u003Efont-family - семейство начертаний шрифта (гарнитура);\u003Cbr\u003Efont-style - прямое начертание или курсив;\u003Cbr\u003Efont-weight - \"усиление\" (насыщенность) шрифта, \"жирность\" букв;\u003Cbr\u003Efont-size - размер шрифта (кегль). Задается в пикселях (px) и типографских пунктах (pt);\u003Cbr\u003Efont-variant - вариант начертания (обычный или мелкими буквами - капитель). \u003Cbr\u003E","\u003Cp\u003EГарнитура\u003Cbr\u003E\u003Cp\u003E\u003Cp align=left style=\"font-size:24px;\r\nfont-family:serif;color:darkred;\"\u003EЭта строка набрана пропорциональным шрифтом с засечками.\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp align=left style=\"font-size:24px;\r\nfont-family:sans-serif;color:darkred;\"\u003EЭта строка набрана пропорциональным шрифтом без засечек.\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp align=left style=\"font-size:24px;\r\nfont-family:monospace;color:darkred;\"\u003EЭта строка набрана моноширинным шрифтом.\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003EКегль (font-size)\u003Cbr\u003E\u003Cp\u003E\u003Cp style=\"font-size:12pt;\"\u003EКегль параграфа установлен в 12 пунктов\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp style=\"font-size:12px;\"\u003EКегль параграфа установлен в 12 пикселей\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp style=\"font-size:120%;\"\u003EКегль параграфа установлен в 120% от размера букв охватывающего параграф элемента\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp style=\"font-size:large;\"\u003EРазмер кегля large\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003EНачертание\u003Cbr\u003E\u003Cp\u003E\u003Cp style=\"color:darkred;\r\nfont-style:normal;\"\u003EПрямое начертание\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp style=\"color:darkred;\r\nfont-style:italic;\"\u003EКурсив\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp style=\"color:darkred;font-style:italic;\r\nfont-weight:bold;\"\u003EКурсив\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003EМежбуквенные расстояния\u003Cbr\u003E\u003Cp\u003E\u003Cp style=\"font-family:monospace;\u003Cbr\u003Eletter-spacing:10pt;color:darkred\"\u003E\u003Cbr\u003EМежбуквенное расстояние 10pt\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003EУчебник\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Fmunasipov.com\u002Flesson\u002Furoki_css.html\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа цвета\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: color.\u003Cbr\u003E Сделайте все абзацы \u003Cp\u003E красного цвета.\u003Cbr\u003E Сделайте все \u003Ch1\u003E зеленого цвета.\u003Cbr\u003E Сделайте все \u003Ch2\u003E голубого цвета.\u003Cbr\u003E Сделайте все \u003Ch3\u003E оранжевого цвета.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа style\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие HTML атрибуты: style.\u003Cbr\u003E Сделайте первый на странице абзац \u003Cp\u003E зеленого цвета.\u003Cbr\u003E Сделайте второй на странице абзац \u003Cp\u003E красного цвета.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа ширину и высоту\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: widthДля решения задач данного блока вам понадобятся следующие CSS свойства: width, height.\u003Cbr\u003E Сделайте все абзацы \u003Ch2\u003E шириной 300px.\u003Cbr\u003E Сделайте все таблицы \u003Ctable\u003E шириной 400px, высотой 200px.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа выравнивание\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: text-align.\u003Cbr\u003E Поставьте все \u003Ch1\u003E по центру.\u003Cbr\u003E Поставьте все \u003Ch2\u003E по правому краю.\u003Cbr\u003E Сделайте так, чтобы текст в абзацах \u003Cp\u003E был выровнен одновременно и по правому и по левому краю.\u003Cbr\u003E Сделайте так, чтобы во втором абзаце \u003Cp\u003E текст был выровнен по центру.\u003Cbr\u003E Поставьте все \u003Cth\u003E по левому краю.\u003Cbr\u003E Поставьте все \u003Ctd\u003E по центру.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа жирность\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: font-weight.\u003Cbr\u003E Сделайте все \u003Ctd\u003E жирным.\u003Cbr\u003E Сделайте \u003Ch1\u003E нежирным.\u003Cbr\u003E Сделайте одновременно \u003Cth\u003E, \u003Ch1\u003E и \u003Ch2\u003E нежирным.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа курсив\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: font-style.\u003Cbr\u003E Сделайте все \u003Ch2\u003E курсивом.\u003Cbr\u003E Сделайте все абзацы \u003Cp\u003E курсивом, а первый абзац - нет.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа размер шрифта\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: font-size.\u003Cbr\u003E Сделайте все \u003Ch2\u003E 20px.\u003Cbr\u003E Сделайте все абзацы \u003Cp\u003E 15px.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа семейство\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: font-family.\u003Cbr\u003E Сделайте для абзацев \u003Cp\u003E шрифт Arial.\u003Cbr\u003E Сделайте для \u003Ch2\u003E шрифт Times New Roman.\u003Cbr\u003E Сделайте для \u003Ch3\u003E любой шрифт без засечек.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа межстрочный интервал\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: line-height.\u003Cbr\u003E Сделайте межстрочный интервал для абзацев \u003Cp\u003E в 30px.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа свойство-сокращение font\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: font.\u003Cbr\u003E Закомментируйте все стили для абзацев.\u003Cbr\u003E Для \u003Cp\u003E сделайте шрифт Arial, 16 пикселей, курсив, жирный, межстрочный интервал в 30px.\u003Cbr\u003E Для \u003Ch1\u003E сделайте следующий шрифт: нежирный, 20 пикселей, Verdana.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EНа красную строку\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: text-indent.\u003Cbr\u003E Сделайте красную строку в абзацах 30px.\u003Cbr\u003E Для второго абзаца \u003Cp\u003E уберите красную строку.\u003Cbr\u003EНа вертикальное выравнивание\u003Cbr\u003EДля решения задач данного блока вам понадобятся следующие CSS свойства: vertical-align.\u003Cbr\u003E Поставьте текст в таблице \u003Ctable\u003E по верхнему краю по вертикали.\u003Cbr\u003E Поставьте текст в \u003Cth\u003E по центру по вертикали.\u003Cbr\u003E","\u003Cp\u003EЗадания\u003Cbr\u003E\u003Cp\u003EПовторите страницу по образцу:\u003Cbr\u003E"],href:"\u002Finformatika\u002Fkaskadnye-tablitsy-stiley-css--naznachenie",href_category:"\u002Finformatika",date:1637054424,related:[{id:309736,name:"Архитектура ЭВМ. Компьютер",href:"\u002Finformatika\u002Farhitektura-evm-kompyuter-1",jpg:"jpg\u002F309736"},{id:576561,name:"Мобильное приложение",href:"\u002Finformatika\u002Fmobilnoe-prilozhenie-3",jpg:"jpg\u002F576561"},{id:246719,name:"Компьютерные сети. Модель OSI. Стэк протоколов TCP\u002FIP. Уровень сетевых интерфейсов",href:"\u002Finformatika\u002Fkompyuternye-seti-model-osi-stek-protokolov",jpg:"jpg\u002F246719"},{id:105611,name:"Лайфхаки Word",href:"\u002Finformatika\u002Flayfhaki-word-2",jpg:"jpg\u002F105611"},{id:279939,name:"Подходы к понятию информации и измерение информации",href:"\u002Finformatika\u002Fpodhody-k-ponyatiyu-informatsii-i-izmerenie",jpg:"jpg\u002F279939"},{id:340680,name:"Процессор. Процесс обработки данных и управление этим процессом",href:"\u002Finformatika\u002Fprotsessor-protsess-obrabotki-dannyh-i-upravlenie",jpg:"jpg\u002F340680"},{id:264141,name:"Цифровое государственное управление",href:"\u002Finformatika\u002Ftsifrovoe-gosudarstvennoe-upravlenie",jpg:"jpg\u002F264141"},{id:284113,name:"Фільтрація та сортування",href:"\u002Finformatika\u002Ffltratsya-ta-sortuvannya",jpg:"jpg\u002F284113"},{id:583630,name:"Сортировки. Алгоритмы и структуры данных",href:"\u002Finformatika\u002Fsortirovki-algoritmy-i-struktury-dannyh",jpg:"jpg\u002F583630"},{id:347267,name:"Наследование. Отношения объектов. Принципы SOLID. GRASP. Лекция 3",href:"\u002Finformatika\u002Fnasledovanie-otnosheniya-obektov-printsipy-solid-grasp",jpg:"jpg\u002F347267"},{id:430668,name:"Инфологическое (концептуальное) моделирование предметной области - подход Oracle",href:"\u002Finformatika\u002Finfologicheskoe-kontseptualnoe-modelirovanie-predmetnoy-oblasti-podhod",jpg:"jpg\u002F430668"},{id:451702,name:"Презентация к уроку информатики в 9 классе по теме Логические операции",href:"\u002Finformatika\u002Fprezentatsiya-k-uroku-informatiki-v-9-11",jpg:"jpg\u002F451702"},{id:405366,name:"Word мәтіндік редакторында кесте құру",href:"\u002Finformatika\u002Fword-mtndk-redaktorynda-keste-ru",jpg:"jpg\u002F405366"},{id:174818,name:"Безопасность в интернете",href:"\u002Finformatika\u002Fbezopasnost-v-internete-6",jpg:"jpg\u002F174818"},{id:9764,name:"Знакомство с языком программирования Python",href:"\u002Finformatika\u002Fznakomstvo-s-yazykom-programmirovaniya-python",jpg:"jpg\u002F9764"},{id:391082,name:"Первинна профілактика торгівлі людьми",href:"\u002Finformatika\u002Fpervinna-proflaktika-torgvl-lyudmi",jpg:"jpg\u002F391082"},{id:362900,name:"SFT.CM.06 Oracle. Oracle 11g RDBMS introduction",href:"\u002Finformatika\u002Fsftcm06-oracle-oracle-11g-rdbms-introduction",jpg:"jpg\u002F362900"},{id:337466,name:"Автоматизированная система дистанционного тестирования знаний студентов на основе технологии ASP.NET",href:"\u002Finformatika\u002Favtomatizirovannaya-sistema-distantsionnogo-testirovaniya-znaniy-studentov",jpg:"jpg\u002F337466"},{id:22531,name:"Протоколы работы с именами и адресами ARP &amp; DNS",href:"\u002Finformatika\u002Fprotokoly-raboty-s-imenami-i-adresami",jpg:"jpg\u002F22531"},{id:200626,name:"Модели жизненного цикла разработки программного продукта. (Тема 5)",href:"\u002Finformatika\u002Fmodeli-zhiznennogo-tsikla-razrabotki-programmnogo-produkta",jpg:"jpg\u002F200626"},{id:103619,name:"ОС Linux Ubuntu. Разделы, файловые системы, загрузчик, администратор. (Лекция 18)",href:"\u002Finformatika\u002Fos-linux-ubuntu-razdely-faylovye-sistemy",jpg:"jpg\u002F103619"},{id:142929,name:"Побудова звітів",href:"\u002Finformatika\u002Fpobudova-zvtv",jpg:"jpg\u002F142929"},{id:263262,name:"Дистанционный урок – урок с использованием учебного материала либо полностью размещенного в Интернете",href:"\u002Finformatika\u002Fdistantsionnyy-urok--urok-s-ispolzovaniem",jpg:"jpg\u002F263262"},{id:547193,name:"Внеклассное мероприятие по информатике Сто к одному",href:"\u002Finformatika\u002Fvneklassnoe-meropriyatie-po-informatike-sto-k",jpg:"jpg\u002F547193"},{id:17081,name:"Жүйелік және қолданбалы программалау. Системное и прикладное программирование",href:"\u002Finformatika\u002Fzhyelk-zhne-oldanbaly-programmalau-sistemnoe-i",jpg:"jpg\u002F17081"},{id:249345,name:"CPR 101. Welcome to Computer Skills for Programmers",href:"\u002Finformatika\u002Fcpr-101-welcome-to-computer-skills",jpg:"jpg\u002F249345"},{id:233097,name:"Хакерские улиты и защита от них",href:"\u002Finformatika\u002Fhakerskie-ulity-i-zashchita-ot-nih",jpg:"jpg\u002F233097"},{id:253637,name:"Модели жизненного цикла программного обеспечения",href:"\u002Finformatika\u002Fmodeli-zhiznennogo-tsikla-programmnogo-obespecheniya-1",jpg:"jpg\u002F253637"}],navigation:{next:"\u002Fbiologiya\u002Fkak-zveri-zimoy-v-lesu-zhivut",next_name:"Как звери зимой в лесу живут",prev:"\u002Fmedetsina\u002Fspirohety-taksonomiya-spirohetimeyushchih-klinicheskoe-znachenie",prev_name:"Спирохеты. Таксономия спирохет,имеющих клиническое значение"}}}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:I,SITE_HOST:"mypreza.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E",1,"Информатика","Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))