Begynnelsen HTML5 og CSS3 Cheat Sheet

July 30  by Eliza

Tabellen nedenfor inneholder en liste over navngitte farger du kan bruke i HTML og CSS koden for å lage en mer fargerik nettside. Fargene er vist med sine tilsvarende RGB hexcode verdier sammen med en representant fargeprøve.

Navn Hexcode
Aqua # 00FFFF
Svart # 000000
Blå # 0000FF
Fuchsia # FF00FF
Gray # 808080
Grønn # 008000
Lime # 00FF00
Maroon # 800000
Navy # 000080
Oliven # 808000
Lilla # 800080
Rød # FF0000
Sølv # C0C0C0
Teal # 008080
Hvit #FFFFFF
Gul # FFFF00

Know Your Elements!

Vises i alfabetisk rekkefølge er en liste over alle de HTML5 elementer som finnes i dagens HTML5-spesifikasjonen. En kort beskrivelse inngår som en rask referanse når vi leter etter den perfekte element.

Element Beskrivelse
A Bruke til å lage hyperkoblinger
Abbr Bruk for forkortelser
adresse Kontaktinformasjon
Område Hyperkobling i et bilde-kart
Artikkelen * Gir seksjon formatering for korte prosa elementer som artikler, blogger, etc.
til side * Litt relatert stykke innhold for vertssiden
lyd * Brukes til å legge til lyd for avspilling forbundet med web-side
b Fet tekst
basen Base URL
BDI * Isolere tekst som kan formateres i en annen retning enn tekst rundt det
BDO Bruk til å angi retningen for tekst
innrykket tekst Block sitat
kroppen Dokument kroppen
br Linjeskift
knapp Lager en knapp.
lerret * Bruke til å definere en side region der tegning kan forekomme
bildetekst Tabell tittel
sitere Sitert tittelen på et verk
kode Kodefragment
col Kolonne i en tabell
colgroup Gruppe av tabellkolonner
kommando * Bruke til å definere bruker GUI elementer
Datalist * Bruke til å lage en liste over dataobjekter for rullegardinmenyene
dd Beskrivelse
del Slettet tekst
detaljer * Gir ytterligere informasjon eller kontroller for brukere på etterspørsel
DFN Definere eksempel
div Generisk beholder
dl Beskrivelse liste
dt Term eller navn
em Vekt
embed * Koblinger til eksternt program eller interaktivt innhold
fieldset Relaterte skjemakontroller
figcaption * Gi en bildetekst for en figur element
figur * Stående flyt innhold element; kan være statisk eller dynamisk
bunntekst * Avsluttende informasjon for et dokument seksjon
skjema Definerer en bruker submittable skjema
h1 - h6 Overskrifter
hode Container for metadata om dokumentet, skript, og stiler
header * Header for dokumentet
hgroup * Overskrift gruppe
hr Horisontal regel / tematisk pause
html Root element
jeg Kursiv tekst
iframe Nøstet surfing innhold
img Bilde
inngang Inngangskontroll
ins Satt inn tekst
KBD Brukerundersøkelser
keygen * Brukertilgjengelige kontroll for å generere nøkkelpar for sikkerhet eller kryptering
etikett Bildetekst for en skjemakontroll
legende Forklarende bildetekst
li Listeelement
link Metadata for å koble eksterne dokumenter
kart Definere et bilde-kart
mark * Mark eller markere en kjøring av tekst i ett dokument, som referanse i et annet dokument
meny Liste over kommandoer
meta Metadata
meter * Definer en visuell indikator for noen type måling
nav * Bruke til å definere et navigasjonsfelt eller område på en webside
noscript Definere innholdet skal vises i tilfelle skriptet kan ikke kjøres
objekt Eksternt innhold
ol Sortert liste
OPTGROUP Definere en gruppe av alternativer
utgang * En slags utgang fra manus beregning eller API-kall
p Avsnitt
param Bruke til å gi parametre til plugins
pre Forhåndsformatert tekst
fremgang * En visuell meter for oppgaven er fullført (framdriftslinje)
q Sitert tekst
rp * Bruk for å sette parentes rundt ruby ​​merknader
rt * Bruke for å markere tekst av en rubin annotering
ruby * Bruk for å kommentere ideografiske språk som kinesisk eller japansk
s Mark tekst som fjernes, med streik gjennom formatering.
SAMP Eksempel utgang
script Embedded skript
seksjon * Generisk dokument eller program seksjon
velg Alternativ utvalg skjemakontroll
liten Liten tekst
kilde * Bruke til å angi flere kilder for lyd og video
span Et generisk tekst wrapper
sterk Viktig tekst. Er vanligvis formatert som fet
stil Presentasjonsinformasjon, typisk CSS
sub Senket tekst
sammendrag * Sammendrag, legende, eller bildetekst for innspill detaljer informasjon
sup Hevet tekst
bord Bord
tbody Gruppe av tabellrader
td Tabellcelle
textarea Tekstfeltet
TFOOT Tabell bunntekstrad gruppe
th Tabell tittelcelle
THEAD Tabell overskriften rad gruppe
tid * Verdi for å representere dato og / eller tid
tittel Dokumenttittel
tr Tabell rad
spore * Angi en supplerende media spor
u Understreke
ul Sorterte liste
Div Bruke til å angi en matematisk eller programmering variabel, eller en stedfortreder
video * Bruke til å spille av videoinnhold på nettsiden
WBR * Bruke for å betegne mulig linjeskift punkt for tekstflyt

