Карысныя спасылкі

CSS home

Афіцыйная пляцоўка на W3C: http://www.w3.org/Style/CSS

Зручны індэкс па ўсім афіцыйным дакумэнтам на W3Viewer: http://www.w3viewer.com

Неафіцыйная пляцоўка: http://www.css3.info

Стандарты і спэцыфікацыі

CSS 2.1

Спэцыфікацыя на W3C: http://www.w3.org/TR/CSS2

Даведнікі

Даведнік па базавым аспэктам: http://www.cssbasics.com

Дасканалы даведнік на SitePoint: http://reference.sitepoint.com/css

Даведнік на DocHub: http://dochub.io/#css/

Інтэрактыўная шпаргалка на OverAPI: http://overapi.com/css/

TODO (разабраць):

• Комплексная дакумэнтацыя на MDN: https://developer.mozilla.org/en-US/learn/css
• Hands on tutorial на westciv: http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html
• Complete css guide на westciv: http://www.westciv.com/style_master/academy/css_tutorial/introduction/index.html
• http://www.css3files.com/

Блогі

Разьдзел CSS на scriptjunkie{} (MSDN Magazine): http://msdn.microsoft.com/en-us/magazine/ff601772.aspx

Прылады

Відэа-ўводзіны да Firefox-дадатку Firebug на css-tricks.com: http://css-tricks.com/video-screencasts/15-introduction-to-firebug/

Базавыя канцэпцыі

Што такое CSS

Вэб-дакумэнт складаецца з 3х слаёў:

1. Зьмест (Content) — тое, што аўтар хоча данесьці да чытача.
2. Прадстаўленьне (Presentation) — як гэта інфармацыя выглядае.
3. Паводзіны (Behavior) — узаемадзеяньні карыстальніка з дакумэнтам.

Асноўная ідэя CSS заключаецца ў тым, каб захоўваць тое, як інфармацыя адлюстроўваецца/прадстаўляецца асобна ад самой інфармацыі. Перавагі такога падыходу:

1. Сродкі CSS нашмат больш магутныя за сродкі HTML.
2. Магчымасьць рабіць re-use рэсурсаў: адзін css-файл можа ўжывацца для шмат дакумэнтаў. Зьмены ў стылі ўсяго сайту/аплікацыі трэба рабіць не ўва ўсіх дакумэнтах сайту, а толькі ў адпаведным css-файле.
3. Зьмяншаецца аб'ём перадаваемай інфармацыі.
4. Зьмест, аддзелены ад стылю, можа выкарыстоўвацца ня толькі браўзэрамі.

Вэрсіі CSS

• CSS1 — прыняты ў 1996 г. Бедны, у асноўным кіраваў тыпаграфікай.
• CSS2 — прыняты ў 1998 г. Нашмат больш магутная вэрсія, але складана рэалізуемая на той момант. З-за апошняй акалічнасьці была зроблена спрошчаная, перагледжаная вэрсія:
  • CSS2.1 — звычайна, калі гаворыцца пра 2гую вэрсію CSS, маецца на ўвазе менавіта гэтая вэрсія.
• CSS3 — будучая вэрсія, яшчэ ня прынятая канчаткова, існуючая толькі ў выглядзе асобных рэкамэндацыяў па пэўным разьдзелам. Аднак, у бальшыні асноўных браўзэраў шмат якія асаблівасьці стандарту ўжо рэалізаваныя.

Тыпы CSS і спосабы іх падключэньня

Тыпы аўтарскіх CSS у парадку, у якім браўзэр шукае стыль пэўнага элемэнту:

1. Inline (убудаваны) стыль. Пры выкарыстаньні style-атрыбуту HTML-аб'ектаў:

   Убудаваныя стылі абмежаваны тым, што:

   • немагчыма вызначыць для якіх тыпаў media яны павінны ўжывацца;
   • іх немагчыма ўжыць для pseudo-classes і pseudo-elements.

   Недахоп такога спосабу ўжываць стылі ў тым, што яны ўбудаваны ў гэтым выпадку ў кантэнт. Але гэта можа быць апраўдана, калі такім стылем трэба пазначыць толькі адзін (некалькі) элемэнт старонкі.

