Inf. dla klas drugich - L. 33

Temat: Formatowanie i style CSS
Kaskadowe arkusze stylów (ang. Cascading Style Sheets ; w skrócie CSS) to język służący do opisu formy prezentacji (wyświetlania) stron WWW.

Ogólny schemat jednego ze sposobów użycia stylów:

<nazwa_znacznika style="nazwa_parametra1: wartość; nazwa_parametra2: wartość"></nazwa_znacznika>

Oto przykład takiego użycia stylów do różnych znaczników:

<p style="text-align: center; color: rgb(0,0,255); font-size: 30px"> </p>
lub

<table style="border-collapse: collapse; border: 1px solid black">

 <tr>

   <td style="Background-color: yellow; padding: 10px"></td>

   <td style="Background-color: blue; padding: 15px"></td>

 </tr>

</table>

Dla akapitów <p></p>:

text-align:  - wyrównanie tekstu

• right - do prawej
• left - do lewej
• center - wyśrodkowany
• justify - wyjustowany

color: - kolor czcionki

• rgb(255,140,0) - system dziesiętny w RGB (składniki: czerwony, zielony, niebieski), każdy parametr zmienia się od 0 do 255 
• FFFFFF - system szesnastkowy w RGB 
• red - słowny opis koloru 
• blue 
• ... 

text-indent:

• 20px – wcięcie dla pierwszej linii akapitu w pikselach. 

Font-size:  - rozmiar czcionki

• 20px – rozmiar w pikselach 

font-family: - nazwa czcionki

• Times New Roman 
• Times 
• Arial 
• Verdana 
• Sherif 
• Sans-sherif 

Dla elementów tabeli <table></table>, <tr> </tr> i <td></td>:

Border: - granica

• 2px solid black – grubość linii krawędzi w pikselach, styl – nieprzerwana linia, koloru czarnego 

border-spacing: -  używane tylko do <table></table>, przestrzeń pomiędzy krawędzią tabeli, a krawędziami poszczególnych komórek

• 0px –  wartość w pikselach 

Pudding:

• 20px – odstęp pomiędzy granicą kontenera (tabeli, komórki, wiersza), a jego zawartością 

Background-color: -  kolor tła

• RGB(0,0,102) ) - system dziesiętny w RGB, każdy parametr zmienia się od 0 do 255 
• FFFFFF - system szesnastkowy w RGB 
• red - słowny 
• blue 
• ... 

border-collapse: - używać tylko do <table></table>

• Separate – rozdzielać komórki 
• Collapse – nie rozdzielać komórki

Zadanie: Pobierz Plik. Powtórz jego zawartość za pomocą HTML i stylów w edytorze http://htmledit.squarefree.com/

Szczegółowe wskazówki co do poszczególnych komórek:

1) rozmiar czcionki 11, Arial

2) rozmiar czcionki 8, Arial

3)rozmiar czcionki  12, Times New Roman odstępy: 15px

4)rozmiar czcionki 10, Verdana, odstępy: 10px

5) rozmiar czcionki odstępy: 20px, rysunek może być dowolny z Internetu