Uit DeVliegendeWiki

(Doorverwezen vanaf CSS (Cascaded Style Sheets))

Dit artikel heeft voornamelijk betrekking op CSS in het algemeen, met hier en daar een uitstapje naar Drual. Voor meer CSS icm. Drupal, zie artikel Zen.

CSS of Cascaded Style Sheets is een opmaaktaal voor de vormgeving van webpagina's. Door CSS te gebruiken, kunnen vormgeving en inhoud onafhankelijk van elkaar bepaald worden.

Locatie van CSS-code

Er zijn drie manieren om css-code te incorporeren in een pagina, waarbij de eerste twee internal style sheets heten:

Binnen het <head>-element;
Middels het style-attribuut, direct toegepast op een html-element dat met het style-element overweg kan;
Middels een external style sheet, de gebruikelijke manier.

<head>-element

Voorbeeld:

<html>
 <head>
  <style type="text/css">
   body {
    color:#000000
   }
  </style>
 <head>
 <body>
  Hello world!
 </body>
</html>

style-attribuut

Voorbeeld:

<td style="font-family: verdana; color: #ff0000;"> Cel 1,2 </td>

External style sheet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tabbed navigation</title>
    <link href="tabs.css" rel="stylesheet" type="text/css" />
</head>

Deze interne style sheets kunnen handig zijn voor snelle prototyping, maar in het bijzonder kan dat handig zijn voor e-mailhandtekeningen in Thunderbird.

Hoe het werkt

Regels & simple selectors

De basismanier waarop css functioneert, is middels regels of rules. Bv.:

h1{font-family: arial;}

Met

h1 de selector;
Het gedeelte binnen accolades de declaratie;
font-family de eigenschap of property;
arial de value of waarde.

Het voorbeeld hierboven specificeert lettertype Arial voor alle h1-headings. De eigenschap is font-family. Niet font. Een regel kan op meer selectors tegelijk worden toegepast door de selectors te scheiden met komma's. Ook kunnen per regel meerdere eigenschappen een waarde krijgen. Bv.:

h1, h2, h3{
  color:#0000000;
  background-color:#FFFFFF;
}

Deze manier van vormgeving, waarbij een html-element rechtstreeks wordt vormgegeven, heet een simple selector.

Inheritance

Inheritance of overerving wil zeggen, dat een regel die is toegepast op een bepaald element, automatisch ook wordt toegepast op elementen die daarbinnen vallen. Bv.: Als je iets defineert voor het body-element, geldt dat ook voor bv. li-elementen daarbinnen. Echter, indien er een meer specifieke regel voorbijkomt, krijgt die de voorkeur.

Universele selector

 *{ }

Is de universele selector, of universal selector. Het heeft betrekking op alle elementen in het betreffende html-document. Handig om standaardwaarden te defineren. Voorbeeld:

*{
	font-family: verdana;
	color: #101010;
	background-color: #f0f0f0;
}

De universele selector werkt net iets anders dan de het toepassen van regels op het <body>-element: Dit laatste geval werkt via overervering, en de universele selector niet.

Type selector

Met een type selector pas je regels in één toe op meerdere elementen. Bv.:

page, heading, paragraph {color: #000000;}

Ik weet alleen niet of de betreffende elementen standaard html-elementen zijn, of klassen van elementen. Waarschijnlijk zijn het gewoon html-elementen.

Type selectors zijn handig omdat je met één regel meerdere elementen aanpast.

Class selector

Bij gebruik van klassen of classes wordt een label geassocieerd met een regel. In een html-bestand kun je dit label aanhalen, waarna de bijbehorende opmaak wordt toegepast.

Voorbeeld van een klasse-definitie in een css-bestand:

td.smurf {
  font-family: courier, serif;
  font-weight:bold;
}

Deze klasse wordt als volgt aangeroepen in een html-bestand:

 <table>
  <tr>
   <td class="smurf">
    Hello, smurf!
   </td>
  </tr>
 </table>

Omdat in dit geval de klasse is geassocieerd met het td-element, werkt deze niet met andere elementen. Bv.:

<table>	
	<tbody>
		<tr>
			<td> Cell 1,1 </td> <td class="Smurf"> Cell 1,2 met rode achtergrondkleur</td>
		</tr>
	</tbody>
</table>

<p class="Smurf"> Achtergrondkleur van deze paragraaf verandert niet </p>

Echter, indien de klasse wordt toegepast op een regel zonder expliciet genoemd element, werkt het op alle elementen waar de betreffende regel op van toepassing is.

Voorbeeld, CSS-code:

.Smurf{
	background-color: #ff0000
}

Bijbehorende html-code:

.Smurf{
	background-color: #ff0000
}

Met het volgende CSS-bestand werkt het trouwens ook:

td.Smurf{
	background-color: #ff0000
}

.Smurf{
	background-color: #ff0000
}

en ook als je de regels omdraait. Blijkbaar conflicteren deze twee regels niet:

.Smurf{
	background-color: #ff0000
}

td.Smurf{
	background-color: #ff0000
}

Echter, nu geven we de td-regel een andere kleur mee:

.Smurf{
	background-color: #ff0000
}

td.Smurf{
	background-color: #00ff00
}

En nu verandert de kleur van het td-element mee: Deze laatste regel is namelijk specifieker dan de eerste.

Verder: De naam van de klasse staat binnen dubbele aanhalingstekens. Voor het formatteren van 'gewone' tekst is het p-element waarschijnlijk het meest geschikt.

Meerdere klassen

Een element in html-code kan met meerdere klassen tegelijkertijd geassocieerd worden. Dat kan heel handig zijn.

Hier is een voorbeeld van de html-code van primary links in Drupal:

<ul class="menu">
<li class="leaf first active-trail">
<li class="leaf">
<li class="leaf last">
</ul>

Het eerste li-element is met maar liefst drie klassen geassociëerd: leaf, first en active-trail. Het laatste li-element is met twee klassen geassociëerd.

ID selector

Een ID selector is vergelijkbaar met een klasse, maar werkt met een andere groep van labels: ids.

Voorbeeld, CSS-code:

p#abstract{
	background-color: #ff0000;
}