2. Internal (унутраны) стыль. Пры выкарыстаньні style-элемэнту ўнутры head-элемэнту HTML:

   Недахопы амаль тыя ж, што і папярэдняга тыпу. Адзінае, у гэтым выпадку можна дабівацца re-use аднаго і таго ж стылю для некалькіх элемэнтаў HTML, а таксама пазначаць media¹.

3. External (зьнешні) стыль. Падключаецца са зьнешняга css-файлу. Падключэньне магчымае 2ма шляхамі:
   1. link-элемэнт ўнутры head-элемэнту HTML:

      Гэты мэтад можа таксама выкарыстоўвацца для падключэньня альтэрнатыўных стыляў:

      • калі ў элемэнце link пазначана rel="stylesheet" і адсутнічае атрыбут title, стыль лічыцца "нерухомым" ці пастаянным і не можа быць заменены іншым. Калі ў браўзэры абіраецца іншы стыль, ён ужываецца паралельна з гэтым нерухомым, а не замест яго.
      • калі ў элемэнце link пазначана rel="stylesheet" і прысутнічае атрыбут title, стыль лічыцца змоўчным, але можа быць адключаны, калі карыстач абярэ іншы стыль ў браўзэры.
      • калі ў элемэнце link пазначана rel="alternate stylesheet"², стыль па-змоўчваньні не выкарыстоўваецца, але можа быць уключаны карыстачом парз браўзэр.
      • калі ў некалькіх элемэнтаў link маецца атрыбут title з адным і тым жа значэньнем, то ўключэньне аднаго зь іх прывядзе да ўключэньня іншых і, адпаведна, да адключэньня стыляў зь іншымі "імёнамі" ці без "імёнаў".

   2. @import at-rule ўнутры head-элемэнту HTML:

І для 3.а, і для 3.b характэрна тое, што URI's у href-атрыбуце і ў @import at-rule зьяўляюцца адноснымі да HTML-дакумэнту, які ўтрымлівае гэтую спасылку. Калі @import выкарыстоўваецца ў CSS-дакумэнце, тады URI зьяўляецца адносным да гэтага CSS-дакумэнту.

Сынтакс і тэрміналёгія

CSS складаецца з набору выразаў (statements). Выразам можа быць альбо at-rule, якое складаецца з ключавога слова (сымбаль @, за каторым ідзе at-rule імя), за каторым ідзе блёк ({...}) ці тэкст, які сканчваецца кропкай з коскай:

Акрамя at-rule выразам можа быць rule-set, каторы складаецца з сэлектара і блёку аб'яўленьняў (сьпісу CSS-атрыбутаў зь іх значэньнямі): Дзе h2 — сэлектар, а ў блёку аб'яўленьняў пазначаюцца атрыбут color са значэньнем #666 і атрыбут font-weight са значэньнем bold.

Камэнтары

Камэнтары ў CSS пачынаюцца з /*, а сканчваюцца */ і могуць ахопліваць некалькі радкоў:

CSS Escape Notation

Прадстаўленьне escape (спэцыяльных) сымбаляў у CSS адрозьніваецца ад спосабу рабіць гэта ў HTML. У CSS гэта робіцца наступным чынам: выкарыстоўваецца сымбаль зваротнага слэшу (\), пасьля якога ідуць ад 1 да 6 шаснаццацірычных лічбаў, якія прадстаўляюць код сымбалю з табліцы ISO 10646 standard, каторая эквівалентная Unicode. Любы сымбаль, які адрозьніваецца ад шаснаццацірычнай лічбы перарве пасьлядоўнасьць.

Калі сымбаль, які павінен ісьці адразу пасьля escape сымбалю, таксама уяўляе зь сябе шаснаццацірычную лічбу, трэба альбо дапоўніць escape код нулямі да агульнай іх колькасьці ў 6 лічбаў, альбо ўставіць прагал пасьля escape сымбалю. Напрыклад, калі трэба пазначыць "»back", можна ўвесьці альбо "\0000bbback", альбо "\bb back". З апошняга прыкладу зразумела, што першы прагал пасьля escape сымбалю выдаляецца (нават калі ў гэтым сымбалі ўжываюцца ўсе 6 дазволеных лічбаў). Каб насамрэч уставіць прагал, трэба пазначыць яго двойчы.

Каскад і спэцыфічнасьць

