Enviar pesquisa
Carregar
Артем Маркушев — HTML и CSS по кирпичикам. Детали.
•
Transferir como PPTX, PDF
•
0 gostou
•
351 visualizações
DataArt
Seguir
Летняя практика DataArt & ПММ 2016
Leia menos
Leia mais
Software
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 69
Baixar agora
Recomendados
Робота з CSS. Методології, інструменти, оптимізація
Робота з CSS. Методології, інструменти, оптимізація
Stfalcon Meetups
04 - Web-технологии. CSS - язык описания стилей
04 - Web-технологии. CSS - язык описания стилей
Roman Brovko
Лекция 10. Основы CSS.
Лекция 10. Основы CSS.
Alexey Furmanov
Bootstrap 3
Bootstrap 3
The NGO Development Center
Dc brochure vietv1 (1)
Dc brochure vietv1 (1)
Nguyet Vo
CapstonereportA4_11564841_ITC571
CapstonereportA4_11564841_ITC571
abhinay reddy
Ксения Кобрин "Сферы применения различных типов менеджмента"
Ксения Кобрин "Сферы применения различных типов менеджмента"
DataArt
Slides coder dojoparma
Slides coder dojoparma
CoderdojoParma
Recomendados
Робота з CSS. Методології, інструменти, оптимізація
Робота з CSS. Методології, інструменти, оптимізація
Stfalcon Meetups
04 - Web-технологии. CSS - язык описания стилей
04 - Web-технологии. CSS - язык описания стилей
Roman Brovko
Лекция 10. Основы CSS.
Лекция 10. Основы CSS.
Alexey Furmanov
Bootstrap 3
Bootstrap 3
The NGO Development Center
Dc brochure vietv1 (1)
Dc brochure vietv1 (1)
Nguyet Vo
CapstonereportA4_11564841_ITC571
CapstonereportA4_11564841_ITC571
abhinay reddy
Ксения Кобрин "Сферы применения различных типов менеджмента"
Ксения Кобрин "Сферы применения различных типов менеджмента"
DataArt
Slides coder dojoparma
Slides coder dojoparma
CoderdojoParma
Леонид Шевцов «Clojure в деле»
Леонид Шевцов «Clojure в деле»
DataArt
Наталья Шпот «Магия приоритетов как ключ к личному счастью»
Наталья Шпот «Магия приоритетов как ключ к личному счастью»
DataArt
Social media 2.0 february edition
Social media 2.0 february edition
Boise Regional REALTORS
sistema de gestión de contenidos
sistema de gestión de contenidos
Diego Rojas
180 blue dining room training
180 blue dining room training
Bill Buffalo
Transistores
Transistores
Manuel Bolivar H
Bean Plataspid
Bean Plataspid
PlantHealthResourceCenter
Zed innovation intro
Zed innovation intro
Ziv Kohav
Powell on leadership
Powell on leadership
Louis Collins
Riley Slideshow
Riley Slideshow
Carisma Dunbar
Building Pennsylvania's First Detector Network Part 2
Building Pennsylvania's First Detector Network Part 2
PlantHealthResourceCenter
Дмитрий Паньков ( DataArt) "Business intelligence: перспективы для будущих сп...
Дмитрий Паньков ( DataArt) "Business intelligence: перспективы для будущих сп...
DataArt
Propiedad intelectual del soft ware
Propiedad intelectual del soft ware
Joel Quintana
Message queue demo
Message queue demo
DataArt
นิทาน
นิทาน
ExitOfLove
Стратегия и Кризисы
Стратегия и Кризисы
DataArt
Institution
Institution
Abbey Cotterill
Reader’s theater (1)
Reader’s theater (1)
IIPCONX
Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)
Noveo
Артем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSS
DataArt
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPress
Igor Sazonov
Лекция 4 Client-side
Лекция 4 Client-side
Technosphere1
Mais conteúdo relacionado
Destaque
Леонид Шевцов «Clojure в деле»
Леонид Шевцов «Clojure в деле»
DataArt
Наталья Шпот «Магия приоритетов как ключ к личному счастью»
Наталья Шпот «Магия приоритетов как ключ к личному счастью»
DataArt
Social media 2.0 february edition
Social media 2.0 february edition
Boise Regional REALTORS
sistema de gestión de contenidos
sistema de gestión de contenidos
Diego Rojas
180 blue dining room training
180 blue dining room training
Bill Buffalo
Transistores
Transistores
Manuel Bolivar H
Bean Plataspid
Bean Plataspid
PlantHealthResourceCenter
Zed innovation intro
Zed innovation intro
Ziv Kohav
Powell on leadership
Powell on leadership
Louis Collins
Riley Slideshow
Riley Slideshow
Carisma Dunbar
Building Pennsylvania's First Detector Network Part 2
Building Pennsylvania's First Detector Network Part 2
PlantHealthResourceCenter
Дмитрий Паньков ( DataArt) "Business intelligence: перспективы для будущих сп...
Дмитрий Паньков ( DataArt) "Business intelligence: перспективы для будущих сп...
DataArt
Propiedad intelectual del soft ware
Propiedad intelectual del soft ware
Joel Quintana
Message queue demo
Message queue demo
DataArt
นิทาน
นิทาน
ExitOfLove
Стратегия и Кризисы
Стратегия и Кризисы
DataArt
Institution
Institution
Abbey Cotterill
Reader’s theater (1)
Reader’s theater (1)
IIPCONX
Destaque
(18)
Леонид Шевцов «Clojure в деле»
Леонид Шевцов «Clojure в деле»
Наталья Шпот «Магия приоритетов как ключ к личному счастью»
Наталья Шпот «Магия приоритетов как ключ к личному счастью»
Social media 2.0 february edition
Social media 2.0 february edition
sistema de gestión de contenidos
sistema de gestión de contenidos
180 blue dining room training
180 blue dining room training
Transistores
Transistores
Bean Plataspid
Bean Plataspid
Zed innovation intro
Zed innovation intro
Powell on leadership
Powell on leadership
Riley Slideshow
Riley Slideshow
Building Pennsylvania's First Detector Network Part 2
Building Pennsylvania's First Detector Network Part 2
Дмитрий Паньков ( DataArt) "Business intelligence: перспективы для будущих сп...
Дмитрий Паньков ( DataArt) "Business intelligence: перспективы для будущих сп...
Propiedad intelectual del soft ware
Propiedad intelectual del soft ware
Message queue demo
Message queue demo
นิทาน
นิทาน
Стратегия и Кризисы
Стратегия и Кризисы
Institution
Institution
Reader’s theater (1)
Reader’s theater (1)
Semelhante a Артем Маркушев — HTML и CSS по кирпичикам. Детали.
Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)
Noveo
Артем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSS
DataArt
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPress
Igor Sazonov
Лекция 4 Client-side
Лекция 4 Client-side
Technosphere1
Crossbrowser Css layout
Crossbrowser Css layout
DarkestMaster
Web осень 2013 лекция 4
Web осень 2013 лекция 4
Technopark
Web осень 2012 лекция 8
Web осень 2012 лекция 8
Technopark
Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).
Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).
SmartTools
Основы работы с таблицами стилей CSS
Основы работы с таблицами стилей CSS
Denis Latushkin
Scino: Front-end [part-1]
Scino: Front-end [part-1]
SCINO
Css Intro. Vlad Savitsky
Css Intro. Vlad Savitsky
Vlad Savitsky
CSS Язык описания представлений
CSS Язык описания представлений
Vasya Petrov
Advanced locators - little prince
Advanced locators - little prince
COMAQA.BY
Я ♥ Svg — Владимир Кузнецов, Engine6
Я ♥ Svg — Владимир Кузнецов, Engine6
Yandex
всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта
Olga Pirozhenko
Web весна 2013 лекция 8
Web весна 2013 лекция 8
Technopark
аккордеон
аккордеон
Володя Абай
пользовательские свойства как основа архитектуры CSS
пользовательские свойства как основа архитектуры CSS
Zigzag_McQuack
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Ontico
Как создать сайт
Как создать сайт
United Design
Semelhante a Артем Маркушев — HTML и CSS по кирпичикам. Детали.
(20)
Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)
Артем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSS
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPress
Лекция 4 Client-side
Лекция 4 Client-side
Crossbrowser Css layout
Crossbrowser Css layout
Web осень 2013 лекция 4
Web осень 2013 лекция 4
Web осень 2012 лекция 8
Web осень 2012 лекция 8
Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).
Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).
Основы работы с таблицами стилей CSS
Основы работы с таблицами стилей CSS
Scino: Front-end [part-1]
Scino: Front-end [part-1]
Css Intro. Vlad Savitsky
Css Intro. Vlad Savitsky
CSS Язык описания представлений
CSS Язык описания представлений
Advanced locators - little prince
Advanced locators - little prince
Я ♥ Svg — Владимир Кузнецов, Engine6
Я ♥ Svg — Владимир Кузнецов, Engine6
всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта
Web весна 2013 лекция 8
Web весна 2013 лекция 8
аккордеон
аккордеон
пользовательские свойства как основа архитектуры CSS
пользовательские свойства как основа архитектуры CSS
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Как создать сайт
Как создать сайт
Mais de DataArt
DataArt Custom Software Engineering with a Human Approach
DataArt Custom Software Engineering with a Human Approach
DataArt
DataArt Healthcare & Life Sciences
DataArt Healthcare & Life Sciences
DataArt
DataArt Financial Services and Capital Markets
DataArt Financial Services and Capital Markets
DataArt
About DataArt HR Partners
About DataArt HR Partners
DataArt
Event management в IT
Event management в IT
DataArt
Digital Marketing from inside
Digital Marketing from inside
DataArt
What's new in Android, Igor Malytsky ( Google Post I|O Tour)
What's new in Android, Igor Malytsky ( Google Post I|O Tour)
DataArt
DevOps Workshop:Что бывает, когда DevOps приходит на проект
DevOps Workshop:Что бывает, когда DevOps приходит на проект
DataArt
IT Talk Kharkiv: «Soft skills в IT. Польза или вред? Максим Бастион, DataArt
IT Talk Kharkiv: «Soft skills в IT. Польза или вред? Максим Бастион, DataArt
DataArt
«Ноль копеек. Спастись от выгорания» — Сергей Чеботарев (Head of Design, Han...
«Ноль копеек. Спастись от выгорания» — Сергей Чеботарев (Head of Design, Han...
DataArt
Communication in QA's life
Communication in QA's life
DataArt
Нельзя просто так взять и договориться, или как мы работали со сложными людьми
Нельзя просто так взять и договориться, или как мы работали со сложными людьми
DataArt
Знакомьтесь, DevOps
Знакомьтесь, DevOps
DataArt
DevOps in real life
DevOps in real life
DataArt
Codeless: автоматизация тестирования
Codeless: автоматизация тестирования
DataArt
Selenoid
Selenoid
DataArt
Selenide
Selenide
DataArt
A. Sirota "Building an Automation Solution based on Appium"
A. Sirota "Building an Automation Solution based on Appium"
DataArt
Эмоциональный интеллект или как не сойти с ума в условиях сложного и динамичн...
Эмоциональный интеллект или как не сойти с ума в условиях сложного и динамичн...
DataArt
IT talk: Как я перестал бояться и полюбил TestNG
IT talk: Как я перестал бояться и полюбил TestNG
DataArt
Mais de DataArt
(20)
DataArt Custom Software Engineering with a Human Approach
DataArt Custom Software Engineering with a Human Approach
DataArt Healthcare & Life Sciences
DataArt Healthcare & Life Sciences
DataArt Financial Services and Capital Markets
DataArt Financial Services and Capital Markets
About DataArt HR Partners
About DataArt HR Partners
Event management в IT
Event management в IT
Digital Marketing from inside
Digital Marketing from inside
What's new in Android, Igor Malytsky ( Google Post I|O Tour)
What's new in Android, Igor Malytsky ( Google Post I|O Tour)
DevOps Workshop:Что бывает, когда DevOps приходит на проект
DevOps Workshop:Что бывает, когда DevOps приходит на проект
IT Talk Kharkiv: «Soft skills в IT. Польза или вред? Максим Бастион, DataArt
IT Talk Kharkiv: «Soft skills в IT. Польза или вред? Максим Бастион, DataArt
«Ноль копеек. Спастись от выгорания» — Сергей Чеботарев (Head of Design, Han...
«Ноль копеек. Спастись от выгорания» — Сергей Чеботарев (Head of Design, Han...
Communication in QA's life
Communication in QA's life
Нельзя просто так взять и договориться, или как мы работали со сложными людьми
Нельзя просто так взять и договориться, или как мы работали со сложными людьми
Знакомьтесь, DevOps
Знакомьтесь, DevOps
DevOps in real life
DevOps in real life
Codeless: автоматизация тестирования
Codeless: автоматизация тестирования
Selenoid
Selenoid
Selenide
Selenide
A. Sirota "Building an Automation Solution based on Appium"
A. Sirota "Building an Automation Solution based on Appium"
Эмоциональный интеллект или как не сойти с ума в условиях сложного и динамичн...
Эмоциональный интеллект или как не сойти с ума в условиях сложного и динамичн...
IT talk: Как я перестал бояться и полюбил TestNG
IT talk: Как я перестал бояться и полюбил TestNG
Артем Маркушев — HTML и CSS по кирпичикам. Детали.
1.
HTML & CSS По
кирпичикам Докладчик: Артем Маркушев Дата: 6 июля 2015 года
2.
3.
<div class="wide_column_wrap"> <div class="wide_column"
id="wide_column"> <div class="page_block" id=""> <div id="page_info_wrap" class="page_info_wrap"> <div class="page_top"> <div class="profile_online"> <div id="profile_online_lv" style="display: none;">Online<b class="mob_onl profile_mob_onl unshown" id="profile_mobile_online" onmouseover="mobileOnlineTip(this, {mid: cur.oid, right: 1})" onclick="mobilePromo(); "></b></div> <div id="profile_time_lv"></div> </div> <div class="page_name">Павел Дуров<a href="/verify" class="page_verified" onmouseover="pageVerifiedTip(this, {mid: 1})"></a></div> <div class="page_current_info" id="page_current_info"> <span class="current_text"> 道德經 </span> </div> </div> ... А вот так сайт выглядит на самом деле
4.
HTML HyperText Markup Language Структура документа Ответ
на вопрос «Что?»
5.
HTML Структура декларативного языка <html> <head> <title>Hello,
World</title> </head> <body> … </body> </html>
6.
HTML Структура декларативного языка <body> Это
тег. Тег – это контейнер.
7.
HTML Структура декларативного языка <p>I’m
a paragraph</p> Это контент тега.
8.
HTML Структура декларативного языка <div> <img
src=“image.png” /> </div> А это тег в виде контента другого тега.
9.
HTML Структура декларативного языка <a
href="#target">…</a> У тегов есть атрибуты. Атрибуты задают параметры.
10.
DOM Document Object Model Интерпретация
HTML браузером Ответ на вопрос «Что происходит?»
11.
HTML Интерпретация браузером
12.
HTML Интерпретация браузером WebKit Gecko
EdgeHTML ранее - Trident Blink ранее Chrome – WebKit Opera - Presto
13.
CSS Cascading Style Sheets Вид
документа Ответ на вопрос «Как (выглядит)?»
14.
CSS Структура декларативного языка body
{ width: 100%; height: auto; background-color: #42535b; }
15.
CSS Структура декларативного языка body
{ width: 100%; } Это селектор.
16.
CSS Структура декларативного языка body
{ width: 100%; } Это свойство.
17.
CSS Структура декларативного языка body
{ width: 100%; } Это значение свойства.
18.
CSS Типы селекторов body Селектор тега. Просто
название.
19.
CSS Типы селекторов .active Селектор класса. Точка
перед именем. <li class="active">…
20.
CSS Типы селекторов #unique Селектор ID. Решетка
перед именем. <div id="unique">…
21.
#id { …
} Используйте как можно реже А лучше вообще никогда
22.
CSS Типы селекторов [href] Селектор атрибута. Внутри
квадратных скобок. <a href="">…
23.
CSS Типы селекторов [href="…"], [href^="…"], [href~="…"],
… Селекторы по значению атрибута. Тысячи их.
24.
CSS Типы селекторов * Селектор всего.
25.
CSS Типы селекторов <div> <p></p> <section> <p></p> </section> <section> <p></p> </section> </div>
26.
CSS Типы селекторов div, p
{ … } Множественный селектор. Разделяется запятой.
27.
CSS Типы селекторов <div> <p></p> <section> <p></p> </section> <section> <p></p> </section> </div>
28.
CSS Типы селекторов div p
{ … } Селектор непрямого потомка. Разделяется пробелом.
29.
CSS Типы селекторов <div> <p></p> <section> <p></p> </section> <section> <p></p> </section> </div>
30.
CSS Типы селекторов div >
p { … } Селектор прямого потомка. Разделяется знаком «больше».
31.
CSS Типы селекторов <div> <p></p> <section> <p></p> </section> <section> <p></p> </section> </div>
32.
CSS Типы селекторов p +
section { … } Селектор следующего соседа. Разделяется знаком «плюс».
33.
CSS Типы селекторов <div> <p></p> <section> <p></p> </section> <section> <p></p> </section> </div>
34.
CSS Типы селекторов p ~
section { … } Селектор всех соседей после тега. Разделяется знаком «тильда».
35.
CSS Типы селекторов <div> <p></p> <section> <p></p> </section> <section> <p></p> </section> </div>
36.
CSS Типы селекторов :hover a:hover Псевдокласс. Двоеточие перед
типом.
37.
CSS Типы селекторов :before div:before Псевдоэлемент. Двоеточие перед
типом.
38.
CSS Типы селекторов span.icon:before { content:
""; } Не укажете контент – не будет.
39.
CSS Cascading Style Sheets Что
такое «каскады»
40.
CSS Каскады ul.menu > li
a:hover:before { … } nav.primary li.nav-item.active { … } .container > p, .container > h1 { … } И тому подобное. Это каскады – зависимости.
41.
CSS Вес селекторов #ID .class, [attribute] tag У
разных типов селекторов – разный «вес».
42.
CSS Вес селекторов !important style="" #ID .class, [attribute] tag * Селекторов
больше, чем кажется.
43.
CSS Вес селекторов 0 ,
0 , 0 , 0 , 0!important style id class tag Матрица распределения «весов».
44.
CSS Вес селекторов 0 ,
0 , 0 , 0 , 1!important style id class tag div { … }
45.
CSS Вес селекторов 0 ,
0 , 0 , 0 , 2!important style id class tag div a { … }
46.
CSS Вес селекторов 0 ,
0 , 0 , 1 , 2!important style id class tag div a.active { … }
47.
CSS Вес селекторов 0 ,
0 , 1 , 1 , 2!important style id class tag div#first a.active { … }
48.
CSS Вес селекторов 0 ,
0 , 1 , 0 , 2!important style id class tag div#first a { … }
49.
CSS Вес селекторов 0 ,
1 , 0 , 0 , 0!important style id class tag <a href=“#” style=“…”>…</a>
50.
CSS Вес селекторов 1 ,
0 , 0 , 0 , 0!important style id class tag a { width: 100% !important; }
51.
CSS Вес селекторов 1 ,
1 , 0 , 0 , 0!important style id class tag a { width: 100% !important; } <a href=“#” style=“width: auto !important”>…</a>
52.
CSS Вес селекторов !important >
style > #id > .class = [attr] > tag > * Зависимость надо помнить.
53.
!important Не используйте никогда Вообще
никогда Даже под страхом смерти
54.
CSS Cascading Style Sheets Свойства
и значения
55.
CSS Свойства width: 100%;
56.
CSS Свойства {propertyName}: {value}
57.
CSS Свойства body { width: 100%; padding:
10px 5% 20px; background: url(image.png) no-repeat center center; font-family: ‘Open Sans’, Arial, sans-serif; }
58.
CSS Свойства -webkit-{property}: …; -moz-{property}: …; -ms-{property}:
…; -o-{property}: …; Браузеро-зависимые селекторы. Анахронизм, но пригодится.
59.
CSS Свойства input::-webkit-placeholder { … } Могут быть
в самых неожиданных местах.
60.
CSS Cascading Style Sheets Дополнительно
61.
CSS Дополнительно Методологии _bem OOCSS SMACCS и много других
страшных слов
62.
CSS Дополнительно Препроцессоры LESS SASS Stylus и много других
страшных слов
63.
CSS Дополнительно Препроцессоры .container { … .element { a
{ &:hover { … } } p { … } &.active { … } } }
64.
CSS Дополнительно Препроцессоры .container { … .element { a
{ &:hover { … } } p { … } &.active { … } } } .container { … } .container .element a:hover { … } .container .element p { … } .container .element.active { … } >
65.
CSS Дополнительно Препроцессоры .mixin (@param){ some: func(@param,20%); } .useful-class
{ .mixin (20); } .useless-class { .mixin (30); }
66.
CSS Дополнительно Препроцессоры .mixin (@param){ some: func(@param,20%); } .useful-class
{ .mixin (20); } .useless-class { .mixin (30); } .useful-class { some: 22; } .uselessclass { some: 23; } >
67.
Это Конец htmlbook.ru htmlacademy. ru
68.
Это Конец Вопросы?
69.
artfield.me vk.com/artfieldfest Минута Рекламы kubikami.land vk.com/kubikami flo.one
Notas do Editor
I’ll be talking about our HR communications, HR brand, what it is, why do we need it, what are we changing and what we want to achieve
I’ll be talking about our HR communications, HR brand, what it is, why do we need it, what are we changing and what we want to achieve
Baixar agora