Html Og Css Hjaelpevaerktojer

Hjælpeværktøj til CSS

Flere browsere (fx Chrome og Safari) kommer med uundværlige hjælpeværktøjer til at redigere direkte i siders HTML og CSS. Chrome Dev Tools er en af disse værktøjer. På en vilkårlig side du ser i Google Chrome, aktiverer du hjælpeværktøjet ved at trykke Ctrl-Shift-I eller ved at højreklikke på et HTML element i siden og klikke på "Inspect Element".

Vi tager udgangspunkt i jeres blog. Højreklik på overskriften "Seneste Blog Indlæg" og klik på "Inspect Element".
dev-tools-init.png
Dev Tools viser sig nederst i vinduet. Til venstre er HTMLen og til højre er CSSen for overskriften. Ved at bevæger musen hen over CSS reglerne får du mulighed for at ændre i reglerne og slå dem til og fra.

Der eksisterer en regl for h1,h2,og h3 tags. Lad os ændre fonten, farven, og karaterbredden for denne. Bemærk: programmet prøver selv at færdiggøre CSS egenskaberne og deres værdier når du begynder at taste.
dev-tools-change.png

Når du er færdig med at foretage ændringer kan du enten kopiere dine ændringer ind i dit stylesheet, eller du kan gemme det direkte fra værktøjet. Dette gøres ved at klikke på style.css i reglen og herefter højreklikke og klik på 'gem som', og overskriv style.css i dit blog bibliotek.

Ekstra resurser

Medmindre andet er angivet, er indholdet af denne side licenseret under Creative Commons Attribution-NonCommercial 3.0 License