Каскад (першая літара ў скарачэньні CSS, ад ангельскага cascade) азначае, што вызначэньні стылю пэўнага дакумэнту могуць каскадам імпартавацца з розных крыніцаў — HTML-дакумэнт карыстаецца вызначэньнямі стылю, напрыклад, з файла department.css, апошні ў сваю чаргу імпартуе пэўныя вызначэньні стылю, напрыклад, з файла corporate.css і г.д.

Такім чынам, для аднаго і таго ж элемэнту могуць адпавядаць розныя вызначэньні стылю з розных файлаў, ці нават з аднаго і таго ж файлу. Якім жа чынам вырашаецца які зь іх ужыць? Гэты працэс вырашэньня для кожнага з атрыбутаў складаецца з 4 крокаў:

1. Знайсьці ўсе аб'яўленьні, якія вызначаюць значэньне пэўнага атрыбуту для пэўнага элемэнту.
2. Адсартаваць гэтыя аб'яўленьні ў адпаведнасьці з іх узроўнем важнасьці і паходжаньня.
3. Адсартаваць аб'яўленьні ў межах аднолькавага узроўню важнасьці і паходжаньня па спэцыфічнасьці сэлектараў.
4. Апошнім крокам, калі некалькі аб'яўленьняў маюць аднолькавую важнасьць, паходжаньне і спэцыфічнасьць, адсартаваць іх у пасьлядоўнасьці іх сьледаваньня ў файлах.

Першым крокам агент (звычайна браўзэр) шукае ўва ўсіх даступных крыніцах вызначэньні пэўнага атрыбуту.

Крыніцы стыляў

Крыніцамі могуць быць: стылі самога агенту, аўтарскія стылі, стылі карыстальніка.

Стылем агентаў зьяўляюцца дэфолтныя стылі для элемэнтаў, значэньні іх звычайна (але не заўсёды) супадаюць з дэфолтнымі стылямі для элемэтнаў HTML са спэцыфікацыі (гл. разьдзел "Typical default display properties", напрыклад элемэнтаў a і b).

Агенты могуць таксама даваць магчымасьць іх карыстальнікам ствараць уласныя дэфолтныя стылі, альбо стылі для пэўных пляцовак.

Ну, і напрыканцы аўтарскія стылі — уласна і ёсьць стылі ў агульным разуменьні, каторыя падключаюцца да HTML-дакумэнту праз элемэнты link і style.

Праходзячы па ўсім аб'яўленьням у вышэйазначаных стылях, агенты выбіраюць сярод іх толькі тыя, сэлектары каторых адпавядаюць патрэбнаму элемэнту.

Такім чынам, у канцы першага кроку мы маем усе аб'яўленьні пэўнага атрыбуту, вызначаныя для пэўнага элемэнту.

Важнасьць аб'яўленьняў

Другім крокам вызначаецца ўзровень важнасьці сярод усіх знойдзенных аб'яўленьняў. Акрамя звычайных аб'яўленьняў можна пазначаць больш важныя — праз дадаваньне !important у самы канец аб'яўленьня:

Парадак пры вызначэньні ўзроўню важнасьці наступны (ад меньш да больш важнага):

1. аб'яўленьні ў стылях агенту;
2. звычайныя аб'яўленьні ў стылях карыстальніка;
3. звычайныя аб'яўленьні ў аўтарскіх стылях;
4. важныя аб'яўленьні ў аўтарскіх стылях;
5. важныя аб'яўленьні ў стылях карыстальніка.

Адпаведна, сярод усіх магчымых аб'яўленьняў выбіраецца тое, каторае аказалася найбольш важным.

Спэцыфічнасьць сэлектараў

Трэцім крокам сярод найбольш важных (калі іх больш за адно) выбіраецца тое аб'яўленьне, сэлектар каторага больш спэцыфічны.

Ступень спэцыфічнасьці вызначаецца па пасьлядоўнасьці лічбаў a,b,c,d, дзе a найбольш спэцыфічнае, b менш спэцыфічнае за a, c менш спэцыфічнае за b, а d найменш спэцыфічнае. Такім чынам, калі сярод усіх сэлектараў будзе пэўны са значэньнем у a большым, за астатнія сэлектары, ён будзе самым спэцыфічным. Калі будзе некалькі сэлектараў з найвялікшым значэньнем у a, сярод іх будзе выбраны той, у каторага большае значэньне ў b, і г.д. Гэтыя лічбы адпавядаюць:

