Hjælp: CSS

fra Wikipedia, den gratis encyklopædi
Spring til navigation Spring til søgning

CSS ( Cascading Style Sheets ) er en teknik, hvormed wiki -sider samt sider på Internettet generelt kan forsynes med farver og layoutspecifikationer.

Der er følgende muligheder:

  1. Giv en enkelt tekst med særlig dekoration. Det er emnet for denne hjælpeside.
  2. Giv alle sider en skematisk stil
    • for de enkelte brugeres personlige ønsker.
    • for hele projektet (kun muligt for visse autoriserede brugere) eller i den software, der bruges over hele verden; se Skin / MediaWiki .
Det individuelle, personlige design af wikisiderne er beskrevet under WP: CSS .

Formatering i kildeteksten på en side

Udtrykkeligt specificerede typespecifikationer i et enkelt element overskriver (næsten [1] altid) de generelle specifikationer for siden.

Oplysningerne er givet i en attributstil style="" , med CSS -erklæringen mellem anførselstegnene.

Der er to måder at give denne instruktion på wikitext:

  1. Bordelementer; ved navn {| for hele bordet, |- for en hel bordrække, mellem to | for en enkelt bordcelle. Yderligere oplysninger finder du i Hjælp: Tabeller .
  2. Tags som <span> - de fleste af disse elementer tillader en style= attribute; så repræsentér det også, hvis det er muligt.
    • <span style="color: blue" >...</span>

CSS -notation

En værdi tildeles et søgeord, hvor de to adskilles af et kolon.

  • style="Eigenschaft: Wert"

Der er en række forskellige ejendomme. Den ønskede værdi tildeles ejendommen i par. Efterfølgende par adskilles med et semikolon; Så du ikke glemmer det, når du skifter, placeres ofte et faktisk unødvendigt semikolon bag det sidste par:

  • style="Eigenschaft1: Wert1; Eigenschaft2: Wert2;"

Mellemrummene i eksemplet er valgfri og er angivet på denne side for bedre læsbarhed. Kompakte tildelinger af et navn og en værdi skrives normalt uden mellemrum og semikolon; Flere opgaver, selv med komplekse værdier, blev lettere at læse ved at tilføje mellemrum.

En fælles værdi er farver. De er helt sikkert givet som hexadecimale tal: #RRGGBB - med R = rød, G = grøn, B = blå; Tegnene 0–9, A - F er mulige i hvert enkelt tilfælde. Yderligere oplysninger finder du i Hjælp: Farvetabel og andre.

Længder er også almindelige. Her er typiske:

  • % - relativ specifikation, f.eks. 50% (ingen mellemrum mellem tal og procenttegn!)
  • em - ( firkant ), noget som skrifttypehøjden eller bredden på et 5em M: 5em
  • px - pixels , ca. 20px

Klasser og stilarter

I stedet for at levere individuelle stilarter til elementer på flere sider, er det ofte billigere at bruge stildefinitioner, der er ensartede i hele projektet. Dette giver alle sider et ensartet udseende, og om nødvendigt er justeringer af mobile enheder eller visse brugergruppers krav mulig centralt.

Specifikationen er gjort analog med aftalen mellem individuelle stilarter i en attributklasse class="…" og er alternativt og yderligere mulig på de samme steder.

Flere klasser er angivet bag hinanden uden kommaer, kun adskilt af mellemrum inden for den samme attributklasse class="…" .

Hvis en egenskab bestemmes af både class="…" og style="…" , har definitionen med style forrang.

Fælles opgaver

Her er et kort udvalg.

Arrangement af teksten

Der er to retninger, der er nyttige i tabelceller, for eksempel:

  1. vandret
    • style="text-align: left" - venstre begrundet
    • style="text-align: center" - centreret - alternativ: class="center" (trækker samtidigt et bord ud til sidens fulde bredde; må ikke forveksles med class="centered" ) - se centrering
    • style="text-align: right" - ret begrundet
  2. lodret
    • style="vertical-align: top" - top
    • style="vertical-align: middle" - i midten
    • style="vertical-align: bottom" - herunder

Layout, tekstflow og nulstilling

Se overordnet: layoutflow

  • Arranger elementet på højre side af siden, og lad teksten flyde rundt om det:
    • style="float: right"
    • class="float-right" - bedre; især hvis der allerede er en klasse; sikrer også en afstand fra kroppen tekst
    • Miniaturer erklæres på denne måde som standard.
  • Det samme for venstre margen:
    • style="float: left"
    • class="float-left"
  • Juster hele elementet i midten:
    • class="centered" (ikke at forveksle med class="center" ) - se centrering
  • Nulstil layoutflow
    <div style="clear: both;"></div>

At farve

  • Baggrundsfarve:
    • style="background: black" [2]
    • class="hintergrundfarbe6" - eksempel - hjælp
  • Skrift farve:
    • style="color: #8B008B" - eksempel
  • Ramme farve og mere:
    • style="border: solid 1px #9932CC" - eksempel
    • class="rahmenfarbe4" - eksempel - hjælp

Undertryk linjeskift

Flere &nbsp; ( beskyttede rum ) kan gemmes.

  • style="white-space: nowrap"

Indrykning, venstre margen

For hver indrykning i lister osv. 2em venstre margen til højre med 2em (to gange bredden af ​​et "M").

  • style="margin-left: 2em"

Maskering (usynlig / synlig)

Lejlighedsvis bliver tekstelementer usynlige fra starten. Scripts og konfigurationspåvirkninger sikrer senere, at de er synlige igen under visse betingelser:

  • style="display: none"

Dekorationsgrænser

Det samme gælder her: “Less is more.” Encyklopædiske sider koncentrerer sig om indholdet og lever ud fra et simpelt design. Overdreven og kunstig CSS -erklæringer i artiklerne forbedrer ikke indholdet, og de gør kildekoden vanskelig for de andre forfattere at læse og vedligeholde. I tvivlstilfælde kan skabeloner bruges; selv dér bør man dog begrænse sig til det nødvendige.

Forældede instruktioner

I 1990'erne, inden CSS fangede, blev der defineret særlige attributter i HTML for hver enkelt ejendom. Disse er imidlertid ikke så omfattende som mulighederne for CSS. Det er derfor, det nu opgives, og kun den universelle attributstil style= og CSS bruges ensartet i alle situationer. Nogle almindelige tilfælde:

Forældet betyder Udskiftning med CSS Værdier og noter
bgcolor="" Baggrundsfarve background: [2] Farveværdier
align="" Tekstjustering (vandret) text-align:
float:
left center right

Forskellig effekt, afhængigt af om et blokelement eller en tabellinje eller celle er adresseret.

Ved anvendelse på hele bordet efter {| :

  • text-align:center - påvirker alle celler
  • class="center" - påvirker alle celler, trækker samtidig tabellen til sidens fulde bredde
  • class="centered" - tegner tabellen til sidens fulde bredde (ikke teksten)

se centrering

For blokelementer align="left" align="right" og align="left" layoutflowet .

valign="" Tekstjustering (lodret) vertical-align: top middle bottom
clear="" Nulstil layoutflow <div style="clear: both;"></div>
border="1" Grænse border: solid 1px Ofte overflødig, for eksempel med class="wikitable" .
cellpadding="10" Indre afstand padding: 10px Ofte overflødig, for eksempel med class="wikitable" .
cellspacing="5" Mellemrum mellem celler border-collapse: separate; border-spacing: 5px; Encyklopædisk næppe ønskeligt
cellspacing="0" Minimer rummet mellem celler border-collapse: collapse; Standard på wikitable
color="" Font farve osv. color: Farveværdier
width="20%"
width="250"
bred width: 20%
width: 250px
I CSS er der mange måleenheder, og px skal indstilles til “pixels”, mens der i HTML kun er procentdele og pixels.
  • Bemærk: Generelt er HTML -attributter ineffektive, dvs. overskrevet, hvis den tilsvarende CSS er tilgængelig.
  • Specifikationerne colspan= og rowspan= er strukturelle egenskaber og ikke rowspan= CSS -dekorationer.

De forældede stilarter har det problem, at de ikke er kompatible med de moderne definitioner, og hvis de blandes, er resultatet svært at forudsige og kan være browserafhængigt.

  • I dag bør moderne klassedefinitioner og opgaver i elementer på højere niveau have forrang frem for de forældede HTML-attributter.

Metoden, der blev forældet i 1998, arver i øvrigt ikke egenskaberne hos elementernes børn; Derfor, hvis syntaksen er forældet, kan du se, at opgaverne skal gentages permanent:

 {|
| + Forældet syntaks
| -
| align = "right" | 42
| align = "right" | 17.
| -
| align = "right" | 4.
| align = "right" | 4711
|}

style= tildeling er unik og påvirker alle tabelceller:

 {| style = "text-align: right;"
| + Aktuel syntaks
| -
| 42
| 17.
| -
| 4.
| 4711
|}

Nogle guider

Bemærkninger

  1. Undtagelse: såkaldt !important
  2. a b Lidt mere detaljeret:
    • Den præcise farvespecifikation for baggrundsfarven ville være background-color: #FFFF00 : background-color: #FFFF00
    • Kortere og normalt lige så effektiv er: background: #FFFF00
      • Yderligere specifikationer for baggrunden ville komme i tvivl her, men disse er sjældent og delvist forhindret i Wikipedia.
    • background-color er mere sikker end background i tvivlstilfælde.
    • Som regel, og især i ANR, er det tilstrækkeligt at skrive background:#FFFF00 . Dette er tydeligere og kortere.
    • Under alle omstændigheder kan ingen andre specifikationer end farven være fornuftigt valgt til style information i wikitext.
    • Baggrund background-color: kun bruges i tabelhovedet til tabeller , der kan sorteres, fordi sorteringspile senere genereres som baggrundsbillede af JavaScript . Med background: browseren kan dog fastslå, at der ikke skal vises et baggrundsbillede.
    • I skabelonprogrammering og lignende avancerede kontekster bør der prioriteres eksplicit at background-color for ikke at hindre effekten af ​​andre effekter.