Каскадные таблицы стилей CSS презентация

Зачем это?
СSS предназначен для форматирования веб-страниц
Селектор {
Свойство: Значение;
}
Структура кода

Способы применения css кода к html страницам
1) In-line
при помощи атрибута style style=“color: #ff0000;” >
Предназначен для оформления одного элемента на одной странице

Способы применения css кода к html страницам
2) Внутренний
при помощи тэга style
<br>p</div></h2><div class="slides-content">{<br>color: #ff0000;<br>}<br>
Предназначен для оформления нескольких элементов на одной странице

3) Внешний
при помощи внешнего файла *.css (style.css)
html файл:
link rel="stylesheet" type="text/css" href=“style.css" />
Предназначен для оформления нескольких элементов на нескольких страницах
css файл:
p {
color: #ffffff;
}
Способы применения css кода к html страницам

1. Фон

Background
background-color – цвет фона
Значения: 16-ый код цвета (#ff0000) или английское название цвета (red).
Пример:
p {
background-color: #ff0000;
}

Background
2) background-image – фоновое изображение
Значение: url-адрес изображения форматов .jpg, .gif, .png - url(“img/bgd.jpg”);
Пример:
body {
background-image: url(“flame.jpg”);
}

Background
3) background-repeat – повторение фонового изображения
Значения: repeat – повторять по обеим осям;
repeat-x – повторять по оси х;
repeat-y – повторять по оси y;
no-repeat – не повторять.
Пример:
body {
background-image: url(“flame.jpg”);
background-repeat: no-repeat;
}

Background
4) background-attachment – фиксация фонового изображения
Значения: scroll – прокручивать вместе с содержимым;
fixed – зафиксировать.
Пример:
body {
background-image: url(“flame.jpg”);
background-attachment: fixed;
}

Background
5) background-position – положение левого верхнего угла фонового изображения
Значения: координаты (x,y), установленные:
- в cm, px, %;
- ключевыми словами top, bottom, left, right, center.
Пример:
body {
background-image: url(“flame.jpg”);
background-position: 100px 200px;
}

Background
body {
background-color: #ff0000;
background-image: url(“flame.jpg”);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100px 200px;
}
body {
background: #ff0000 url(“flame.jpg”) no-repeat fixed 100px 200px;
}

2. Шрифт

1) font-style – курсивный шрифт
Значения: italic – курсив;
normal – обычный.
Пример: h2 {
font-style: italic;
}
Font

2) font-variant – начертание строчных букв
Значения: normal – обычный;
small-caps – капитель.
Пример:
h2 {
font-variant: small-caps;
}
Font

3) font-weight – насыщенность букв
Значения: normal – обычный;
bold – насыщенный.
Пример: h2 {
font-weight: bold;
}
Font

4) font-size – размер букв
Значения: pt – пункты;
px – пиксели; % – проценты.
Пример:
p {
font-size: 14pt;
}
Font

5) font-family – тип и семейство шрифта
Пример:
p {
font-family: arial, verdana, sans-serif;
}
Font

h1 {
font: italic normal bold 30px arial, sans-serif;
}
Font

3. Текст

1) text-indent – красная строка
Значения: pt – пункты;
px – пиксели; % – проценты.
Пример:
p {
text-indent: 30px;
}
Текст

1) text-align – выравнивание текста по ширине
Значения: left, right, center, justify
Пример: p {
text-align: justify;
}
Текст

Пример:
а {
text-decoration: none;
}
Текст

1) text-transform – управление регистром
Значения:
none – не меняет регистр
lowercase – нижний регистр
uppercase – ВЕРХНИЙ РЕГИСТР
capitalize – Начинать С Прописных
Пример:
b {
text-transform: uppercase;
}
Текст

4. Типы
селекторов

Типы селекторов
Теги
Классы
Идентификаторы

Предназначены для оформления групп сходных элементов. К одному тегу может применяться несколько классов. Для создания в html-коде используют атрибут class.
html:
Адын
Дыва
Классы
сss:
p.one { color: #ff0000; }
.two { font-size: 20pt; }

Предназначены для оформления уникальных элементов. К одному тегу может применяться только 1 идентификатор. Для создания в html-коде используют атрибут id.
html:
Адын
Дыва
Идентификаторы
сss:
#one { color: #ff0000; }
#two { font-size: 20pt; }

5. Псевдоклассы.
Ссылки.

Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа.
Селектор:Псевдокласс { Описание правил стиля }
Что это?

:active
Происходит при активации пользователем элемента. Используется преимущественно для ссылок.
Пример:
a:active { text-transform: uppercase;
}
Псевдоклассы

2) :link
Применяется к непосещенным ссылкам. Запись A {...} и A:link {...} по своему результату равноценна, поскольку в браузере даёт один и тот же эффект, поэтому псевдокласс :link можно не указывать. Исключением являются якоря, на них действие :link не распространяется.
Пример:
a:link {
text-transform: uppercase;
}
Псевдоклассы

