Я запустила в Телеграм импровизированный курс польского языка с нуля. Присоединяйтесь по ссылке t.me/propolski_kurs Artykuł Для беженцев: польский язык с нуля pochodzi z serwisu insidePL.
Для беженцев: польский язык с нуля — insidePL
Меню Window -> Shapes… в открывшейся панели нажимаем на гамбургер меню сверху справа и выбираем Legacy Shapes and More
Во всех инструкциях по сборке модуля для кусудамы Butterfly модули собирают при помощи клея. Я покажу, как можно собрать модуль без клея.
EMMET наиболее удобен для быстрого написания css стилей. Некоторые стили довольно сложные и труднозапоминаемые, с помощью EMMET достаточно лишь запомнить короткое сокращение.
| fz20 | font-size: 20px; |
| fwb | font-weight: bold; |
| bgc | background-color: #fff; |
| bg | background: #000; |
| c | color: #000; |
| m0 | margin: 0; |
| p0 | padding: 0; |
| w100 | width: 100px; |
| h100 | height: 100px; |
| mw100 | min-width: 100px; |
| dn | display: none; |
| db | display: block; |
| lstpn | list-style-type: none; |
| bg+ | background: #fff url() 0 0 no-repeat; |
| ffa | font-family: Arial, «Helvetica Neue», Helvetica, sans-serif; |
| bd+ | border: 1px solid #000; |
| bdn | border: none; |
| bt+ | border-top: 1px solid #000; |
| bb+ | border-bottom: 1px solid #000; |
| bdbn | border-bottom: none; |
EMMET — плагин для ускорения верстки.
Первоначальная разметка: !+tab
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
Вставить ссылку на css: link+tab
<link rel="stylesheet" href="style.css">
Добавить div с определенным классом .class1+tab
<div class="class1"></div>
> добавляет дочерний элемент: .class1>p + tab
<div class="class1"><p></p></div>
* Добавление нескольких однотипных элементов: nav>ul>li*4 + tab
<nav> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </nav>
Создание таблички 3 строчки по 3 ячейки: table>tr*3>td*3 + tab
<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
+ Соединение: header+section+footer + tab
<header></header> <section></section> <footer></footer>
^ Переместить выше в DOM html: ul>li*2^p
<ul> <li></li> <li></li> </ul> <p></p>
Если в этой конструкции вместо ^ поставить >, абзацы вложатся каждый элемент списка. Если поставить +, абзац будет стоять последним элементом после всех li
Группировка (): .class1>(.class2+.class3)+tab
<div class="class1"> <div class="class2"></div> <div class="class3"></div> </div>
Нумерация $: a.class$*3+tab
<a href="" class="class1"></a> <a href="" class="class2"></a> <a href="" class="class3"></a>
id для div #: #element$*3
<div id="element1"></div> <div id="element2"></div> <div id="element3"></div>
Ссылка: a+tab
<a href=""></a>
Ссылка с адресом: a[href=irenebelle.com]
<a href="irenebelle.com"></a>
Обычный текст: a{ссылка}
<a href="">ссылка</a>
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
lorem и loremru — вставляет произвольный текст
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae maxime, necessitatibus accusantium magnam maiores.
В EMMET очень много различных сокращений, посмотреть их можно в документации на официальном сайте.
Скачать плагин для своего редактора можно здесь
Подробнее об нумерации
ul>li.item$*5
<ul> <li class=»item1″></li> <li class=»item2″></li> <li class=»item3″></li> <li class=»item4″></li> <li class=»item5″></li> </ul>
h$[title=item$]{Header $}*3
<h1 title=»item1″>Header 1</h1> <h2 title=»item2″>Header 2</h2> <h3 title=»item3″>Header 3</h3>
Если нужны нули в начале
ul>li.item$$$*5
<ul> <li class=»item001″></li> <li class=»item002″></li> <li class=»item003″></li> <li class=»item004″></li> <li class=»item005″></li> </ul>
Отсчет в обратную сторону
ul>li.item$@-*5
<ul> <li class=»item5″></li> <li class=»item4″></li> <li class=»item3″></li> <li class=»item2″></li> <li class=»item1″></li> </ul>
Начало нумерации с определенного числа
ul>li.item$@3*5
<ul> <li class=»item3″></li> <li class=»item4″></li> <li class=»item5″></li> <li class=»item6″></li> <li class=»item7″></li> </ul>
Селекторы, которые я не использовала ни разу, а наверное полезная штука:
h1+p — выделяет абзац, следующий сразу за заголовком. Это работает только с сестринскими тегами, не с потомками.
p * — все теги, вложенные в p (например strong, em, span, a)
Селектор :target используется с внутренними ссылками.
В примере при нажатии на ссылку, появится форма.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#hello {
display: none;
}
#hello:target {
display: block;
}
</style>
</head>
<body>
<a href="#hello">Подписаться на рассылку</a>
<form action="" id="hello">
<label for="email">Укажите ваш адрес электронной почты</label><input type="text" id="email">
<input type="submit" value="Подписаться">
</form>
</body>
</html>
Селектор :not()
Выбрать все ссылки, ведущие на внешние сайты (тоесть не на домен mysite.com)
a[href^="http://"]:not([href*="mysite.com"])
Сброс значений отступов
*{
padding: 0;
margin: 0;
}
Secret Land 