From 004b3c5fc8d71b68fcb019c9e0346bf80024dbbd Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:47 +0100 Subject: unslug nl: move --- files/nl/web/css/css_color/index.html | 120 +++++++++++ files/nl/web/css/css_colors/index.html | 120 ----------- .../de_stapelcontext/index.html | 239 --------------------- .../the_stacking_context/index.html | 239 +++++++++++++++++++++ files/nl/web/css/voor_beginners/index.html | 63 ------ 5 files changed, 359 insertions(+), 422 deletions(-) create mode 100644 files/nl/web/css/css_color/index.html delete mode 100644 files/nl/web/css/css_colors/index.html delete mode 100644 files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html create mode 100644 files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html delete mode 100644 files/nl/web/css/voor_beginners/index.html (limited to 'files/nl/web/css') diff --git a/files/nl/web/css/css_color/index.html b/files/nl/web/css/css_color/index.html new file mode 100644 index 0000000000..93bc7ca016 --- /dev/null +++ b/files/nl/web/css/css_color/index.html @@ -0,0 +1,120 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +translation_of_original: Web/CSS/CSS_Colors +--- +
{{CSSRef}}
+ +

CSS Colors is a module of CSS that deals with colors, color types and transparency.

+ +

Reference

+ +

Properties

+ +
+ +
+ +

CSS Data Types

+ +

{{cssxref("<color>")}}

+ +

Guides

+ +

None.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

See also

+ + diff --git a/files/nl/web/css/css_colors/index.html b/files/nl/web/css/css_colors/index.html deleted file mode 100644 index 93bc7ca016..0000000000 --- a/files/nl/web/css/css_colors/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: CSS Colors -slug: Web/CSS/CSS_Colors -tags: - - CSS - - CSS Colors - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors ---- -
{{CSSRef}}
- -

CSS Colors is a module of CSS that deals with colors, color types and transparency.

- -

Reference

- -

Properties

- -
- -
- -

CSS Data Types

- -

{{cssxref("<color>")}}

- -

Guides

- -

None.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
- -

See also

- - diff --git a/files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html b/files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html deleted file mode 100644 index 2256b38632..0000000000 --- a/files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Het stapelverband -slug: Web/CSS/CSS_Positioning/Understanding_z_index/De_stapelcontext -tags: - - CSS - - Geavanceerd - - Gids - - Referentie - - Stapelverband - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context ---- -
{{cssref}}
- -

Het stapelverband (stacking context) is een driedimensionale conceptualisatie van HTML-elementen langs de denkbeeldige z-as ten opzichte van de gebruiker, van wie wordt aangenomen dat deze wordt geconfronteerd met de viewport of de webpagina. HTML-elementen bezetten deze ruimte in prioriteitsvolgorde op basis van elementattributen.

- -

Het stapelverband

- -

In het vorige deel van dit artikel, z-index gebruiken, wordt de weergavevolgorde van bepaalde elementen beïnvloed door hun z-indexwaarde. Dit gebeurt omdat deze elementen speciale eigenschappen hebben waardoor ze een stapelverband vormen.

- -

Een stapelverband wordt gevormd, waar dan ook in het document, door elk element in de volgende scenario's:

- - - -

Binnen zo'n stapelverband worden onderliggende elementen gestapeld volgens dezelfde regels die eerder zijn uitgelegd. Belangrijk is dat de z-indexwaarden van de onderliggende stapelverbanden alleen betekenis hebben binnen het stapelverband van hun ouder element. Stapelverbanden worden atomair behandeld als een enkele eenheid in de ouders' stapelverband.

- -

Samengevat:

- - - -
Opmerking: de hiërarchie van stapelverbanden is een subset van de hiërarchie van HTML-elementen, omdat alleen bepaalde elementen stapelverbanden maken. We kunnen zeggen dat elementen die hun eigen stapelverbanden niet creëren, worden geassimileerd door de ouders' stapelverband.
- -

Het voorbeeld

- -

Example of stacking rules modified using z-index

- -

In dit voorbeeld creeërt elk gepositioneerd element zijn eigen stapelverband door hun position en z-index waardes. De hiërarchie van de stapelverbanden is als volgt georganiseerd:

- - - -

Het is belangrijk om op te merken dat DIV #4, DIV #5 en DIV #6 kinderen zijn van DIV #3, dus het stapelen van deze elementen gebeurd volledig binnen DIV #3. Wanneer het stapelen binnen DIV #3 is voltooid, wordt DIV #3 met haar kinderen gestapeld binnen de volgende stapelverband, namelijk die van het root element <html>.

- -
-

Notes:

- - -
- -

Voorbeeld

- -

HTML

