Css Snippets » simple

CSS shorthand voor color

Mark — Wed, 28 Jan 2009 16:12:17 +0000

Als er telkens een paar van twee gelijke waarden is 6699EE dan kan deze waarde worden ingekort door telkens de tweede waarde weg te laten 69E.

CSS lang

color: #FFFFFF
color: #6699FF
color: #990000

CSS shorthand

color: #FFF
color: #69F
color: #900

#FFFFFF wordt #FFF
#990000 wordt #900
#6633FF wordt #63F
#00FF99 wordt #0F9

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

CSS shorthand voor border

Mark — Fri, 23 Jan 2009 16:08:39 +0000

Het gaat erom dat je eenvoudiger CSS kan schrijven door de in CSS toegelaten verkortingen te gebruiken.

CSS lang

border-width: 1px;
border-color: black;
border-style: solid;

CSS shorthand

border: 1px black solid;

Aparte eigenschappen

CSS lang

border-right-width: 1px;
border-right-color: black;
border-right-style: solid;

border-right: 1px black solid

Natuurlijk geldt dezelfde regel ook voor border-bottom, border-top en border-left:

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

CSS shorthand voor margin en padding

Mark — Thu, 22 Jan 2009 20:54:18 +0000

Het gaat erom dat je eenvoudiger CSS kan schrijven door de in CSS toegelaten verkortingen te gebruiken.

Hierbij zijn verschillende mogelijkheden, naargelang het aantal dezelfde waarden die worden gebruikt bij margin & padding.

CSS lang

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px;

CSS shorthand

margin: 2px 1px 3px 4px; /*top, right, bottom, left*/

Als één of meerdere waarden hetzelfde zijn, kan je deze ook weer inkorten:

3 waarden

CSS lang

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em;

CSS shorthand

margin: 5em 1em 3em; /*top, right & left, bottom*/

2 waarden

CSS lang

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%;

CSS shorthand

margin: 5% 1%; /*top & bottom, right & left*/

1 waarde

CSS lang

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

CSS shorthand

margin: 0; /*top & bottom & right & left*/

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

CSS shorthand voor lijsten

Mark — Tue, 20 Jan 2009 15:33:55 +0000

Het gaat erom dat je eenvoudiger CSS kan schrijven door de in CSS toegelaten verkortingen te gebruiken.

CSS lang

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

CSS shorthand

list-style: disc outside url(image.gif)

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

CSS shorthand voor background

Mark — Tue, 13 Jan 2009 09:30:25 +0000

Het gaat erom dat je eenvoudiger CSS kan schrijven door de in CSS toegelaten verkortingen te gebruiken.

Als je ook maar een van deze waarden niet meegeeft zal elke browser dezelfde standaard waarden toekennen, dat zou dan altijd achtergrondkleur wit, een eventuele afbeelding zal zichzelf herhalen horizontaal en vertikaal, positie van de afbeelding zal altijd top left zijn.

CSS lang

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

CSS shorthand

background: #fff url(image.gif) no-repeat top left

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

CSS Shorthand voor font

Mark — Mon, 12 Jan 2009 15:26:39 +0000

Oftewel, hoe schrijf ik evenveel CSS met minder.
Het gaat erom dat je eenvoudiger CSS kan schrijven door de in CSS toegelaten verkortingen te gebruiken.

Dat je met CSS de downloadtijd van je website aanzienlijk verkort is algemeen geweten, maar dat je nu zelf nog de Css kunt verkorten door gebruik te maken van de CSS shorthand properties schijnt niet zo een algemene wetenswaardigheid te zijn.

CSS lang

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

CSS shorthand

font: 1em/1.5em bold italic serif

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon