autotests/html/highlight.css.html

0001 <!DOCTYPE html>
0002 <html><head>
0003 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
0004 <title>highlight.css</title>
0005 <meta name="generator" content="KF5::SyntaxHighlighting - Definition (CSS) - Theme (Breeze Light)"/>
0006 </head><body style="background-color:#ffffff;color:#1f1c1b"><pre>
0007 <span style="color:#898887;">/**</span>
0008 <span style="color:#898887;"> * This is a pseudo CSS file to test Kate's CSS syntax highlighting.</span>
0009 <span style="color:#898887;"> */</span>
0010
0011 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;othersheet.css&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">screen</span>, tv<span style="color:#ca60ca;">;</span>
0012
0013 body {
0014     <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">15</span><span style="color:#0057ae;">pt</span><span style="color:#ca60ca;">;</span>
0015     <span style="font-weight:bold;">font-family</span>: Verdana<span style="color:#ca60ca;">,</span> Helvetica<span style="color:#ca60ca;">,</span> <span style="color:#bf0303;">&quot;Bitstream Vera Sans&quot;</span><span style="color:#ca60ca;">,</span> <span style="color:#b08000;">sans-serif</span><span style="color:#ca60ca;">;</span>
0016     <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span>         <span style="color:#898887;">/* yet another comment */</span>
0017     <span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span>
0018     <span style="color:#bf0303;text-decoration:underline;">// this is no comment, it's just broken!</span>
0019     <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span>
0020     <span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span>
0021     <span style="font-weight:bold;">background-color</span>: <span style="color:#644a9b;">hsl(</span><span style="color:#b08000;">0</span><span style="color:#ca60ca;">,</span> <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">,</span> <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">95</span><span style="color:#0057ae;">%</span> <span style="color:#ca60ca;">-</span> <span style="color:#b08000;">3</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">))</span><span style="color:#ca60ca;">;</span>
0022 }
0023
0024 <span style="color:#644a9b;">.something</span>
0025 {
0026     <span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span>
0027     <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#cdd</span><span style="color:#ca60ca;">;</span>
0028     <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#AAFE04</span><span style="color:#ca60ca;">;</span>
0029     <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;">rgb(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">,</span><span style="color:#b08000;">30</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">,</span><span style="color:#b08000;">43</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0030     <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">maroon</span><span style="color:#ca60ca;">;</span>
0031 }
0032
0033 a<span style="color:#b08000;font-style:italic;">:hover</span> {
0034 }
0035
0036 <span style="color:#006e28;font-weight:bold;">#header</span><span style="color:#ca60ca;">,</span>
0037 p<span style="color:#644a9b;">.intro</span><span style="color:#b08000;font-style:italic;">:first-letter</span><span style="color:#ca60ca;">,</span>
0038 p<span style="color:#b08000;font-style:italic;">:lang(nl)</span><span style="color:#ca60ca;">,</span>
0039 img<span style="color:#0095ff;font-weight:bold;">[align</span><span style="color:#ca60ca;">=</span><span style="color:#bf0303;">&quot;right&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>
0040 {
0041     <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> Qt::<span style="color:#aa5500;">red</span> <span style="color:#0057ae;">!important</span><span style="color:#ca60ca;">;</span>
0042     <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">/* unknown properties render italic */</span>
0043 }
0044
0045 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
0046
0047     <span style="color:#006e28;font-weight:bold;">#header</span>
0048     {
0049         <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span><span style="color:#ca60ca;">;</span>
0050     }
0051
0052 }
0053
0054 <span style="color:#898887;">/*</span>
0055 <span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;">: add more tests, e.g. media</span>
0056 <span style="color:#898887;">*/</span>
0057
0058
0059 <span style="color:#644a9b;">.nice-look</span> {
0060     <span style="font-weight:bold;">font-variant-alternates</span>: styleset<span style="color:#644a9b;">(</span>nice-style<span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0061 }
0062
0063 ul {
0064     <span style="font-weight:bold;">list-style</span>: thumbs<span style="color:#ca60ca;">;</span>
0065 }
0066
0067 <span style="color:#898887;">/* SVG &lt;a&gt; */</span>
0068 svg<span style="color:#ca60ca;">|</span>a {}
0069
0070 <span style="color:#898887;">/* XHTML and SVG &lt;a&gt; */</span>
0071 <span style="color:#ca60ca;">*|</span>a {}
0072
0073 <span style="color:#ca60ca;">*</span>{}
0074 <span style="color:#644a9b;">.class</span>{}
0075 <span style="color:#006e28;font-weight:bold;">#id</span>{}
0076 <span style="color:#b08000;font-style:italic;">:hover</span>{}
0077 <span style="color:#b08000;font-style:italic;">:lang(fr)</span>{}
0078 E{}
0079 E F{}
0080 E<span style="color:#ca60ca;">&gt;</span>F{}
0081 E <span style="color:#ca60ca;">&gt;</span> F{}
0082 E<span style="color:#ca60ca;">~</span>F{}
0083 E <span style="color:#ca60ca;">~</span> F{}
0084 E<span style="color:#b08000;font-style:italic;">:first-child</span>{}
0085 E<span style="color:#b08000;font-style:italic;">:visited</span>{}
0086 E<span style="color:#b08000;font-style:italic;">::after</span>{}
0087 E<span style="color:#b08000;font-style:italic;">:lang(c)</span>{}
0088 E<span style="color:#b08000;font-style:italic;">:lang(fr-ca)</span>{}
0089 E <span style="color:#ca60ca;">+</span> F{}
0090 E<span style="color:#ca60ca;">+</span>F{}
0091 E<span style="color:#0095ff;font-weight:bold;">[foo]</span>{}
0092 E<span style="color:#0095ff;font-weight:bold;">[foo</span><span style="color:#ca60ca;">=</span><span style="color:#bf0303;">warning</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
0093 E<span style="color:#0095ff;font-weight:bold;">[foo</span><span style="color:#ca60ca;">=</span><span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
0094 E<span style="color:#0095ff;font-weight:bold;">[foo</span><span style="color:#ca60ca;">~=</span><span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
0095 E<span style="color:#0095ff;font-weight:bold;">[foo</span><span style="color:#ca60ca;">^=</span><span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
0096 E<span style="color:#0095ff;font-weight:bold;">[foo</span><span style="color:#ca60ca;">$=</span><span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
0097 E<span style="color:#0095ff;font-weight:bold;">[foo</span><span style="color:#ca60ca;">*=</span><span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
0098 E<span style="color:#0095ff;font-weight:bold;">[lang</span><span style="color:#ca60ca;">|=</span><span style="color:#bf0303;">&quot;en&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
0099 DIV<span style="color:#644a9b;">.warning</span>{}
0100 DIV <span style="color:#644a9b;">.warning</span>{}
0101 E<span style="color:#006e28;font-weight:bold;">#myid</span>{}
0102 E <span style="color:#006e28;font-weight:bold;">#myid</span>{}
0103 E<span style="color:#ca60ca;">,</span>E{}
0104 E<span style="color:#ca60ca;">,</span> E{}
0105 E <span style="color:#ca60ca;">,</span>E{}
0106 E <span style="color:#ca60ca;">,</span> E{}
0107
0108 p<span style="color:#b08000;font-style:italic;">:nth-child(2)</span> {
0109     <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">red</span><span style="color:#ca60ca;">;</span>
0110 }
0111
0112 <span style="color:#898887;">/* Elements that are not &lt;div&gt; or &lt;span&gt; elements */</span>
0113 body <span style="color:#b08000;font-style:italic;">:not(</span>div<span style="color:#b08000;font-style:italic;">):not(</span>span<span style="color:#b08000;font-style:italic;">)</span> {
0114     <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span><span style="color:#ca60ca;">;</span>
0115 }
0116
0117 <span style="color:#898887;">/* Elements that are not `.crazy` or `.fancy` */</span>
0118 <span style="color:#898887;">/* Note that this syntax is not well supported yet. */</span>
0119 body <span style="color:#b08000;font-style:italic;">:not(</span><span style="color:#644a9b;">.crazy</span><span style="color:#ca60ca;">,</span> <span style="color:#644a9b;">.fancy</span><span style="color:#b08000;font-style:italic;">)</span> {
0120     <span style="font-weight:bold;">font-family</span>: <span style="color:#b08000;">sans-serif</span><span style="color:#ca60ca;">;</span>
0121 }
0122
0123 <span style="color:#b08000;font-style:italic;">:nth-child(odd)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> }
0124 <span style="color:#b08000;font-style:italic;">:nth-child(even)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> }
0125 <span style="color:#b08000;font-style:italic;">:nth-child(4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> }
0126 <span style="color:#b08000;font-style:italic;">:nth-child(4n)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> }
0127 <span style="color:#b08000;font-style:italic;">:nth-child(3n+4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> }
0128 <span style="color:#b08000;font-style:italic;">:nth-child(-n+3)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> }
0129 <span style="color:#b08000;font-style:italic;">:nth-child(n+8):nth-child(-n+15)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> }
0130
0131 <span style="color:#644a9b;">.first</span> span<span style="color:#b08000;font-style:italic;">:nth-child(2n+1)</span><span style="color:#ca60ca;">,</span>
0132 <span style="color:#644a9b;">.second</span> span<span style="color:#b08000;font-style:italic;">:nth-child(2n+1)</span><span style="color:#ca60ca;">,</span>
0133 <span style="color:#644a9b;">.third</span> span<span style="color:#b08000;font-style:italic;">:nth-of-type(2n+1)</span> {
0134     <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span>
0135     unknown-property: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span>
0136 }
0137
0138 <span style="color:#b08000;font-style:italic;">:root</span>{
0139     <span style="color:#0057ae;">--foo</span>: if<span style="color:#644a9b;">(</span>x &gt; <span style="color:#b08000;">5</span><span style="color:#644a9b;">)</span> this.width = <span style="color:#b08000;">10</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">/* valid custom property, invalid in any normal property */</span>
0140 }
0141
0142 <span style="color:#b08000;font-style:italic;">:root</span><span style="color:#ca60ca;">,</span>
0143 <span style="color:#b08000;font-style:italic;">:root:lang(en)</span> {<span style="color:#0057ae;">--external-link</span>: <span style="color:#bf0303;">&quot;external link&quot;</span><span style="color:#ca60ca;">;</span>}
0144 <span style="color:#b08000;font-style:italic;">:root:lang(de)</span> {<span style="color:#0057ae;">--external-link</span>: <span style="color:#bf0303;">&quot;externer Link&quot;</span><span style="color:#ca60ca;">;</span>}
0145
0146 a<span style="color:#0095ff;font-weight:bold;">[href</span><span style="color:#ca60ca;">^=</span><span style="color:#bf0303;">&quot;http&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span><span style="color:#b08000;font-style:italic;">::after</span> {<span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot; (&quot;</span> <span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--external-link</span><span style="color:#644a9b;">)</span> <span style="color:#bf0303;">&quot;)&quot;</span>}
0147
0148 one   { <span style="color:#0057ae;">--foo</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> }
0149 two   { <span style="color:#0057ae;">--bar</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--foo</span><span style="color:#644a9b;">)</span> <span style="color:#ca60ca;">+</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> }
0150 three { <span style="color:#0057ae;">--foo</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--bar</span><span style="color:#644a9b;">)</span> <span style="color:#ca60ca;">+</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> }
0151 <span style="color:#644a9b;">.foo</span> {
0152     <span style="color:#0057ae;">--gap</span>: <span style="color:#b08000;">20</span><span style="color:#ca60ca;">;</span>
0153     <span style="font-weight:bold;">margin-top</span>: <span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--gap</span><span style="color:#644a9b;">)</span>px<span style="color:#ca60ca;">;</span> <span style="color:#898887;">/*20 px*/</span>
0154     <span style="font-weight:bold;">margin-top</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--gap</span><span style="color:#644a9b;">)</span> <span style="color:#ca60ca;">*</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">/*20px*/</span>
0155 }
0156
0157 foo {
0158     <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#b08000;">-8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">/* invalid */</span>
0159     <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span>%<span style="color:#ca60ca;">-</span> <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">/* invalid */</span>
0160     <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#b08000;">+8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">/* invalid */</span>
0161     <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span>%<span style="color:#ca60ca;">+</span> <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">/* invalid */</span>
0162     <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> -var<span style="color:#644a9b;">(</span>--a<span style="color:#644a9b;">))</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">/* invalid */</span>
0163     <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">*</span><span style="color:#b08000;">-8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0164     <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#ca60ca;">-</span> <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0165     <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#ca60ca;">+</span> <span style="color:#b08000;">-8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0166     <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#ca60ca;">+</span>(<span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span>)<span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0167     <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#ca60ca;">-</span>(<span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--a</span><span style="color:#644a9b;">)</span>)<span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0168 }
0169
0170 sweet-alert input<span style="color:#b08000;font-style:italic;">:focus::-moz-placeholder</span> {
0171     <span style="font-weight:bold;">-webkit-transition</span>: opacity <span style="color:#b08000;">0.3</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">0.03</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">ease</span><span style="color:#ca60ca;">;</span>
0172     <span style="font-weight:bold;">transition</span>: opacity <span style="color:#b08000;">0.3</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">0.03</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">ease</span><span style="color:#ca60ca;">;</span>
0173     <span style="font-weight:bold;">opacity</span>: <span style="color:#b08000;">0.5</span><span style="color:#ca60ca;">;</span>
0174 }
0175
0176
0177 <span style="color:#ff5500;">@font-feature-values</span> Font One {
0178     <span style="color:#ff5500;">@styleset</span> {
0179         nice-style: <span style="color:#b08000;">12</span><span style="color:#ca60ca;">;</span>
0180     }
0181 }
0182
0183 <span style="color:#ff5500;">@font-feature-values</span> Font Two {
0184     <span style="color:#ff5500;">@styleset</span> {
0185         nice-style: <span style="color:#b08000;">4</span><span style="color:#ca60ca;">;</span>
0186     }
0187 }
0188
0189 <span style="color:#ff5500;">@counter-style</span> thumbs {
0190     system: cyclic<span style="color:#ca60ca;">;</span>
0191     symbols: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\1F44D</span><span style="color:#bf0303;">&quot;</span><span style="color:#ca60ca;">;</span>
0192     suffix: <span style="color:#bf0303;">&quot; &quot;</span><span style="color:#ca60ca;">;</span>
0193 }
0194
0195 <span style="color:#ff5500;">@font-face</span> {
0196     <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Open Sans&quot;</span><span style="color:#ca60ca;">;</span>
0197     <span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/fonts/OpenSans-Regular-webfont.woff2&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff2&quot;</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">,</span>
0198     <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/fonts/OpenSans-Regular-webfont.woff&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff&quot;</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0199 }
0200
0201 <span style="color:#ff5500;">@page</span> {
0202     <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">cm</span><span style="color:#ca60ca;">;</span>
0203 }
0204
0205 <span style="color:#ff5500;">@page</span> <span style="color:#b08000;font-style:italic;">:first</span> {
0206     <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">cm</span><span style="color:#ca60ca;">;</span>
0207     <span style="color:#898887;">/* comments */</span>
0208     <span style="font-weight:bold;">marks</span>: <span style="color:#b08000;">crop</span> <span style="color:#b08000;">cross</span><span style="color:#ca60ca;">;</span>
0209 }
0210
0211 <span style="color:#ff5500;">@page</span> <span style="color:#b08000;font-style:italic;">:unknown</span> {
0212     <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">cm</span><span style="color:#ca60ca;">;</span>
0213 }
0214
0215 <span style="color:#ff5500;">@font-face</span> {
0216     unknown: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span>
0217     <span style="color:#898887;">/* comments */</span>
0218     <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Bitstream Vera Serif Bold&quot;</span><span style="color:#ca60ca;">;</span>
0219     <span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff&quot;</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0220 }
0221
0222 <span style="color:#ff5500;">@viewport</span> {
0223     <span style="font-weight:bold;">zoom</span>: <span style="color:#b08000;">0.75</span><span style="color:#ca60ca;">;</span>
0224     <span style="color:#898887;">/* comments */</span>
0225     <span style="font-weight:bold;">min-zoom</span>: <span style="color:#b08000;">0.5</span><span style="color:#ca60ca;">;</span>
0226     <span style="font-weight:bold;">max-zoom</span>: <span style="color:#b08000;">0.9</span><span style="color:#ca60ca;">;</span>
0227 }
0228
0229 <span style="color:#ff5500;">@viewport</span> {
0230     <span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span><span style="color:#ca60ca;">;</span>
0231     <span style="color:#898887;">/* comments */</span>
0232     <span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span><span style="color:#ca60ca;">;</span>
0233 }
0234
0235 <span style="color:#ff5500;">@document</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;https://www.example.com/&quot;</span><span style="color:#644a9b;">)</span> {
0236     h1 {
0237         <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span><span style="color:#ca60ca;">;</span>
0238     }
0239 }
0240
0241 <span style="color:#ff5500;">@supports</span> (<span style="font-weight:bold;">display</span>: <span style="color:#b08000;">grid</span>) {
0242     div {
0243         <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">grid</span><span style="color:#ca60ca;">;</span>
0244     }
0245 }
0246
0247 <span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span>) {
0248     <span style="color:#644a9b;">.sidebar</span> {
0249         <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span><span style="color:#ca60ca;">;</span>
0250     }
0251 }
0252
0253 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;fineprint.css&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">print</span><span style="color:#ca60ca;">;</span>
0254 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">fineprint.css</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">print</span><span style="color:#ca60ca;">;</span>
0255 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'bluish.css'</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">speech</span><span style="color:#ca60ca;">;</span>
0256 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">'custom.css'</span><span style="color:#ca60ca;">;</span>
0257 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;chrome://communicator/skin/&quot;</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0258 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;common.css&quot;</span> <span style="color:#b08000;">screen</span><span style="color:#ca60ca;">;</span>
0259 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'landscape.css'</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>:<span style="color:#b08000;">landscape</span>)<span style="color:#ca60ca;">;</span>
0260
0261 <span style="color:#ff5500;">@namespace</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">http://www.w3.org/1999/xhtml</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0262 <span style="color:#ff5500;">@namespace</span> svg <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">http://www.w3.org/2000/svg</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0263
0264 <span style="color:#ff5500;">@keyframes</span> important1 {
0265     <span style="color:#b08000;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> }
0266     <span style="color:#b08000;">50%</span>  { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!important</span><span style="color:#ca60ca;">;</span> } <span style="color:#898887;">/* ignored */</span>
0267     <span style="color:#b08000;">to</span>   { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> }
0268 }
0269
0270 <span style="color:#ff5500;">@keyframes</span> important2 {
0271     <span style="color:#b08000;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span>
0272         <span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> }
0273     <span style="color:#b08000;">to</span>   { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!important</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">/* ignored */</span>
0274         <span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> }
0275 }
0276
0277 <span style="color:#ff5500;">@keyframes</span> slidein {
0278     <span style="color:#b08000;">from</span> {
0279         <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span>
0280         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span>
0281     }
0282
0283     <span style="color:#b08000;">to</span> {
0284         <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span>
0285         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span>
0286     }
0287 }
0288
0289 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
0290     a<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span> }
0291     <span style="color:#898887;">/* comments */</span>
0292     a<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span> }
0293 }
0294
0295 <span style="color:#898887;">/*</span>
0296 <span style="color:#898887;"> * CSS Syntax Highlight Sample File (Standard)</span>
0297 <span style="color:#898887;"> *</span>
0298 <span style="color:#898887;"> * This file contains most CSS syntax, CSS3 properties, @media, @font-face and</span>
0299 <span style="color:#898887;"> * @keyframes annotations.</span>
0300 <span style="color:#898887;"> *</span>
0301 <span style="color:#898887;"> * @author  Guo Yunhe guoyunhebrave@gmail.com</span>
0302 <span style="color:#898887;"> * @date    2016-09-16</span>
0303 <span style="color:#898887;"> */</span>
0304
0305 <span style="color:#898887;">/*</span>
0306 <span style="color:#898887;"> * Block comment</span>
0307 <span style="color:#898887;"> *</span>
0308 <span style="color:#898887;"> * Alert keywords:</span>
0309 <span style="color:#898887;"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">BUG</span><span style="color:#898887;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">FIXME</span>
0310 <span style="color:#898887;"> */</span>
0311
0312 <span style="color:#ff5500;">@charset</span> <span style="color:#bf0303;">&quot;UTF-8&quot;</span><span style="color:#ca60ca;">;</span>
0313
0314 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;components/button.css&quot;</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0315
0316
0317 <span style="color:#898887;">/* Properties */</span>
0318
0319 html<span style="color:#ca60ca;">,</span> body {
0320     <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Droid Sans&quot;</span><span style="color:#ca60ca;">,</span> Arial<span style="color:#ca60ca;">,</span> <span style="color:#b08000;">sans-serif</span><span style="color:#ca60ca;">;</span>
0321     <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">11</span><span style="color:#0057ae;">pt</span><span style="color:#ca60ca;">;</span>
0322     <span style="font-weight:bold;">line-height</span>: <span style="color:#b08000;">1.5</span><span style="color:#0057ae;">em</span><span style="color:#ca60ca;">;</span>
0323     <span style="font-weight:bold;">max-width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span> <span style="color:#ca60ca;">-</span> <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0324     <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">#fff000</span><span style="color:#ca60ca;">;</span>
0325     <span style="font-weight:bold;">text-shadow</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">0</span><span style="color:#ca60ca;">,</span> <span style="color:#b08000;">0</span><span style="color:#ca60ca;">,</span> <span style="color:#b08000;">0</span><span style="color:#ca60ca;">,</span> <span style="color:#b08000;">0.3</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0326     <span style="font-weight:bold;">box-sizing</span>: <span style="color:#b08000;">border-box</span><span style="color:#ca60ca;">;</span>
0327 }
0328
0329
0330 <span style="color:#898887;">/* Selectors */</span>
0331
0332 blockquote {
0333     <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span><span style="color:#ca60ca;">;</span>
0334 }
0335
0336 header <span style="color:#006e28;font-weight:bold;">#logo</span> {
0337     <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span>
0338 }
0339
0340 div<span style="color:#006e28;font-weight:bold;">#footer</span> <span style="color:#644a9b;">.link</span> {
0341     <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span><span style="color:#ca60ca;">;</span>
0342 }
0343
0344 sidebar <span style="color:#006e28;font-weight:bold;">#subscribe</span> <span style="color:#644a9b;">.subscribe_form</span> input<span style="color:#0095ff;font-weight:bold;">[type</span><span style="color:#ca60ca;">=</span><span style="color:#bf0303;">&quot;text&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
0345     <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span>
0346 }
0347
0348 sidebar <span style="color:#006e28;font-weight:bold;">#subscribe</span> <span style="color:#644a9b;">.subscribe_form</span><span style="color:#b08000;font-style:italic;">:nth-child(2n + 1):hover</span> input<span style="color:#0095ff;font-weight:bold;">[class</span><span style="color:#ca60ca;">*=</span><span style="color:#bf0303;">&quot;small-&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
0349     <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span><span style="color:#ca60ca;">;</span>
0350 }
0351
0352
0353 <span style="color:#898887;">/* Media Queries */</span>
0354
0355 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
0356     <span style="color:#644a9b;">.container</span> {
0357         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span>
0358     }
0359 }
0360
0361 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768</span><span style="color:#0057ae;">px</span>) {
0362     <span style="color:#644a9b;">.container</span> {
0363         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span>
0364     }
0365 }
0366
0367 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768</span><span style="color:#0057ae;">px</span>) <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">960</span><span style="color:#0057ae;">px</span>) {
0368     <span style="color:#644a9b;">.container</span> {
0369         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">720</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span>
0370     }
0371 }
0372
0373
0374 <span style="color:#898887;">/* Fontface */</span>
0375
0376 <span style="color:#ff5500;">@font-face</span> {
0377     <span style="font-weight:bold;">font-family</span>: MyHelvetica<span style="color:#ca60ca;">;</span>
0378     <span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">local(</span><span style="color:#bf0303;">&quot;Helvetica Neue Bold&quot;</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">,</span>
0379         <span style="color:#644a9b;">local(</span><span style="color:#bf0303;">&quot;HelveticaNeue-Bold&quot;</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">,</span>
0380         <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">MgOpenModernaBold.ttf</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0381     <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span><span style="color:#ca60ca;">;</span>
0382 }
0383
0384 <span style="color:#898887;">/* Animation (Keyframes) */</span>
0385
0386 <span style="color:#ff5500;">@keyframes</span> slidein {
0387     <span style="color:#b08000;">from</span> {
0388         <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span>
0389         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span>
0390     }
0391
0392     <span style="color:#b08000;">to</span> {
0393         <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span>
0394         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span>
0395     }
0396 }
0397
0398
0399 <span style="color:#898887;">/* Region markers */</span>
0400
0401 <span style="color:#0057ae;background-color:#e0e9f8;">/*BEGIN Comment */</span>
0402
0403
0404
0405 <span style="color:#0057ae;background-color:#e0e9f8;">/*END Comment */</span>
0406
0407 <span style="color:#898887;">/*</span>
0408 <span style="color:#898887;"> * CSS Syntax Highlight Sample File (Complex)</span>
0409 <span style="color:#898887;"> *</span>
0410 <span style="color:#898887;"> * This file contains complex CSS syntax that can test unexpected situations.</span>
0411 <span style="color:#898887;"> *</span>
0412 <span style="color:#898887;"> * @author  Guo Yunhe guoyunhebrave@gmail.com</span>
0413 <span style="color:#898887;"> * @date    2016-09-16</span>
0414 <span style="color:#898887;"> */</span>
0415
0416
0417 <span style="color:#898887;">/* Comments with special content */</span>
0418
0419 <span style="color:#898887;">/*</span>
0420 <span style="color:#898887;"> * .class-selector #id &quot;string&quot; 'comment' // comment {} [] ()  /* comment</span>
0421 <span style="color:#898887;"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">BUG</span><span style="color:#898887;"> DEBUG</span>
0422 <span style="color:#898887;"> * body {</span>
0423 <span style="color:#898887;"> *    margin: 0 !important;</span>
0424 <span style="color:#898887;"> * }</span>
0425 <span style="color:#898887;"> */</span>
0426
0427 <span style="color:#898887;">/* Comments in special positions */</span>
0428
0429 header<span style="color:#898887;">/* comment here */</span><span style="color:#644a9b;">.active</span> <span style="color:#898887;">/* comment here */</span> {
0430     <span style="color:#898887;">/* comment here */</span> <span style="font-weight:bold;">color</span> : <span style="color:#898887;">/* comment here */</span> <span style="color:#aa5500;">blue</span><span style="color:#898887;">/* comment here */</span><span style="color:#ca60ca;">;</span>
0431     <span style="font-weight:bold;">font-family</span>: Arial <span style="color:#898887;">/* comment here */</span><span style="color:#ca60ca;">,</span>
0432         <span style="color:#bf0303;">&quot;Droid Sans&quot;</span><span style="color:#ca60ca;">,</span> <span style="color:#898887;">/* comment here */</span>
0433         <span style="color:#b08000;">sans-serif</span><span style="color:#898887;">/* comment here */</span><span style="color:#ca60ca;">;</span>
0434 }
0435
0436 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="color:#898887;">/* comment here */</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span> <span style="color:#898887;">/* comment here */</span>) <span style="color:#898887;">/* comment here */</span> {<span style="color:#898887;">/* comment here */</span>}
0437
0438
0439 <span style="color:#898887;">/* Strings with special content */</span>
0440
0441 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;{} $variable /* comment */&quot;</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span>
0442
0443
0444 <span style="color:#898887;">/* Without extra breaklines and spaces */</span>
0445
0446 pre<span style="color:#644a9b;">.primary</span><span style="color:#b08000;font-style:italic;">:hover</span><span style="color:#644a9b;">.large</span><span style="color:#b08000;font-style:italic;">:nth-child(2n-1)</span>{<span style="font-weight:bold;">font-size</span>:<span style="color:#b08000;">17</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span><span style="font-weight:bold;">font-family</span>:<span style="color:#bf0303;">&quot;Noto Sans&quot;</span><span style="color:#ca60ca;">;</span><span style="font-weight:bold;">-webkit-box-shadow</span>:<span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">0</span><span style="color:#ca60ca;">,</span><span style="color:#b08000;">0</span><span style="color:#ca60ca;">,</span><span style="color:#b08000;">0</span><span style="color:#ca60ca;">,</span><span style="color:#b08000;">0.3</span><span style="color:#644a9b;">)</span>}
0447
0448
0449 <span style="color:#898887;">/* With unnecessary breaklines and spaces */</span>
0450
0451 blockquote <span style="color:#644a9b;">.ref</span>
0452     {
0453              <span style="font-weight:bold;">flex</span> : <span style="color:#b08000;">0</span> <span style="color:#b08000;">1</span> <span style="color:#b08000;">30</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span>
0454         <span style="font-weight:bold;">flex-wrap</span> : wrap<span style="color:#ca60ca;">;</span>
0455     }
0456
0457 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>) {
0458   <span style="color:#644a9b;">.sidebar</span> {
0459     <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">500</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> } }
0460
0461
0462 <span style="color:#898887;">/* Special selectors: HTML5 allows user defined tags */</span>
0463
0464 header {
0465     flex {
0466         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span>
0467     }
0468 }
0469 </pre></body></html>