kaxigt.com

Jag skriver om webben för webben

CSS referensguide

Postad: 22 september 2008 | CSS-guider | No Comments
Lästid: 5 minuter
Här listar jag främst CSS nivå 1 och 2.1. Vad gäller CSS3 och CSS4 så har de sina egna guider om du vill lära dig mer. Längst ned på denna sida listar jag dock absoluta och relativa längdenheter vilka även är vanligt förekommande i CSS3 och samverkar till en följsam design, dvs responsive design.

Allmänna egenskaper

id {data} teckensträng som anger en specifik identitet till ett element
div märkning som omfattar ett block eller element
class märkning som föregås av ett block eller element
span
formaterar en avgränsad del (in-line)
visibility
anger om du vill att något element ska vara osynligt eller ej, ex visible, hidden
overflow
anger hur du vill att innehållet i ex en box ska ”svämma över” med värdet auto, hidden, scroll, visible
display
anger hur du vill att ett element ska formateras med värdet none, block, inline, list-item

CSS units

% procent
in inches – 1 inche är detsamma som 1 tum = 25,4 mm
px pixel
em
1 em är detsamma som den ställda storleken på det aktuella elementet ex, om du bara anger en storlek för alla texter (11px) så är 1 em = 11px
cm
centimeter
pt
point (punkt) – 1 pt är detsamma som 1/72 inch
pc
pica – 1 pica är detsamma som 12pt (points)

Egenskaper för background (bakgrund)

background-color anger bakgrundsfärgen på ett element
background-image ger en bakgrundsbild
background-repeat anger om bakgrunden ska repeteras med följande värden: repeat, no-repeat, repeat-x, repeat-y
background-position
anger bakgrundsbildens position med följande värden: top, right, bottom, left, center
background-attachment
anger om du vill att bakgrunden ska vara fixerad (statisk) eller ej med följande värden: scroll, fixed

Egenskaperna för background kan användas som shorthand declarationgroup och ska då användas i denna ordning:

background: #color url(images/background-image.jpg) no-repeat left top fixed;

Egenskaper för font (typsnitt)

font-family
specificerar en förvald prioriterad lista med fonter, ex: arial, times, helvetica
font-style
anger fontens stil med följande värden: normal, italic
font-weight
anger fontens tjocklek med följande värden: bold, light, integer, bolder, lighter
font-size
anger fontens storlek med följande värden: px, em, %
font-variant
ger fonten värdet normal, small-caps
font-stretch
förtätar fonten (intransitiv) eller expanderar fonten (transitiv)

Egenskaperna för font kan användas som shorthand declarationgroup och ska då användas i denna ordning:

font: normal 11px/150% arial, times, helvetica;

Egenskaper för border (kantlinje)

border
kan anges med följande värden: border, border-top, border-right, border-bottom, border-left
border-width
anger bredden på kantlinjen, kan även användas som värde på respektive border ex: border-top-width
border-style
anger stilen på bordern med följande värden: solid, dashed, inset, outset, ridge, double, groove, none. Man kan även ge varje kantlinje sitt eget värde, ex: border-top:dotted; border-left:solid;
border-color
anger färgen på alla kantlinjer med värdet: border-color:#000;. Man kan även ge varje kantlinje sin egen färg, ex border-left-color

Egenskaperna för border används också som shorthand declarationgroup och kan då användas så här:

border: 1px solid #000;
border-left: 1px solid #ccc;
border-bottom: 1px solid #000;
border-top: 1px dotted #ccc;
border-right: 1px ridge #000;
ul {list-style-type: none; margin:0px;padding: 10px;
ul li {list-style-type:none;background: url(images/bilden.gif) no-repeat 5px .20em; padding:0px 15px 5px 30px; line-height: 1.4em;}

Positioneringar

left, right, bottom, top, center
anger avståndet till kanten från elementet som ligger över, under, eller vid sidan av kanten till huvudelementet, ex: värde auto eller värdet på längden/höjden med px, pt, cm eller in
position
anger om ett element ska vara static, relative eller absolute
vertical-align
anger om ett element ska vara placerat vertikalt
z-index
placerar element under eller ovanpå med värdet auto eller integer (siffervärde)
float
placering av ett ”flytande” element med värdet left, right
clear
”bryter” ett ”flytande” element med värdet clear:left, clear:right, clear:both så inget annat element ges plats vid sidan av

Egenskaper för margin (marginaler)

margin
generell märkning som anger hur stor marginalen från kanten på själva elementet till kanten på andra element som ligger över, under, eller vid sidan av ska vara. Används med värdet auto, px, eller %. Man kan även ge ett element en specifik marginal genom att ange värdet i margin-top, margin-right, margin-bottom, margin-left Margin flyttar hela elementet/blocket i vald riktning.

Egenskaperna för margin kan användas som shorthand declarationgroup:

margin: 5px(top och bottom) 10px(right och left);
margin-left: 5px;
margin-top: 15px;
margin-bottom: 15px;
margin-right: 5px;
margin:0 auto; (centrerar ett avsnitt/block tillsammans med position:relative;)

Egenskaper för padding

padding
generell märkning som anger hur mycket ”luft” det ska vara från kanten på själva elementet till kanten på andra element som ligger över, under, eller vid sidan av. Används med värdet auto, px, eller %. Man kan även ge ett element en specifik padding genom att ange värdet i padding-top, padding-right, padding-bottom, padding-left. Padding flyttar inte själva elementet utan hur ex texten/elementet/blocket placeras i förhållande till sig själv. För grundligare information läs gärna mer om boxmodelhack
boxmodel Boxmodelhack

Egenskaperna för padding kan användas som shorthand declarationgroup, se nedanstående exempel:

padding: 5px(top och bottom) 10px(right och left);
padding: 5px(top) 5px(right) 10px(bottom) 10px(left);
padding: 5px(top) 10px(right) 10px(bottom);
padding: 5px(top, right, bottom, left);

Textformateringar

color
anger textfärgen
letter-spacing
anger avståndet mellan bokstäverna (ökar eller minskar)
text-align
anger hur texten ska vara ställd med värdet text-align:right; text-align:left; text-align:center; text-align:justify(raka marginaler på alla sidor);
text-decoration
anger om texten ska formateras med värdet none, overline, underline, line-through, blink
text-indent
ger ett indrag på första meningen
text-transform
förändrar bokstävernas utseende (ex enbart versaler) genom att använda värdet capitalize, lowercase, uppercase
word-spacing
ökar eller minskar avståndet mellan orden
line-height
avståndet mellan baslinjen, ex mellan varje rad i ett stycke

Pseudo classes

:active
ger ett aktivt element en speciell stil
:focus
stil på ett element som givits fokus
:hover
anger vilken stil ett element ska ha när man för över musen
:link
anger stil på en obesökt länk
:visited
anger stil på en besökt länk
:first-child
anger värdet på ett element som är ”första generation” (first child) till ett annat element
:lang
ger möjlighet att ändra språk för ett specifikt element

Pseudo element

:before
infogar innehåll före ett element
:after
infogar innehåll efter ett element
:first-line
anger värdet på elementets första rad
:first-letter
anger värdet på den första bokstaven

Tabeller

table-layout
anger värdet på tabell-layouten
border-collapse
anger värdet på tabellens border
border-spacing
anger avståndet mellan tabellcellernas border
empty-cells
anger om tomma cellinnehåll ska ha en border
caption-side
anger hur rubriken ska positioneras i förhållande till tabellen
Mer om dessa och absoluta enheter kan du läsa i artikeln CSS Unit Guide: enheter, egenskaper och viewport

Absoluta längdenheter

De så kallade absoluta enheterna (cm, mm, in, pt och pc) betyder detsamma i CSS som överallt annars, men bara om din output har tillräckligt hög upplösning. CSS i sig själv definierar nämligen inte vad ”hög upplösning” betyder. Dock börjar många lågprisskrivare nuförtiden på 300 dpi, och avancerade skärmar på 200 dpi, så gränsen ligger troligtvis någonstans där mittemellan.

mm Millimeter
in Inches – 1 inche är detsamma som 1 tum = 25,4 mm = 2.54 cm = 72pt = 6pc = 96px
px Pixel. Pixlar (px) är relativa till visningsenheten. För enheter med låg dpi är 1px en enhetspixel (punkt) på skärmen. För skrivare och högupplösta skärmar innebär 1px flera enhetspixlar.
cm
Centimeter
pt
Points (punkt) – 1 pt är detsamma som 1/72 inch
pc
Pica – 1 pica är detsamma som 12pt (points)

Relativa längdenheter

em Relativt till teckensnittsstorleken på elementet (2em betyder 2 gånger storleken på det aktuella teckensnittet)
ex Relativt x-höjden på det aktuella teckensnittet (används sällan)
rem ”r” står för ”root”: ”root em”, vilket är lika med teckenstorleken som är fixerad till rotelementet (nästan alltid ). :root {
font-size: 16px;} ger oss värdet att 1 rem = 16px
vw
Viewport Width. Relativ till 1% av bredden på webbläsarens fönster (viewport). Om viewport är 50cm vid så är 1vw = 0.5cm eller 1/100-del av viewport bredd
vh
Viewport Height. Relativ till 1% av höjden på webbläsarens fönster (viewport).
vmin
Relativ till webbläsarens fönster mindre dimension
vmax
Relativ till webbläsarens fönster större dimension
%
Relativ till föräldrarelementet
Em- och rem-enheterna är praktiska för att skapa en perfekt skalbar layout! Med vw och vh kan den bli ännu bättre.
Många responsiva webbdesigntekniker är mycket beroende av procentregler. CSS-procentmått är dock inte alltid den bästa lösningen för alla problem. Måttet vh är lika med 1/100 av höjden på viewport. Så om höjden på webbläsaren är 800px, är 1vh lika med 8px och på liknande sätt, om bredden på viewport är 650px, så motsvarar 1vw 6,5px.
https://www.freecodecamp.org/news/css-unit-guide