- -
<div id="div1">
-  <h1>Division Element #1</h1>
-  <code>position: relative;<br/>
-  z-index: 5;</code>
-</div>
-
-<div id="div2">
-  <h1>Division Element #2</h1>
-  <code>position: relative;<br/>
-  z-index: 2;</code>
-</div>
-
-<div id="div3">
-  <div id="div4">
-    <h1>Division Element #4</h1>
-    <code>position: relative;<br/>
-    z-index: 6;</code>
-  </div>
-
-  <h1>Division Element #3</h1>
-  <code>position: absolute;<br/>
-  z-index: 4;</code>
-
-  <div id="div5">
-    <h1>Division Element #5</h1>
-    <code>position: relative;<br/>
-    z-index: 1;</code>
-  </div>
-
-  <div id="div6">
-    <h1>Division Element #6</h1>
-    <code>position: absolute;<br/>
-    z-index: 3;</code>
-  </div>
-</div>
-
- -

CSS

- -
* {
-  margin: 0;
-}
-html {
-  padding: 20px;
-  font: 12px/20px Arial, sans-serif;
-}
-div {
-  opacity: 0.7;
-  position: relative;
-}
-h1 {
-  font: inherit;
-  font-weight: bold;
-}
-#div1,
-#div2 {
-  border: 1px dashed #696;
-  padding: 10px;
-  background-color: #cfc;
-}
-#div1 {
-  z-index: 5;
-  margin-bottom: 190px;
-}
-#div2 {
-  z-index: 2;
-}
-#div3 {
-  z-index: 4;
-  opacity: 1;
-  position: absolute;
-  top: 40px;
-  left: 180px;
-  width: 330px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-  padding: 40px 20px 20px;
-}
-#div4,
-#div5 {
-  border: 1px dashed #996;
-  background-color: #ffc;
-}
-#div4 {
-  z-index: 6;
-  margin-bottom: 15px;
-  padding: 25px 10px 5px;
-}
-#div5 {
-  z-index: 1;
-  margin-top: 15px;
-  padding: 5px 10px;
-}
-#div6 {
-  z-index: 3;
-  position: absolute;
-  top: 20px;
-  left: 180px;
-  width: 150px;
-  height: 125px;
-  border: 1px dashed #009;
-  padding-top: 125px;
-  background-color: #ddf;
-  text-align: center;
-}
- -

Resultaat

- -

{{ EmbedLiveSample('Example', '100%', '396') }}

- -

Zie ook

- - - -
-

Original Document Information

- - -
diff --git a/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..2256b38632 --- /dev/null +++ b/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,239 @@ +--- +title: Het stapelverband +slug: Web/CSS/CSS_Positioning/Understanding_z_index/De_stapelcontext +tags: + - CSS + - Geavanceerd + - Gids + - Referentie + - Stapelverband + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +
{{cssref}}
+ +

Het stapelverband (stacking context) is een driedimensionale conceptualisatie van HTML-elementen langs de denkbeeldige z-as ten opzichte van de gebruiker, van wie wordt aangenomen dat deze wordt geconfronteerd met de viewport of de webpagina. HTML-elementen bezetten deze ruimte in prioriteitsvolgorde op basis van elementattributen.

+ +

Het stapelverband

+ +

In het vorige deel van dit artikel, z-index gebruiken, wordt de weergavevolgorde van bepaalde elementen beïnvloed door hun z-indexwaarde. Dit gebeurt omdat deze elementen speciale eigenschappen hebben waardoor ze een stapelverband vormen.

+ +

Een stapelverband wordt gevormd, waar dan ook in het document, door elk element in de volgende scenario's:

+ + + +

Binnen zo'n stapelverband worden onderliggende elementen gestapeld volgens dezelfde regels die eerder zijn uitgelegd. Belangrijk is dat de z-indexwaarden van de onderliggende stapelverbanden alleen betekenis hebben binnen het stapelverband van hun ouder element. Stapelverbanden worden atomair behandeld als een enkele eenheid in de ouders' stapelverband.

+ +

Samengevat:

+ + + +
Opmerking: de hiërarchie van stapelverbanden is een subset van de hiërarchie van HTML-elementen, omdat alleen bepaalde elementen stapelverbanden maken. We kunnen zeggen dat elementen die hun eigen stapelverbanden niet creëren, worden geassimileerd door de ouders' stapelverband.
+ +

Het voorbeeld

+ +

Example of stacking rules modified using z-index

+ +

In dit voorbeeld creeërt elk gepositioneerd element zijn eigen stapelverband door hun position en z-index waardes. De hiërarchie van de stapelverbanden is als volgt georganiseerd:

+ + + +

Het is belangrijk om op te merken dat DIV #4, DIV #5 en DIV #6 kinderen zijn van DIV #3, dus het stapelen van deze elementen gebeurd volledig binnen DIV #3. Wanneer het stapelen binnen DIV #3 is voltooid, wordt DIV #3 met haar kinderen gestapeld binnen de volgende stapelverband, namelijk die van het root element <html>.

+ +
+

Notes:

+ + +
+ +

Voorbeeld

+ +

HTML