en de toepassing daarvan in html-code:

<p id="abstract"> Dankzij id-selector heeft deze zin een rode achtergrond </p>

Per regel kan een id maar op één element worden toegepast. Een id kan wel worden toegepast op meerdere elementen, verspreid over meerdere regels.

Voorbeeld, CSS-code:

p#abstract{
	background-color: #ff0000;
}	

body#abstract{
	background-color: #00ff00;
}

en de bijbehorende html-code:


<body id="abstract">
	Dit is de body, met een groene achtergrondkleur
	<p id="abstract">
		En dit is een zin met een rode achtergrondkleur
	</p>
</body>

Child selector

Een child selector selecteert een element dat een kind is van een ander element.

Voorbeeld. css-code:

td > b{
	background-color: #00ff00;
}

Bijbehorende html-code:

<table>
   <tbody>
      </tr>
         <td> Cel 1,1 </td>
         <td> <b> Cel 1,2 </b> </td>
      </tr>
   </tbody>
</table>

Descent selector

De descent selector is het broertje van de child selector, maar heeft ook betrekking op elementen die niet rechtstreeks met elkaar verwant zijn, maar waar eventueel nog meer elementen tussen zitten. Voorbeeld van de betreffende css-code:

table b{ }

Adjacent sibling selector

Met de adjacent sibling selector pas je styling toe op elementen die in een document achter elkaar voorkomen. Voorbeeld van de betreffende css-code:

h1 + p { }

In dit geval krijgt een h1-element en een direct daaropvolgend p-element, vergelijkbare vormgeving. Lijkt een beetje op stijlen in Writer of Word.

' Selector attributes

Hierboven hebben we gezien dat er diverse soorten selectors bestaan. De gewenste selector geef je aan middels het selector attribute. Dat kan op verschillende manieren, zoals we al zagen rondom ids en klassen. Voor mee mogelijkheden, zie Jon Duckett, p. 208-209.

Commentaarregels

Een enkelvoudige commentaarregel gaat als volgt:

/* Dit is één commentaarregel */

Commentaar over meerdere regels gaat als volgt:

/* Lorem ipsum dolor sit amet, 
   consectetur adipiscing elit. 
   In at nisl ligula, 
   non sagittis orci. */

Een meer gebruikelijke manier van formatteren van commentaar over meerdere regels is als volgt:

/* Lorem ipsum dolor sit amet, 
 * consectetur adipiscing elit. 
 * In at nisl ligula, 
 * non sagittis orci.
 */

Commentaar kan toegevoegd worden aan een bestaande regel. Bv.:

#snorrebot
{
 float:none /* snorrebotten drijven slecht */
}

Merk op dat je commentaar niet kunt nesten.

Cascade van selectors

Tjakka: Een CSS-regel die alleen wordt toegepast op de klasse die hoort bij de li-items van de primary links

Het is mogelijk om een regel te maken die alleen geldt voor een bepaalde reeks van klassen en/of selectors. Dat is cruciaal, als je een genest element wilt aanpassen, die geen unieke klasse of id heeft.

Voorbeeld

In Drupal wil ik de opmaak van de primary links aanpassen. Daarvoor wil ik oa. de opmaak van het li-element aanpassen. Het probleem is, dat als ik een regel gebruik zoals

li{
   background-color: #ff0000;
}

dat dan alle li-elementen op de site aangepast worden. Ook een meer gerichte regel zoals

li.leaf{
   background-color: #ff0000;
}

werkt niet, omdat de klasse leaf toevallig voor alle menu's gebruikt wordt. Op li-niveau kan ik de elementen van de primary links niet nader onderscheiden.

