(no subject)
Dec. 16th, 2009 23:30![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
«Selectors Level 3»
W3C Proposed Recommendation 15 December 2009
(http://www.w3.org/TR/css3–selectors/)
Вычисляемые селекторы — это очень, очень круто.
Например, раскрасить строчки в разные цвета можно будет так:
А сейчас для этого же нужно создать 4 разных стиля, и каким–то скриптом каждой строке по запрограммированному правилу назначить класс нужного цвета.
Вот этот код сделает так, что первая буква каждого параграфа будет в 2 раза крупнее остальных:
общая часть:
новый код:
старый код:
Обратите внимание, что в новом варианте управляющие коды не перемешиваются с текстом.
W3C Proposed Recommendation 15 December 2009
(http://www.w3.org/TR/css3–selectors/)
Вычисляемые селекторы — это очень, очень круто.
Например, раскрасить строчки в разные цвета можно будет так:
/* Alternate paragraph colours in CSS */ p:nth–child(4n+1) { color: navy; } p:nth–child(4n+2) { color: green; } p:nth–child(4n+3) { color: maroon; } p:nth–child(4n+4) { color: purple; }
А сейчас для этого же нужно создать 4 разных стиля, и каким–то скриптом каждой строке по запрограммированному правилу назначить класс нужного цвета.
Вот этот код сделает так, что первая буква каждого параграфа будет в 2 раза крупнее остальных:
общая часть:
p { color: red; font–size: 12pt } p::first–letter { color: green; font–size: 200% } p::first–line { color: blue }
новый код:
<P>Some text that ends up on two lines</P>
старый код:
<P> <P::first–line> <P::first–letter> S </P::first–letter>ome text that </P::first–line> ends up on two lines </P>
Обратите внимание, что в новом варианте управляющие коды не перемешиваются с текстом.
no subject
Date: 2009-12-18 08:32 (UTC)Определяешь шаблон:
$BackgroundColor { color: blue }
А потом используешь его где надо:
p { color: $BackgroundColor }
(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From: