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