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.

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+ – http://www.w3schools.com/cssref/default.asp http://www.w3schools.com/cssref/default.asp

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 http://www.w3schools.com/cssref/css_selecto rs.asp http://www.w3schools.com/cssref/css_selecto 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