De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

CSS Cascading Style Sheets. CSS code HTML – Welke elementen op een pagina – Stuk code zegt iets over één element CSS – Hoe zien de elementen er precies.

Verwante presentaties


Presentatie over: "CSS Cascading Style Sheets. CSS code HTML – Welke elementen op een pagina – Stuk code zegt iets over één element CSS – Hoe zien de elementen er precies."— Transcript van de presentatie:

1 CSS Cascading Style Sheets

2 CSS code HTML – Welke elementen op een pagina – Stuk code zegt iets over één element CSS – Hoe zien de elementen er precies uit? – Stuk code zegt iets over meerdere elementen

3 Properties Eigenschappen (properties) bepalen hoe element eruit ziet – height – background-color – vele anderen… – 250+ –

4 Selector Selector geeft aan welke elementen Properties geven aan hoe ze eruit zien h3 { font-size: 20px; color: red; } HTMLCSS Selecteer op tag (type element)

5 Class selector.large-font { font-size: 99px; } HTMLCSS Selecteer op class (speciaal attribute)

6 Class selector p.large-font { font-size: 99px; } HTMLCSS Selecteer op tag met class

7 Class selector.link { cursor: pointer; }.green { color: green; }.purple { color: purple; } HTMLCSS Meerdere classes per element

8 Id selector #title { border-width: 3px; }.green { color: green; } HTMLCSS Selecteer op id (speciaal attribute) en/of op class

9 Combineren Operatie op/tussen selector(s) – Geeft nieuwe selector Operaties aan elkaar rijgen dus! – ((4 + 5) / 3) * 2) – #main p > h3::first-letter rs.asp rs.asp – 50+ selectors/operaties

10 #main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

11 #main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

12 #main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

13 #main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

14 #main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

15 #main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

16 #main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

17 Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar

18 Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar

19 Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar ol { } Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar

20 Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty { }

21 Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty, { }

22 Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty, ul { }

23 Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty, ul:empty { }

24 Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty, ul:empty { visibility: }

25 Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty, ul:empty { visibility: hidden; }

26 Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty, ul:empty { visibility: hidden; }

27 Opdracht Lever in bestand opdracht-2.css in moodle (Exacte Vakken > Informatica > V4_in1) met daarin CSS code voor het volgende: De achtergrondkleur van oneven rijen in tabellen met class “striped” is lichtblauw, de achtergrondkleur van even rijen in tabellen met class “striped” is wit


Download ppt "CSS Cascading Style Sheets. CSS code HTML – Welke elementen op een pagina – Stuk code zegt iets over één element CSS – Hoe zien de elementen er precies."

Verwante presentaties


Ads door Google