* Nytt i HTML5

CSS Eiendom Reference

Tabellen nedenfor viser CSS egenskaper som støttes av de fleste nettlesere i dag, sammen med sine tillatte verdier. Noen av disse egenskapene er en del av CSS3 spesifikasjoner og er fortsatt eksperimentell, så husk å sjekke med den kan jeg bruke stedet for den nyeste informasjonen om støtte nettleser. (For hjelp til å lese den Verdier kolonne i denne tabellen, se artikkelen "En rask guide til CSS Verdi Definition Syntax" på www. / Statister / beginninghtml5css3.)

Navn Verdier
animasjon <Single-animasjon navn> || <tid> || <timing-funksjon> || <tid> || <single-animasjon-iterasjon-count> || <single-animasjon-retning> || <single-animasjon -fill-modus>
animasjon-forsinkelse <Tid>
animasjon-retning normal | alternativ | reversere | alternative revers
animasjon-varighet <Tid>
animasjon-fill-mode Ingen | framover | bakover | begge
animasjon-iterasjon-count uendelig | <nummer>
animasjon-navn none | <identifikator>
animasjon-play-state kjører | pauset
animasjon-timing-funksjon <Timingfunction>
backface-synlighet synlig | skjult
background-vedlegg scroll | fast | arve
background-klipp border-box | padding-box | innhold-box | arve
background-color <Farge> | arve
background-image <Uri> | none | arve
background-opprinnelse border-box | padding-box | innhold-box | arve
background-posisjon [[<Prosent> | <lengde> | venstre | center | right] [<prosent> | <lengde> | topp | center | bunn]? ] | [[Venstre | center | right] || [toppen | center | bunn]] | arve
background-repeat gjenta | gjenta-x | gjenta-y | no-repeat | arve
background-size <Lengde> | <prosent> | auto | cover | inneholde
bakgrunn ['Background-color' || 'background-image' || 'bakgrunns gjentar' || 'background-vedlegg' || bakgrunn-posisjon] | arve
border-kollaps kollaps | separat | arve
border-farge [<Farge>] {1,4} | arve
border-image none | <bilde>
border-image-starten ['Sider' || 'horisontal' || 'vertikale' || 'top' || 'bunnen' || "rett" || "venstre"] | arve
border-image-repeat ['Type' || 'horisontal' || 'vertikale' || 'strekke' || 'repeat' || 'runde'] | arve
border-image-kilde none | <bilde>
border-image-slice [<Nummer> | <prosent>] {1,4} && fylle?
border-image-bredde [<Lengde> | <prosent> | <antall> | auto] {1,4}
border-radius [<Lengde> | <prosent>] {1,4} [/ [<lengde> | <prosent>] {1,4}]?
border-avstand <Lengde> <lengde>? | Arve
border-style <Border-style> {1,4} | arve
border-top border-right border-bottom border-venstre [<Border-width> || <border-style> || border-top-color] | arve
border-top-farge border-right-farge border-bottom-farge border-venstre-farge <Farge> | arve
border-top-venstre-radius border-top-høyre-radius border-bottom-venstre-radius border-bottom-høyre-radius [<Lengde> | <prosent>] {1,2}
border-top-style border-right-style border-bottom-style border-left-style <Border-style> | arve
border-top-bredde border-right-bredde border-bottom-bredde border-venstre-bredde <Border-width> | arve
border-width <Border-width> {1,4} | arve
grensen [<Border-width> || <border-style> || border-top-color] | arve
bunn <Lengde> | <prosent> | auto | arve
box-shadow none | [innfelt? && [<Offset-x> <offset-y> <skarpe radius>? <Spread-radius>? <Farge>? ]] #
break-etter auto | alltid | unngå | left | right | side | kolonne | unngå-side | unngå-kolonne
break-før auto | alltid | unngå | left | right | side | kolonne | unngå-side | unngå-kolonne
bildetekst-side top | bunn | arve
klar none | venstre | right | begge | arve
klipp <Form> | auto | arve
farge <Farge> | arve
kolonner <'Kolonne bredde'> || <'kolonne-count'>
kolonne-count <Nummer> | auto
kolonne-fill auto | balanse
kolonne-gap <Lengde> | normal
kolonne-regelen <'Kolonne-regelen bredde'> || <'kolonne-regel-stil "> || <' kolonne-regel-color '>
kolonne-regel-farge <Farge>
kolonne-regel-stil [None | skjult | prikket | knust | solid | double | groove | møne | innfelt | starten] | arve
kolonne-regel-bredde <Lengde> | [tynn | medium | tykk]
kolonne-span none | all | arve
kolonnebredde <Lengde> | auto
innhold normal | none | [<string> | <uri> | <teller> | attr (<identifikator>) | open-quote | close-quote | no-open-sitat | no-close-quote] + | arve
kontra tilvekst [<Identifikator> <heltall>? ] + | None | arve
kontra reset [<Identifikator> <heltall>? ] + | None | arve
markøren [[<Uri>,] * [auto | trådkors | default | pekeren | flytte | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | tekst | vente | Hjelp | fremgang]] | arve
retning ltr | RTL | arve
utstilling inline | blokk | liste-element | inline-block | tabell | inline-tabellen | table-rad-gruppe | table-header-gruppe | table-footer-gruppe | table-rad | table-kolonne-gruppe | table-kolonne | table-cell | table-bildetekst | none | arve
tomme-celler vise | skjul | arve
float left | right | none | arve
font-family [[<Familienavn> | <generisk-familien>] [, <familienavn> | <generisk-familien>] *] | arve
font-size <Absolutt størrelse> | <relativ-størrelse> | <lengde> | <prosent> | arve
font-style normal | kursiv | skrå | arve
font-variant normal | small-caps | arve
font-weight normal | dristig | dristigere | lettere | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | arve
font [['Font-style' || 'font-variant' || 'font-weight']? ' font-size "[/ 'line-høyde']? font-family] | bildetekst | ikonet | meny | melding-boks | liten bildetekst | status-bar | arve
høyde <Lengde> | <prosent> | auto | arve
keyframes [[Fra | å | <prosent>] [, fra | å | <prosent>] * block] *
venstre <Lengde> | <prosent> | auto | arve
brev-avstand normal | <lengde> | arve
line-høyde normal | <nummer> | <lengde> | <prosent> | arve
list-style-image <Uri> | none | arve
list-style-stilling inne | utenfor | arve
list-style-type disk | sirkel | torget | desimal | desimal-ledende-null | nedre-roman | øvre-roman | lavere gresk | lavere latin | øvre latin | armenian | georgisk | nedre-alfa | øvre-alpha | none | arve
list-style ['List-style-type' || 'list-style-stilling' || list-style-image] | arve
margin-right margin-left <Margin bredde> | arve
margin-top-margin-bottom <Margin bredde> | arve
margin <Margin-bredde> {1,4} | arve
max-høyde <Lengde> | <prosent> | none | arve
maks bredde <Lengde> | <prosent> | none | arve
min-høyde <Lengde> | <prosent> | arve
min-bredde <Lengde> | <prosent> | arve
opasitet <Nummer> | arve
foreldreløse <Heltall> | arve
omriss-farge <Farge> | invert | arve
omriss-stil <Border-style> | arve
omriss-bredde <Border-width> | arve
omriss ['Omriss-color' || 'omriss-stil "|| skissere bredde] | arve
overløp synlig | skjult | scroll | auto | arve
flow-wrap normal | break-ord | arve
flow-x synlig | skjult | scroll | auto | arve
flow-y synlig | skjult | scroll | auto | arve
padding-top padding-right padding-bottom padding-left <Padding-bredde> | arve
padding <Padding-bredde> {1,4} | arve
page-break-etter auto | alltid | unngå | left | right | arve
page-break-før auto | alltid | unngå | left | right | arve
page-break-inne unngå | auto | arve
perspektiv none | <lengde>
perspektiv-opprinnelse [<Prosent> | <lengde> | venstre | center | right | topp | bunn] | [[<prosent> | <lengde> | venstre | center | right] && [<prosent> | <lengde> | topp | center | bunn]]
posisjon statisk | slektning | absolutt | fast | arve
sitater [<String> <string>] + | none | arve
rett <Lengde> | <prosent> | auto | arve
tabell-layout auto | fast | arve
text-align left | right | center | begrunne | arve
text-decoration none | [understreke || overlinje || line-gjennom || blink] | arve
tekst-innrykk <Lengde> | <prosent> | arve
text-transform kapitalisere | store bokstaver | små bokstaver | none | arve
topp <Lengde> | <prosent> | auto | arve
forvandle none | <forvandle-funksjon> +
forvandle-opprinnelse [<Prosent> | <lengde> | venstre | center | right | topp | bunn] | [[<prosent> | <lengde> | venstre | center | right] && [<prosent> | <lengde> | topp | center | bunn]] <lengde>?
forvandle-stil flat | bevare-3d
overgang [None | <single-overgang-eiendom>] || <tid> || <timing-funksjon> || <tid>
overgang-forsinkelse <Tid>
overgang varighet <Tid>
overgang-timing-funksjon <Timing-funksjon>
overgang-eiendom none | <single-overgang-eiendom> # [',' <single-overgang-eiendom> #] *
unicode-bidi normal | embed | bidi-overstyring | arve
vertikal-align baseline | sub | super | topp | tekst-top | midten | bunnen | tekst-bottom | <prosent> | <lengde> | arve
synlighet synlig | skjult | kollaps | arve
white-space normal | pre | wrappet | pre-wrap | pre-linje | arve
enker <Heltall> | arve
bredde <Lengde> | <prosent> | auto | arve
word-avstand normal | <lengde> | arve
z-index auto | <heltall> | arve