3) :hover
Активизируется, при наведении курсора мыши на элемент, но щелчка по нему не происходит.
Пример:
a:hover {
text-decoration : underline;
}
Псевдоклассы

4) :visited
Применяется к посещенным ссылкам.
Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно
Пример:
a:visited {
color: #ffff00;
}
Псевдоклассы

5) :first-child
Применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа.
Пример:
p:first-child {
color: red;
}
Псевдоклассы

6) :first-letter
Определяет стиль первого символа в тексте элемента. Это позволяет создавать в тексте буквицу и выступающий инициал.
Псевдоэлемент
Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.
Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.

6. Позиционирование
элементов

Позиционирование (расположение) элементов задается свойствами: position (тип позиционирования), а также свойствами top (bottom) и left (right), задающими отступы.
Как делать?

1) position: absolute;
Абсолютное позиционирование. Точно располагает элемент внутри окна браузера или родительского элемента с заданным позиционированием (fixed, relative, absolute).
Пример:
#banner {
position: absolute;
top: 15px;
left: 15px;
}
Виды позиционирования

2) position: relative;
Относительное позиционирование. Изменяет расположение элемента относительного его прежнего положения.
Пример:
img:hover {
position: relative;
top: 15px;
left: 15px;
}
Виды позиционирования

3) position: fixed;
Фиксированное позиционирование. Привязывает элемент к точке в окне браузера и не меняет его положения при прокрутке страницы.
Пример:
#logo {
position: fixed;
top: 15px;
left: 15px;
}
Виды позиционирования

4) position: static;
Значение по умолчанию.
Элементы не имеющие позиционирования (или родительских элементов с позиционированием) располагаются на странице игнорируя положение позиционированных элементов.
Виды позиционирования

7. Блочные и строчные элементы.
Создание блоков.
Верстка.

