04 marca 2013

Selektory

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;
}