1. аб'яўленьне ў style-атрыбуце адпаведнага HTML-элемэнту;
2. колькасьць ID-сэлектараў;
3. колькасьць class-сэлектараў, attribute-сэлектараў і pseudo-клясаў;
4. колькасьць element-сэлектараў і pseudo-элемэнтаў.

Астатнія тыпы сэлектараў маюць нулявую спэцыфічнасьць і проста ігнаруюцца пры падліку. Напрыклад:

Вынік падліку спэцыфічнасьці сэлектараў, прыведзеных вышэй, пры вызначэньні якое ж значэньне атрыбуту color ужыць да чарговага p-элемэнту прыведзена ў табліцы ніжэй:

Парадак сьледаваньня

Калі ж і на трэцім кроку не ўдалося звузіць колькасьць пасуючых аб'яўленьняў да аднаго, тады ўлічваецца іх парадак у зыходных файлах. Той, каторы сустракаецца апошнім, перакрывае папярэднія і насамрэч ужываецца.

Спадчыннасьць

Значэньні пэўных атрыбутаў (напр. font-size ці color), калі не пазначаныя наўпрост, спадкуюцца элемэнтамі ад іх бацькоўскіх элемэнтаў:

У прыкладзе вышэй тэкст і ў элемэнце p, і ў em, і ў a будзе памерам 20px.

Калі ж значэньні атрыбутаў аўтаматычна не спадкуюцца (напр. background-color), іх можна ўспадкаваць уручную, пазначыўшы для пэўнага атрыбуту ў якасьці яго значэньня inherit, калі гэта дазваляецца спэцыфікацыяй, натуральна.

At-rules

At-rules — гэта інструкцыі ці дырэктывы для парсера CSS.

@charset

Выкарыстоўваецца для пазначэньня кадоўкі³ зьнешняга файлу стыляў (css-файлу). Па зразумелым прычынам гэтая дырэктыва, калі прысутнічае, павінна быць самым першым выразам у css-файле.

Агенты карыстаюцца наступным сьпісам пры вызначэньні кадоўкі css-файлу, у парадку зьмяншэньня прыярытэту:

• Атрыбут charset HTTP загалоўку Content-Type, каторы дасылаецца вэб-сэрверам.
• @charset-дырэктыва.
• Атрыбут charset link-элемэнту, каторым HTML-дакумэнт спасылаецца да css-файлу.
• Кадоўка дакумэнту, каторы спасылаецца да гэтага css-файлу.

Прыклад

@import

Зьяўляецца мэханізмам імпартаваньня аднаго файлу стыляў у іншы. Выкарыстоўваецца наступным чынам:

У выпадку пазначэньня адносных спасылак/шляхоў "адпраўной кропкай" лічыцца месцазнаходжаньне файлу стыляў, у якім гэтая дырэктыва зьмешчана. Пасьля спасылкі/шляху могуць пазначацца media-тыпы, для якіх гэтая дырэктыва павінна ўжывацца.

@import-дырэктыва павінна ісьці вышэй за ўсе rule-sets, у адваротным выпадку яна будзе праігнаравана.

@media

@page

@font-face

Дырэктыва дазваляе выкарыстоўваць у сеціўных старонках несыстэмныя шрыфты. Больш падрабязную інфармацыю пра шрыфты ўвогуле, пра іх фарматы, пра стэкі сыстэмных шрыфтоў і магчымасьці ўбудоўваць несыстэмныя глядзіце адпаведны разьдзел у даведніку па распрацоўцы сайтаў.

Улічваючы неаднастайнасьць фарматаў, каторымі карыстаюцца розныя апэрацыйныя сыстэмы, лепш за ўсё карыстацца генэратарам ад Fontsquirrel, каторы ня толькі генэруе правільны і ўсеабдымны код, але і канвэртуе шрыфт з сыходнага фармату ў іншыя распаўсюджаныя, для падтрымкі як мага большай колькасьцю браўзэраў. Разгледзем некаторыя з опцыяў гэтага генэратару:

