1. Selektor prosty
p
{
color: red;
font-size: arial, serif,
veranda;
}
2. Selektory uniwersalne
* lub body= dodanie wcześniej gwiazdki
oznacza zapewnie formatowania takiego samego dla całej strony
3. Selektory potomka= gdy część
znacznika chcemy różnie formatować
p
{
color: red;
font-size: arial, serif,
veranda;
}
p span
{
color: blue;
}
A <span></span> umieszczamy
między tekstem, który ma przyjąć odpowiednie wytyczne.
4. Selektor dziecka=dotyczący danego
akapitu
p > span
{
color: blue;
}
5. Selektor rodzeństwa-zapewnienie
selektorom znacznikom sąsiadującym
p + span
{
color: blue;
}
6. Selektor atrybutu-nagłówki
sformatować na nieco innych sposób
h2[title=niebieski]
{
color: blue
}
teraz do nagłówka w html dać atrybut
tible="niebieski"
h2[title=duzy]
{
font-size: 18px;
}
7. Tworzenie identyfikatora do akapitów
p
{
color: red;
font-size: arial, serif,
veranda;
}
#kolor
{
color: green;
}
np. w html atrubut do znacznika
id="kolor"
8. Klasy
p.czerwony
{
color: red
}
p.green
{
color:green
}
Przypisanie do akapitów w html:
do pierwszego akapitu klasę1, do
drugie klasę 2.
Do pierwszego akapitu atrybut
class="czerwony".tak samo w drugim przypadku
9.uniwersalna klasa-stosowana do
różnych elementów
.zielony
{
color: green;
}
Można ją stosować jako atrybut
class="" wszędzie w dokumencie html( do znaczników)
10. Pseudo klasy
a:link zwykły kolor odnośnika
{
color: red;
}
a:visited Odnośnik
odwiedzony
{
color: blue;
}
a:hover odsyłacz po najechaniu na
odnośnik
{
color: green;
}
11. Grupowanie-przyznanie selektorów do
kilku elementów na stronie
p, h1, h2
{
color: blue
}
12. Dodawanie do grupowych innych
selektorów
p, h1, h2
{
color: blue
}
h1
{
font size: 18px;
}
13. Dziedziczenie
jednolity kolor dla całej strony
body
{
color: green;
}
p
{
color: red;
}
14. Formatowanie tabeli
-utworzenie tabeli w html
w css:
table
{
color: blue;
}