Для беженцев: польский язык с нуля — insidePL

Я запустила в Телеграм импровизированный курс польского языка с нуля. Присоединяйтесь по ссылке t.me/propolski_kurs Artykuł Для беженцев: польский язык с нуля pochodzi z serwisu insidePL.

Для беженцев: польский язык с нуля — insidePL

Модуль для кусудамы Butterfly — как собрать без склеивания

Во всех инструкциях по сборке модуля для кусудамы Butterfly модули собирают при помощи клея. Я покажу, как можно собрать модуль без клея.

Шаг 1
Шаг 2
Шаг 3
Шаг 4
Шаг 5
Шаг 6
Шаг 7
Шаг 8
Шаг 9
Шаг 10
Шаг 11
Шаг 12
Шаг 13
Шаг 14
Шаг 15
Шаг 16
Шаг 17
Шаг 18

Некоторые сокращения EMMET для CSS

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

fz20font-size: 20px;
fwbfont-weight: bold;
bgcbackground-color: #fff;
bgbackground: #000;
ccolor: #000;
m0margin: 0;
p0padding: 0;
w100width: 100px;
h100height: 100px;
mw100min-width: 100px;
dndisplay: none;
dbdisplay: block;
lstpnlist-style-type: none;
bg+background: #fff url() 0 0 no-repeat;
ffafont-family: Arial, «Helvetica Neue», Helvetica, sans-serif;
bd+border: 1px solid #000;
bdnborder: none;
bt+border-top: 1px solid #000;
bb+border-bottom: 1px solid #000;
bdbnborder-bottom: none;

Сайт emmet

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

Селектор :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;
}