Lästid: 5 minuterHä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
|
|
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 |
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
Relaterade