Składnia styli
-
Style określone w sekcji head dokumentu html oraz style zewnętrzne.
Składnia podstawowa:
selektor1 [, selektor2 ... ] {cecha1:wartość1 [; cecha2:wartość2 ... ]}
Składnia z podaniem wartości atrybutu class:
[selektor].wartość_atrybutu {cecha1:wartość1 [; cecha2:wartość2 ... ]}
Składnia z podaniem wartości atrybutu id:
[selektor]#wartość_atrybutu {cecha1:wartość1 [; cecha2:wartość2 ... ]}
Składnia kontekstowa:
selektor1 [selektor2 ...] {cecha1:wartość1 [; cecha2:wartość2 ... ]}
-
Style określone w znacznikach sekcji body dokumentu html.
Atrybut style:
style = "cecha1:wartość1 [; cecha2:wartość2 ... ]"
Uwagi i objaśnienia:
selektor - znacznik bez ogranicznika < i >
[element] - element opcjonalny
W składni kontekstowej można umieścić selektor z podaniem nazwy atybutu class lub id.
Przykłady różnych składni
Składnia podstawowa:
<html>
<head>
<style type="text/css">
/*
dla każdego akapitu określamy
styl color o wartości green
*/
p {color:green}
</style>
</head>
<body>
<!-- Wszystkie akapity na stronie -->
<!-- będą miały kolor zielony. -->
<p>Zielony akapit.</p>
<p>Zielony akapit.</p>
<p>Zielony akapit.</p>
</body>
</html>
Składnia z podaniem wartości atrybutu class:
Przykład 1
<html>
<head>
<style type="text/css">
/*
dla każdego akapitu, który należy do klasy
zielony określamy styl color o wartości green
*/
p.zielony {color:green}
</style>
</head>
<body>
<!-- Akapity z atrybutem class o wartości -->
<!-- "zielony" będą miały kolor zielony. -->
<p class="zielony">Zielony akapit.</p>
<p>Zwykły akapit.</p>
<p class="zielony">Zielony akapit.</p>
</body>
</html>
Przykład 2
<html>
<head>
<style type="text/css">
/*
dla każdego akapitu, który należy do klasy
zielony określamy styl color o wartości green
*/
p.zielony {color:green}
</style>
</head>
<body>
<!-- Akapit z atrybutem class o wartości -->
<!-- "zielony" będzie miał kolor zielony. -->
<!-- Tytuł h4 z atrybutem class o wartości -->
<!-- "zielony" będzie miał kolor tekstu. -->
<p>Zwykły akapit.</p>
<p class="zielony">Zielony akapit.</p>
<h4>Zwykły tytuł h4.</h4>
<h4 class="zielony">Zwykły tytuł h4.</h4>
</body>
</html>
Przykład 3
<html>
<head>
<style type="text/css">
/*
dla każdego znacznika, który należy do klasy
zielony określamy styl color o wartości green
*/
.zielony {color:green}
</style>
</head>
<body>
<!-- Akapit z atrybutem class o wartości -->
<!-- "zielony" będzie miał kolor zielony. -->
<!-- Tytuł h4 z atrybutem class o wartości -->
<!-- "zielony" będzie miał kolor zielony. -->
<p>Zwykły akapit.</p>
<p class="zielony">Zielony akapit.</p>
<h4>Zwykły tytuł h4.</h4>
<h4 class="zielony">Zielony tytuł h4.</h4>
</body>
</html>
Składnia z podaniem wartości atrybutu id:
Przykład 1
<html>
<head>
<style type="text/css">
/*
dla akapitu z identyfikatorem zielony
określamy styl color o wartości green
*/
p#zielony {color:green}
</style>
</head>
<body>
<!-- Akapit z atrybutem id o wartości -->
<!-- "zielony" będzie miał kolor zielony. -->
<p>Zwykły akapit.</p>
<p id="zielony">Zielony akapit.</p>
<p>Zwykły akapit.</p>
<!-- W dokumencie html może być tylko jeden znacznik z atrybutem id="zielony". -->
</body>
</html>
Przykład 2
<html>
<head>
<style type="text/css">
/*
dla akapitu z identyfikatorem zielony
określamy styl color o wartości green
*/
p#zielony {color:green}
</style>
</head>
<body>
<!-- Tytuł h4 z atrybutem id o wartości -->
<!-- "zielony" będzie miał kolor tekstu. -->
<h4>Zwykły tytuł h4.</h4>
<h4 id="zielony">Zwykły tytuł h4.</h4>
<h4>Zwykły tytuł h4.</h4>
<!-- W dokumencie html może być tylko jeden znacznik z atrybutem id="zielony". -->
</body>
</html>
Przykład 3
<html>
<head>
<style type="text/css">
/*
dla znacznika z identyfikatorem zielony
określamy styl color o wartości green
*/
#zielony {color:green}
</style>
</head>
<body>
<!-- Tytuł h4 z atrybutem id o wartości -->
<!-- "zielony" będzie miał kolor zielony. -->
<h4>Zwykły tytuł h4.</h4>
<h4 id="zielony">Zielony tytuł h4.</h4>
<h4>Zwykły tytuł h4.</h4>
<!-- W dokumencie html może być tylko jeden znacznik z atrybutem id="zielony". -->
</body>
</html>
Składnia kontekstowa:
<html>
<head>
<style type="text/css">
/*
dla każdego znacznika span, który zawiera się w
tytułach h2 określamy styl color o wartości green
*/
h2 span {color:green}
</style>
</head>
<body>
<!-- Wyraz zielony w tytule h2 -->
<!-- będzie miał kolor zielony. -->
<h2>Wyraz <span>zielony</span> ma kolor <span>zielony</span>.</h2>
<h3>Wyraz <span>zielony</span> ma kolor <span>tekstu</span>.</h3>
</body>
</html>
Style określone w znacznikach sekcji body dokumentu html:
<html>
<head>
</head>
<body>
<!-- Akapit z atrybutem style o wartości -->
<!-- "color:green" będzie miał kolor zielony. -->
<p>Zwykły akapit.</p>
<p style="color:green">Zielony akapit.</p>
<p>Zwykły akapit.</p>
</body>
</html>