• Група опцыяў Rendering:
  • Apply Hinting: палепшанае адлюстраваньне шрыфту на Windows-плятформах. Ад гэтай опцыі варта адмаўляцца толькі ў тым выпадку, калі вы дакладна ведаеце, што шрыфт ужо аптымізаваны.
  • Remove Kerning: для «палягчэньня» шрыфту можна абраць гэтую опцыю, каторая выдаліць kerning-даныя з шрыфту. Даволі сьмела можна абіраць гэтую опцыю для асноўнага тэксту, але з вялікай асьцярогай для загалоўкаў, ці ўвогуле лепш адмовіцца ад опцыі для апошняга.
• WebOnly^TM: кажа браўзэрам не ўсталёўваць шрыфт у сыстэму, каб пазьбегнуць несанкцыяваных копій нявольных шрыфтоў.
• Пры дапамозе групы опцыяў Subsetting можна абмяжоўваць шрыфт на ўтрыманьне даных толькі пэўных знакаў:
  • Basic Subsetting: стандартны набор знакаў лацінскіх моваў.
  • Custom Subsetting: дазваляе ўручную вызначаць набор знакаў.
  • No Subsetting: ніяк не абмяжоўвае шрыфт, ён будзе ўтрымліваць усе знакі, якія ў ім вызначаныя.
• Група опцыяў CSS Formats:
  • Fontspring Syntax: найбольш простая і сумяшчальная опцыя.
  • Smiley
  • Mo’ Bulletproofer
• Група опцыяў CSS options:
  • Style Linking: групуе розныя стылі аднаго сямейства, каб пазьней можна было асобна рэгуляваць стыль і таўчшыню шрыфта праз атрыбуты font-style і font-weight. Ужываньне гэтай опцыі магчыма толькі, калі шрыфт складаецца з чатырох стандартных стыляў: regular, italic, bold і bold italic, інакш яе выкарыстоўваць ня варта.
  • Base64 Encode: убудаваньне шрыфту пры дапамозе base64-кадаваньня ў CSS-код. У выніку чаго шрыфт не зьявіцца асобным файлам у кэшы браўзэра.

Прыклад генэруемага коду:

@namespace

Сэлектары

Сэлектары — гэта шаблёны, каторыя вызначаюць да якіх элемэнтаў HTML будуць ужытыя аб'явы, якія зьмяшчаюцца ў блёку пасьля гэтага сэлектара. Гэтыя аб'яўленьні будуць ужытыя да ўсіх элемэнтаў, каторыя адпавядаюць шаблёну, акрамя выпадку, калі яны перавызначаныя ў іншым, больш спэцыфічным сэлектары.

Сэлектар можа складацца з шэрагу простых сэлектараў, якія падзяляюцца паміж сабой камбінатарамі. Псэўда-элемэнты таксама могуць быць зьмешчаныя адразу пасьля апошняга простага сэлектару ў шэрагу.

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Унівэрсальны сэлектар

Сэлектар паводле элемэнтаў

Сэлектар паводле клясаў

Сэлектар паводле ідэнтыфікатараў

Сэлектар паводле атрыбутаў

Псэўда-клясы

Псэўда-элемэнты

Family.scss is a set of 26 smart Sass mixins which will help you to manage the style of :nth-child’ified elements, in an easy and classy way

Групаваньне сэлектараў

Камбінатары сэлектараў

Атрыбуты

Па тыпах

Box-атрыбуты

Атрыбуты разьмяшчэньня

Атрыбуты сьпісаў

Атрыбуты табліцаў

Атрыбуты колераў і фонаў

Тыпаграфічныя атрыбуты

The Future Of CSS Typography

Атрыбуты згенераванага зьместу

Атрыбуты UI

Paged-media атрыбуты

Vendor-спэцыфічныя атрыбуты

Апісаньне атрыбутаў

Значэньні

Даўжыні

Тып значэньняў шмат якіх CSS-атрыбутаў пазначана як <length>. Гэта велічыня, якая складаецца з лічбавага значэньня і адзінкі вымярэньня, паміж якімі не дазваляецца нават прагал. Калі у якасьці лічбавага значэньня выкарыстоўваецца 0, тады адзінку можна апусціць.

Адносныя адзінкі вымярэньня

Тры магчымыя адносныя адзінкі вымярэньня прыведзены ў табліцы ніжэй:

Адзінкі em і ex залежаць ад памеру шрыфту, каторы ўжываецца да элемэнту.

