Артем Маркушев — HTML и CSS по кирпичикам. Детали.

HTML & CSS
По кирпичикам
Докладчик: Артем Маркушев
Дата: 6 июля 2015 года

<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>
...
А вот так сайт выглядит на самом деле

HTML
HyperText Markup
Language
Структура документа
Ответ на вопрос «Что?»

HTML
Структура декларативного языка
<html>
<head>
<title>Hello, World</title>
</head>
<body>
…
</body>
</html>

HTML
<body>
Это тег.
Тег – это контейнер.

HTML
<p>I’m a
paragraph</p>
Это контент тега.

HTML
<div>
<img src=“image.png” />
</div>
А это тег в виде контента другого
тега.

HTML
<a href="#target">…</a>
У тегов есть атрибуты.
Атрибуты задают параметры.

DOM
Document Object Model
Интерпретация HTML
браузером
Ответ на вопрос «Что происходит?»

HTML
Интерпретация браузером

HTML
Интерпретация браузером
WebKit Gecko EdgeHTML
ранее - Trident
Blink
ранее
Chrome – WebKit
Opera - Presto

CSS
Cascading Style Sheets
Вид документа
Ответ на вопрос «Как (выглядит)?»

CSS
body {
width: 100%;
height: auto;
background-color: #42535b;
}

CSS
body {
width: 100%;
}
Это селектор.

CSS
body {
width: 100%;
}
Это свойство.

CSS
body {
width: 100%;
}
Это значение свойства.

CSS
Типы селекторов
body
Селектор тега.
Просто название.

CSS
.active
Селектор класса.
Точка перед именем.
<li class="active">…

CSS
#unique
Селектор ID.
Решетка перед именем.
<div id="unique">…

#id { … }
Используйте как можно реже
А лучше вообще никогда

CSS
[href]
Селектор атрибута.
Внутри квадратных скобок.
<a href="">…

CSS
[href="…"], [href^="…"],
[href~="…"], …
Селекторы по значению
атрибута.
Тысячи их.

CSS
*
Селектор всего.

CSS
<div>
<p></p>
<section>
<p></p>
</section>
<section>
<p></p>
</section>
</div>

CSS
div, p { … }
Множественный селектор.
Разделяется запятой.

CSS
div p { … }
Селектор непрямого потомка.
Разделяется пробелом.

CSS
div > p { … }
Селектор прямого потомка.
Разделяется знаком «больше».

CSS
p + section { … }
Селектор следующего соседа.
Разделяется знаком «плюс».

CSS
p ~ section { … }
Селектор всех соседей после
тега.
Разделяется знаком «тильда».

CSS
:hover
a:hover
Псевдокласс.
Двоеточие перед типом.

CSS
:before
div:before
Псевдоэлемент.
Двоеточие перед типом.

CSS
span.icon:before {
content: "";
}
Не укажете контент – не будет.

CSS
Что такое «каскады»

CSS
Каскады
ul.menu > li a:hover:before { … }
nav.primary li.nav-item.active { …
}
.container > p, .container > h1 { …
}
И тому подобное.
Это каскады – зависимости.

CSS
Вес селекторов
#ID
.class, [attribute]
tag
У разных типов селекторов – разный «вес».

CSS
!important
style=""
#ID
.class, [attribute]
tag
*
Селекторов больше, чем кажется.

CSS
0 , 0 , 0 , 0 , 0!important style id class tag
Матрица распределения «весов».

CSS
div { … }

CSS
div a { … }

CSS
div a.active { … }

CSS
div#first a.active { … }

CSS
div#first a { … }

CSS
<a href=“#”
style=“…”>…</a>

CSS
a { width: 100%
!important; }

CSS
a { width: 100% !important; }
<a href=“#” style=“width: auto
!important”>…</a>

CSS
!important > style > #id > .class = [attr]
> tag > *
Зависимость надо помнить.

!important
Не используйте никогда
Вообще никогда
Даже под страхом смерти

CSS
Свойства и значения

CSS
Свойства
width: 100%;

CSS
Свойства
{propertyName}: {value}

CSS
Свойства
body {
width: 100%;
padding: 10px 5% 20px;
background: url(image.png) no-repeat center
center;
font-family: ‘Open Sans’, Arial, sans-serif;
}

CSS
Свойства
-webkit-{property}: …;
-moz-{property}: …;
-ms-{property}: …;
-o-{property}: …;
Браузеро-зависимые селекторы.
Анахронизм, но пригодится.

CSS
Свойства
input::-webkit-placeholder {
…
}
Могут быть в самых неожиданных местах.

CSS
Дополнительно

CSS
Методологии
_bem
OOCSS
SMACCS
и много других страшных слов

CSS
Препроцессоры
LESS
SASS
Stylus
и много других страшных слов

CSS
.container {
…
.element {
a {
&:hover { … }
}
p { … }
&.active { … }
}
}

CSS
.container {
…
.element {
a {
&:hover { … }
}
p { … }
&.active { … }
}
}
.container { … }
.container .element a:hover {
… }
.container .element p { … }
.container .element.active { …
}
>

CSS
.mixin (@param){
some: func(@param,20%);
}
.useful-class {
.mixin (20);
}
.useless-class {
.mixin (30);
}

CSS
.mixin (@param){
some: func(@param,20%);
}
.useful-class {
.mixin (20);
}
.useless-class {
.mixin (30);
}
.useful-class {
some: 22;
}
.uselessclass {
some: 23;
}
>

Это
Конец
htmlbook.ru
htmlacademy.
ru

Это
Конец
Вопросы?

artfield.me
vk.com/artfieldfest
Минута
Рекламы
kubikami.land
vk.com/kubikami
flo.one

Артем Маркушев — HTML и CSS по кирпичикам. Детали.

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (18)

Ähnlich wie Артем Маркушев — HTML и CSS по кирпичикам. Детали.

Ähnlich wie Артем Маркушев — HTML и CSS по кирпичикам. Детали. (20)

Mehr von DataArt

Mehr von DataArt (20)

Артем Маркушев — HTML и CSS по кирпичикам. Детали.

Hinweis der Redaktion