lektion1.de: Das Template

➍ Style

Es werden verschiedene CSS Klassen definiert.

Infoboxen

Infobox class="info"

Erfolgsmeldung class="info erfolg"

Achtung class="info achtung"

Warnung class="info warung"

Pfeile

Westpfeil class="pf-links west"

Ostpfeil class="pf-rechts ost"

Class ➌ | ➎ Template

Die Datei style.css

/* <<<<< A >>>>> */ a {color: dodgerblue} a[href^="http://"]:not([href*="lektion1.de"]):after{content:"\0020\279C"} a[href^="https://"]:not([href*="lektion1.de"]):after{content:"\0020\279C"} a:hover {color: white; background: limegreen} /* <<<<< B >>>>> */ blockquote { margin: 1em 0; padding: 1em; background: WhiteSmoke; text-align: center; font-family: "standard" } blockquote::before { content:"»"; float: left; color: orangered; font-size: 50px } blockquote:after { content:"- " attr(cite) " -"; display:block; color:orangered; text-align:right; font-size:0.8em } button { display: inline-block; margin: 0.5em; border: 3px solid dodgerblue; border-radius: 8px; padding: 0.5em 1em; color: dodgerblue; background: navajowhite; text-align: center; font-family: "standard"; font-size: 1.1em; cursor: pointer } button:hover { color: white; border-color: green; background: limegreen; transition-duration: 0.4s } /* <<<<< C >>>>> */ caption {font-weight: bold} cite {color: orangered} code { color: slategrey; font-family: standard letter-spacing: 1px; } /* <<<<< D >>>>> */ dl { margin: 0.5em 0; padding: 0; line-height: 1.5em; font-family: "standard" } dt { margin: 0; border-left: 5px solid orangered; padding-left: 18px; font-weight: bold; } dd { margin:0 0 1em 0; border-left: 5px solid limegreen; padding-left: 18px; font-weight: 150; } /* <<<<< F >>>>> */ fieldset { margin: 0; border: thin solid dodgerblue; border-radius: 8px; padding: 1em; } form { margin: 0; padding:0; font-family: "standard" } /* <<<<< H >>>>> */ h1 { margin: 0; padding: 0; font-family: "standard" } h2, h3, h4, h5, h6 { margin: 1em 0; padding: 0; color:orangered; text-align: center; font-family: "standard" } article header h2 {border-bottom: 1px solid orangered} h2 {font-size: 1.5em} h3, h4, h5, h6 {font-size:1.2em} /* <<<<< I >>>>> */ img { border: 1px solid silver; border-radius: 8px; padding: 10px; max-width: 100%; height: auto; } a img {border-color: dodgerblue;} img:hover {box-shadow: 0 0 2px 1px silver;} a img:hover {border-color: limegreen;} input { border: medium solid dodgerblue; border-radius: 8px; padding: 0.5em; width: 100%; color: orangered; font-size: 1.1em; box-sizing: border-box } input:required + label:after { content: " (Pflichtfeld)"; color: orangered } input[type="number"]{ display: inline-block; width: 5em } input[type="radio"] { display: inline-block; width: 1em; height: 1em; } input:focus:valid { color:green; border-color:green; box-shadow:inset 0 1px 2px green } input:focus:invalid { color:red; border-color:red; box-shadow:inset 0 1px 2px red } /* <<<<< L >>>>> */ legend {color:dodgerblue} /* <<<<< O >>>>> */ ol {font-family: "standard";} /* <<<<< P >>>>> */ p { margin: 1em 0; padding: 0; line-height:1.6em; font-family: "standard"; } pre { border-left:5px solid orangered; padding:1em 1em 1em 3em; background:WhiteSmoke; font-family: standard; font-size: 0.9em; letter-spacing: 1px; white-space:pre-wrap; word-break:break-all; counter-reset:pre } pre::before { display:inline-block; float:left; content:attr(title); margin:-1em 0 0 -4.2em; color:white; background:orangered; writing-mode:vertical-lr; text-orientation:upright; } pre code::before{ float:left; margin-left:-2.5em; font-size: 0.8em; counter-increment:pre; content:counter(pre,decimal-leading-zero) } pre code::after { display:block; content:" "; border-bottom:1px solid silver; line-height:0 } /* <<<<< S >>>>> */ samp {letter-spacing:0.1em} select { border:medium solid orangered; border-radius:8px; padding:0.5em; color:orangered; font-family: "standard" font-size:1.1em } /* <<<<< T >>>>> */ table { margin: 1em 0; padding: 0; font-family: "standard" } tr, td {border: 1px solid slategrey} textarea { display:inline-block; border:medium solid orangered; border-radius:8px; padding:0.5em; color:dodgerblue; width:100%; font-family: "standard"; font-size:1.1em; box-sizing:border-box; } textarea:focus:valid { border-color:green; color:green; box-shadow:inset 0 1px 2px green } textarea + label { display:block; margin-bottom:0.8em; text-align:center } /* <<<<< U >>>>> */ ul { list-style:none; font-family: "standard"; } ul li::before { content:"\279C\0020"; color:orangered } kbd{border:1px solid silver;padding:0 0.2em;color:white;background:black;font-family:"code";letter-spacing:0.1em} q{font-family:"code"}

Lektion1.deDas Template

➍ Style

Infoboxen

Pfeile

Kommentare