Значэнье 1em адпавядае памеру цяперашняга шрыфту (успадкаванага ад бацькоўскага элемэнту), якім бы чынам ён ня быў вызначаны. Такім чынам, выраз font-size: 1em; ня мае ніякай сілы, яго вынік такі ж, калі б мы ўвогуле яго не прыводзілі. А пазначэньне font-size: 1.2em; зробіць шрыфт адпаведнага элемэнту на 20% большым за памер бацькоўскага шрыфту.

Значэнье 1ex адпавядае вышыні літары х цяперашняга шрыфту, як паказана на малюнку ніжэй. Цікава, што гэтае значэньне вызначана ў тым ліку і для шрыфтоў, якія не ўтрымліваюць літару х.

Варта таксама адзначыць, што даччыныя элемэнты спадкуюць не адносныя значэньні ад бацькоў, а разьлічаныя. У прыкладзе ніжэй значэньнем атрыбуту text-indent элемэнту h1 будзе 36px, а не 45px, калі h1 зьяўляецца даччыным да элемэнту body.

Абсалютныя адзінкі вымярэньня

У наступнай табліцы прыводзяцца абсалютныя адзінкі вымярэньня:

Абсалютныя адзінкі не рэкамэндуецца ўжываць для вызначэньня памеру шрыфтоў.

Хаця піксэль і пазначаны ў спэцыфікацыі як абсалютная адзінка вымярэньня і хаця аб'екты, чые памеры пазначаны ў піксэлях, сапраўды не скаліруюцца ў браўзэры, усё ж яе варта лічыць адноснай адзінкай, таму што звычайна піксэль — гэта мінімальна магчымая для адлюстраваньня кропка манітору і, натуральна, гэта велічыня розная ў розных маніторах. Ужываць піксэлі для манітораў з высокім разрозьненьнем не рэкамэндуецца.

Выявы

Tips & Tricks

Разьмяшчэньне

How to Centre and Layout Pages Without a Wrapper

Візуальна роўнавышынныя калёнкі пры дапамозе градыенту

Resizing

Sizing (Web) components

Бокс

Праблема згортваньня бацькоўскага элемэнту пры даччыным float

Калі ўва ўсіх даччыных элемэнтах боксу адзначаны атрыбут float (left ці right), тады ён будзе згортнутым (collapsed), быццам ён пусты, без даччыных элемэнтаў. Напрыклад, маем наступные вызначэньне стылю:

і наступны HTML-код:

што будзе выглядаць:

Як бачым, у сьпісу няма чорнага тлу, як гэта вызначана ў стылі. Гэта таму, што ён нулявога памеру (не абгортвае даччыныя элемэнты). Вырашыць гэтую праблему можна наступным чынам. Па-першае, бацькоўскаму элемэнту можна дадаць атрыбут overflow: hidden;:

Па-другое, можна скарыстацца тэхнікай clearfix. Для гэтага дададзім да нашага сьпісу клясу clearfix:

і дададзім наступнае вызначэньне стылю для гэтай клясы:

і першы, і другі варыянты прывядуць да наступнага выніку:

Множныя бордэры

Пры неабходнасьці задаць боксу множныя бордэры можна скарыстацца наступнай тэхнікай:

Тады наступны код:

прывядзе да такога выніку:

Колеры

Transitioning

Take Advantage of CSS3 to Achieve Subtle Design (paragraph 1)

Градыенты

Quick Tip: Understanding CSS3 Gradients

Цені

Quick Tip: Getting Clever with CSS3 Shadows

Формы

Float Label Pattern

Прыклад рэалізацыі Float Label Pattern

Тэкст

Вэртыкальны тэкст

Пры патрэбе адлюстраваць слова вэртыкальна (не павернутым на 90 градусаў, але менавіта вэртыкальна), можна прыбегнуць да наступнай тэхніцы. Паміж літарамі слова ставім прагалы:

і ўжываем наступны стыль:

памер шрыфту пры гэтым можна зьмяняць любым чынам — адзінка em у шырыні блёку будзе заўсёды адпавядаць вышыні літары M пры актуальным памеры шрыфта, то бок адна літара гарантавана зьмесьціцца, а загадзя вялікае значэньне ў letter-spacing не дазволіць 2 літарам адлюстравацца на адным радку:

