diff options
Diffstat (limited to 'ru-ru')
| -rw-r--r-- | ru-ru/css-ru.html.markdown | 250 | ||||
| -rw-r--r-- | ru-ru/javascript-ru.html.markdown | 3 | ||||
| -rw-r--r-- | ru-ru/objective-c-ru.html.markdown | 2 | ||||
| -rw-r--r-- | ru-ru/php-ru.html.markdown | 61 | ||||
| -rw-r--r-- | ru-ru/ruby-ru.html.markdown | 1 |
5 files changed, 283 insertions, 34 deletions
diff --git a/ru-ru/css-ru.html.markdown b/ru-ru/css-ru.html.markdown new file mode 100644 index 00000000..2e2d40b7 --- /dev/null +++ b/ru-ru/css-ru.html.markdown @@ -0,0 +1,250 @@ +--- +language: css +contributors: + - ["Mohammad Valipour", "https://github.com/mvalipour"] + - ["Marco Scannadinari", "https://github.com/marcoms"] + - ["Geoffrey Liu", "https://github.com/g-liu"] +filename: learncss-ru.css +lang: ru-ru +--- + +В свои ранние дни веб состоял в основном из чистого текста. С развитием браузеров +веб-страницы с графическими элементами стали обычным делом. +CSS - язык, разграничивающий содержимое (HTML) и внешний вид веб-страниц. + +Если коротко, то CSS предоставляет синтаксис, позволяющий выбирать различные +HTML элементы и определять их внешний вид. + +Как и у других языков, у CSS много версий. Мы описываем CSS2.0 - не самую новую, +но самую поддерживаемую и распространенную версию. + +**ВАЖНО:** Так как результатом применения CSS является изменение внешнего вида +элементов, постарайтесь использовать CSS-песочницы при изучении языка. +Например [dabblet](http://dabblet.com/). +В данной статье рассматриваются в первую очередь синтаксис и общие рекомендации. + + +```css +/* Для комментариев используется слеш-астериск, как на этой строчке. + В CSS нет однострочных комментариев; все комментарии записываются таким способом */ + +/* #################### + ## СЕЛЕКТОРЫ + #################### */ + +/* Выражения в CSS очень просты */ +селектор { атрибут: значение; /* другие атрибуты...*/ } + +/* селекторы используются для выбора элементов на странице + +Чтобы выбрать все элементы, используйте астериск: */ +* { color:red; } + +/* +Если на странице присутствует такой элемент: + +<div class='some-class class2' id='someId' attr='value' otherAttr='en-us foo bar' /> +*/ + +/* его можно выбрать по одному классу */ +.some-class { } + +/* или по обоим классам */ +.some-class.class2 { } + +/* по названию тега */ +div { } + +/* по идентификатору */ +#someId { } + +/* по имеющемуся атрибуту */ +[attr] { font-size:smaller; } + +/* или по атрибуту с определенным значением */ +[attr='value'] { font-size:smaller; } + +/* можно выбрать атрибуты, начинающиеся с определенного значения (CSS3) */ +[attr^='val'] { font-size:smaller; } + +/* или заканчивающиеся определенным значением (CSS3) */ +[attr$='ue'] { font-size:smaller; } + +/* содержащие отделенное пробелами значение в названии атрибута (CSS3) */ +[otherAttr~='foo'] { font-size:smaller; } + +/* можно выбрать атрибут как с точным, так и со стоящим после значения “-” (U+002D) */ +[otherAttr|='en'] { font-size:smaller; } + + +/* Более того, все это можно использовать вместе - между разными частями +не должно быть пробелов, иначе селектор будет иметь совершенно иное значение */ +div.some-class[attr$='ue'] { } + +/* Вы можете выбрать элемент по его родителю */ + +/* прямой потомок другого элемента (выбранного с помощью селектора) */ +div.some-parent > .class-name {} + +/* потомок любого родителя в дереве элементов + следующая строка означает: "любой элемент класса "class-name", + являющийся потомком div-элемента класса "some-parent" + НЕЗАВИСИМО ОТ УРОВНЯ ВЛОЖЕННОСТИ" */ +div.some-parent .class-name {} + +/* важно: этот же селектор без пробелов имеет иное значение + можете догадаться, какое? */ +div.some-parent.class-name {} + +/* вы можете выбрать элемент по первому предшествующему + родственному элементу */ +.i-am-before + .this-element { } + +/* или любому предшествующему родственнику перед элементом */ +.i-am-any-before ~ .this-element {} + + +/* Существуют псевдо-классы, позволяющие изменять внешний вид элемента + в зависимости от событий, произошедших с элементом */ + +/* например, когда курсор наведен на элемент */ +element:hover {} + +/* когда пользователь проходил по ссылке ранее */ +element:visited {} + +/* или еще не проходил по ней */ +element:link {} + +/* выбранное поле воода (input) */ +element:focus {} + + +/* #################### + ## АТРИБУТЫ + #################### */ + +selector { + + /* Единицы измерения */ + width: 50%; /* проценты */ + font-size: 2em; /* умножается на высоту шрифта (2em - в два раза больше) */ + width: 200px; /* пиксели */ + font-size: 20pt; /* пункты */ + width: 5cm; /* сантиметры */ + min-width: 50mm; /* милиметры */ + max-width: 5in; /* дюймы */ + height: 0.2vh; /* умножается на высоту окна браузера (CSS3) */ + width: 0.4vw; /* умножается на ширину окна браузера (CSS3) */ + min-height: 0.1vmin; /* наименьшее из vh и vw (CSS3) */ + max-width: 0.3vmax; /* наибольшее из vh и vw (CSS3) */ + + /* Цвета */ + background-color: #F6E; /* сокращенная запись шестнадцатеричного кода */ + background-color: #F262E2; /* стандартная запись шестнадцатеричного кода */ + background-color: tomato; /* название цвета */ + background-color: rgb(255, 255, 255); /* цветовая модель rgb */ + background-color: rgb(10%, 20%, 50%); /* цветовая модель rgb в процентах */ + background-color: rgba(255, 0, 0, 0.3); /* цветовая модель rgb (последний аргумент отвечает за прозрачность цвета) (CSS3) */ + background-color: transparent; /* прозрачный цвет */ + background-color: hsl(0, 100%, 50%); /* в формате hsl (CSS3) */ + background-color: hsla(0, 100%, 50%, 0.3); /* в формате hsl (последний аргумент отвечает за непрозрачность цвета) (CSS3) */ + + + /* Изображения */ + background-image: url(/path-to-image/image.jpg); /* кавычки внутри url() опциональны */ + + /* Шрифты */ + font-family: Arial; + font-family: "Courier New"; /* если в названии есть пробелы, заключите его в кавычки */ + font-family: "Courier New", Trebuchet, Arial, sans-serif; /* если шрифт не найден, + будет использован следующий за ним в списке */ +} + +``` + +## Использование + +Сохраните готовый файл с расширением .css + +```xml +<!-- добавьте css файл в тег <head> на странице: --> +<link rel='stylesheet' type='text/css' href='path/to/style.css' /> + +<!-- Можно использовать встроенные стили. Рекомендуется избегать подобного подхода. --> +<body> + <style> + a { color: purple; } + </style> +</body> + +<!-- Можно установить стиль элемента напрямую. +Используйте этот способ только в случае крайней необходимости. --> +<div style="border: 1px solid red;"> +</div> + +``` + +## Приоритет + +Как вы заметили, внешний вид элемента может определяться несколькими селекторами, +а значение атрибута элемента может быть установлено больше одного раза. +В подобных случаях одно из значений оказывается приоритетнее остальных. + +Если взять следующую таблицу стилей: + +```css +/*A*/ +p.class1[attr='value'] + +/*B*/ +p.class1 {} + +/*C*/ +p.class2 {} + +/*D*/ +p {} + +/*E*/ +p { property: value !important; } + +``` + +и следующую разметку: + +```xml +<p style='/*F*/ property:value;' class='class1 class2' attr='value'> +</p> +``` + +Приоритет стилей будет таким: +Помните: приоритет выставляется для **атрибута**, а не для всего блока стилей. + +* `E` имеет наивысший приоритет благодаря ключевому слову `!important`. + Используйте только в случае крайней необходимости. +* `F` идет следующим, так как является встроенным стилем. +* `A` следующий, как самый конкретизированный. + конкретизированный == большее количество определителей. + В этом примере 3 определителя: 1 тег `p` + + название класса `class1` + 1 атрибут `attr='value'` +* `C` следующий. Несмотря на одинаковое с `B` количество определителей, + `C` определен позже. +* Затем `B` +* И последний `D`. + +## Совместимость + +Несмотря на то, что большая часть функций CSS2 (а также CSS3) подеррживается всеми +браузерами и устройствами, не забывайте проверять совместимость CSS-правил +с современными браузерами. + +[QuirksMode CSS](http://www.quirksmode.org/css/) замечательно подходит для этого. + +To run a quick compatibility check, [CanIUse](http://caniuse.com) is a great resource. + +## Ресурсы для самостоятельного изучения + +* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) diff --git a/ru-ru/javascript-ru.html.markdown b/ru-ru/javascript-ru.html.markdown index 79844565..8655ae4a 100644 --- a/ru-ru/javascript-ru.html.markdown +++ b/ru-ru/javascript-ru.html.markdown @@ -470,9 +470,6 @@ myNumber === myNumberObj; // = false if (0) { // Этот код не выполнится, потому что 0 - это ложь. } -if (Number(0)) { - // Этот код *выполнится*, потому что Number(0) истинно. -} // Впрочем, объекты-обёртки и встроенные типы имеют общие прототипы, // поэтому вы можете расширить функционал строк, например: diff --git a/ru-ru/objective-c-ru.html.markdown b/ru-ru/objective-c-ru.html.markdown index ddff2e5c..8eac4ddb 100644 --- a/ru-ru/objective-c-ru.html.markdown +++ b/ru-ru/objective-c-ru.html.markdown @@ -17,7 +17,7 @@ Cocoa Touch. Он является объектно-ориентированным языком программирования общего назначения, который добавляет обмен сообщениями в Smalltalk-стиле к языку программирования C. -```objective_c +```objective-c // Однострочные комментарии начинаются с // /* diff --git a/ru-ru/php-ru.html.markdown b/ru-ru/php-ru.html.markdown index 53b2f916..5672aa90 100644 --- a/ru-ru/php-ru.html.markdown +++ b/ru-ru/php-ru.html.markdown @@ -5,6 +5,7 @@ contributors: - ["Trismegiste", "https://github.com/Trismegiste"] translators: - ["SlaF", "https://github.com/SlaF"] + - ["Corpsee", "https://github.com/corpsee"] lang: ru-ru filename: learnphp-ru.php --- @@ -14,8 +15,8 @@ filename: learnphp-ru.php ```php <?php // PHP код должен быть заключен в теги <?php -// Если ваш файл содержит только PHP код, то можно -// пропустить закрывающийся ?> +// Если ваш файл содержит только PHP-код, то можно +пропустить закрывающий ?> // А так начинаются комментарии @@ -30,10 +31,10 @@ filename: learnphp-ru.php print('Hello '); // Напечатать "Hello " без перевода строки // () необязательно применять для print и echo -echo "World\n"; // Печатать "World" и перейти на новую строку. +echo "World\n"; // Напечатать "World" и перейти на новую строку. // (все утверждения должны заканчиваться ;) -// Любые символы за пределами закрывающегося тега выводятся автоматически: +// Любые символы за пределами закрывающего тега выводятся автоматически: ?> Hello World Again! <?php @@ -46,7 +47,7 @@ Hello World Again! // Переменные начинаются с символа $. // Правильное имя переменной начинается с буквы или знака подчеркивания, // и может содержать любые цифры, буквы, или знаки подчеркивания. -// Не рекомендуется использовать кирилические символы в именах (прим. пер.) +// Не рекомендуется использовать кириллические символы в именах (прим. пер.) // Логические значения нечувствительны к регистру $boolean = true; // или TRUE или True @@ -56,7 +57,7 @@ $boolean = false; // или FALSE или False $int1 = 12; // => 12 $int2 = -12; // => -12- $int3 = 012; // => 10 (ведущий 0 обозначает восьмеричное число) -$int4 = 0x0F; // => 15 (ведущие символы 0x означает шестнадцатеричное число) +$int4 = 0x0F; // => 15 (ведущие символы 0x означают шестнадцатеричное число) // Дробные числа $float = 1.234; @@ -126,7 +127,7 @@ echo 'This outputs '.FOO; // Все массивы в PHP - это ассоциативные массивы или хеши, -// Ассоциативные массивы, известные в других языках как хеш-карты. +// Ассоциативные массивы, известные в других языках как HashMap. // Работает во всех версиях РHP $associative = array('One' => 1, 'Two' => 2, 'Three' => 3); @@ -199,13 +200,13 @@ assert($c > $b); // больше assert($a <= $b); // меньше или равно assert($c >= $d); // больше или равно -// Следующие утверждения истинны если переменные имеют одинаковый тип. +// Следующие утверждения истинны, если переменные имеют одинаковый тип. assert($c === $d); assert($a !== $d); assert(1 == '1'); assert(1 !== '1'); -// Переменные могут изменять тип, в зависимости от их использования. +// Переменные могут изменять тип в зависимости от их использования. $integer = 1; echo $integer + $integer; // => 2 @@ -235,7 +236,7 @@ $var = null; // Null $integer = 10; $boolen = settype($integer, "string") // теперь $integer имеет строковый тип -// settype возвращает true - если преобразование удалось и false в противном случае +// settype возвращает true, если преобразование удалось и false в противном случае /******************************** * Управляющие структуры @@ -311,7 +312,7 @@ echo "\n"; for ($x = 0; $x < 10; $x++) { echo $x; -} // Prints "0123456789" +} // Напечатает "0123456789" echo "\n"; @@ -320,7 +321,7 @@ $wheels = ['bicycle' => 2, 'car' => 4]; // Циклы foreach могут обходить массивы foreach ($wheels as $wheel_count) { echo $wheel_count; -} // Prints "24" +} // Напечатает "24" echo "\n"; @@ -337,14 +338,14 @@ while ($i < 5) { break; // Exit out of the while loop } echo $i++; -} // Prints "012" +} // Напечатает "012" for ($i = 0; $i < 5; $i++) { if ($i === 3) { continue; // Skip this iteration of the loop } echo $i; -} // Prints "0124" +} // Напечатает "0124" /******************************** @@ -369,7 +370,7 @@ function add ($x, $y = 1) { // $y по умолчанию равно 1 echo add(4); // => 5 echo add(4, 2); // => 6 -// $result недоступна за пределами функции +// $result недоступен за пределами функции // print $result; // Выдает предупреждение // Начиная с PHP 5.3 вы можете объявлять анонимные функции: @@ -402,19 +403,19 @@ echo $function_name(1, 2); // => 3 /******************************** - * Includes + * Включения */ <?php // PHP код внутри включаемого файла должен начинаться с тега PHP. include 'my-file.php'; -// Код в файле my-file.php теперь доступен в текущем в текущем пространстве имен. -// Если файл не удалось включить, будет выдано предупреждение. +// Код в файле my-file.php теперь доступен в текущем пространстве имен. +// Если файл не удалось подключить, то будет выдано предупреждение. include_once 'my-file.php'; -// Если код в файле my-file.php уже был включен, он не будет включен повторно. -// Это предотвращает ошибку повторного включения файла. +// Если код в файле my-file.php уже был подключен, он не будет подключен повторно. +// Это предотвращает ошибку повторного подключения файла. require 'my-file.php'; require_once 'my-file.php'; @@ -422,7 +423,7 @@ require_once 'my-file.php'; // Same as include(), except require() will cause a fatal error if the // file cannot be included. // Действует также как и include(), но если файл не удалось подключить, -// функция выдает неисправимую ошибку +// функция выдает фатальную ошибку // Содержимое файла my-include.php: <?php @@ -452,19 +453,19 @@ class MyClass static $staticVar = 'static'; - // Properties must declare their visibility + // Свойства объявляются с указанием их видимости public $property = 'public'; public $instanceProp; - protected $prot = 'protected'; // Accessible from the class and subclasses - private $priv = 'private'; // Accessible within the class only + protected $prot = 'protected'; // Свойство доступно только потомкам и самому классу + private $priv = 'private'; // Свойство доступно только самому классу - // Create a constructor with __construct + // Конструктор описывается с помощью __construct public function __construct($instanceProp) { - // Access instance variables with $this + // Доступ к эземпляру класса с помощью $this $this->instanceProp = $instanceProp; } - // Methods are declared as functions inside a class + // Методы объявляются как функции принадлежащие классу public function myMethod() { print 'MyClass'; @@ -502,7 +503,7 @@ class MyOtherClass extends MyClass echo $this->prot; } - // Override a method + // Переопределение родительского метода function myMethod() { parent::myMethod(); @@ -595,7 +596,7 @@ class SomeOtherClass implements InterfaceOne, InterfaceTwo * Трейты */ -// Трейты появились в PHP 5.4.0 и объявляются при помощи ключевого слова trait +// Трейты появились в PHP 5.4 и объявляются при помощи ключевого слова trait trait MyTrait { @@ -611,7 +612,7 @@ class MyTraitfulClass } $cls = new MyTraitfulClass(); -$cls->myTraitMethod(); // Prints "I have MyTrait" +$cls->myTraitMethod(); // Напечатает "I have MyTrait" /******************************** diff --git a/ru-ru/ruby-ru.html.markdown b/ru-ru/ruby-ru.html.markdown index 318e0e09..69b5fb46 100644 --- a/ru-ru/ruby-ru.html.markdown +++ b/ru-ru/ruby-ru.html.markdown @@ -158,6 +158,7 @@ array << 6 #=> [1, 2, 3, 4, 5, 6] hash = {'color' => 'green', 'number' => 5} hash.keys #=> ['color', 'number'] +hash.values #=> ['green', 5] # Значение в хэше легко может быть найдено по ключу: hash['color'] #=> 'green' |