Основа верстки. Разметка и стилизация

Подробнее про HTML
табличная верстка
div + float
семантический HTML + flexbox/grid

Структура HTML
-- предназначен для указания типа текущего документа
-- содержит специальную информацию, стили и favicon
-- определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем
-- устанавливает связь с внешним документом вроде файла со стилями или со шрифтами
-- содержит разметку страницы

Семантический HTML vs верстка на div’ах

Необходимые и достаточные атрибуты
Специальные атрибуты:
data-*, href, required, readonly, src, class, id, disable...
Атрибуты для доступности контента:
alt, accesskey...

Блочные и строчные элементы
Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).
Примеры тегов:
,
,
,
, Строчные элементы занимают только пространство, ограниченное тегами, определяющими строчный элемент (необходимое для отображения их содержимого) и не нарушая потока содержимого.
Примеры тегов:
,
,
,
,
Слайд 7
добавьте файл с расширением *.css
подключите его на страницу с помощью
используя классы,
селекторы или псевдоселекторы напишите стилизацию
добавьте классы к тегам
наслаждайтесь результатами
Чтобы появилась стилизация
Слайд 8
Классы, селекторы и псевдоселекторы
Слайд 9
Единицы размеров
Статические: px pt
Относительные:
Слайд 10
Использование шрифтов
@font-face CSS правило позволяет указать шрифты для отображения текста на веб-страницах
часто
используемые свойства для работы с текстом
font-family, font-stretch, font-style, font-weight, font-size
Предварительная загрузка шрифтов
Слайд 11
Размеры объектов в браузере
Вычисленное значение - это преобразование относительных значений (em, rem,
проценты и тп) в абсолютные значения.
Слайд 12
Поток документа
Слайд 13
Z-INDEX
Слайд 14
Flexbox
предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были
сложны в традиционных методах CSS
Имя файла: Основа-верстки.-Разметка-и-стилизация.pptx
Количество просмотров: 89
Количество скачиваний: 0
Скачать
- Предыдущая
Связь антигенов HLA с развитием болезни Ходжкина
Следующая -
Уровни организации живых систем
Похожие презентации
Логические элементы. Математические основы информатики
Создание объектов профилирования
Основные моменты использования перечислений
Проектирование БД. Теоретические пояснения к курсовой работе. Часть 1
Разработка информационной базы автоматизированной обучающей системы подготовки специалистов связи
IT-система для автоматизации работы с заявками клиентов в сфере жилой и коммерческой недвижимости
Логические основы работы компьютера
Веселый фермер
День карьеры. Милов Юрий Геннадьевич
Tele2 – Национальный оператор
Виртуальный музей: от картинок до WebDoc’а
Информационно-логические основы ЭВМ
Компьютер-универсальная машина для работы с информацией (Тест)
Презентация на тему Цикл с предусловием «Пока»
Программирование на языке Java
Алгоритмизация и программирование
Технология создания и обработки графической информации
Управление персонажем игры мышью и клавиатурой. MouseLook
Створення системи e-Receipt
Организация работы отдела связей с общественностью
Макет здания
Работа с объектами Adobe Illustrator
Разработка системы распознавания печатного текста
DIDO Wi Fi (Distributed Input Distributed Output)
Перемещение персонажа
Автоматизация сбора данных ГДИС, СУГИС
Устройство для сна
Смена Uplay-акакунта на Offline-аккаунт
(function(d,s){d.getElementById("licnt7D89").src=
"https://counter.yadro.ru/hit?t12.1;r"+escape(d.referrer)+
((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+
(s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+
";h"+escape(d.title.substring(0,150))+";"+Math.random()})
(document,screen)
Обратная связь
Для правообладателей
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,T,U,V,W){return {data:{meta:{result:{meta:{h1:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:w,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:x,email:y,footer_before:z,footer:A,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:B,item_images:C,item_images_tag:D,item_words_h3:c,item_words_tag:E,item_words_1:h,routing:F,item_slide_skipping:G,item_download_timeout:H,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:I}},social:J}},categories:{result:[{id:K,ordering:a,name:"Алгебра",pseudoname:"prezentacii-po-algebre"},{id:2,ordering:a,name:"Английский язык",pseudoname:"prezentacii-po-angliyskomu-yaziku"},{id:3,ordering:a,name:"Астрономия",pseudoname:"prezentacii-po-astronomii"},{id:4,ordering:a,name:"Биология",pseudoname:"prezentacii-po-biologii"},{id:5,ordering:a,name:"География",pseudoname:"prezentacii-po-geografii"},{id:6,ordering:a,name:"Геометрия",pseudoname:"prezentacii-po-geometrii"},{id:7,ordering:a,name:L,pseudoname:"prezentacii-po-informatike"},{id:8,ordering:a,name:"История",pseudoname:"prezentacii-po-istorii"},{id:9,ordering:a,name:"Литература",pseudoname:"prezentacii-po-literature"},{id:10,ordering:a,name:"Математика",pseudoname:"prezentacii-po-matematike"},{id:11,ordering:a,name:"Медицина",pseudoname:"prezentacii-po-medicine"},{id:h,ordering:a,name:"Музыка",pseudoname:"prezentacii-po-musice"},{id:13,ordering:a,name:"МХК",pseudoname:"prezentacii-po-mkhk"},{id:14,ordering:a,name:"ОБЖ",pseudoname:"prezentacii-po-obzh"},{id:M,ordering:a,name:"Обществознание",pseudoname:"prezentacii-po-obshhestvoznaniju"},{id:17,ordering:a,name:"Педагогика",pseudoname:"prezentacii-po-pedagogike"},{id:18,ordering:a,name:"Немецкий язык",pseudoname:"prezentacii-po-nemezkomy-yaziku"},{id:20,ordering:a,name:"Русский язык",pseudoname:"prezentacii-po-russkomu-yazyku"},{id:21,ordering:a,name:"Технология",pseudoname:"prezentacii-po-tehnologii"},{id:22,ordering:a,name:"Физика",pseudoname:"prezentacii-po-fizike"},{id:23,ordering:a,name:"Философия",pseudoname:"prezentacii-po-filosofii"},{id:24,ordering:a,name:"Химия",pseudoname:"prezentacii-po-himii"},{id:25,ordering:a,name:"Экология",pseudoname:"prezentacii-po-ehkologii"},{id:26,ordering:a,name:"Экономика",pseudoname:"prezentacii-po-ekonomike"},{id:27,ordering:a,name:"Детские презентации",pseudoname:"detskie-prezentacii"},{id:i,ordering:a,name:"Шаблоны презентаций",pseudoname:"shablony-dlya-prezentacii"},{id:29,ordering:a,name:"Разное",pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:K,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]},item:{result:{id:842635,name:"Основа верстки. Разметка и стилизация",category:L,count:M,jpg:"jpg\u002F842635",hits:89,download:a,h1:N,meta:{h1:N,title:"Основа верстки. Разметка и стилизация презентация",description:"Основа верстки. Разметка и стилизация презентация, доклад, проект, Информатика ",keywords:"Основа верстки. Разметка и стилизация, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс, Информатика",download_link:b},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему Основа верстки. Разметка и стилизация, из раздела: Информатика.  Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003EПодробнее про HTML\u003Cbr\u003E\u003Cp\u003Eтабличная верстка\u003Cbr\u003Ediv + float\u003Cbr\u003Eсемантический HTML + flexbox\u002Fgrid\u003Cbr\u003E \u003Cp\u003EСтруктура HTML\u003Cbr\u003E\u003Cp\u003E\u003CDOCTYPE\u003E -- предназначен для указания типа текущего документа\u003Cbr\u003E\u003Cbr\u003E\u003Chead\u003E -- содержит специальную информацию, стили и favicon\u003Cbr\u003E\u003Cbr\u003E\u003Cmeta\u003E -- определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем\u003Cbr\u003E\u003Cbr\u003E\u003Clink\u003E -- устанавливает связь с внешним документом вроде файла со стилями или со шрифтами\u003Cbr\u003E\u003Cbr\u003E\u003Cbody\u003E -- содержит разметку страницы \u003Cbr\u003E",file:"Основа-верстки.-Разметка-и-стилизация.pptx",texts:["\u003Cp\u003EОснова верстки\u003Cbr\u003E\u003Cp\u003EРазметка и стилизация \u003Cbr\u003E","\u003Cp\u003EПодробнее про HTML\u003Cbr\u003E\u003Cp\u003Eтабличная верстка\u003Cbr\u003Ediv + float\u003Cbr\u003Eсемантический HTML + flexbox\u002Fgrid\u003Cbr\u003E","\u003Cp\u003EСтруктура HTML\u003Cbr\u003E\u003Cp\u003E\u003CDOCTYPE\u003E -- предназначен для указания типа текущего документа\u003Cbr\u003E\u003Chead\u003E -- содержит специальную информацию, стили и favicon\u003Cbr\u003E\u003Cmeta\u003E -- определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем\u003Cbr\u003E\u003Clink\u003E -- устанавливает связь с внешним документом вроде файла со стилями или со шрифтами\u003Cbr\u003E\u003Cbody\u003E -- содержит разметку страницы \u003Cbr\u003E","\u003Cp\u003EСемантический HTML vs верстка на div’ах\u003Cbr\u003E","\u003Cp\u003EНеобходимые и достаточные атрибуты\u003Cbr\u003E\u003Cp\u003EСпециальные атрибуты:\u003Cbr\u003Edata-*, href, required, readonly, src, class, id, disable... \u003Cbr\u003EАтрибуты для доступности контента:\u003Cbr\u003Ealt, accesskey...\u003Cbr\u003E","\u003Cp\u003EБлочные и строчные элементы\u003Cbr\u003E\u003Cp\u003EБлочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название). \u003Cbr\u003EПримеры тегов: \u003Cbr\u003E\u003Cheader\u003E, \u003Cfooter\u003E, \u003Cmain\u003E, \u003Cdiv\u003E, Строчные элементы занимают только пространство, ограниченное тегами, определяющими строчный элемент (необходимое для отображения их содержимого) и не нарушая потока содержимого.\u003Cbr\u003EПримеры тегов: \u003Cbr\u003E\u003Cspan\u003E, \u003Ca\u003E, \u003Cimg\u003E, \u003Cinput\u003E, \u003Cselect\u003E\u003Cbr\u003E","\u003Cp\u003Eдобавьте файл с расширением *.css\u003Cbr\u003Eподключите его на страницу с помощью \u003Clink\u003E\u003Cbr\u003Eиспользуя классы, селекторы или псевдоселекторы напишите стилизацию\u003Cbr\u003Eдобавьте классы к тегам\u003Cbr\u003Eнаслаждайтесь результатами\u003Cbr\u003E\u003Cp\u003EЧтобы появилась стилизация\u003Cbr\u003E","\u003Cp\u003EКлассы, селекторы и псевдоселекторы\u003Cbr\u003E","\u003Cp\u003EЕдиницы размеров\u003Cbr\u003E\u003Cp\u003EСтатические: px pt\u003Cbr\u003EОтносительные:\u003Cbr\u003E","\u003Cp\u003EИспользование шрифтов\u003Cbr\u003E\u003Cp\u003E@font-face CSS правило позволяет указать шрифты для отображения текста на веб-страницах\u003Cbr\u003Eчасто используемые свойства для работы с текстом\u003Cbr\u003Efont-family, font-stretch, font-style, font-weight, font-size\u003Cbr\u003E\u003Cp\u003EПредварительная загрузка шрифтов \u003Cbr\u003E","\u003Cp\u003EРазмеры объектов в браузере\u003Cbr\u003E\u003Cp\u003EВычисленное значение - это преобразование относительных значений (em, rem, проценты и тп) в абсолютные значения.\u003Cbr\u003E","\u003Cp\u003EПоток документа\u003Cbr\u003E","\u003Cp\u003EZ-INDEX\u003Cbr\u003E","\u003Cp\u003EFlexbox\u003Cbr\u003E\u003Cp\u003Eпредоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS\u003Cbr\u003E","\u003Cp\u003EПолезные ссылки\u003Cbr\u003E\u003Cp\u003EТаблица атрибутов\u003Cbr\u003EСписок блочных элементов\u003Cbr\u003EО строчных элементах\u003Cbr\u003EПодробнее об единицах измерения в css\u003Cbr\u003EПодробнее о подключении шрифтов: \u003Cbr\u003Ehttps:\u002F\u002Fdeveloper.mozilla.org\u002Fru\u002Fdocs\u002FWeb\u002FCSS\u002F@font-face\u003Cbr\u003Ehttps:\u002F\u002Fhtmlacademy.ru\u002Fblog\u002Fboost\u002Ftutorial\u002Ffonts-loading\u003Cbr\u003EПолное руководство по flexbox\u003Cbr\u003E"],href:"\u002Fprezentacii-po-informatike\u002Fosnova-verstki-razmetka-i-stilizatsiya",href_category:"\u002Fprezentacii-po-informatike",date:1614058434,related:[{id:848754,name:"Логические элементы. Математические основы информатики",href:"\u002Fprezentacii-po-informatike\u002Flogicheskie-elementy-matematicheskie-osnovy-informatiki",jpg:"jpg\u002F848754"},{id:1024008,name:"Создание объектов профилирования",href:"\u002Fprezentacii-po-informatike\u002Fsozdanie-obektov-profilirovaniya",jpg:"jpg\u002F1024008"},{id:985190,name:"Основные моменты использования перечислений",href:"\u002Fprezentacii-po-informatike\u002Fosnovnye-momenty-ispolzovaniya-perechisleniy",jpg:"jpg\u002F985190"},{id:888029,name:"Проектирование БД. Теоретические пояснения к курсовой работе. Часть 1",href:"\u002Fprezentacii-po-informatike\u002Fproektirovanie-bd-teoreticheskie-poyasneniya-k-kursovoy",jpg:"jpg\u002F888029"},{id:910966,name:"Разработка информационной базы автоматизированной обучающей системы подготовки специалистов связи",href:"\u002Fprezentacii-po-informatike\u002Frazrabotka-informatsionnoy-bazy-avtomatizirovannoy-obuchayushchey-sistemy",jpg:"jpg\u002F910966"},{id:948578,name:"IT-система для автоматизации работы с заявками клиентов в сфере жилой и коммерческой недвижимости",href:"\u002Fprezentacii-po-informatike\u002Fit-sistema-dlya-avtomatizatsii-raboty-s",jpg:"jpg\u002F948578"},{id:1081476,name:"Логические основы работы компьютера",href:"\u002Fprezentacii-po-informatike\u002Flogicheskie-osnovy-raboty-kompyutera-8",jpg:"jpg\u002F1081476"},{id:883078,name:"Веселый фермер",href:"\u002Fprezentacii-po-informatike\u002Fveselyy-fermer",jpg:"jpg\u002F883078"},{id:967648,name:"День карьеры. Милов Юрий Геннадьевич",href:"\u002Fprezentacii-po-informatike\u002Fden-karery-milov-yuriy-gennadevich",jpg:"jpg\u002F967648"},{id:1089458,name:"Tele2 – Национальный оператор",href:"\u002Fprezentacii-po-informatike\u002Ftele2--natsionalnyy-operator",jpg:"jpg\u002F1089458"},{id:977107,name:"Виртуальный музей: от картинок до WebDoc’а",href:"\u002Fprezentacii-po-informatike\u002Fvirtualnyy-muzey-ot-kartinok-do-webdoca",jpg:"jpg\u002F977107"},{id:890008,name:"Информационно-логические основы ЭВМ",href:"\u002Fprezentacii-po-informatike\u002Finformatsionno-logicheskie-osnovy-evm-1",jpg:"jpg\u002F890008"},{id:1018474,name:"Компьютер-универсальная машина для работы с информацией (Тест)",href:"\u002Fprezentacii-po-informatike\u002Fkompyuter-universalnaya-mashina-dlya-raboty-s-1",jpg:"jpg\u002F1018474"},{id:282507,name:"Презентация на тему Цикл с предусловием «Пока» ",href:"\u002Fprezentacii-po-informatike\u002Fprezentaciya-na-temu-cikl-s-predusloviem-poka",jpg:"jpg\u002F282507"},{id:905805,name:"Программирование на языке Java",href:"\u002Fprezentacii-po-informatike\u002Fprogrammirovanie-na-yazyke-java-47",jpg:"jpg\u002F905805"},{id:1098167,name:"Алгоритмизация и программирование",href:"\u002Fprezentacii-po-informatike\u002Falgoritmizatsiya-i-programmirovanie-32",jpg:"jpg\u002F1098167"},{id:1031280,name:"Технология создания и обработки графической информации",href:"\u002Fprezentacii-po-informatike\u002Ftehnologiya-sozdaniya-i-obrabotki-graficheskoy-informatsii-2",jpg:"jpg\u002F1031280"},{id:932429,name:"Управление персонажем игры мышью и клавиатурой. MouseLook",href:"\u002Fprezentacii-po-informatike\u002Fupravlenie-personazhem-igry-myshyu-i-klaviaturoy",jpg:"jpg\u002F932429"},{id:962867,name:"Створення системи e-Receipt",href:"\u002Fprezentacii-po-informatike\u002Fstvorennya-sistemi-e-receipt",jpg:"jpg\u002F962867"},{id:952390,name:"Организация работы отдела связей с общественностью",href:"\u002Fprezentacii-po-informatike\u002Forganizatsiya-raboty-otdela-svyazey-s-obshchestvennostyu",jpg:"jpg\u002F952390"},{id:1057152,name:"Макет здания",href:"\u002Fprezentacii-po-informatike\u002Fmaket-zdaniya",jpg:"jpg\u002F1057152"},{id:925156,name:"Работа с объектами Adobe Illustrator",href:"\u002Fprezentacii-po-informatike\u002Frabota-s-obektami-adobe-illustrator",jpg:"jpg\u002F925156"},{id:986256,name:"Разработка системы распознавания печатного текста",href:"\u002Fprezentacii-po-informatike\u002Frazrabotka-sistemy-raspoznavaniya-pechatnogo-teksta",jpg:"jpg\u002F986256"},{id:973129,name:"DIDO Wi Fi (Distributed Input Distributed Output)",href:"\u002Fprezentacii-po-informatike\u002Fdido-wi-fi-distributed-input-distributed",jpg:"jpg\u002F973129"},{id:931827,name:"Перемещение персонажа",href:"\u002Fprezentacii-po-informatike\u002Fperemeshchenie-personazha",jpg:"jpg\u002F931827"},{id:844845,name:"Автоматизация сбора данных ГДИС, СУГИС",href:"\u002Fprezentacii-po-informatike\u002Favtomatizatsiya-sbora-dannyh-gdis-sugis",jpg:"jpg\u002F844845"},{id:1051461,name:"Устройство для сна",href:"\u002Fprezentacii-po-informatike\u002Fustroystvo-dlya-sna",jpg:"jpg\u002F1051461"},{id:958664,name:"Смена Uplay-акакунта на Offline-аккаунт",href:"\u002Fprezentacii-po-informatike\u002Fsmena-uplay-akakunta-na-offline-akkaunt",jpg:"jpg\u002F958664"}],navigation:{next:"\u002Fprezentacii-po-biologii\u002Furovni-organizatsii-zhivyh-sistem-4",next_name:"Уровни организации живых систем",prev:"\u002Fprezentacii-po-medicine\u002Fsvyaz-antigenov-hla-s-razvitiem-bolezni",prev_name:"Связь антигенов HLA с развитием болезни Ходжкина"}}}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:O,SITE_HOST:"slaidy.com",SITE_LANG:P,API_BASE_URL:"https:\u002F\u002Fslaidy.com\u002Fapi\u002F",pwaManifest:{name:O,short_name:b,description:b,lang:P,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:j,icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.d7f48e96.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.d7f48e96.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.d7f48e96.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.d7f48e96.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.d7f48e96.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.d7f48e96.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.d7f48e96.png",type:d,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.d7f48e96.png",type:d,sizes:T,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.d7f48e96.png",type:d,sizes:U,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.d7f48e96.png",type:d,sizes:U,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.d7f48e96.png",type:d,sizes:V,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.d7f48e96.png",type:d,sizes:V,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.d7f48e96.png",type:d,sizes:W,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.d7f48e96.png",type:d,sizes:W,purpose:g}]},yandexMetrika:{id:"79446466",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:a,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:b}},pinia:{app:{meta:{h1:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:w,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:x,email:y,footer_before:z,footer:A,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:B,item_images:C,item_images_tag:D,item_words_h3:c,item_words_tag:E,item_words_1:h,routing:F,item_slide_skipping:G,item_download_timeout:H,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:I}},social:J,token:b}}}}(0,"",false,"image\u002Fpng",true,"any","maskable",12,28,"#000000","#ffffff","Презентации, проекты, доклады в PowerPoint на любую тему","Презентации и проекты в PowerPoint","Презентации на различные темы для детей, школьников, родителей, студентов, учителей и преподавателей.","Презентация, презентация на тему, скачать презентацию, урок презентация, 1 2 3 4 5 6 7 8 9 10 11 класс","images\u002Fdata\u002Flogo.jpg",32,"Slaidy.com",720,480,"6LfWmAYrAAAAAFyidHOK1ZHtYSECWR5CvAmygt5c","3190226","\u003C!-- Yandex.RTB R-A-1990700-4 --\u003E\r\n\u003Cdiv id=\"yandex_rtb_R-A-1990700-4\"\u003E\u003C\u002Fdiv\u003E\r\n\u003Cscript\u003E\r\nwindow.yaContextCb.push(() =\u003E {\r\n Ya.Context.AdvManager.render({\r\n \"blockId\": \"R-A-1990700-4\",\r\n \"renderTo\": \"yandex_rtb_R-A-1990700-4\"\r\n })\r\n})\r\n\u003C\u002Fscript\u003E","\u003C!-- Yandex.RTB R-A-1990700-7 --\u003E\r\n\u003Cscript\u003E\r\nwindow.yaContextCb.push(() =\u003E {\r\n Ya.Context.AdvManager.render({\r\n \"blockId\": \"R-A-1990700-7\",\r\n \"type\": \"fullscreen\",\r\n \"platform\": \"touch\"\r\n })\r\n})\r\n\u003C\u002Fscript\u003E","[e-mail]","\u003C!--LiveInternet counter--\u003E\u003Ca href=\"https:\u002F\u002Fwww.liveinternet.ru\u002Fclick\"\r\ntarget=\"_blank\"\u003E\u003Cimg id=\"licnt7D89\" width=\"88\" height=\"31\" style=\"border:0\" \r\ntitle=\"LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня\"\r\nsrc=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAEALAAAAAABAAEAAAIBTAA7\"\r\nalt=\"LiveInternet\"\u002F\u003E\u003C\u002Fa\u003E\u003Cscript\u003E(function(d,s){d.getElementById(\"licnt7D89\").src=\r\n\"https:\u002F\u002Fcounter.yadro.ru\u002Fhit?t12.1;r\"+escape(d.referrer)+\r\n((typeof(s)==\"undefined\")?\"\":\";s\"+s.width+\"*\"+s.height+\"*\"+\r\n(s.colorDepth?s.colorDepth:s.pixelDepth))+\";u\"+escape(d.URL)+\r\n\";h\"+escape(d.title.substring(0,150))+\";\"+Math.random()})\r\n(document,screen)\u003C\u002Fscript\u003E\u003C!--\u002FLiveInternet--\u003E","\u003Ca href=\"\u002Fpage\u002Fpravoobladateliam\"\u003EДля правообладателей\u003C\u002Fa\u003E","h3a","images_before","none","h3","category","both",77,"#ff0d00","\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,"Информатика",15,"Основа верстки. Разметка и стилизация ","Slaidy","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

добавьте файл с расширением *.css
подключите его на страницу с помощью
используя классы, селекторы или псевдоселекторы напишите стилизацию
добавьте классы к тегам
наслаждайтесь результатами
Чтобы появилась стилизация

Классы, селекторы и псевдоселекторы

Единицы размеров
Статические: px pt
Относительные:

Использование шрифтов
@font-face CSS правило позволяет указать шрифты для отображения текста на веб-страницах
часто используемые свойства для работы с текстом
font-family, font-stretch, font-style, font-weight, font-size
Предварительная загрузка шрифтов

Размеры объектов в браузере
Вычисленное значение - это преобразование относительных значений (em, rem, проценты и тп) в абсолютные значения.

Поток документа

Z-INDEX

Flexbox
предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS