Live
x
<html> <head> <title>Tag style</title> <!-- Dla przypomnienia: tak wygląda komentarz wewnątrz kodu HTML --> <!-- Tag <style> umieszczamy wewnątrz znacznika <head> --> <style> /* Tak wstawiamy komentarze w CSS */ /* Możemy stylować również tag <body> */ body { margin: 20px; } /* Poniższy blok ostyluje wszystkie znaczniki <article> */ article { margin: 50px 20px; font-family: sans-serif; } /* Poniższy blok ostyluje wszystkie znaczniki <span> */ span { color: red; } /* Poniższy blok ostyluje wszystkie znaczniki <span> znajdujące się wewnątrz znacznika <h1> nadpisując tym samym kolor z poprzedniej reguły. */ h1 span { color: blue; background: lightblue; padding: 2px 10px; border-radius: 8px;; } /* Style dla przycisku */ button { margin-left: 30px;; padding: 10px 20px; border: 2px solid red; background: green; color: white; border-radius: 20px; width: 200px; cursor: pointer; } </style> </head> <body> <h1>Przykład użycia Tagu <span>style</span></h1> <article> <span> Daj, ać ja pobruszę, a ty poczywaj </span> </article> <div> <span>Potwierdź wybór przyciskiem:</span> <button>OK</button> </div> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.