Типы элементов:
Строчные – являются частью строки, не обособляются отступами, переносятся на другую строку при необходимости (примеры,
,
,
,
,
).
Блочные – размечается в виде прямоугольника, занимает всю доступную ширину, высота определяется содержимым, всегда начинается с новой строки (
,
,
,...,
,
,
,
,
).
Сколько нужно шлакоблоков, чтоб дворец построить в срок?
Запрещено вставлять блочный элемент внутрь строчного. Например,
Заголовок
Слайд 45
display
Задает тип элемента. Значения:
block – блочный элемент
in-line – строчный элемент
none
– не отображается
Пример:
a {
display: block;
}
Типы элементов
Слайд 46
Описывает контейнеры html-элементов
Боксовая модель
Свойства групп margin и padding задают отступы, а
группа border – рамки элемента. Для здания ширины и высоты элементов используются свойства width (min-width, max-width) и height (min-height, max-height) соответственно.
Слайд 47
Для качественного восприятия контента его разделяют в разметке при помощи блоков.
Оформление и позиционирование блоков происходит в css.
Разделение контента
html
Шапка
Меню
Основная часть
Подвал
css
#header {
position: …
left: …
top: …
}
#nav {…}
#article {…}
#footer {…}
Слайд 48
Фиксированный. Ширина макета задана в px.
+ Упрощает дизайн и работу с
контентом, корректнее отображается браузерами.
- Плохо смотрится на мониторах с высоким и низким разрешением, неэффективно используя свободное место.
Типы макетов
Слайд 49
2) Резиновый. Ширина колонок задаётся в процентах или сочетаются проценты и
пикселы таким образом, что макет занимает всю свободную ширину окна браузера.
+ Эффективно использует пространство.
- На мониторах с высоким разрешением сайт плохо читается из-за чрезмерного удлинения строк текста. Макеты сложнее верстать и отлаживать.
Типы макетов
Слайд 50
3) Адаптивный. Подстраивается под разрешение монитора и окна браузера, меняя ширину
макета, число колонок, размеры изображений и текста.
+ Наиболее удобен для пользователя, можно смотреть сайт на любом устройстве.
- Самый сложный макет.
Типы макетов
Имя файла: Каскадные-таблицы-стилей-CSS.pptx
Количество просмотров: 89
Количество скачиваний: 0
Скачать
- Предыдущая
Презентация по французскому языку на тему: Астерикс завоёвывает Америку
Следующая -
Цифровой этикет школьника, педагога и родителя
Похожие презентации
Автоматизированная система организации спортивных мероприятий
Увлекательный киберспорт, или какие игры лучше для трансляций
Причины и типы ошибок
Информационные ресурсы современного общества
Методика обеспечения строительного контроля с использованием информационной модели здания
Файлы и файловая система
Устройство компьютера. Носители информации ( 5 класс)
Применение динамических массивов в структурном подходе
Методическая разработка урока по теме Компьютерные вирусы. Антивирусные программы
Сетевая этика. Культура общения в сети
Верификация программного обеспечения. Дефекты
WEB-программирование, семинар 5
Новые пакеты услуг Кибернетики
Работа в ПО Sieble
Графические редакторы MediaBang Paint Pro и Artwaver Free
База данных как модель предметной области
Повышение эффективности работы баз данных. Обработка транзакций OLTP-OLAP системы мониторы транзакций
Парсинг HTML. Краткий обзор технологий для понимания сбора и обработки данных
Примеры решения задания 14, ОГЭ по информатике
Программы для видеоконференций. Введение
Онлайн-сервисы для создания электронных игр и викторин
Автоматизация научных исследований
Цвет. Background. Градиент
Методическая разработка внеклассного мероприятия (интеллектуальная игра) по физике и информатике для учащихся 5-11 классов Кто хочет стать отличником
Операционная система
Нові можливості функцій в мові С++
Переход от инфологического моделирования к моделям данных и знаний. Логико-лингвистические модели представления знаний
КВН по информатике
Обратная связь
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}},item:{result:{id:22620,name:m,category:G,count:51,jpg:"jpg\u002F22620",hits:89,download:b,h1:"Каскадные таблицы стилей CSS презентация",meta:{h1:m,title:m,description:"Каскадные таблицы стилей CSS презентация на тему, доклад, Информатика",keywords:"Каскадные таблицы стилей CSS, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Каскадные таблицы стилей CSS из раздела Информатика. Презентация на заданную тему содержит 51 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EЗачем это?\u003Cbr\u003E\u003Cp\u003EСSS предназначен для форматирования веб-страниц\u003Cbr\u003E\u003Cp\u003EСелектор {\u003Cbr\u003EСвойство: Значение;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EСтруктура кода\u003Cbr\u003E \u003Cp\u003EСпособы применения css кода к html страницам\u003Cbr\u003E\u003Cp\u003E1) In-line\u003Cbr\u003E\u003Cp\u003Eпри помощи атрибута style\u003Cbr\u003E\u003Cp\u003E\u003Cp style=“colo",file:"Каскадные-таблицы-стилей-CSS.pptx",texts:["\u003Cp\u003EКаскадные\u003Cbr\u003Eтаблицы стилей\u003Cbr\u003ECSS \u003Cbr\u003E","\u003Cp\u003EЗачем это?\u003Cbr\u003E\u003Cp\u003EСSS предназначен для форматирования веб-страниц\u003Cbr\u003E\u003Cp\u003EСелектор {\u003Cbr\u003EСвойство: Значение;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EСтруктура кода\u003Cbr\u003E","\u003Cp\u003EСпособы применения css кода к html страницам\u003Cbr\u003E\u003Cp\u003E1) In-line\u003Cbr\u003E\u003Cp\u003Eпри помощи атрибута style\u003Cbr\u003E\u003Cp\u003E\u003Cp style=“color: #ff0000;” \u003E\u003Cbr\u003E\u003Cp\u003EПредназначен для оформления одного элемента на одной странице\u003Cbr\u003E","\u003Cp\u003EСпособы применения css кода к html страницам\u003Cbr\u003E\u003Cp\u003E2) Внутренний\u003Cbr\u003E\u003Cp\u003Eпри помощи тэга style\u003Cbr\u003E\u003Cp\u003E\u003Chead\u003E\u003Cbr\u003E\u003Cstyle\u003E\u003Cbr\u003Ep {\u003Cbr\u003Ecolor: #ff0000;\u003Cbr\u003E}\u003Cbr\u003E\u003C\u002Fstyle\u003E\u003Cbr\u003E\u003C\u002Fhead \u003E\u003Cbr\u003E\u003Cp\u003EПредназначен для оформления нескольких элементов на одной странице\u003Cbr\u003E","\u003Cp\u003E3) Внешний\u003Cbr\u003E\u003Cp\u003Eпри помощи внешнего файла *.css (style.css)\u003Cbr\u003E\u003Cp\u003Ehtml файл:\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E link rel=\"stylesheet\" type=\"text\u002Fcss\" href=“style.css\" \u002F\u003E \u003Cbr\u003E\u003C\u002Fhead \u003E\u003Cbr\u003E\u003Cp\u003EПредназначен для оформления нескольких элементов на нескольких страницах\u003Cbr\u003E\u003Cp\u003Ecss файл: \u003Cbr\u003Ep {\u003Cbr\u003Ecolor: #ffffff; \u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EСпособы применения css кода к html страницам\u003Cbr\u003E","\u003Cp\u003E1. Фон\u003Cbr\u003E","\u003Cp\u003EBackground\u003Cbr\u003E\u003Cp\u003Ebackground-color – цвет фона\u003Cbr\u003EЗначения: 16-ый код цвета (#ff0000) или английское название цвета (red). \u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E p {\u003Cbr\u003E background-color: #ff0000;\u003Cbr\u003E }\u003Cbr\u003E","\u003Cp\u003EBackground\u003Cbr\u003E\u003Cp\u003E2) background-image – фоновое изображение\u003Cbr\u003EЗначение: url-адрес изображения форматов .jpg, .gif, .png - url(“img\u002Fbgd.jpg”);\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E body {\u003Cbr\u003E background-image: url(“flame.jpg”);\u003Cbr\u003E }\u003Cbr\u003E","\u003Cp\u003EBackground\u003Cbr\u003E\u003Cp\u003E3) background-repeat – повторение фонового изображения\u003Cbr\u003EЗначения: repeat – повторять по обеим осям;\u003Cbr\u003E repeat-x – повторять по оси х;\u003Cbr\u003E repeat-y – повторять по оси y;\u003Cbr\u003E no-repeat – не повторять. \u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E body {\u003Cbr\u003E background-image: url(“flame.jpg”);\u003Cbr\u003E background-repeat: no-repeat;\u003Cbr\u003E }\u003Cbr\u003E","\u003Cp\u003EBackground\u003Cbr\u003E\u003Cp\u003E4) background-attachment – фиксация фонового изображения\u003Cbr\u003EЗначения: scroll – прокручивать вместе с содержимым;\u003Cbr\u003E fixed – зафиксировать.\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E body {\u003Cbr\u003E background-image: url(“flame.jpg”);\u003Cbr\u003E background-attachment: fixed;\u003Cbr\u003E }\u003Cbr\u003E","\u003Cp\u003EBackground\u003Cbr\u003E\u003Cp\u003E5) background-position – положение левого верхнего угла фонового изображения\u003Cbr\u003EЗначения: координаты (x,y), установленные: \u003Cbr\u003E - в cm, px, %;\u003Cbr\u003E - ключевыми словами top, bottom, left, right, center.\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E body {\u003Cbr\u003E background-image: url(“flame.jpg”);\u003Cbr\u003E background-position: 100px 200px;\u003Cbr\u003E }\u003Cbr\u003E","\u003Cp\u003EBackground\u003Cbr\u003E\u003Cp\u003Ebody {\u003Cbr\u003E background-color: #ff0000;\u003Cbr\u003E background-image: url(“flame.jpg”);\u003Cbr\u003E background-repeat: no-repeat;\u003Cbr\u003E background-attachment: fixed;\u003Cbr\u003E background-position: 100px 200px;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003Ebody {\u003Cbr\u003E background: #ff0000 url(“flame.jpg”) no-repeat fixed 100px 200px;\u003Cbr\u003E }\u003Cbr\u003E","\u003Cp\u003E2. Шрифт\u003Cbr\u003E","\u003Cp\u003E1) font-style – курсивный шрифт\u003Cbr\u003EЗначения: italic – курсив;\u003Cbr\u003E normal – обычный.\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E h2 {\u003Cbr\u003E font-style: italic;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EFont\u003Cbr\u003E","\u003Cp\u003E2) font-variant – начертание строчных букв \u003Cbr\u003EЗначения: normal – обычный;\u003Cbr\u003E small-caps – капитель.\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E h2 {\u003Cbr\u003E font-variant: small-caps;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EFont\u003Cbr\u003E","\u003Cp\u003E3) font-weight – насыщенность букв\u003Cbr\u003EЗначения: normal – обычный;\u003Cbr\u003E bold – насыщенный.\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E h2 {\u003Cbr\u003E font-weight: bold;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EFont\u003Cbr\u003E","\u003Cp\u003E4) font-size – размер букв\u003Cbr\u003EЗначения: pt – пункты;\u003Cbr\u003E px – пиксели;\u003Cbr\u003E % – проценты.\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E p {\u003Cbr\u003E font-size: 14pt;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EFont\u003Cbr\u003E","\u003Cp\u003E5) font-family – тип и семейство шрифта\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E p {\u003Cbr\u003E font-family: arial, verdana, sans-serif;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EFont\u003Cbr\u003E","\u003Cp\u003Eh1 {\u003Cbr\u003E font: italic normal bold 30px arial, sans-serif;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EFont\u003Cbr\u003E","\u003Cp\u003E3. Текст\u003Cbr\u003E","\u003Cp\u003E1) text-indent – красная строка\u003Cbr\u003EЗначения: pt – пункты;\u003Cbr\u003E px – пиксели;\u003Cbr\u003E % – проценты.\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E p {\u003Cbr\u003E text-indent: 30px;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EТекст\u003Cbr\u003E","\u003Cp\u003E1) text-align – выравнивание текста по ширине\u003Cbr\u003EЗначения: left, right, center, justify\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E p {\u003Cbr\u003E text-align: justify;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EТекст\u003Cbr\u003E","\u003Cp\u003EПример:\u003Cbr\u003E а {\u003Cbr\u003E text-decoration: none;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EТекст\u003Cbr\u003E","\u003Cp\u003E1) text-transform – управление регистром\u003Cbr\u003EЗначения:\u003Cbr\u003E none – не меняет регистр\u003Cbr\u003Elowercase – нижний регистр\u003Cbr\u003Euppercase – ВЕРХНИЙ РЕГИСТР\u003Cbr\u003Ecapitalize – Начинать С Прописных\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E b {\u003Cbr\u003E text-transform: uppercase;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EТекст\u003Cbr\u003E","\u003Cp\u003E4. Типы \u003Cbr\u003Eселекторов\u003Cbr\u003E","\u003Cp\u003EТипы селекторов\u003Cbr\u003E\u003Cp\u003EТеги\u003Cbr\u003EКлассы\u003Cbr\u003EИдентификаторы\u003Cbr\u003E","\u003Cp\u003EПредназначены для оформления групп сходных элементов. К одному тегу может применяться несколько классов. Для создания в html-коде используют атрибут class. \u003Cbr\u003E\u003Cp\u003Ehtml:\u003Cbr\u003E \u003Cp class=“one”\u003E Адын \u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp class=“two” class=“one “\u003E Дыва \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EКлассы\u003Cbr\u003E\u003Cp\u003Eсss:\u003Cbr\u003E p.one { color: #ff0000; }\u003Cbr\u003E .two { font-size: 20pt; }\u003Cbr\u003E","\u003Cp\u003EПредназначены для оформления уникальных элементов. К одному тегу может применяться только 1 идентификатор. Для создания в html-коде используют атрибут id. \u003Cbr\u003E\u003Cp\u003Ehtml:\u003Cbr\u003E \u003Cp id=“one”\u003E Адын \u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp id=“two” \u003E Дыва \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EИдентификаторы\u003Cbr\u003E\u003Cp\u003Eсss:\u003Cbr\u003E#one { color: #ff0000; }\u003Cbr\u003E#two { font-size: 20pt; }\u003Cbr\u003E","\u003Cp\u003E5. Псевдоклассы.\u003Cbr\u003EСсылки.\u003Cbr\u003E","\u003Cp\u003EПсевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа.\u003Cbr\u003E\u003Cp\u003EСелектор:Псевдокласс { Описание правил стиля }\u003Cbr\u003E\u003Cp\u003EЧто это?\u003Cbr\u003E","\u003Cp\u003E:active\u003Cbr\u003EПроисходит при активации пользователем элемента. Используется преимущественно для ссылок. \u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E a:active {\u003Cbr\u003E text-transform: uppercase;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EПсевдоклассы\u003Cbr\u003E","\u003Cp\u003E 2) :link\u003Cbr\u003EПрименяется к непосещенным ссылкам. Запись A {...} и A:link {...} по своему результату равноценна, поскольку в браузере даёт один и тот же эффект, поэтому псевдокласс :link можно не указывать. Исключением являются якоря, на них действие :link не распространяется.\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E a:link {\u003Cbr\u003E text-transform: uppercase;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EПсевдоклассы\u003Cbr\u003E","\u003Cp\u003E 3) :hover\u003Cbr\u003EАктивизируется, при наведении курсора мыши на элемент, но щелчка по нему не происходит. \u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E a:hover {\u003Cbr\u003E text-decoration : underline;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EПсевдоклассы\u003Cbr\u003E","\u003Cp\u003E 4) :visited\u003Cbr\u003EПрименяется к посещенным ссылкам. \u003Cbr\u003EОбычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно \u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E a:visited {\u003Cbr\u003E color: #ffff00;\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EПсевдоклассы\u003Cbr\u003E","\u003Cp\u003E 5) :first-child\u003Cbr\u003EПрименяется к первому дочернему элементу селектора, который расположен в дереве элементов документа.\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E p:first-child { \u003Cbr\u003E color: red; \u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EПсевдоклассы\u003Cbr\u003E","\u003Cp\u003E 6) :first-letter\u003Cbr\u003EОпределяет стиль первого символа в тексте элемента. Это позволяет создавать в тексте буквицу и выступающий инициал.\u003Cbr\u003E\u003Cp\u003EПсевдоэлемент\u003Cbr\u003E\u003Cp\u003EПсевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.\u003Cbr\u003E\u003Cp\u003EБуквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.\u003Cbr\u003E","\u003Cp\u003E6. Позиционирование\u003Cbr\u003Eэлементов\u003Cbr\u003E","\u003Cp\u003EПозиционирование (расположение) элементов задается свойствами: position (тип позиционирования), а также свойствами top (bottom) и left (right), задающими отступы.\u003Cbr\u003E\u003Cp\u003EКак делать?\u003Cbr\u003E","\u003Cp\u003E 1) position: absolute;\u003Cbr\u003EАбсолютное позиционирование. Точно располагает элемент внутри окна браузера или родительского элемента с заданным позиционированием (fixed, relative, absolute).\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E #banner {\u003Cbr\u003E position: absolute; \u003Cbr\u003E top: 15px; \u003Cbr\u003E left: 15px;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EВиды позиционирования\u003Cbr\u003E","\u003Cp\u003E 2) position: relative;\u003Cbr\u003EОтносительное позиционирование. Изменяет расположение элемента относительного его прежнего положения.\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E img:hover {\u003Cbr\u003E position: relative; \u003Cbr\u003E top: 15px; \u003Cbr\u003E left: 15px;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EВиды позиционирования\u003Cbr\u003E","\u003Cp\u003E 3) position: fixed;\u003Cbr\u003EФиксированное позиционирование. Привязывает элемент к точке в окне браузера и не меняет его положения при прокрутке страницы.\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E #logo {\u003Cbr\u003Eposition: fixed; \u003Cbr\u003Etop: 15px; \u003Cbr\u003Eleft: 15px;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EВиды позиционирования\u003Cbr\u003E","\u003Cp\u003E 4) position: static;\u003Cbr\u003EЗначение по умолчанию.\u003Cbr\u003EЭлементы не имеющие позиционирования (или родительских элементов с позиционированием) располагаются на странице игнорируя положение позиционированных элементов. \u003Cbr\u003E\u003Cp\u003EВиды позиционирования\u003Cbr\u003E","\u003Cp\u003E7. Блочные и строчные элементы. \u003Cbr\u003EСоздание блоков.\u003Cbr\u003EВерстка.\u003Cbr\u003E","\u003Cp\u003EТипы элементов:\u003Cbr\u003EСтрочные – являются частью строки, не обособляются отступами, переносятся на другую строку при необходимости (примеры, \u003Cimg\u003E, \u003Cspan\u003E, \u003Ca\u003E, \u003Cb\u003E, \u003Cfont\u003E).\u003Cbr\u003EБлочные – размечается в виде прямоугольника, занимает всю доступную ширину, высота определяется содержимым, всегда начинается с новой строки (\u003Cdiv\u003E, \u003Cform\u003E, \u003Ch1\u003E,...,\u003Ch6\u003E, \u003Chr\u003E, \u003Cp\u003E, \u003Ctable\u003E, \u003Cul\u003E). \u003Cbr\u003E\u003Cp\u003EСколько нужно шлакоблоков, чтоб дворец построить в срок?\u003Cbr\u003E\u003Cp\u003EЗапрещено вставлять блочный элемент внутрь строчного. Например, \u003Ch1\u003E \u003Ca\u003E Заголовок \u003C\u002Fa\u003E \u003C\u002Fh1\u003E\u003Cbr\u003E","\u003Cp\u003Edisplay\u003Cbr\u003EЗадает тип элемента. Значения: \u003Cbr\u003Eblock – блочный элемент\u003Cbr\u003Ein-line – строчный элемент\u003Cbr\u003Enone – не отображается\u003Cbr\u003E\u003Cp\u003EПример:\u003Cbr\u003E a { \u003Cbr\u003E display: block; \u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EТипы элементов\u003Cbr\u003E","\u003Cp\u003EОписывает контейнеры html-элементов\u003Cbr\u003E\u003Cp\u003EБоксовая модель\u003Cbr\u003E\u003Cp\u003EСвойства групп margin и padding задают отступы, а группа border – рамки элемента. Для здания ширины и высоты элементов используются свойства width (min-width, max-width) и height (min-height, max-height) соответственно. \u003Cbr\u003E","\u003Cp\u003EДля качественного восприятия контента его разделяют в разметке при помощи блоков. Оформление и позиционирование блоков происходит в css. \u003Cbr\u003E\u003Cp\u003EРазделение контента\u003Cbr\u003E\u003Cp\u003Ehtml\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E \u003Cdiv id=“header”\u003EШапка \u003C\u002Fheader\u003E\u003Cbr\u003E\u003Cdiv id=“nav”\u003EМеню \u003C\u002Fnav\u003E\u003Cbr\u003E\u003Cdiv id= “article”\u003E\u003Cbr\u003EОсновная часть \u003C\u002Fdiv\u003E\u003Cbr\u003E \u003Cdiv id=“footer”\u003EПодвал \u003C\u002Ffooter\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003Cp\u003Ecss\u003Cbr\u003E#header {\u003Cbr\u003Eposition: …\u003Cbr\u003Eleft: …\u003Cbr\u003Etop: …\u003Cbr\u003E}\u003Cbr\u003E#nav {…}\u003Cbr\u003E#article {…}\u003Cbr\u003E#footer {…}\u003Cbr\u003E","\u003Cp\u003EФиксированный. Ширина макета задана в px.\u003Cbr\u003E+ Упрощает дизайн и работу с контентом, корректнее отображается браузерами. \u003Cbr\u003E- Плохо смотрится на мониторах с высоким и низким разрешением, неэффективно используя свободное место.\u003Cbr\u003E\u003Cp\u003EТипы макетов\u003Cbr\u003E","\u003Cp\u003E2) Резиновый. Ширина колонок задаётся в процентах или сочетаются проценты и пикселы таким образом, что макет занимает всю свободную ширину окна браузера.\u003Cbr\u003E+ Эффективно использует пространство. \u003Cbr\u003E- На мониторах с высоким разрешением сайт плохо читается из-за чрезмерного удлинения строк текста. Макеты сложнее верстать и отлаживать.\u003Cbr\u003E\u003Cp\u003EТипы макетов\u003Cbr\u003E","\u003Cp\u003E3) Адаптивный. Подстраивается под разрешение монитора и окна браузера, меняя ширину макета, число колонок, размеры изображений и текста.\u003Cbr\u003E+ Наиболее удобен для пользователя, можно смотреть сайт на любом устройстве. \u003Cbr\u003E- Самый сложный макет. \u003Cbr\u003E\u003Cp\u003EТипы макетов\u003Cbr\u003E","\u003Cp\u003E4) Комбинированный. \u003Cbr\u003EПредполагает использование разной ширины для отдельных частей страницы, например, шапку и подвал делают резиновыми, а контент фиксированным. \u003Cbr\u003E\u003Cp\u003EТипы макетов\u003Cbr\u003E\u003Cp\u003EНаследует все плюсы и минусы фиксированного и резинового макета.\u003Cbr\u003E"],href:"\u002Finformatika\u002Fkaskadnye-tablitsy-stiley-css",href_category:"\u002Finformatika",date:1625660387,related:[{id:325134,name:"Автоматизированная система организации спортивных мероприятий",href:"\u002Finformatika\u002Favtomatizirovannaya-sistema-organizatsii-sportivnyh-meropriyatiy",jpg:"jpg\u002F325134"},{id:116969,name:"Увлекательный киберспорт, или какие игры лучше для трансляций",href:"\u002Finformatika\u002Fuvlekatelnyy-kibersport-ili-kakie-igry-luchshe",jpg:"jpg\u002F116969"},{id:108604,name:"Причины и типы ошибок",href:"\u002Finformatika\u002Fprichiny-i-tipy-oshibok",jpg:"jpg\u002F108604"},{id:321071,name:"Информационные ресурсы современного общества",href:"\u002Finformatika\u002Finformatsionnye-resursy-sovremennogo-obshchestva-3",jpg:"jpg\u002F321071"},{id:423487,name:"Методика обеспечения строительного контроля с использованием информационной модели здания",href:"\u002Finformatika\u002Fmetodika-obespecheniya-stroitelnogo-kontrolya-s-ispolzovaniem",jpg:"jpg\u002F423487"},{id:297963,name:"Файлы и файловая система",href:"\u002Finformatika\u002Ffayly-i-faylovaya-sistema-13",jpg:"jpg\u002F297963"},{id:392004,name:"Устройство компьютера. Носители информации ( 5 класс)",href:"\u002Finformatika\u002Fustroystvo-kompyutera-nositeli-informatsii-5-klass",jpg:"jpg\u002F392004"},{id:245714,name:"Применение динамических массивов в структурном подходе",href:"\u002Finformatika\u002Fprimenenie-dinamicheskih-massivov-v-strukturnom-podhode",jpg:"jpg\u002F245714"},{id:528193,name:"Методическая разработка урока по теме Компьютерные вирусы. Антивирусные программы",href:"\u002Finformatika\u002Fmetodicheskaya-razrabotka-uroka-po-teme-kompyuternye",jpg:"jpg\u002F528193"},{id:15566,name:"Сетевая этика. Культура общения в сети",href:"\u002Finformatika\u002Fsetevaya-etika-kultura-obshcheniya-v-seti",jpg:"jpg\u002F15566"},{id:98876,name:"Верификация программного обеспечения. Дефекты",href:"\u002Finformatika\u002Fverifikatsiya-programmnogo-obespecheniya-defekty",jpg:"jpg\u002F98876"},{id:349493,name:"WEB-программирование, семинар 5",href:"\u002Finformatika\u002Fweb-programmirovanie-seminar-5",jpg:"jpg\u002F349493"},{id:99986,name:"Новые пакеты услуг Кибернетики",href:"\u002Finformatika\u002Fnovye-pakety-uslug-kibernetiki",jpg:"jpg\u002F99986"},{id:608528,name:"Работа в ПО Sieble",href:"\u002Finformatika\u002Frabota-v-po-sieble",jpg:"jpg\u002F608528"},{id:365837,name:"Графические редакторы MediaBang Paint Pro и Artwaver Free",href:"\u002Finformatika\u002Fgraficheskie-redaktory-mediabang-paint-pro-i",jpg:"jpg\u002F365837"},{id:357520,name:"База данных как модель предметной области",href:"\u002Finformatika\u002Fbaza-dannyh-kak-model-predmetnoy-oblasti-6",jpg:"jpg\u002F357520"},{id:442482,name:"Повышение эффективности работы баз данных. Обработка транзакций OLTP-OLAP системы мониторы транзакций",href:"\u002Finformatika\u002Fpovyshenie-effektivnosti-raboty-baz-dannyh-obrabotka",jpg:"jpg\u002F442482"},{id:192663,name:"Парсинг HTML. Краткий обзор технологий для понимания сбора и обработки данных",href:"\u002Finformatika\u002Fparsing-html-kratkiy-obzor-tehnologiy-dlya",jpg:"jpg\u002F192663"},{id:218594,name:"Примеры решения задания 14, ОГЭ по информатике",href:"\u002Finformatika\u002Fprimery-resheniya-zadaniya-14-oge-po",jpg:"jpg\u002F218594"},{id:20285,name:"Программы для видеоконференций. Введение",href:"\u002Finformatika\u002Fprogrammy-dlya-videokonferentsiy-vvedenie",jpg:"jpg\u002F20285"},{id:9509,name:"Онлайн-сервисы для создания электронных игр и викторин",href:"\u002Finformatika\u002Fonlayn-servisy-dlya-sozdaniya-elektronnyh-igr",jpg:"jpg\u002F9509"},{id:168829,name:"Автоматизация научных исследований",href:"\u002Finformatika\u002Favtomatizatsiya-nauchnyh-issledovaniy",jpg:"jpg\u002F168829"},{id:378343,name:"Цвет. Background. Градиент",href:"\u002Finformatika\u002Ftsvet-background-gradient",jpg:"jpg\u002F378343"},{id:513615,name:"Методическая разработка внеклассного мероприятия (интеллектуальная игра) по физике и информатике для учащихся 5-11 классов Кто хочет стать отличником",href:"\u002Finformatika\u002Fmetodicheskaya-razrabotka-vneklassnogo-meropriyatiya-intellektualnaya-igra-1",jpg:"jpg\u002F513615"},{id:399686,name:"Операционная система",href:"\u002Finformatika\u002Foperatsionnaya-sistema-95",jpg:"jpg\u002F399686"},{id:5426,name:"Нові можливості функцій в мові С++",href:"\u002Finformatika\u002Fnov-mozhlivost-funktsy-v-mov-s",jpg:"jpg\u002F5426"},{id:117997,name:"Переход от инфологического моделирования к моделям данных и знаний. Логико-лингвистические модели представления знаний",href:"\u002Finformatika\u002Fperehod-ot-infologicheskogo-modelirovaniya-k-modelyam",jpg:"jpg\u002F117997"},{id:179947,name:"КВН по информатике",href:"\u002Finformatika\u002Fkvn-po-informatike-1",jpg:"jpg\u002F179947"}],navigation:{next:"\u002Finformatika\u002Ftsifrovoy-etiket-shkolnika-pedagoga-i-roditelya",next_name:"Цифровой этикет школьника, педагога и родителя",prev:"\u002Flingvistika\u002Fprezentatsiya-po-frantsuzskomu-yazyku-na-temu",prev_name:"Презентация по французскому языку на тему: Астерикс завоёвывает Америку"}}},categories:{result:[{id:H,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:H,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:G,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"}]}},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"))

display
Задает тип элемента. Значения:
block – блочный элемент
in-line – строчный элемент
none – не отображается
Пример:
a {
display: block;
}
Типы элементов

Описывает контейнеры html-элементов
Боксовая модель
Свойства групп margin и padding задают отступы, а группа border – рамки элемента. Для здания ширины и высоты элементов используются свойства width (min-width, max-width) и height (min-height, max-height) соответственно.

Для качественного восприятия контента его разделяют в разметке при помощи блоков. Оформление и позиционирование блоков происходит в css.
Разделение контента
html
Шапка
Меню
Основная часть
Подвал
css
#header {
position: …
left: …
top: …
}
#nav {…}
#article {…}
#footer {…}
Слайд 48
Фиксированный. Ширина макета задана в px.
+ Упрощает дизайн и работу с
контентом, корректнее отображается браузерами.
- Плохо смотрится на мониторах с высоким и низким разрешением, неэффективно используя свободное место.
Типы макетов
Слайд 49
2) Резиновый. Ширина колонок задаётся в процентах или сочетаются проценты и
пикселы таким образом, что макет занимает всю свободную ширину окна браузера.
+ Эффективно использует пространство.
- На мониторах с высоким разрешением сайт плохо читается из-за чрезмерного удлинения строк текста. Макеты сложнее верстать и отлаживать.
Типы макетов
Слайд 50
3) Адаптивный. Подстраивается под разрешение монитора и окна браузера, меняя ширину
макета, число колонок, размеры изображений и текста.
+ Наиболее удобен для пользователя, можно смотреть сайт на любом устройстве.
- Самый сложный макет.
Типы макетов

Фиксированный. Ширина макета задана в px.
+ Упрощает дизайн и работу с контентом, корректнее отображается браузерами.
- Плохо смотрится на мониторах с высоким и низким разрешением, неэффективно используя свободное место.
Типы макетов

2) Резиновый. Ширина колонок задаётся в процентах или сочетаются проценты и пикселы таким образом, что макет занимает всю свободную ширину окна браузера.
+ Эффективно использует пространство.
- На мониторах с высоким разрешением сайт плохо читается из-за чрезмерного удлинения строк текста. Макеты сложнее верстать и отлаживать.
Типы макетов

3) Адаптивный. Подстраивается под разрешение монитора и окна браузера, меняя ширину макета, число колонок, размеры изображений и текста.
+ Наиболее удобен для пользователя, можно смотреть сайт на любом устройстве.
- Самый сложный макет.
Типы макетов