Cascading style sheets презентация

Cascading Style Sheets
CSS (каскадные листы/таблицы стилей) — это язык для описания стилей, которые задают внешний вид документов, написанных при помощи языков разметки.
CSS позволяет устанавливать цвета, шрифты, отступы, фоны, размеры, управлять местоположением (позиционированием) и обтеканием элементов, реализовывать различные оформительские решения.

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

Разделение оформления и структуры документа дает такие преимущества:
возможность параллельной разработки/модификации документа и его оформления/дизайна.
расширенные возможности по сравнению с HTML;
возможность одновременного изменения внешнего вида множества документов при помощи одной таблицы стилей;
возможность установки различного форматирования для различных носителей информации (экран, печать и т. п.).

Уровни CSS
ПРИ РАЗРАБОТКЕ СТАНДАРТА CSS КОНСОРЦИУМ ВСЕМИРНОЙ ПАУТИНЫ ПРИНЯЛ РЕШЕНИЕ КЛАССИФИЦИРОВАТЬ НОВЫЕ СТАНДАРТЫ CSS НЕ ПО ВЕРСИЯМ, КАК ПРИНЯТО В РАЗРАБОТКЕ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ, А ПО УРОВНЯМ.

Способы включения CSS в HTML
Использование внешних таблиц стилей
Использование внутренних таблиц стилей
Использование встраиваемых стилей

