up

2017-02-23 19:03:14 +03:00 · 2017-02-23 19:03:14 +03:00 · 7019d1470d
commit 7019d1470d
parent 20784e7f26
48 changed files with 1019 additions and 464 deletions
--- a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.md
+++ b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.md
@ -0,0 +1,41 @@
+Есть два варианта.
+
+1. Можно использовать свойство `elem.style.cssText` и присвоить стиль в текстовом виде. При этом все присвоенные ранее свойства `elem.style` будут удалены.
+2. Можно назначить подсвойства `elem.style` одно за другим. Этот способ более безопасен, т.к. меняет только явно присваемые свойства.
+
+Мы выберем второй путь.
+
+**Описание CSS-свойств:**
+
+```css
+.button {
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  border: 2px groove green;
+  display: block;
+  height: 30px;
+  line-height: 30px;
+  width: 100px;
+  text-decoration: none;
+  text-align: center;
+  color: red;
+  font-weight: bold;
+}
+```
+
+`*-border-radius`
+: Добавляет скругленные углы. Свойство присваивается в вариантах для Firefox `-moz-...`, Chrome/Safari `-webkit-...` и стандартное CSS3-свойство для тех, кто его поддерживает (Opera).
+
+`display`
+: По умолчанию, у `A` это свойство имеет значение `display: inline`.
+
+`height`, `line-height`
+: Устанавливает высоту и делает текст вертикально центрированным путем установки `line-height` в значение, равное высоте. Такой способ центрирования текста работает, если он состоит из одной строки.
+
+`text-align`
+: Центрирует текст горизонтально.
+
+`color`, `font-weight`
+: Делает текст красным и жирным.
+
--- a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.view/index.html
+++ b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/solution.view/index.html
@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <div>
+    Кнопка:
+    <!-- создайте элемент и расположите его тут -->
+  </div>
+
+  <script>
+    var a = document.createElement('a');
+    a.className = 'button';
+    a.appendChild(document.createTextNode('Нажми меня'));
+    a.href = '/';
+
+    var s = a.style
+    s.MozBorderRadius = s.WebkitBorderRadius = s.borderRadius = '8px';
+    s.border = '2px groove green';
+    s.display = 'block';
+    s.height = '30px';
+    s.lineHeight = '30px';
+    s.width = '100px';
+    s.textDecoration = 'none';
+    s.textAlign = 'center';
+    s.color = 'red';
+    s.fontWeight = 'bold';
+
+    var div = document.body.children[0];
+    div.appendChild(a);
+  </script>
+
+
+</body>
+
+</html>
--- a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/source.view/index.html
+++ b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/source.view/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
+
+  <div>
+    Кнопка:
+    <!-- создайте элемент и расположите его тут -->
+  </div>
+
+  <script>
+    // .. ваш код
+  </script>
+
+
+</body>
+
+</html>
--- a/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/task.md
+++ b/2-ui/1-document/14-styles-and-classes/1-round-button-javascript/task.md
@ -0,0 +1,33 @@
+importance: 3
+
+---
+
+# Скругленая кнопка со стилями из JavaScript
+
+Создайте кнопку в виде элемента `<a>` с заданным стилем, используя JavaScript.
+
+В примере ниже такая кнопка создана при помощи HTML/CSS. В вашем решении кнопка должна создаваться, настраиваться и добавляться в документ при помощи *только JavaScript*, без тегов `<style>` и `<a>`.
+
+```html autorun height="50"
+<style>
+  .button {
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+    border-radius: 8px;
+    border: 2px groove green;
+    display: block;
+    height: 30px;
+    line-height: 30px;
+    width: 100px;
+    text-decoration: none;
+    text-align: center;
+    color: red;
+    font-weight: bold;
+  }
+</style>
+
+<a class="button" href="/">Нажми меня</a>
+```
+
+**Проверьте себя: вспомните, что означает каждое свойство. В чём состоит эффект его появления здесь?**
+