N e t t u t s

Эфэкты пры дапамозе ценю

http://unitinteractive.com/blog/2010/11/03/text-shadow-and-too-much-time

Mastering CSS3: 7 Cool text-shadow Samples You Can’t Miss

Фігуры

Shapes of CSS – розныя геамэтрычныя фігуры пры дапамозе чыстага CSS

Рознае

Fold Effect

Fold effect

W3C

westciv

http://websitetips.com/css

101 CSS Techniques Of All Time - Part1

101 CSS Techniques Of All Time - Part2

CSS Tutorial on tizag.com

CSS positioning

CSS Layouts: The Fixed. The Fluid. The Elastic.

thinkvitamin.com

Content Overlay

Eric Meyer CSS edge

6 Keys to Understanding Modern CSS-based Layouts

Text Rotation with CSS

Multiple Backgrounds and CSS Gradients

CSS Box Shadow

css-tricks.com

rgba: zenelements.com, 24ways.org, css-tricks.com

6 smashingly practical css3 effects

Radioactive Buttons

What does '?' do in a Css link?, What does appending "?v=1" to CSS and Javascript URLs in link and script tags do?

barelyfitz.com

How to make a DIV always float on the screen in top right corner?

Centering Block Element

Wickham's HTML / CSS tutorial

Basic CSS3 Techniques That You Should Know

Pure CSS Image Hover

Caption hover effects

DevDevote

Getting to Work with CSS3 Power Tools

CSS Fundamentals: CSS 3 Transitions

9 Most Common IE Bugs and How to Fix Them

CSS: Innovative Techniques and Practical Solutions

The Bright (Near) Future of CSS

5 Awesome Things That You Can Do with CSS3

http://www.cssdrive.com/

Better Semantics with CSS Combinators & Selectors

How to spice up your menu with CSS3

Fluid CSS3 Slideshow with Parallax Effect

How to Create a Fast Hover Slideshow with CSS3

Direction-Aware Hover Effect with CSS3 and jQuery

How to create animated tooltips with CSS3

How to Create a CSS3-Only Tab Control Using the :target Selector

On :target

Pure CSS icons

Diving Into CSS Regions

Stacked Elements with CSS3 Pseudo-Elements

CSS3 Pictogram Button

Set Text on a Circle

3D flipping circle with CSS3 and jQuery

Learn HTML5, CSS3, Javascript and more...

Bringing pages alive with CSS Transforms & Animations

How to Create a Shuffled Paper Effect in CSS3

http://conor.cc/posts/icon-stacks

Navicon Transformicons

Mobile menu icon animations

Animated CSS-spins

Шаблёны, па-над-CSS канцэпцыі, прылады

Reset CSS

Канцэпцыя грунтуецца на тым падыходзе, што некаторыя з дэфолтных значэньняў CSS-атрыбутаў скідваюцца ў none/0/1 значэньні, каб потым усталёўвацца ўручную/яўна пры неабходнасьці. Гэта робіцца з-за таго, што гэтыя значэньні адрозьніваюцца ў розных браўзерах — для большай сумяшчальнасьці рэалізацыі сярод усіх браўзэраў.

Код "скіду" некаторых дэфолтных значэньняў:

Лічыцца, што выкарыстоўваць саму па сабе гэтую канцэпцыю няма вялікага сэнсу. Замест яе трэба карыстацца альбо ўласнымі надбудовамі над ёй, альбо больш шырокімі і магутнымі канцэпцыямі/фрэймворкамі, напр. Boilerplate, Blueprint.

Boilerplate

Less CSS

Прылада, якая спрашчае стварэньне CSS-стыляў.

Пераменныя

З дапамогаю пераменных можна пазначаць шырока ўжываныя значэньні ў адным месцы, што спрашчае далейшыя глябальныя зьмены гэтых значэньняў — значэньне зьмяняецца ў адным месцы, а не паўсюдна, дзе ўжываецца.

Дамешкі

Дамешкі (mixins) дазваляюць атрыбуты аднаго сэлектару/клясы убудоўваць (embed) ў іншы. Прынцып падобны да пераменных, адно што працуе для цэлых блёкаў і ўтрымлівае магчымасьць перадаваць парамэтры.

Укладзеныя правілы