Встраиваемые стили
Описание стиля располагается непосредственно внутри тега элемента, который описывается. Это делается с помощью параметра STYLE
Этот метод нежелателен, он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации.
Слайд 9
Внутренние таблицы стилей
Описание стилей располагается в коде Web-странички, внутри тега
...
. Тег
размещается внутри контейнера HEAD<br><p>В этом случае описанные стили можно использовать для элементов, располагающихся в пределах странички. <br><p><style><br>table{background :#099;}<br>
Слайд 10
Внешние таблицы стилей
Информация о стилях располагается в отдельном файле (*.css).
Это имеет смысл в случае, если планируется применять эти стили к большему, чем одна, количеству страниц.
table{background :#099;}
Слайд 11
Подключение файла *.css
example.html
href=“mystyles,css"/>
содержание страницы HTML-документа
Ссылка может быть как на «локальную» страницу стилей, созданную
специально для этого документа, так и на «глобальную», хранящуюся
в сети Интернет.
example1.html
Слайд 12
Базовый синтаксис
Стиль – это набор параметров, задающих представление некоторого элемента веб-страницы.
Селектор
– это имя стиля.
селектор {
свойство1: значение1;
свойство2: значение2;
…
свойствоN: значениеN;
}
Стили описываются
в такой форме:
Пример:
.footer {
background: #960869;
}
Слайд 13
Синтаксис CSS
Слайд 14
Типы селекторов
В качестве селекторов (имен стилей) могут использоваться:
универсальный селектор
теги
классы, определяемые пользователем
идентификаторы, определяемые пользователем;
Слайд 15
Типы селекторов
1. Универсальный селектор
2. Селектор тегов
3. Селектор атрибутов
4. Селектор по классу
5.
Селектор по идентификатору
6. Контекстный селектор
7. Дочерний селектор
8. Соседний селектор
Слайд 16
Универсальный селектор
один стиль для всех элементов веб-страницы, например, задать шрифт
или начертание текста
* { Описание правил стиля }
* { font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт для текста */
font-size: 96%; /* Размер текста */ }
Слайд 17
Селектор тегов
В качестве селектора может выступать любой тег HTML, для которого
определяются правила форматирования, такие как: цвет, фон, размер и т. д.
Тег { свойство1: значение; свойство2: значение; ... }
Пример:
P { text-align: justify; /* Выравнивание по ширине */
color: green; /* Зеленый цвет текста */
}
Слайд 18
Селектор атрибутов
Устанавливает стиль для элемента, если задан специфичный атрибут тега.
[атрибут] {
Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }
A[href^="http://"] - начинается с определённого текста
A[href$=".ru"] - оканчивается определённым текстом
A[href*="htmlbook"] - содержит указанный текст
[class~="block"] - Одно из нескольких значений атрибута
DIV[class|="block"] - Дефис в значении атрибута(
)
Слайд 19
Слайд 20
CSS
Пример:
A[href$=".ru"] { /* Если ссылка заканчивается на .ru */
background: url(images/ru.png)
no-repeat 0 6px; /* Добавляем фоновый рисунок */
padding-left: 12px; /* Смещаем текст вправо */ }
A[href$=".com"] { /* Если ссылка заканчивается на .com */
background: url(images/com.png) no-repeat 0 6px;
padding-left: 12px; }
HTML
Yandex.Com |
Yandex.Ru
Слайд 21
Задание
Изображения с атрибутом alt содержащим слово «Ничосе» обвести зеленой рамкой. (border:1px
solid green;)
Создать меню из 3 ссылок подсветить красным ссылки с защищёнными протоколами
Слайд 22
Селектор по классу
к элементам страницы добавляем слово class=“name” и задаем стили
для класса
Пример HTML
Я красный абзац
Я красная ссылка
Я красный заголовок
CSS
.red{
color:#F00;}
}
Слайд 23
Селектор по идентификатору
задаем элементу страницы уникальный идентификатор
Пример HTML
Я зеленый
абзац
CSS
#green{
color:#090;
}
Слайд 24
Идентификаторы или классы?????
Слайд 25
Контекстный селектор
При создании веб-страницы часто приходится вкладывать одни теги внутрь
других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определённом контексте. Например, задать стиль для тега
только когда он располагается внутри контейнера
.
Контекстный селектор состоит из простых селекторов разделенных пробелом.
Тег1 Тег2 { ... }
Слайд 26
Контекстный селектор
Пример HTML
Жирное начертание текста
Одновременно жирное начертание текста и выделенное
цветом
CSS
P B { font-family: Times, serif; /* Семейство шрифта */
color: navy; /* Синий цвет текста */ }
Слайд 27
Контекстный селектор
HTML
Русская кухня |
Украинская кухня |
Кавказская кухня
Другие материалы по теме
CSS
A { color: green; /* Зеленый цвет текста для всех ссылок */ }
.menu { padding: 7px; /* Поля вокруг текста */
border: 1px solid #333; /* Параметры рамки */
background: #fc0; /* Цвет фона */ }
.menu A { color: navy; /* Темно-синий цвет ссылок */ }
Слайд 28
Дочерний селектор
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента
body
Lorem
ipsum dolor sit amet
, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam
, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Слайд 29
Дочерний селектор
Селектор 1 > Селектор 2 { Описание правил стиля }
HTML
Lorem ipsum dolor sit amet
, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
aliguam erat volutpat. >
dolore magna
CSS
DIV I { /* Контекстный селектор */ color: green; /* Зеленый цвет текста */ }
P > I { /* Дочерний селектор */ color: red; /* Красный цвет текста */ }
Слайд 30
Соседний селектор
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг
за другом в коде документа.
E + F { Описание правил стиля }
Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него.
Lorem ipsum
dolor
sit amet.
- дочерний
Lorem ipsum
dolor
sit
amet.
- соседний
Слайд 31
Соседний селектор
Пример HTML
Lorem
ipsum
dolor sit amet,
consectetuer
adipiscing elit.
Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit.
CSS
b + i { color: red; /* Красный цвет текста */ }
Слайд 32
Псевдоклассы
:first-child применяет стилевое оформление к первому дочернему элементу своего родителя.
tr:first-child{
background-color:#06F;}
:nth-child используется для добавления
стиля к элементам на основе нумерации в дереве элементов.
nav li:nth-child(odd){ background-color:#CCC;}
last-child задает стилевое оформление последнего элемента своего родителя
LI:nth-child(3n+3) - Он выбирает каждый третий элемент внутри маркированного списка: это 3-й, 6-й, 9-й, 12-й и т.д.
Слайд 33
Слайд 34
Слайд 35
Комбинированные выражения
Слайд 36
Задание
Слайд 37
Слайд 38
Слайд 39
Слайд 40
Слайд 41
Слайд 42
Задание
Выделить третий span
Выделить пятый strong
Слайд 43
Слайд 44
Слайд 45
Слайд 46
Слайд 47
Задание
Сделать из списка
Используя not сделать пункты списка круглыми кроме красных.
Слайд 48
Слайд 49
Слайд 50
Задание
Слайд 51
Псевдоэлементы :before и :after
Псевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента, к которому он
добавляется. Работает совместно со свойством content.
:before наследует стиль от элемента, к которому он добавляется.
after
Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется.
Слайд 52
Свойство 'content'
<строка>
Текстовое содержимое
Значением является URI, обозначающий внешний ресурс.
<счетчик>
Счетчики могут задаваться с помощью двух
различных функций 'counter()' или 'counters()'.
Слайд 53
Пример
ol>li) используются для того, чтобы не обрабатывались элементы вложенных ненумерованных списков.
Свойство 'counter-increment' Оно определяет величину,
на которую увеличивается содержимое счетчика при каждом новом вхождении элемента. По умолчанию приращение равно 1. Допускается использование отрицательных целых чисел.
Свойство 'counter-reset' Оно задает значение, которое присваивается счетчику при каждом новом вхождении элемента. По умолчанию оно равно 0.
Слайд 54
h1::before {
content: url(smiley.gif);
}
This is a heading
The ::before pseudo-element inserts
content before the content of an element.
This is a heading
Note:
IE8 supports the content property only if a !DOCTYPE is specified.
Имя файла: Cascading-style-sheets.pptx
Количество просмотров: 25
Количество скачиваний: 0
Скачать
- Предыдущая
Химия және биология пәні бойынша оқушылар біліміндегі ақауларды жою үшін оқытудың интерактивтік әдістерін қолдану
Следующая -
Нарушение осанки
Похожие презентации
Пользовательский интерфейс
Возможности динамических (электронных) таблиц. Математическая обработка числовых данных
Логические универсальные действия
Проектирование баз данных. Анализ стоимости операций
Графический редактор PAINT
Разработка сайта преподавателя истории и философии
Адресация ячеек в Microsoft Excel
General. Data. Protection
Электронное предварительное голосование на сайте pg.er.ru. Инструкция
Инсталляция программ
Применение ИКТ в обучении иностранному языку
Операционные системы, среды и оболочки. Ввод-вывод. Файловая система. (Лекция 4)
3D моделирование и его применение
Кодирование графической информации
Экспертные системы распознания химических веществ Распознавания удобрений
WinDr &amp; Simulator
Государственная программа Информационное общество 2011-2020 годы
Представления (VIEW). Лабораторная работа 7
Введение в криптографию. Основные понятия и определения. Виды криптосистем. Тема 2.1
Создание веб-сайтов
Java Puzzlers
Настройка DHCP с использованием назначения на основе Microsoft Windows Server
Сервер InterBase
Информационные технологии и управление образовательной деятельностью
Эталонная модель сетевого взаимодействия OSI
Государственная система научно-технической информации
Что такое обстановка, ее установка
Лекция 1. Основные понятия языка С#. Переменные и выражения
Обратная связь
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,R,S){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:I,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:349502,name:m,category:H,count:55,jpg:"jpg\u002F349502",hits:I,download:b,h1:"Cascading style sheets презентация",meta:{h1:m,title:m,description:"Cascading style sheets презентация на тему, доклад, Информатика",keywords:"Cascading style sheets, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Cascading style sheets из раздела Информатика. Презентация на заданную тему содержит 55 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003ECascading Style Sheets\u003Cbr\u003E\u003Cp\u003ECSS (каскадные листы\u002Fтаблицы стилей) — это язык для описания стилей, которые задают внешний вид документов, написанных при помощи языков разметки.\u003Cbr\u003ECSS позволяет устанавливать цвета, шрифты, отступы, фоны, размеры, управлять местоположением (позиционированием) и обтеканием элементов, реализовывать различные оформительские решения. \u003Cbr\u003E \u003Cp\u003EИдея использования \r\nHTML совместно с CSS\u003Cbr\u003E\u003Cp\u003EРазделение структуры и оформления документа.\u003Cbr\u003E\u003Cp\u003EHTML используется для описания логической структуры документа (выделения заголовков, подзаголовков, абзацев, таблиц, гиперссылок и других базовых логических элементов)\u003Cbr\u003E\u003Cp\u003ECSS описывает физическое форматирование документа (как должен выглядеть тот или иной логический элемент документа)\u003Cbr\u003E",file:"Cascading-style-sheets.pptx",texts:["\u003Cp\u003ECascading Style Sheets\u003Cbr\u003E\u003Cp\u003EДанильченко Анна Александровна\u003Cbr\u003EПреподаватель кафедры программного обеспечения систем ЖГТУ\u003Cbr\u003E","\u003Cp\u003ECascading Style Sheets\u003Cbr\u003E\u003Cp\u003ECSS (каскадные листы\u002Fтаблицы стилей) — это язык для описания стилей, которые задают внешний вид документов, написанных при помощи языков разметки.\u003Cbr\u003ECSS позволяет устанавливать цвета, шрифты, отступы, фоны, размеры, управлять местоположением (позиционированием) и обтеканием элементов, реализовывать различные оформительские решения. \u003Cbr\u003E","\u003Cp\u003EИдея использования \r\nHTML совместно с CSS\u003Cbr\u003E\u003Cp\u003EРазделение структуры и оформления документа.\u003Cbr\u003E\u003Cp\u003EHTML используется для описания логической структуры документа (выделения заголовков, подзаголовков, абзацев, таблиц, гиперссылок и других базовых логических элементов)\u003Cbr\u003E\u003Cp\u003ECSS описывает физическое форматирование документа (как должен выглядеть тот или иной логический элемент документа)\u003Cbr\u003E","\u003Cp\u003EРазделение оформления и структуры документа дает такие преимущества:\u003Cbr\u003E\u003Cp\u003E возможность параллельной разработки\u002Fмодификации документа и его оформления\u002Fдизайна.\u003Cbr\u003E расширенные возможности по сравнению с HTML;\u003Cbr\u003E возможность одновременного изменения внешнего вида множества документов при помощи одной таблицы стилей;\u003Cbr\u003E возможность установки различного форматирования для различных носителей информации (экран, печать и т. п.).\u003Cbr\u003E","\u003Cp\u003EУровни CSS\u003Cbr\u003E\u003Cp\u003EПРИ РАЗРАБОТКЕ СТАНДАРТА CSS КОНСОРЦИУМ ВСЕМИРНОЙ ПАУТИНЫ ПРИНЯЛ РЕШЕНИЕ КЛАССИФИЦИРОВАТЬ НОВЫЕ СТАНДАРТЫ CSS НЕ ПО ВЕРСИЯМ, КАК ПРИНЯТО В РАЗРАБОТКЕ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ, А ПО УРОВНЯМ. \u003Cbr\u003E",a,"\u003Cp\u003EСпособы включения CSS в HTML \u003Cbr\u003E\u003Cp\u003EИспользование внешних таблиц стилей\u003Cbr\u003EИспользование внутренних таблиц стилей\u003Cbr\u003EИспользование встраиваемых стилей\u003Cbr\u003E","\u003Cp\u003EВстраиваемые стили\r\n Описание стиля располагается непосредственно внутри тега элемента, который описывается. Это делается с помощью параметра STYLE \u003Cbr\u003E\u003Cp\u003E\u003CTABLE BORDER style=\"background:#099\"\u003E\u003Cbr\u003E\u003Cp\u003EЭтот метод нежелателен, он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. \u003Cbr\u003E","\u003Cp\u003EВнутренние таблицы стилей\r\n Описание стилей располагается в коде Web-странички, внутри тега \u003CSTYLE type=\"text\u002Fcss\"\u003E... \u003C\u002FSTYLE\u003E. Тег \u003CSTYLE\u003E размещается внутри контейнера HEAD\u003Cbr\u003E\u003Cp\u003EВ этом случае описанные стили можно использовать для элементов, располагающихся в пределах странички. \u003Cbr\u003E\u003Cp\u003E\u003Cstyle\u003E\u003Cbr\u003Etable{background :#099;}\u003Cbr\u003E\u003C\u002Fstyle\u003E\u003Cbr\u003E","\u003Cp\u003EВнешние таблицы стилей\r\n Информация о стилях располагается в отдельном файле (*.css). Это имеет смысл в случае, если планируется применять эти стили к большему, чем одна, количеству страниц.\u003Cbr\u003E\u003Cp\u003Etable{background :#099;}\u003Cbr\u003E","\u003Cp\u003EПодключение файла *.css\u003Cbr\u003E\u003Cp\u003E\u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"style2.css\"\u003E\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E example.html\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=“mystyles,css\"\u002F\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\r\n \u003Cbody\u003E\u003Cbr\u003E содержание страницы HTML-документа\u003Cbr\u003E \u003C\u002Fbody\u003E\r\n\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EСсылка может быть как на «локальную» страницу стилей, созданную\r\nспециально для этого документа, так и на «глобальную», хранящуюся\r\nв сети Интернет.\u003Cbr\u003E\u003Cp\u003E\u003Chead\u003E example1.html\u003Cbr\u003E \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" \r\n href=\"http:\u002F\u002Fwww.google.com\u002Fuds\u002Fcss\u002Fgsearch.css\" \u002F\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E","\u003Cp\u003EБазовый синтаксис\u003Cbr\u003E\u003Cp\u003EСтиль – это набор параметров, задающих представление некоторого элемента веб-страницы.\u003Cbr\u003EСелектор – это имя стиля.\u003Cbr\u003E\u003Cp\u003Eселектор { \t\u003Cbr\u003E\t\tсвойство1: значение1;\u003Cbr\u003E\t\tсвойство2: значение2;\u003Cbr\u003E\t\t…\u003Cbr\u003E\t\tсвойствоN: значениеN; \u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EСтили описываются \u003Cbr\u003Eв такой форме:\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E .footer {\u003Cbr\u003E\tbackground: #960869;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСинтаксис CSS\u003Cbr\u003E","\u003Cp\u003EТипы селекторов\u003Cbr\u003EВ качестве селекторов (имен стилей) могут использоваться:\u003Cbr\u003E универсальный селектор\u003Cbr\u003E теги\u003Cbr\u003E классы, определяемые пользователем\u003Cbr\u003E идентификаторы, определяемые пользователем;\u003Cbr\u003E","\u003Cp\u003EТипы селекторов\u003Cbr\u003E\u003Cp\u003E1. Универсальный селектор\u003Cbr\u003E2. Селектор тегов\u003Cbr\u003E3. Селектор атрибутов\u003Cbr\u003E4. Селектор по классу\u003Cbr\u003E5. Селектор по идентификатору \u003Cbr\u003E6. Контекстный селектор\u003Cbr\u003E7. Дочерний селектор\u003Cbr\u003E8. Соседний селектор\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EУниверсальный селектор\r\n один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста\u003Cbr\u003E\u003Cp\u003E* { Описание правил стиля }\u003Cbr\u003E* { font-family: Arial, Verdana, sans-serif; \u002F* Рубленый шрифт для текста *\u002F\u003Cbr\u003E font-size: 96%; \u002F* Размер текста *\u002F }\u003Cbr\u003E","\u003Cp\u003EСелектор тегов\r\nВ качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т. д. \u003Cbr\u003E\u003Cp\u003EТег { свойство1: значение; свойство2: значение; ... }\u003Cbr\u003EПример:\u003Cbr\u003EP { text-align: justify; \u002F* Выравнивание по ширине *\u002F\u003Cbr\u003E color: green; \u002F* Зеленый цвет текста *\u002F\u003Cbr\u003E }\u003Cbr\u003E","\u003Cp\u003EСелектор атрибутов\r\nУстанавливает стиль для элемента, если задан специфичный атрибут тега. \u003Cbr\u003E\u003Cp\u003E[атрибут] { Описание правил стиля }\u003Cbr\u003EСелектор[атрибут] { Описание правил стиля }\u003Cbr\u003EA[href^=\"http:\u002F\u002F\"] - начинается с определённого текста\u003Cbr\u003EA[href$=\".ru\"] - оканчивается определённым текстом\u003Cbr\u003EA[href*=\"htmlbook\"] - содержит указанный текст\u003Cbr\u003E[class~=\"block\"] - Одно из нескольких значений атрибута\u003Cbr\u003EDIV[class|=\"block\"] - Дефис в значении атрибута(\u003Cdiv class=\"block-menu-therm\"\u003E)\u003Cbr\u003E",a,"\u003Cp\u003ECSS\u003Cbr\u003EПример:\u003Cbr\u003EA[href$=\".ru\"] { \u002F* Если ссылка заканчивается на .ru *\u002F\u003Cbr\u003E background: url(images\u002Fru.png) no-repeat 0 6px; \u002F* Добавляем фоновый рисунок *\u002F\u003Cbr\u003E padding-left: 12px; \u002F* Смещаем текст вправо *\u002F }\u003Cbr\u003E A[href$=\".com\"] { \u002F* Если ссылка заканчивается на .com *\u002F \u003Cbr\u003Ebackground: url(images\u002Fcom.png) no-repeat 0 6px;\u003Cbr\u003E padding-left: 12px; }\u003Cbr\u003E\u003Cp\u003EHTML\u003Cbr\u003E\u003Ca href=\"http:\u002F\u002Fwww.yandex.com\"\u003EYandex.Com\u003C\u002Fa\u003E | \u003Ca href=\"http:\u002F\u002Fwww.yandex.ru\"\u003EYandex.Ru\u003C\u002Fa\u003E\u003Cbr\u003E","\u003Cp\u003EЗадание\u003Cbr\u003E\u003Cp\u003EИзображения с атрибутом alt содержащим слово «Ничосе» обвести зеленой рамкой. (border:1px solid green;)\u003Cbr\u003E\u003Cp\u003EСоздать меню из 3 ссылок подсветить красным ссылки с защищёнными протоколами\u003Cbr\u003E","\u003Cp\u003EСелектор по классу\r\nк элементам страницы добавляем слово class=“name” и задаем стили для класса\u003Cbr\u003E\u003Cp\u003EПример HTML\u003Cbr\u003E\u003Cp class=\"red\"\u003EЯ красный абзац\u003C\u002Fp\u003E\u003Cbr\u003E\u003Ca class=\"red\" href=\"#\"\u003EЯ красная ссылка\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ch2 class=\"red\"\u003EЯ красный заголовок\u003C\u002Fh2\u003E\u003Cbr\u003ECSS\u003Cbr\u003E.red{\u003Cbr\u003E\tcolor:#F00;}\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСелектор по идентификатору \r\nзадаем элементу страницы уникальный идентификатор\u003Cbr\u003E\u003Cp\u003EПример HTML\u003Cbr\u003E\u003Cp id=\"green\"\u003EЯ зеленый абзац\u003C\u002Fp\u003E\u003Cbr\u003ECSS\u003Cbr\u003E#green{\u003Cbr\u003E\tcolor:#090;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EИдентификаторы или классы?????\u003Cbr\u003E","\u003Cp\u003EКонтекстный селектор\r\n\r\n При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определённом контексте. Например, задать стиль для тега \u003Cb\u003E только когда он располагается внутри контейнера\u003Cp\u003E. \r\n\r\n\r\nКонтекстный селектор состоит из простых селекторов разделенных пробелом.\r\n\r\n Тег1 Тег2 { ... } \r\n\u003Cbr\u003E","\u003Cp\u003EКонтекстный селектор\u003Cbr\u003E\u003Cp\u003EПример HTML\u003Cbr\u003E\u003Cdiv\u003E\u003Cbr\u003E\u003Cb\u003EЖирное начертание текста\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003Cp\u003E\u003Cb\u003EОдновременно жирное начертание текста и выделенное цветом\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003ECSS\u003Cbr\u003EP B { font-family: Times, serif; \u002F* Семейство шрифта *\u002F \u003Cbr\u003Ecolor: navy; \u002F* Синий цвет текста *\u002F }\u003Cbr\u003E","\u003Cp\u003EКонтекстный селектор\u003Cbr\u003E\u003Cp\u003EHTML\u003Cbr\u003E\u003Cdiv class=\"menu\"\u003E\u003Cbr\u003E \u003Ca href=\"http:\u002F\u002Fhtmlbook.ru\u002F1.html\"\u003EРусская кухня\u003C\u002Fa\u003E | \u003Ca href=\"http:\u002F\u002Fhtmlbook.ru\u002F2.html\"\u003EУкраинская кухня\u003C\u002Fa\u003E | \u003Ca href=\"http:\u002F\u002Fhtmlbook.ru\u002F3.html\"\u003EКавказская кухня\u003C\u002Fa\u003E \u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003Ca href=\"http:\u002F\u002Fhtmlbook.ru\u002Ftext.html\"\u003EДругие материалы по теме\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003ECSS\u003Cbr\u003EA { color: green; \u002F* Зеленый цвет текста для всех ссылок *\u002F }\u003Cbr\u003E .menu { padding: 7px; \u002F* Поля вокруг текста *\u002F \u003Cbr\u003Eborder: 1px solid #333; \u002F* Параметры рамки *\u002F\u003Cbr\u003E background: #fc0; \u002F* Цвет фона *\u002F }\u003Cbr\u003E .menu A { color: navy; \u002F* Темно-синий цвет ссылок *\u002F }\u003Cbr\u003E","\u003Cp\u003EДочерний селектор\r\nДочерним называется элемент, который непосредственно располагается внутри родительского элемента\u003Cbr\u003E\u003Cp\u003Ebody\u003Cbr\u003E\u003Cdiv class=\"main\"\u003E\u003Cbr\u003E \u003Cem\u003ELorem ipsum dolor sit amet\u003C\u002Fem\u003E, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.\u003C\u002Fem\u003E\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cstrong\u003E\u003Cem\u003EUt wisis enim ad minim veniam\u003C\u002Fem\u003E\u003Cbr\u003E\u003C\u002Fstrong\u003E\u003Cbr\u003E, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.\u003Cbr\u003E\u003C\u002Fp\u003E \u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E","\u003Cp\u003EДочерний селектор\u003Cbr\u003E\u003Cp\u003EСелектор 1 \u003E Селектор 2 { Описание правил стиля }\u003Cbr\u003EHTML\u003Cbr\u003E\u003Cdiv\u003E \u003Cbr\u003E\u003Ci\u003ELorem ipsum dolor sit amet\u003C\u002Fi\u003E\u003Cbr\u003E, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet \u003Cbr\u003Ealiguam erat volutpat. \u003E \u003Ci\u003Edolore magna\u003C\u002Fi\u003E \u003Cbr\u003E\u003C\u002Fp\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003ECSS\u003Cbr\u003EDIV I { \u002F* Контекстный селектор *\u002F color: green; \u002F* Зеленый цвет текста *\u002F } \u003Cbr\u003EP \u003E I { \u002F* Дочерний селектор *\u002F color: red; \u002F* Красный цвет текста *\u002F }\u003Cbr\u003E","\u003Cp\u003EСоседний селектор\r\n Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.\u003Cbr\u003E\u003Cp\u003EE + F { Описание правил стиля }\u003Cbr\u003EСтиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него.\u003Cbr\u003E\u003Cp\u003ELorem ipsum \u003Cb\u003Edolor\u003C\u002Fb\u003E sit amet.\u003C\u002Fp\u003E - дочерний\u003Cbr\u003E\u003Cp\u003ELorem ipsum \u003Cb\u003Edolor\u003C\u002Fb\u003E \u003Cvar\u003Esit\u003C\u002Fvar\u003E amet.\u003C\u002Fp\u003E - соседний\u003Cbr\u003E","\u003Cp\u003EСоседний селектор\r\n\u003Cbr\u003E\u003Cp\u003EПример HTML\u003Cbr\u003E\u003Cp\u003ELorem \u003Cb\u003Eipsum \u003C\u002Fb\u003E dolor sit amet, \u003Ci\u003Econsectetuer\u003C\u002Fi\u003E adipiscing elit.\u003Cbr\u003E\u003C\u002Fp\u003E \u003Cbr\u003E\u003Cp\u003ELorem ipsum dolor sit amet, \u003Ci\u003Econsectetuer\u003C\u002Fi\u003E adipiscing elit.\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003ECSS\u003Cbr\u003Eb + i { color: red; \u002F* Красный цвет текста *\u002F }\u003Cbr\u003E","\u003Cp\u003EПсевдоклассы\u003Cbr\u003E\u003Cp\u003E:first-child применяет стилевое оформление к первому дочернему элементу своего родителя.\u003Cbr\u003Etr:first-child{\u003Cbr\u003E\tbackground-color:#06F;}\u003Cbr\u003E:nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.\u003Cbr\u003Enav li:nth-child(odd){\t\t\tbackground-color:#CCC;}\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003Elast-child задает стилевое оформление последнего элемента своего родителя\u003Cbr\u003ELI:nth-child(3n+3) - Он выбирает каждый третий элемент внутри маркированного списка: это 3-й, 6-й, 9-й, 12-й и т.д.\u003Cbr\u003E",a,a,"\u003Cp\u003EКомбинированные выражения\u003Cbr\u003E",J,a,a,a,a,a,"\u003Cp\u003EЗадание\u003Cbr\u003E\u003Cp\u003EВыделить третий span\u003Cbr\u003EВыделить пятый strong\u003Cbr\u003E",a,a,a,a,"\u003Cp\u003EЗадание\u003Cbr\u003E\u003Cp\u003EСделать из списка\u003Cbr\u003E\u003Cp\u003EИспользуя not сделать пункты списка круглыми кроме красных. \u003Cbr\u003E",a,a,J,"\u003Cp\u003EПсевдоэлементы :before и :after\r\n\u003Cbr\u003E\u003Cp\u003EПсевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.\u003Cbr\u003E:before наследует стиль от элемента, к которому он добавляется.\u003Cbr\u003Eafter\r\nПсевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. \u003Cbr\u003E","\u003Cp\u003EСвойство 'content'\u003Cbr\u003E\u003Cстрока\u003E\u003Cbr\u003EТекстовое содержимое\u003Cbr\u003E\u003Cp\u003E\u003Curi\u003E\u003Cbr\u003EЗначением является URI, обозначающий внешний ресурс.\u003Cbr\u003E\u003Cсчетчик\u003E\u003Cbr\u003EСчетчики могут задаваться с помощью двух различных функций 'counter()' или 'counters()'.\u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003Eol\u003Eli) используются для того, чтобы не обрабатывались элементы вложенных ненумерованных списков.\u003Cbr\u003E\u003Cp\u003EСвойство 'counter-increment' Оно определяет величину, на которую увеличивается содержимое счетчика при каждом новом вхождении элемента. По умолчанию приращение равно 1. Допускается использование отрицательных целых чисел.\u003Cbr\u003EСвойство 'counter-reset' Оно задает значение, которое присваивается счетчику при каждом новом вхождении элемента. По умолчанию оно равно 0.\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E \u003Cbr\u003E\u003Cp\u003Eh1::before {\r\n content: url(smiley.gif);\r\n}\u003Cbr\u003E\u003Cp\u003E\u003Ch1\u003EThis is a heading\u003C\u002Fh1\u003E\r\n\u003Cp\u003EThe ::before pseudo-element inserts content before the content of an element.\u003C\u002Fp\u003E\r\n\u003Ch1\u003EThis is a heading\u003C\u002Fh1\u003E\r\n\u003Cp\u003E\u003Cb\u003ENote:\u003C\u002Fb\u003E IE8 supports the content property only if a !DOCTYPE is specified.\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003EОбъединение селекторов\u003Cbr\u003E"],href:"\u002Finformatika\u002Fcascading-style-sheets-1",href_category:"\u002Finformatika",date:1659235597,related:[{id:259383,name:"Пользовательский интерфейс",href:"\u002Finformatika\u002Fpolzovatelskiy-interfeys-7",jpg:"jpg\u002F259383"},{id:329252,name:"Возможности динамических (электронных) таблиц. Математическая обработка числовых данных",href:"\u002Finformatika\u002Fvozmozhnosti-dinamicheskih-elektronnyh-tablits-matematicheskaya-obrabotka-1",jpg:"jpg\u002F329252"},{id:186164,name:"Логические универсальные действия",href:"\u002Finformatika\u002Flogicheskie-universalnye-deystviya",jpg:"jpg\u002F186164"},{id:368769,name:"Проектирование баз данных. Анализ стоимости операций",href:"\u002Finformatika\u002Fproektirovanie-baz-dannyh-analiz-stoimosti-operatsiy",jpg:"jpg\u002F368769"},{id:167514,name:"Графический редактор PAINT",href:"\u002Finformatika\u002Fgraficheskiy-redaktor-paint-2",jpg:"jpg\u002F167514"},{id:581456,name:"Разработка сайта преподавателя истории и философии",href:"\u002Finformatika\u002Frazrabotka-sayta-prepodavatelya-istorii-i-filosofii",jpg:"jpg\u002F581456"},{id:287993,name:"Адресация ячеек в Microsoft Excel",href:"\u002Finformatika\u002Fadresatsiya-yacheek-v-microsoft-excel",jpg:"jpg\u002F287993"},{id:592999,name:"General. Data. Protection",href:"\u002Finformatika\u002Fgeneral-data-protection",jpg:"jpg\u002F592999"},{id:577341,name:"Электронное предварительное голосование на сайте pg.er.ru. Инструкция",href:"\u002Finformatika\u002Felektronnoe-predvaritelnoe-golosovanie-na-sayte-pgerru",jpg:"jpg\u002F577341"},{id:303207,name:"Инсталляция программ",href:"\u002Finformatika\u002Finstallyatsiya-programm",jpg:"jpg\u002F303207"},{id:288672,name:"Применение ИКТ в обучении иностранному языку",href:"\u002Finformatika\u002Fprimenenie-ikt-v-obuchenii-inostrannomu-yazyku",jpg:"jpg\u002F288672"},{id:206126,name:"Операционные системы, среды и оболочки. Ввод-вывод. Файловая система. (Лекция 4)",href:"\u002Finformatika\u002Foperatsionnye-sistemy-sredy-i-obolochki-vvod",jpg:"jpg\u002F206126"},{id:604268,name:"3D моделирование и его применение",href:"\u002Finformatika\u002F3d-modelirovanie-i-ego-primenenie-4",jpg:"jpg\u002F604268"},{id:239638,name:"Кодирование графической информации",href:"\u002Finformatika\u002Fkodirovanie-graficheskoy-informatsii-8",jpg:"jpg\u002F239638"},{id:567215,name:"Экспертные системы распознания химических веществ Распознавания удобрений",href:"\u002Finformatika\u002Fekspertnye-sistemy-raspoznaniya-himicheskih-veshchestv-raspoznavaniya",jpg:"jpg\u002F567215"},{id:138161,name:"WinDr &amp; Simulator",href:"\u002Finformatika\u002Fwindr-amp-simulator",jpg:"jpg\u002F138161"},{id:259351,name:"Государственная программа Информационное общество 2011-2020 годы",href:"\u002Finformatika\u002Fgosudarstvennaya-programma-informatsionnoe-obshchestvo-2011-2020",jpg:"jpg\u002F259351"},{id:4346,name:"Представления (VIEW). Лабораторная работа 7",href:"\u002Finformatika\u002Fpredstavleniya-view-laboratornaya-rabota-7",jpg:"jpg\u002F4346"},{id:585601,name:"Введение в криптографию. Основные понятия и определения. Виды криптосистем. Тема 2.1",href:"\u002Finformatika\u002Fvvedenie-v-kriptografiyu-osnovnye-ponyatiya-i",jpg:"jpg\u002F585601"},{id:91345,name:"Создание веб-сайтов",href:"\u002Finformatika\u002Fsozdanie-veb-saytov-2",jpg:"jpg\u002F91345"},{id:284574,name:"Java Puzzlers",href:"\u002Finformatika\u002Fjava-puzzlers",jpg:"jpg\u002F284574"},{id:336193,name:"Настройка DHCP с использованием назначения на основе Microsoft Windows Server",href:"\u002Finformatika\u002Fnastroyka-dhcp-s-ispolzovaniem-naznacheniya-na",jpg:"jpg\u002F336193"},{id:422993,name:"Сервер InterBase",href:"\u002Finformatika\u002Fserver-interbase",jpg:"jpg\u002F422993"},{id:361393,name:"Информационные технологии и управление образовательной деятельностью",href:"\u002Finformatika\u002Finformatsionnye-tehnologii-i-upravlenie-obrazovatelnoy-deyatelnostyu",jpg:"jpg\u002F361393"},{id:598203,name:"Эталонная модель сетевого взаимодействия OSI",href:"\u002Finformatika\u002Fetalonnaya-model-setevogo-vzaimodeystviya-osi",jpg:"jpg\u002F598203"},{id:345023,name:"Государственная система научно-технической информации",href:"\u002Finformatika\u002Fgosudarstvennaya-sistema-nauchno-tehnicheskoy-informatsii",jpg:"jpg\u002F345023"},{id:346405,name:"Что такое обстановка, ее установка",href:"\u002Finformatika\u002Fchto-takoe-obstanovka-ee-ustanovka",jpg:"jpg\u002F346405"},{id:436651,name:"Лекция 1. Основные понятия языка С#. Переменные и выражения",href:"\u002Finformatika\u002Flektsiya-1-osnovnye-ponyatiya-yazyka-s",jpg:"jpg\u002F436651"}],navigation:{next:"\u002Fmedetsina\u002Fnarushenie-osanki-7",next_name:"Нарушение осанки",prev:"\u002Fpedagogika\u002Fhimiya-zhne-biologiya-pn-boyynsha-oushylar",prev_name:"Химия және биология пәні бойынша оқушылар біліміндегі ақауларды жою үшін оқытудың интерактивтік әдістерін қолдану"}}}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:K,SITE_HOST:"mypreza.com",SITE_LANG:L,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:K,short_name:a,description:a,lang:L,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:S,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","Cascading style sheets","Учебные презентации","Презентации в 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,"Информатика",25,"\u003Cp\u003EЗадание\u003Cbr\u003E","Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Внутренние таблицы стилей
Описание стилей располагается в коде Web-странички, внутри тега
...
. Тег
размещается внутри контейнера HEAD<br><p>В этом случае описанные стили можно использовать для элементов, располагающихся в пределах странички. <br><p><style><br>table{background :#099;}<br>

Внешние таблицы стилей
Информация о стилях располагается в отдельном файле (*.css). Это имеет смысл в случае, если планируется применять эти стили к большему, чем одна, количеству страниц.
table{background :#099;}

Подключение файла *.css
example.html href=“mystyles,css"/>
содержание страницы HTML-документа
Ссылка может быть как на «локальную» страницу стилей, созданную
специально для этого документа, так и на «глобальную», хранящуюся
в сети Интернет.
example1.html

Базовый синтаксис
Стиль – это набор параметров, задающих представление некоторого элемента веб-страницы.
Селектор – это имя стиля.
селектор {
свойство1: значение1;
свойство2: значение2;
…
свойствоN: значениеN;
}
Стили описываются
в такой форме:
Пример:
.footer {
background: #960869;
}

Синтаксис CSS

Типы селекторов
В качестве селекторов (имен стилей) могут использоваться:
универсальный селектор
теги классы, определяемые пользователем
идентификаторы, определяемые пользователем;

Типы селекторов
1. Универсальный селектор
2. Селектор тегов
3. Селектор атрибутов
4. Селектор по классу
5. Селектор по идентификатору
6. Контекстный селектор
7. Дочерний селектор
8. Соседний селектор

Универсальный селектор
один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста
* { Описание правил стиля }
* { font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт для текста */
font-size: 96%; /* Размер текста */ }

Селектор тегов
В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т. д.
Тег { свойство1: значение; свойство2: значение; ... }
Пример:
P { text-align: justify; /* Выравнивание по ширине */
color: green; /* Зеленый цвет текста */
}

Селектор атрибутов
Устанавливает стиль для элемента, если задан специфичный атрибут тега.
[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }
A[href^="http://"] - начинается с определённого текста
A[href$=".ru"] - оканчивается определённым текстом
A[href*="htmlbook"] - содержит указанный текст
[class~="block"] - Одно из нескольких значений атрибута
DIV[class|="block"] - Дефис в значении атрибута(
)

CSS
Пример:
A[href$=".ru"] { /* Если ссылка заканчивается на .ru */
background: url(images/ru.png) no-repeat 0 6px; /* Добавляем фоновый рисунок */
padding-left: 12px; /* Смещаем текст вправо */ }
A[href$=".com"] { /* Если ссылка заканчивается на .com */
background: url(images/com.png) no-repeat 0 6px;
padding-left: 12px; }
HTML
Yandex.Com |
Yandex.Ru

Задание
Изображения с атрибутом alt содержащим слово «Ничосе» обвести зеленой рамкой. (border:1px solid green;)
Создать меню из 3 ссылок подсветить красным ссылки с защищёнными протоколами

Селектор по классу
к элементам страницы добавляем слово class=“name” и задаем стили для класса
Пример HTML
Я красный абзац
Я красная ссылка
Я красный заголовок
CSS
.red{
color:#F00;}
}

Селектор по идентификатору
задаем элементу страницы уникальный идентификатор
Пример HTML
Я зеленый абзац
CSS
#green{
color:#090;
}

Идентификаторы или классы?????

Контекстный селектор
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определённом контексте. Например, задать стиль для тега
только когда он располагается внутри контейнера
.
Контекстный селектор состоит из простых селекторов разделенных пробелом.
Тег1 Тег2 { ... }

Контекстный селектор
Пример HTML
Жирное начертание текста
Одновременно жирное начертание текста и выделенное
цветом
CSS
P B { font-family: Times, serif; /* Семейство шрифта */
color: navy; /* Синий цвет текста */ }

Контекстный селектор
HTML
Русская кухня |
Украинская кухня |
Кавказская кухня

Дочерний селектор
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента
body
Lorem
ipsum dolor sit amet
, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam
, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Дочерний селектор
Селектор 1 > Селектор 2 { Описание правил стиля }
HTML
Lorem ipsum dolor sit amet
, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
aliguam erat volutpat. >
dolore magna

Соседний селектор
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг
за другом в коде документа.
E + F { Описание правил стиля }
Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него.
Lorem ipsum
dolor
sit amet.
- дочерний
Lorem ipsum
dolor
sit
amet.
- соседний

Соседний селектор
Пример HTML
Lorem
ipsum
dolor sit amet,
consectetuer
adipiscing elit.
Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit.
CSS
b + i { color: red; /* Красный цвет текста */ }

Псевдоклассы
:first-child применяет стилевое оформление к первому дочернему элементу своего родителя.
tr:first-child{
background-color:#06F;}
:nth-child используется для добавления
стиля к элементам на основе нумерации в дереве элементов.
nav li:nth-child(odd){ background-color:#CCC;}
last-child задает стилевое оформление последнего элемента своего родителя
LI:nth-child(3n+3) - Он выбирает каждый третий элемент внутри маркированного списка: это 3-й, 6-й, 9-й, 12-й и т.д.

Комбинированные выражения

Задание

Задание
Выделить третий span
Выделить пятый strong

Задание
Сделать из списка
Используя not сделать пункты списка круглыми кроме красных.

Задание

Псевдоэлементы :before и :after
Псевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента, к которому он
добавляется. Работает совместно со свойством content.
:before наследует стиль от элемента, к которому он добавляется.
after
Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется.

Свойство 'content'
<строка>
Текстовое содержимое
Значением является URI, обозначающий внешний ресурс.
<счетчик>
Счетчики могут задаваться с помощью двух
различных функций 'counter()' или 'counters()'.

Пример
ol>li) используются для того, чтобы не обрабатывались элементы вложенных ненумерованных списков.
Свойство 'counter-increment' Оно определяет величину,
на которую увеличивается содержимое счетчика при каждом новом вхождении элемента. По умолчанию приращение равно 1. Допускается использование отрицательных целых чисел.
Свойство 'counter-reset' Оно задает значение, которое присваивается счетчику при каждом новом вхождении элемента. По умолчанию оно равно 0.

h1::before {
content: url(smiley.gif);
}
This is a heading
The ::before pseudo-element inserts
content before the content of an element.
This is a heading
Note:
IE8 supports the content property only if a !DOCTYPE is specified.