+*/ + +/* его можно выбрать по одному классу */ +.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 +/*A*/ +p.class1[attr='value'] + +/*B*/ +p.class1 {} + +/*C*/ +p.class2 {} + +/*D*/ +p {} + +/*E*/ +p { property: value !important; } + +``` + +и следующую разметку: + +```xml +

+``` + +Приоритет стилей будет таким: +Помните: приоритет выставляется для **атрибута**, а не для всего блока стилей. + +* `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) -- cgit v1.2.3 From 41d49490ba093a74d0d691538b8342682feb997f Mon Sep 17 00:00:00 2001 From: Chashmeet Singh Date: Mon, 5 Oct 2015 15:46:46 +0530 Subject: Update python-ru.html.markdown --- ru-ru/python-ru.html.markdown | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'ru-ru') diff --git a/ru-ru/python-ru.html.markdown b/ru-ru/python-ru.html.markdown index a0e2b474..162675bb 100644 --- a/ru-ru/python-ru.html.markdown +++ b/ru-ru/python-ru.html.markdown @@ -238,6 +238,15 @@ d, e, f = 4, 5, 6 # Обратите внимание, как легко поменять местами значения двух переменных e, d = d, e # теперь d == 5, а e == 4 +#take input of integers in a single line +#if input 1 2 3 +input = map(int,raw_input().split()) #integer + +input #=>[1, 2, 3] + +input = map(str,raw_input().split()) #string + +input #=>['1', '2', '3'] # Словари содержат ассоциативные массивы empty_dict = {} -- cgit v1.2.3 From dca1300e57600f6707d3aa3778a24d9b1626b9b9 Mon Sep 17 00:00:00 2001 From: Chashmeet Singh Date: Mon, 5 Oct 2015 17:33:38 +0530 Subject: Update python-ru.html.markdown --- ru-ru/python-ru.html.markdown | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'ru-ru') diff --git a/ru-ru/python-ru.html.markdown b/ru-ru/python-ru.html.markdown index 162675bb..ec4fff41 100644 --- a/ru-ru/python-ru.html.markdown +++ b/ru-ru/python-ru.html.markdown @@ -238,13 +238,13 @@ d, e, f = 4, 5, 6 # Обратите внимание, как легко поменять местами значения двух переменных e, d = d, e # теперь d == 5, а e == 4 -#take input of integers in a single line -#if input 1 2 3 -input = map(int,raw_input().split()) #integer +#принять ввод чисел в одной строке +#если вход 1 2 3 +input = map(int,raw_input().split()) #целое число input #=>[1, 2, 3] -input = map(str,raw_input().split()) #string +input = map(str,raw_input().split()) #строка input #=>['1', '2', '3'] -- cgit v1.2.3 From e1abb317dd2526a7352b59c20f9cd37c1a369f55 Mon Sep 17 00:00:00 2001 From: Chashmeet Singh Date: Mon, 5 Oct 2015 20:44:43 +0530 Subject: String to list characters --- ru-ru/python-ru.html.markdown | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) (limited to 'ru-ru') diff --git a/ru-ru/python-ru.html.markdown b/ru-ru/python-ru.html.markdown index ec4fff41..699d1393 100644 --- a/ru-ru/python-ru.html.markdown +++ b/ru-ru/python-ru.html.markdown @@ -167,6 +167,10 @@ li = [] # Можно сразу начать с заполненного списка other_li = [4, 5, 6] +#Строка в список +a="adambard" +list(a) #=> ['a','d','a','m','b','a','r','d'] + # Объекты добавляются в конец списка методом append li.append(1) # [1] li.append(2) # [1, 2] @@ -238,16 +242,6 @@ d, e, f = 4, 5, 6 # Обратите внимание, как легко поменять местами значения двух переменных e, d = d, e # теперь d == 5, а e == 4 -#принять ввод чисел в одной строке -#если вход 1 2 3 -input = map(int,raw_input().split()) #целое число - -input #=>[1, 2, 3] - -input = map(str,raw_input().split()) #строка - -input #=>['1', '2', '3'] - # Словари содержат ассоциативные массивы empty_dict = {} # Вот так описывается предзаполненный словарь -- cgit v1.2.3 From c7c9ea674dbe3af1e2e1c09cffb36a40c6553e80 Mon Sep 17 00:00:00 2001 From: Chashmeet Singh Date: Tue, 6 Oct 2015 05:38:40 +0530 Subject: Update python-ru.html.markdown --- ru-ru/python-ru.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ru-ru') diff --git a/ru-ru/python-ru.html.markdown b/ru-ru/python-ru.html.markdown index 699d1393..3852a550 100644 --- a/ru-ru/python-ru.html.markdown +++ b/ru-ru/python-ru.html.markdown @@ -167,7 +167,7 @@ li = [] # Можно сразу начать с заполненного списка other_li = [4, 5, 6] -#Строка в список +# строка разделена в список a="adambard" list(a) #=> ['a','d','a','m','b','a','r','d'] -- cgit v1.2.3