449 lines
50 KiB
HTML
449 lines
50 KiB
HTML
<!DOCTYPE html>
|
|
<html><head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
<title>highlight.css</title>
|
|
<meta name="generator" content="KF5::SyntaxHighlighting - Definition (CSS) - Theme (Breeze Dark)"/>
|
|
</head><body style="background-color:#232629;color:#cfcfc2"><pre>
|
|
<span style="color:#7a7c7d">/**</span>
|
|
<span style="color:#7a7c7d"> * This is a pseudo CSS file to test Kate's CSS syntax highlighting.</span>
|
|
<span style="color:#7a7c7d"> */</span>
|
|
|
|
<span style="color:#7a7c7d">/* Properties */</span>
|
|
|
|
body {
|
|
<span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">15</span><span style="color:#2980b9">pt</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> Verdana<span style="color:#3f8058">,</span> Helvetica<span style="color:#3f8058">,</span> <span style="color:#f44f4f">"Bitstream Vera Sans"</span><span style="color:#3f8058">,</span> <span style="color:#f67400">sans-serif</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* yet another comment */</span>
|
|
<span style="font-weight:bold">margin-bottom</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#da4453;text-decoration:underline">// this is no comment, it's just broken!</span>
|
|
<span style="font-weight:bold">background-color</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">hsl(</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0</span><span style="color:#2980b9">%</span><span style="color:#3f8058">,</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">95</span><span style="color:#2980b9">%</span> <span style="color:#3f8058">-</span> <span style="color:#f67400">3</span><span style="color:#2980b9">%</span><span style="color:#8e44ad">))</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"Droid Sans"</span><span style="color:#3f8058">,</span> Arial<span style="color:#3f8058">,</span> <span style="color:#f67400">sans-serif</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">11</span><span style="color:#2980b9">pt</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">line-height</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1.5</span><span style="color:#2980b9">em</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">background</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#fff000</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">text-shadow</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span> <span style="color:#f67400">0</span> <span style="color:#f67400">2</span><span style="color:#2980b9">px</span> <span style="color:#8e44ad">rgba(</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0.3</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">box-sizing</span><span style="color:#3daee9">:</span> <span style="color:#f67400">border-box</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">font-variant-alternates</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">styleset(</span>nice-style<span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#7a7c7d">/* Selectors */</span>
|
|
|
|
body<span style="color:#3f8058">,</span> blockquote {
|
|
<span style="font-weight:bold">margin</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
header <span style="color:#27ae60;font-weight:bold">#logo</span> {
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
div<span style="color:#27ae60;font-weight:bold">#footer</span> <span style="color:#8e44ad">.link</span> {
|
|
<span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">blue</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#8e44ad">.something</span>
|
|
{
|
|
<span style="font-weight:bold">margin-right</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#cdd</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#AAFE04</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">rgb(</span><span style="color:#f67400">10</span><span style="color:#2980b9">%</span><span style="color:#3f8058">,</span><span style="color:#f67400">30</span><span style="color:#2980b9">%</span><span style="color:#3f8058">,</span><span style="color:#f67400">43</span><span style="color:#2980b9">%</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">background</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">maroon</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
sidebar <span style="color:#27ae60;font-weight:bold">#subscribe</span> <span style="color:#8e44ad">.subscribe_form</span> input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">type</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"text"</span><span style="color:#0099ff;font-weight:bold">]</span> {
|
|
<span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">20</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
sidebar <span style="color:#27ae60;font-weight:bold">#subscribe</span> <span style="color:#8e44ad">.subscribe_form</span><span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">2</span><span style="color:#2980b9">n</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">1</span><span style="color:#c45b00;font-style:italic">):hover</span> input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">class</span><span style="color:#3f8058">*=</span><span style="color:#f44f4f">"small-"</span><span style="color:#0099ff;font-weight:bold">]</span> {
|
|
<span style="font-weight:bold">font-weight</span><span style="color:#3daee9">:</span> <span style="color:#f67400">bold</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">value</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">text</span><span style="color:#0099ff;font-weight:bold">]</span>
|
|
input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">value</span><span style="color:#3f8058">=</span> <span style="color:#f44f4f">text </span><span style="color:#0099ff;font-weight:bold">]</span>
|
|
input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">value</span><span style="color:#3f8058">=</span> <span style="color:#f44f4f">text </span><span style="color:#3f8058">i</span><span style="color:#0099ff;font-weight:bold">]</span>
|
|
input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">value</span><span style="color:#3f8058">=</span> <span style="color:#f44f4f">"text" </span><span style="color:#3f8058">i</span><span style="color:#0099ff;font-weight:bold">]</span>
|
|
input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">value</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">i</span><span style="color:#0099ff;font-weight:bold">]</span>
|
|
input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">value</span><span style="color:#3f8058">=</span> <span style="color:#f44f4f">i</span><span style="color:#0099ff;font-weight:bold">]</span> {
|
|
<span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">20</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#27ae60;font-weight:bold">#header</span><span style="color:#3f8058">,</span>
|
|
a<span style="color:#c45b00;font-style:italic">:hover</span><span style="color:#3f8058">,</span>
|
|
p<span style="color:#8e44ad">.intro</span><span style="color:#c45b00;font-style:italic">:first-letter</span><span style="color:#3f8058">,</span>
|
|
p<span style="color:#c45b00;font-style:italic">:lang(</span><span style="color:#f44f4f">nl</span><span style="color:#c45b00;font-style:italic">)</span><span style="color:#3f8058">,</span>
|
|
img<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">align</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"right"</span><span style="color:#0099ff;font-weight:bold">]</span>
|
|
{
|
|
<span style="font-weight:bold">border</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1</span><span style="color:#2980b9">px</span> <span style="color:#f67400">solid</span> Qt::<span style="color:#27aeae;font-weight:bold">red</span> <span style="color:#2980b9">!important</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold;font-style:italic">-moz-border-radius</span><span style="color:#3daee9">:</span> <span style="color:#f67400">15</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* unknown properties render italic */</span>
|
|
}
|
|
|
|
<span style="color:#8e44ad">.nice-look</span> {
|
|
}
|
|
|
|
ul {
|
|
<span style="font-weight:bold">list-style</span><span style="color:#3daee9">:</span> thumbs<span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#7a7c7d">/* SVG <a> */</span>
|
|
svg<span style="color:#3f8058">|</span>a {}
|
|
|
|
<span style="color:#7a7c7d">/* XHTML and SVG <a> */</span>
|
|
<span style="color:#3f8058">*|</span>a {}
|
|
|
|
<span style="color:#3f8058">*</span>{}
|
|
<span style="color:#8e44ad">.class</span>{}
|
|
<span style="color:#27ae60;font-weight:bold">#id</span>{}
|
|
<span style="color:#c45b00;font-style:italic">:hover</span>{}
|
|
<span style="color:#c45b00;font-style:italic">:lang(</span><span style="color:#f44f4f">fr</span><span style="color:#c45b00;font-style:italic">)</span>{}
|
|
E{}
|
|
E F{}
|
|
E<span style="color:#3f8058">></span>F{}
|
|
E <span style="color:#3f8058">></span> F{}
|
|
E<span style="color:#3f8058">~</span>F{}
|
|
E <span style="color:#3f8058">~</span> F{}
|
|
E<span style="color:#c45b00;font-style:italic">:first-child</span>{}
|
|
E<span style="color:#c45b00;font-style:italic">:visited</span>{}
|
|
E<span style="color:#c45b00;font-style:italic">::after</span>{}
|
|
E<span style="color:#c45b00;font-style:italic">:lang(</span><span style="color:#f44f4f">c</span><span style="color:#c45b00;font-style:italic">)</span>{}
|
|
E<span style="color:#c45b00;font-style:italic">:lang(</span><span style="color:#f44f4f">fr-ca</span><span style="color:#c45b00;font-style:italic">)</span>{}
|
|
E <span style="color:#3f8058">+</span> F{}
|
|
E<span style="color:#3f8058">+</span>F{}
|
|
E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#0099ff;font-weight:bold">]</span>{}
|
|
E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">warning</span><span style="color:#0099ff;font-weight:bold">]</span>{}
|
|
E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"warning"</span><span style="color:#0099ff;font-weight:bold">]</span>{}
|
|
E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#3f8058">~=</span><span style="color:#f44f4f">"warning"</span><span style="color:#0099ff;font-weight:bold">]</span>{}
|
|
E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#3f8058">^=</span><span style="color:#f44f4f">"warning"</span><span style="color:#0099ff;font-weight:bold">]</span>{}
|
|
E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#3f8058">$=</span><span style="color:#f44f4f">"warning"</span><span style="color:#0099ff;font-weight:bold">]</span>{}
|
|
E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#3f8058">*=</span><span style="color:#f44f4f">"warning"</span><span style="color:#0099ff;font-weight:bold">]</span>{}
|
|
E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">lang</span><span style="color:#3f8058">|=</span><span style="color:#f44f4f">"en"</span><span style="color:#0099ff;font-weight:bold">]</span>{}
|
|
DIV<span style="color:#8e44ad">.warning</span>{}
|
|
DIV <span style="color:#8e44ad">.warning</span>{}
|
|
E<span style="color:#27ae60;font-weight:bold">#myid</span>{}
|
|
E <span style="color:#27ae60;font-weight:bold">#myid</span>{}
|
|
E<span style="color:#3f8058">,</span>E{}
|
|
E<span style="color:#3f8058">,</span> E{}
|
|
E <span style="color:#3f8058">,</span>E{}
|
|
E <span style="color:#3f8058">,</span> E{}
|
|
|
|
p<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">2</span><span style="color:#c45b00;font-style:italic">)</span> {
|
|
<span style="font-weight:bold">background</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#7a7c7d">/* Elements that are not <div> or <span> elements */</span>
|
|
body <span style="color:#c45b00;font-style:italic">:not(</span>div<span style="color:#c45b00;font-style:italic">):not(</span>span<span style="color:#c45b00;font-style:italic">)</span> {
|
|
<span style="font-weight:bold">font-weight</span><span style="color:#3daee9">:</span> <span style="color:#f67400">bold</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#7a7c7d">/* Elements that are not `.crazy` or `.fancy` */</span>
|
|
<span style="color:#7a7c7d">/* Note that this syntax is not well supported yet. */</span>
|
|
body <span style="color:#c45b00;font-style:italic">:not(</span><span style="color:#8e44ad">.crazy</span><span style="color:#3f8058">,</span> <span style="color:#8e44ad">.fancy</span><span style="color:#c45b00;font-style:italic">)</span> {
|
|
<span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> <span style="color:#f67400">sans-serif</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">odd</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> }
|
|
<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">even</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> }
|
|
<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">4</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> }
|
|
<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">4</span><span style="color:#2980b9">n</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> }
|
|
<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">3</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">4</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> }
|
|
<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#3f8058">-</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">3</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> }
|
|
<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">8</span><span style="color:#c45b00;font-style:italic">):nth-child(</span><span style="color:#3f8058">-</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">15</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> }
|
|
|
|
<span style="color:#8e44ad">.first</span> span<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">2</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">1</span><span style="color:#c45b00;font-style:italic">)</span><span style="color:#3f8058">,</span>
|
|
<span style="color:#8e44ad">.second</span> span<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">2</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">1</span><span style="color:#c45b00;font-style:italic">)</span><span style="color:#3f8058">,</span>
|
|
<span style="color:#8e44ad">.third</span> span<span style="color:#c45b00;font-style:italic">:nth-of-type(</span><span style="color:#f67400">2</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">1</span><span style="color:#c45b00;font-style:italic">)</span> {
|
|
<span style="font-weight:bold">background-color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span>
|
|
unknown-property<span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#c45b00;font-style:italic">:root</span>{
|
|
<span style="color:#27aeae">--foo</span><span style="color:#3daee9">:</span> if<span style="color:#8e44ad">(</span>x > <span style="color:#f67400">5</span><span style="color:#8e44ad">)</span> this.width = <span style="color:#f67400">10</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* valid custom property, invalid in any normal property */</span>
|
|
}
|
|
|
|
<span style="color:#c45b00;font-style:italic">:root</span><span style="color:#3f8058">,</span>
|
|
<span style="color:#c45b00;font-style:italic">:root:lang(</span><span style="color:#f44f4f">en</span><span style="color:#c45b00;font-style:italic">)</span> {<span style="color:#27aeae">--external-link</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"external link"</span><span style="color:#3f8058">;</span>}
|
|
<span style="color:#c45b00;font-style:italic">:root:lang(</span><span style="color:#f44f4f">de</span><span style="color:#c45b00;font-style:italic">)</span> {<span style="color:#27aeae">--external-link</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"externer Link"</span><span style="color:#3f8058">;</span>}
|
|
|
|
a<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">href</span><span style="color:#3f8058">^=</span><span style="color:#f44f4f">"http"</span><span style="color:#0099ff;font-weight:bold">]</span><span style="color:#c45b00;font-style:italic">::after</span> {<span style="font-weight:bold">content</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">" ("</span> <span style="color:#8e44ad">var(</span><span style="color:#27aeae">--external-link</span><span style="color:#8e44ad">)</span> <span style="color:#f44f4f">")"</span>}
|
|
|
|
one { <span style="color:#27aeae">--foo</span><span style="color:#3daee9">:</span> <span style="color:#f67400">10</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> }
|
|
two { <span style="color:#27aeae">--bar</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(var(</span><span style="color:#27aeae">--foo</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">10</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> }
|
|
three { <span style="color:#27aeae">--foo</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(var(</span><span style="color:#27aeae">--bar</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">10</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> }
|
|
<span style="color:#8e44ad">.foo</span> {
|
|
<span style="color:#27aeae">--gap</span><span style="color:#3daee9">:</span> <span style="color:#f67400">20</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">var(</span><span style="color:#27aeae">--gap</span><span style="color:#8e44ad">)</span>px<span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/*20 px*/</span>
|
|
<span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(var(</span><span style="color:#27aeae">--gap</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">*</span> <span style="color:#f67400">1</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/*20px*/</span>
|
|
}
|
|
|
|
foo {
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span> <span style="color:#f67400">-8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* invalid */</span>
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#3f8058">%-</span> <span style="color:#f67400">8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* invalid */</span>
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span> <span style="color:#f67400">+8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* invalid */</span>
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#3f8058">%+</span> <span style="color:#f67400">8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* invalid */</span>
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">2</span><span style="color:#2980b9">px</span> -var<span style="color:#8e44ad">(</span>--a<span style="color:#8e44ad">))</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* invalid */</span>
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span><span style="color:#3f8058">*</span><span style="color:#f67400">-8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span> <span style="color:#3f8058">-</span> <span style="color:#f67400">8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">-8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span> <span style="color:#3f8058">+</span>(<span style="color:#f67400">8</span><span style="color:#2980b9">px</span>)<span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">2</span><span style="color:#2980b9">px</span> <span style="color:#3f8058">-</span>(<span style="color:#8e44ad">var(</span><span style="color:#27aeae">--a</span><span style="color:#8e44ad">)</span>)<span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
sweet-alert input<span style="color:#c45b00;font-style:italic">:focus::-moz-placeholder</span> {
|
|
<span style="font-weight:bold;font-style:italic">-webkit-transition</span><span style="color:#3daee9">:</span> opacity <span style="color:#f67400">0.3</span><span style="color:#2980b9">s</span> <span style="color:#f67400">0.03</span><span style="color:#2980b9">s</span> <span style="color:#f67400">ease</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">transition</span><span style="color:#3daee9">:</span> opacity <span style="color:#f67400">0.3</span><span style="color:#2980b9">s</span> <span style="color:#f67400">0.03</span><span style="color:#2980b9">s</span> <span style="color:#f67400">ease</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">opacity</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0.5</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
|
|
<span style="color:#27ae60">@font-feature-values</span> Font One {
|
|
<span style="color:#27ae60">@styleset</span> {
|
|
nice-style<span style="color:#c45b00;font-style:italic">:</span> 12;
|
|
}
|
|
}
|
|
|
|
<span style="color:#27ae60">@font-feature-values</span> Font Two {
|
|
<span style="color:#27ae60">@styleset</span> {
|
|
nice-style<span style="color:#c45b00;font-style:italic">:</span> 4;
|
|
}
|
|
}
|
|
|
|
<span style="color:#27ae60">@font-palette-values</span> --identifier {
|
|
<span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> Bixa<span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#27ae60">@counter-style</span> thumbs {
|
|
<span style="font-weight:bold">system</span><span style="color:#3daee9">:</span> <span style="color:#f67400">cyclic</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">symbols</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"</span><span style="color:#3daee9">\1F44D</span><span style="color:#f44f4f">"</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">suffix</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">" "</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#27ae60">@font-face</span> {
|
|
<span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"Open Sans"</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#7a7c7d">/* comments */</span>
|
|
unknown<span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">src</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"/fonts/OpenSans-Regular-webfont.woff2"</span><span style="color:#8e44ad">)</span> <span style="color:#8e44ad">format(</span><span style="color:#f44f4f">"woff2"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">,</span>
|
|
<span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"/fonts/OpenSans-Regular-webfont.woff"</span><span style="color:#8e44ad">)</span> <span style="color:#8e44ad">format(</span><span style="color:#f44f4f">"woff"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#27ae60">@page</span> {
|
|
<span style="font-weight:bold">margin</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1</span><span style="color:#2980b9">cm</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#27ae60">@page</span> <span style="color:#c45b00;font-style:italic">:first</span> {
|
|
<span style="font-weight:bold">margin</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">cm</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#7a7c7d">/* comments */</span>
|
|
marks<span style="color:#3daee9">:</span> crop cross<span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#27ae60">@page</span> <span style="color:#c45b00;font-style:italic">:</span>unknown {
|
|
<span style="font-weight:bold">margin</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">cm</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#27ae60">@document</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"https://www.example.com/"</span><span style="color:#8e44ad">)</span> {
|
|
h1 {
|
|
<span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">green</span><span style="color:#3f8058">;</span>
|
|
}
|
|
}
|
|
|
|
<span style="color:#27ae60">@charset</span> <span style="color:#f44f4f">"UTF-8"</span><span style="color:#3f8058">;</span>
|
|
|
|
<span style="color:#27ae60">@import</span> <span style="color:#f44f4f">'custom.css'</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#27ae60">@import</span> <span style="color:#f44f4f">"common.css"</span> <span style="color:#3f8058">screen</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"fineprint.css"</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">print</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">fineprint.css</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">print</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">'bluish.css'</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">speech</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"chrome://communicator/skin/"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">'landscape.css'</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">screen</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">orientation</span><span style="color:#3daee9">:</span>landscape<span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"othersheet.css"</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">screen</span>, <span style="color:#3f8058">print</span><span style="color:#3f8058">;</span>
|
|
|
|
<span style="color:#27ae60">@namespace</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">http://www.w3.org/1999/xhtml</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#27ae60">@namespace</span> svg <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">http://www.w3.org/2000/svg</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
|
|
<span style="color:#7a7c7d">/* Animation (Keyframes) */</span>
|
|
|
|
<span style="color:#27ae60">@keyframes</span> important1 {
|
|
<span style="color:#f67400">from</span> { <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#f67400">50</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> }
|
|
<span style="color:#f67400">50%</span> { <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#f67400">150</span><span style="color:#2980b9">px</span> <span style="color:#2980b9">!important</span><span style="color:#3f8058">;</span> } <span style="color:#7a7c7d">/* ignored */</span>
|
|
<span style="color:#f67400">to</span> { <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> }
|
|
}
|
|
|
|
<span style="color:#27ae60">@keyframes</span> important2 {
|
|
<span style="color:#f67400">from</span> { <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#f67400">50</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">margin-bottom</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> }
|
|
<span style="color:#f67400">to</span> { <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#f67400">150</span><span style="color:#2980b9">px</span> <span style="color:#2980b9">!important</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* ignored */</span>
|
|
<span style="font-weight:bold">margin-bottom</span><span style="color:#3daee9">:</span> <span style="color:#f67400">50</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> }
|
|
}
|
|
|
|
<span style="color:#27ae60">@keyframes</span> slidein {
|
|
<span style="color:#f67400">from</span> {
|
|
<span style="font-weight:bold">margin-left</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#f67400">to</span> {
|
|
<span style="font-weight:bold">margin-left</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span>
|
|
}
|
|
}
|
|
|
|
<span style="color:#7a7c7d">/* Media Queries */</span>
|
|
|
|
<span style="color:#27ae60">@media</span> <span style="color:#3f8058">print</span> {
|
|
<span style="color:#8e44ad">.container</span> {
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span>
|
|
}
|
|
a<span style="color:#c45b00;font-style:italic">:hover</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span> }
|
|
<span style="color:#7a7c7d">/* comments */</span>
|
|
a<span style="color:#c45b00;font-style:italic">:hover</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span> }
|
|
|
|
<span style="color:#27ae60;font-weight:bold">#header</span>
|
|
{
|
|
<span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">none</span><span style="color:#3f8058">;</span>
|
|
}
|
|
}
|
|
|
|
<span style="color:#27ae60">@media</span> <span style="color:#3f8058">screen</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">min-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">768</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">max-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">960</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span> {
|
|
<span style="color:#8e44ad">.container</span> {
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">720</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span>
|
|
}
|
|
}
|
|
|
|
<span style="color:#27ae60">@media</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">max-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">600</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span> {
|
|
<span style="color:#8e44ad">.sidebar</span> {
|
|
<span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">none</span><span style="color:#3f8058">;</span>
|
|
}
|
|
}
|
|
|
|
<span style="color:#27ae60">@media</span> <span style="color:#3f8058">print</span> {
|
|
}
|
|
|
|
<span style="color:#27ae60">@media</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">height</span> <span style="color:#3f8058">></span> <span style="color:#f67400">600</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span> {
|
|
body {
|
|
<span style="font-weight:bold">line-height</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1.4</span><span style="color:#3f8058">;</span>
|
|
}
|
|
}
|
|
|
|
<span style="color:#27ae60">@media</span> <span style="color:#8e44ad">(</span><span style="color:#f67400">400</span><span style="color:#2980b9">px</span> <span style="color:#3f8058"><=</span> <span style="font-weight:bold">width</span> <span style="color:#3f8058"><=</span> <span style="color:#f67400">700</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span> {
|
|
body {
|
|
<span style="font-weight:bold">line-height</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1.4</span><span style="color:#3f8058">;</span>
|
|
}
|
|
}
|
|
|
|
<span style="color:#27ae60">@supports</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">grid</span><span style="color:#8e44ad">)</span> {
|
|
div {
|
|
<span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">grid</span><span style="color:#3f8058">;</span>
|
|
}
|
|
}
|
|
|
|
<span style="color:#27ae60">@supports</span> <span style="color:#8e44ad">font-tech(</span>color-COLRv1<span style="color:#8e44ad">)</span> {
|
|
<span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"Bungee Spice"</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#27ae60">@supports</span> <span style="font-weight:bold">not</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">not</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">transform-origin</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">))</span> {
|
|
div {}
|
|
}
|
|
|
|
<span style="color:#27ae60">@supports</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">grid</span><span style="color:#8e44ad">)</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">not</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">inline-grid</span><span style="color:#8e44ad">))</span> {
|
|
div {}
|
|
}
|
|
|
|
<span style="color:#7a7c7d">/*</span>
|
|
<span style="color:#7a7c7d"> * CSS Syntax Highlight Sample File (Standard)</span>
|
|
<span style="color:#7a7c7d"> *</span>
|
|
<span style="color:#7a7c7d"> * This file contains most CSS syntax, CSS3 properties, @media, @font-face and</span>
|
|
<span style="color:#7a7c7d"> * @keyframes annotations.</span>
|
|
<span style="color:#7a7c7d"> *</span>
|
|
<span style="color:#7a7c7d"> * @author Guo Yunhe guoyunhebrave@gmail.com</span>
|
|
<span style="color:#7a7c7d"> * @date 2016-09-16</span>
|
|
<span style="color:#7a7c7d"> */</span>
|
|
|
|
<span style="color:#7a7c7d">/*</span>
|
|
<span style="color:#7a7c7d"> * Block comment</span>
|
|
<span style="color:#7a7c7d"> *</span>
|
|
<span style="color:#7a7c7d"> * Alert keywords:</span>
|
|
<span style="color:#7a7c7d"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">TODO</span><span style="color:#7a7c7d"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">BUG</span><span style="color:#7a7c7d"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">FIXME</span>
|
|
<span style="color:#7a7c7d"> */</span>
|
|
|
|
|
|
<span style="color:#7a7c7d">/* Region markers */</span>
|
|
|
|
<span style="color:#2980b9;background-color:#153042">/*BEGIN Comment */</span>
|
|
|
|
|
|
<span style="color:#2980b9;background-color:#153042">/*END Comment */</span>
|
|
|
|
<span style="color:#7a7c7d">/*</span>
|
|
<span style="color:#7a7c7d"> * CSS Syntax Highlight Sample File (Complex)</span>
|
|
<span style="color:#7a7c7d"> *</span>
|
|
<span style="color:#7a7c7d"> * This file contains complex CSS syntax that can test unexpected situations.</span>
|
|
<span style="color:#7a7c7d"> *</span>
|
|
<span style="color:#7a7c7d"> * @author Guo Yunhe guoyunhebrave@gmail.com</span>
|
|
<span style="color:#7a7c7d"> * @date 2016-09-16</span>
|
|
<span style="color:#7a7c7d"> */</span>
|
|
|
|
|
|
<span style="color:#7a7c7d">/* Comments with special content */</span>
|
|
|
|
<span style="color:#7a7c7d">/*</span>
|
|
<span style="color:#7a7c7d"> * .class-selector #id "string" 'comment' // comment {} [] () /* comment</span>
|
|
<span style="color:#7a7c7d"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">TODO</span><span style="color:#7a7c7d"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">BUG</span><span style="color:#7a7c7d"> DEBUG</span>
|
|
<span style="color:#7a7c7d"> * body {</span>
|
|
<span style="color:#7a7c7d"> * margin: 0 !important;</span>
|
|
<span style="color:#7a7c7d"> * }</span>
|
|
<span style="color:#7a7c7d"> */</span>
|
|
|
|
<span style="color:#7a7c7d">/* Comments in special positions */</span>
|
|
|
|
header<span style="color:#7a7c7d">/* comment here */</span><span style="color:#8e44ad">.active</span> <span style="color:#7a7c7d">/* comment here */</span> {
|
|
<span style="color:#7a7c7d">/* comment here */</span> <span style="font-weight:bold">color</span> <span style="color:#3daee9">:</span> <span style="color:#7a7c7d">/* comment here */</span> <span style="color:#27aeae;font-weight:bold">blue</span><span style="color:#7a7c7d">/* comment here */</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> Arial <span style="color:#7a7c7d">/* comment here */</span><span style="color:#3f8058">,</span>
|
|
<span style="color:#f44f4f">"Droid Sans"</span><span style="color:#3f8058">,</span> <span style="color:#7a7c7d">/* comment here */</span>
|
|
<span style="color:#f67400">sans-serif</span><span style="color:#7a7c7d">/* comment here */</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#27ae60">@media</span> <span style="color:#3f8058">screen</span> <span style="color:#7a7c7d">/* comment here */</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">max-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span> <span style="color:#7a7c7d">/* comment here */</span><span style="color:#8e44ad">)</span> <span style="color:#7a7c7d">/* comment here */</span> {<span style="color:#7a7c7d">/* comment here */</span>}
|
|
|
|
|
|
<span style="color:#7a7c7d">/* Strings with special content */</span>
|
|
|
|
<span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"{} $variable /* comment */"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span>
|
|
|
|
|
|
<span style="color:#7a7c7d">/* Without extra breaklines and spaces */</span>
|
|
|
|
pre<span style="color:#8e44ad">.primary</span><span style="color:#c45b00;font-style:italic">:hover</span><span style="color:#8e44ad">.large</span><span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">2</span><span style="color:#2980b9">n</span><span style="color:#3f8058">-</span><span style="color:#f67400">1</span><span style="color:#c45b00;font-style:italic">)</span>{<span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span><span style="color:#f67400">17</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span><span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span><span style="color:#f44f4f">"Noto Sans"</span><span style="color:#3f8058">;</span><span style="font-weight:bold;font-style:italic">-webkit-box-shadow</span><span style="color:#3daee9">:</span><span style="color:#f67400">1</span><span style="color:#2980b9">px</span> <span style="color:#f67400">1</span><span style="color:#2980b9">px</span> <span style="color:#f67400">3</span><span style="color:#2980b9">px</span> <span style="color:#8e44ad">rgba(</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span><span style="color:#f67400">0.3</span><span style="color:#8e44ad">)</span>}
|
|
|
|
|
|
<span style="color:#7a7c7d">/* With unnecessary breaklines and spaces */</span>
|
|
|
|
blockquote <span style="color:#8e44ad">.ref</span>
|
|
{
|
|
<span style="font-weight:bold">flex</span> <span style="color:#3daee9">:</span> <span style="color:#f67400">0</span> <span style="color:#f67400">1</span> <span style="color:#f67400">30</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">flex-wrap</span> <span style="color:#3daee9">:</span> <span style="color:#f67400">wrap</span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="color:#27ae60">@media</span> <span style="color:#3f8058">screen</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">orientation</span><span style="color:#3daee9">:</span> landscape<span style="color:#8e44ad">)</span> {
|
|
<span style="color:#8e44ad">.sidebar</span> {
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">500</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> } }
|
|
|
|
|
|
<span style="color:#7a7c7d">/* Special selectors: HTML5 allows user defined tags */</span>
|
|
|
|
header {
|
|
<span style="font-weight:bold">flex</span> {
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span>
|
|
}
|
|
}
|
|
|
|
<span style="color:#7a7c7d">/* CSS Nesting */</span>
|
|
|
|
header {
|
|
<span style="color:#8e44ad">.abc</span> {
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span>
|
|
}
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#3f8058">&</span> width<span style="color:#c45b00;font-style:italic">:hover</span> {
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span>
|
|
}
|
|
<span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span>
|
|
}
|
|
</pre></body></html>
|