Echter, als ik een iets groter gedeelte van de code bekijk, is er wel degelijk een unieke manier om deze li-items te benaderen:

<div id="block-menu-primary-links" class="block block-menu first last region-odd odd region-count-1 count-3">
   <div class="content">
      <ul class="menu">
         <li class="leaf first">
         <li class="leaf">
         <li class="leaf last">
      </ul>
   </div>
</div>

Onder andere het pad

#block-menu-primary-links > .content > .menu > .leaf

is uniek.

En het werkt:

#block-menu-primary-links .content .menu .leaf{
	background-color: #ff0000;
}

Sterker nog: De tussenliggende selectors hoeven niet genoemd te worden. Dit werkt dus ook:

#block-menu-primary-links .leaf{
	background-color: #ff0000;
}

Zo'n cascade van selectors is ook te combineren met de naam van een element. Dat is cruciaal, want niet elk element is geassociëerd met een klasse of id:

#block-menu-primary-links li.leaf{
	background-color: #ff0000;
}

En het kan nog iets precieser: Deze regel heeft betrekking op alle ul-items die 'ergens' onder de betreffende id voorkomen (zelfde resultaat):

#block-menu-primary-links ul{
	background-color: #ff0000;
}

Bronnen

http://css-tricks.com/multiple-class-id-selectors/

Box-model

CSS is gebaseerd op een box-model: Zo'n beetje alle objecten zijn vierkanten. Als je dat weet, wordt het een stuk gemakkelijker om CSS toe te passen.

Zie Jon Duckett, p. 302-320.

Div

Met het div-element kun je gebieden binnen een website afbakenen en als een op zichzelf staand object bewerken, vergelijkbaar met frames of minipages in andere systemen.

Met het div-element kun je gebieden binnen een website afbakenen en als een op zichzelf staand object bewerken, vergelijkbaar met frames of minipages in andere systemen. Div is de opvolger van tabellen voor dit doel.

Voorbeeld

Resultaat: Een sectie met lichtgrijze achtergrond, aangepast lettertype, gecentreerd, op 75% van de paginabreedte

HTML-code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Kaders</title>
    <link href="Kaders-01.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="page">

	Hello, world!

</div>

</body>
</html>

CSS-code:

div#page{
	width:75%;
	margin-left: auto;
	margin-right: auto;
	background-color: #f0f0f0;
	border-style: solid;
	border-width: 1px;
	border-color: ff0000;
	padding: 20px;
	font-size: 12px;	
}

Clear div

Vaak kom ik in ontwerpen dingen tegen als 'clear div'. Uitleg:

Nested DIVs

http://www.ezineasp.net/post/HTML-Nested-Div-Positioning-Using-CSS-Position-Styles.aspx

Meer CSS

Block- en inline objecten: http://netmechanic.com/news/vol6/css_no16.htm
Float: De float-property bepaald of een object naar links of rechts moet 'drijven', of niet - http://www.w3schools.com/css/pr_class_float.asp & Jon Duckett: Web Programming, p. 416
Achtergronden: Jon Duckett, p. 323-330
Opsommingen: Jon Duckett, p. 330-334
Tabellen: Jon Duckett, p. 334-343
Generated Content: Jon Duckett, p. 343-347
Cursor property: Jon Duckett, p. 347-348
Display property: Jon Duckett, p. 348
Visibility of Boxes: Jon Ducket, p. 348-349
@import: p. 349
@charset: p. 350
!important: p. 351
Positioning: p. 351-367

Toepassingen

Zie CSS - Toepassingen

Floats & Clear

HTML-bestand. Er is een div Wrapper nodig, om de hoofdgedeeltes bij elkaar te houden. Andres kun je Content niet naar rechts laten floaten zonder dat-ie te ver naar rechts gaat

Bijbehorende CSS-code

Resultaat

Bronnen

http://drupal.org/node/135098 - Purpose of css class .clear-block
http://www.complexspiral.com/publications/containing-floats/

Fixed layout

Oftewel: Een fixed layout met een sheet

http://webdesign.about.com/od/css/ht/htcsscenterfix.htm

Tools

Referenties:

Frameworks:

Vragen & antwoorden

OK - Wat zijn precies alle opties om tekstweergave aan te passen? --> Zie Jon Duckett, Beginning web programming, p. 276-296
Hoe doe je tabbed navigation?
Hoe werkt div?
Hoe deel je een scherm in in vlakken mbv. div's?
Hoe maak je een middenvlak (sheet) met ronde hoeken?

CSS

Uit DeVliegendeWiki

Inhoud

Locatie van CSS-code

Hoe het werkt

Cascade van selectors

Box-model

Div

Nested DIVs

Meer CSS

Toepassingen

Floats & Clear

Fixed layout

Tools

Vragen & antwoorden

Bronnen

Aspecten/acties

Persoonlijke instellingen

Navigatie

Zoeken

Hulpmiddelen