Укладзеныя правілы (nested rules) дазваляюць запісваць герархічныя правілы ў выглядзе герархіі сэлектараў (укладзеных адзін у другі) замест складанай лінейнай запісі.

Функцыі і апэрацыі

Калі некаторыя значэньні ў вашых стылях зьяўляюцца прапарцыйнымі ў адносінах да іншых, можна карыстацца для гэтага матэматчнымі апэрацыямі, а таксама "зьвяртацца" да JavaScript-функцыяў.

Выкарыстаньне

Стыль пішацца ў LESS-фармаце і запісваецца ў файл з пашырэньнем .less. А затым ёсьць 2 шляхі выкарыстаньня:

1. Пры наяўнасьці ўсталяванага Ruby можна скарыстацца адпаведным gem'ам і скампіляваць less-файл у css-файл.

   Усталёўваем gem праз кансоль:

   Знаходзячыся ў тэчцы з less-файлам запускаем у кансолі наступную каманду, каторая запіша вынік сваёй працы ў css-файл з такім жа імем:

   Пасьля гэта можна выкарыстоўваць файл стыляў <STYLE_NAME>.css звычайным чынам.

2. Client-side выкарыстаньне. Калі вы не можаце скарыстацца папярэднім спосабам і перакананы, што карыстальнікі сайту/аплікацыі не адключаюць у браўзэры працу скрыптоў, тады можна ў якасьці крыніцы стыляў падключаць у HTML наўпрост less-файл (праз элемэнт link, зьвярніце пры гэтым ўвагу на патрэбнае значэньне атрыбуту rel):

   Пасьля гэтага ўключыце спасылку на скрыпт (падключэньне less-стыляў у head павінна абавязкова папярэднічаць падключэньню скрыпта), папярэдне спампаваўшы гэты скрыпт:

Sass

Sass – гэта CSS-пашырэньне, якое дадае магчымасьць вызначаць пераменныя, дамешкі, укладзеныя правілы і іншае. Sass-фармат трансфармуецца ў CSS-фармат пры дапамозе прыладаў каманднага радку альбо пры дапамозе дадаткаў адпаведных вэб-фрэймворкаў.

Sass мае два варыянты сынтаксісу. Найбольш ужываны зь іх вядомы як «SCSS» (ад «Sassy CSS») і зьяўляецца па-над-клясай у адносінах да CSS-сынтаксісу. У прыватнасьці гэта азначае, што любы карэктны CSS зьяўляецца адначасова і карэктным SCSS. Файлы SCSS маюць пашырэньне .scss.

Другі, састарэлы сынтаксіс вядомы як проста «Sass». Ён зьяўляецца YAML-падобным сынтаксісам і мае пашырэньне .sass.

Пераменныя

З дапамогаю пераменных можна пазначаць шырока ўжываныя значэньні ў адным месцы, што спрашчае далейшыя глябальныя зьмены гэтых значэньняў — значэньне зьмяняецца ў адным месцы, а не паўсюдна, дзе ўжываецца.

Дамешкі

Дамешкі (mixins) дазваляюць атрыбуты аднаго сэлектару/клясы убудоўваць (embed) ў іншы. Прынцып падобны да пераменных, адно што працуе для цэлых блёкаў і ўтрымлівае магчымасьць перадаваць парамэтры.

Укладзеныя правілы

Укладзеныя правілы (nested rules) дазваляюць запісваць герархічныя правілы ў выглядзе герархіі сэлектараў (укладзеных адзін у другі) замест складанай лінейнай запісі.

Спадчыннасьць

У Sass таксама магчыма прызначыць, каб адзін сэлектар цалкам успадкоўваў стыль іншага.

Функцыі і апэрацыі

TODO

http://compass-style.org/.. compass init rails . — ініцыялізацыя компаса ў Rails-праекце.

http://rubygems.org/gems/font-stack

Праверка CSS

Сэрвіс, каторыя выдае ня толькі фармальныя памылкі/недакладнасьці: http://csslint.net/

stress testing the CSS: https://github.com/andyedinborough/stress-css

Сьцісканьне CSS

Прылады, каторыя дазваляюць сьціскаць (мінімізаваць) CSS для вытворчага асяродку:

• http://www.cssoptimiser.com/
• http://www.cssdrive.com/index.php/main/csscompressor/
• http://www.cleancss.com/