+ +
<div id="div1">
+  <h1>Division Element #1</h1>
+  <code>position: relative;<br/>
+  z-index: 5;</code>
+</div>
+
+<div id="div2">
+  <h1>Division Element #2</h1>
+  <code>position: relative;<br/>
+  z-index: 2;</code>
+</div>
+
+<div id="div3">
+  <div id="div4">
+    <h1>Division Element #4</h1>
+    <code>position: relative;<br/>
+    z-index: 6;</code>
+  </div>
+
+  <h1>Division Element #3</h1>
+  <code>position: absolute;<br/>
+  z-index: 4;</code>
+
+  <div id="div5">
+    <h1>Division Element #5</h1>
+    <code>position: relative;<br/>
+    z-index: 1;</code>
+  </div>
+
+  <div id="div6">
+    <h1>Division Element #6</h1>
+    <code>position: absolute;<br/>
+    z-index: 3;</code>
+  </div>
+</div>
+
+ +

CSS

+ +
* {
+  margin: 0;
+}
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+div {
+  opacity: 0.7;
+  position: relative;
+}
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+#div1,
+#div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+#div2 {
+  z-index: 2;
+}
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: center;
+}
+ +

Resultaat

+ +

{{ EmbedLiveSample('Example', '100%', '396') }}

+ +

Zie ook

+ + + +
+

Original Document Information

+ + +
diff --git a/files/nl/web/css/voor_beginners/index.html b/files/nl/web/css/voor_beginners/index.html deleted file mode 100644 index e2b167686e..0000000000 --- a/files/nl/web/css/voor_beginners/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Voor Beginners -slug: Web/CSS/Voor_Beginners -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

-

-

Introductie

-

Deze cursus is een introductie op Cascading Style Sheets (CSS). Het begeleid je door de basis eigenschappen van CSS met praktische voorbeelden die je zelf kan proberen op je eigen computer. Het is opgedeeld in twee delen. -

- - -

Deze cursus is gebaseerd op de CSS 2.1 Specificatie. -

-

Wie zou deze cursus moeten gebruiken?

-

Deze cursus is grotendeels voor beginners, maar je kan het ook gebruiken als je al wat ervaring hebt met CSS. -

Als je een beginner bent met CSS, gebruik dan Deel I van deze cursus om te begrijpen wat CSS is en hoe je het moet gebruiken. Gebruik vervolgens Deel II om te leren hoe je CSS gebruikt in Mozilla. -

Als je al wat CSS kent, kan je de delen van de cursus overslaan die je al kent, en alleen de delen lezen die je interesseren. -

Als je ervaren bent met CSS maar niet in Mozilla, kun je direct naar Deel II gaan. -

-

Wat heb je nodig voordat je begint?

-

Om het beste uit deze cursus te halen, heb je een editor nodig voor tekstbestanden en een Mozilla browser (Firefox of Mozilla Suite). Je moet ook weten hoe je deze moet gebruiken voor basishandelingen. -

Als je geen bestanden wilt veranderen, dan kun je alleen de cursus lezen en naar de plaatjes kijken, maar dat is een minder effectieve manier om te leren. -

Voor een aantal delen van deze cursus kan andere Mozilla software nodig zijn. Als je geen andere Mozilla software wil downloaden hoef je deze delen niet te volgen. -

Let op: CSS zorgt voor een manier om met kleur te werken, dus delen van deze cursus hebben kleuren nodig. Je kunt deze delen van de cursus alleen makkelijk gebruiken als je een kleurenscherm en normaal kleurenzicht hebt. -

-

Hoe je deze cursus moet gebruiken

-

Om deze cursus goed te gebruiken moet je de pagina's aandachtig en in volgorde lezen. Als je een pagina overslaat kan het moeilijk zijn latere pagina's te begrijpen. -

Gebruik de Informatie sectie op elke pagina om te begrijpen hoe CSS werkt. Gebruik de Actie sectie om CSS te proberen op je eigen computer. -

Om je begrip te testen, gebruik de uitdaging aan het einde van elke pagina. Uitkomsten voor sommige van deze uitdagingen worden op latere pagina's in de cursus bekend gemaakt. -

Om dieper in te gaan op CSS, lees de informatie die je kunt vinden in de kaders benoemd "Meer details". Gebruik de links daar om referentiemateriaal te vinden over CSS. -

-

Cursus Deel I

-

Een basis stap-voor-stap gids. -

-
  1. Wat is CSS? -
  2. Waarom CSS Gebruiken? -
  3. Hoe CSS Werkt -
  4. 'Cascading' en nalatenschap -
  5. Selectors -
  6. Leesbaar CSS -
  7. Text Stijlen -
  8. Kleur -
  9. Inhoud -
  10. Lijsten -
  11. Kaders -
  12. Layout -
  13. Tabellen -
  14. Media -
-

Cursus Deel II

-

Voorbeelden die CSS in Mozilla laten zien. -

-
  1. JavaScript -
  2. XBL Bindingen -
  3. CSS en XUL -
  4. CSS en SVG -
  5. XML data -
-{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "ja": "ja/CSS/Getting_Started", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar" } ) }} -- cgit v1.2.3-54-g00ecf