CSS referensguide

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:

  1. 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:

  1. 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:

  1. border: 1px solid #000;
  2. border-left: 1px solid #ccc;
  3. border-bottom: 1px solid #000;
  4. border-top: 1px dotted #ccc;
  5. border-right: 1px ridge #000;

Egenskaper för listor

list-style
anger att det är lista med märkning som ska användas
list-style-type
anger vad för typ av listmärkning som ska användas, ex: square, circle, disc, decimal, upper-alpha, upper-roman, lower-alpha, lower-roman, none
list-style-image
anger att listan ska ha en bild vid varje listmärkning istället för ovanstående listmärken.
list-style-position
anger var listmärkningen ska placeras i listan, ex: outside, inside

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

  1. ul {list-style-type: none; margin:0px;padding: 10px;}
  2. 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:

  1. margin: 5px(top och bottom) 10px(right och left);
  2. margin-left: 5px;
  3. margin-top: 15px;
  4. margin-bottom: 15px;
  5. margin-right: 5px

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:

  1. padding: 5px(top och bottom) 10px(right och left);
  2. padding: 5px(top) 5px(right) 10px(bottom) 10px(left);
  3. padding: 5px(top) 10px(right) 10px(bottom);
  4. 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

Liknande poster:

Leave a Reply

Your email address will not be published. Required fields are marked *