Twoja-Strona.Net - Przykładowy arkusz

To jest przykładowy plik css, który można dołączać do poszczególnych stron dopisując w head strony <link rel="stylesheet" href="nazwa_pliku.css" type="text/css">. Należy pamiętać o scieżce dostępu do pliku css oraz prawidłowym i zgodnym z zasadami doborem parametrów. Pogrubioną trzcionką zaznaczyłem komentarze, które należy usunąć przepisując poszczególne określenia do własnego pliku :)

Określenie body m.innymi marginesów, koloru tła i grafiki tła.

body {
margin: 0;
padding: 0;
BACKGROUND: #4A4D52 url(grafa/tlo.png) repeat;
}

Określenie czcionki dla całego dokumentu, czcionki możemy definiować oddzielnie dla komórek tabel, warstw, elementów formularzy itd..

* {
font-family: verdana, tahoma, arial;
font-size: 11px;
font-weight: normal;
color: #000000;
}

Określenie linków: koloru linków, linków aktywnych w danej chwili, odwiedzonych i podświetlanych (hoover) - w tym przypadku również bez podkreślenia.

A:link {
color: #A0A0A0;
font-size: 11px;
font-family: verdana;
font-style: normal;
font-weight: bold;
text-decoration: none;
}

A:active {
color: #84866B;
font-size: 11px;
font-family: verdana;
font-style: normal;
font-weight: bold;
text-decoration: none;
}

A:visited {
color: #353839;
font-size: 11px;
font-family: verdana;
font-style: normal;
font-weight: bold;
text-decoration: none;
}

A:hover {
color: #ADAEAD;
font-size: 11px;
font-family: verdana;
font-style: normal;
font-weight: bold;
text-decoration: none;
}

Przykładowa tabelka z przykładowymi parametrami, każda tabelka może zawierać inne parametry.

.tabelka {
width: 760px;
height: 55px;
vertical-align: top;
text-align: center;
background: url(grafa/stopka.png) repeat;
padding-top: 18px;
font-weight: bold;
color: #FF0000;
}

Efekt alpha (powodujący rozjaśnianie sie obrazka będącego linkiem po najechaniu na niego kursorem myszy) - działa w IE i Mozilli, nie jest zgodny ze standardami w3c.

.alfa img {
border: 1px solid #000000;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.alfa:hover img {
border: 1px solid #000000;
filter: alpha(opacity=100);
-moz-opacity: 100;
-khtml-opacity: 100;
opacity: 100;
}

Pozioma linia, trzeba przyznać, że najlepiej wygląda w IE.

hr {
color: #293439;
height: 1px;
width: 70%;
}

Brak przejścia w formularzu do nastepnej linii.

form {
display: inline;
}

Parametry elementów formularza:
kolor tła, plik tła, ramki, czcionka.

textarea, input, select {
background: url(grafa/input.png) #6B7173 repeat;
border: 1px solid #000000;
color: #000000;
font-size: 10px;
font-family: verdana;
font-style: normal;
font-weight: normal;
overflow: hidden;
}

Wyróżnienie tekstu np. takiego, który obecnie czytasz.

.trupi {
font-weight: bold;
color: #979980;
}

Przejście do następnego akapitu nie spowoduje dodania pustej linii.

p {
margin: 0px;
}

Dostosowanie suwaków przeglądarki, działa tylko w IE i nie jest zgodne z w3c, parametry dodaj do body jeżeli chcesz używać.

scrollbar-3dlight-color:#637994;
scrollbar-arrow-color:#213839;
scrollbar-base-color:#637994;
scrollbar-darkshadow-color:#637994;
scrollbar-face-color:#637994;
scrollbar-highlight-color:#213839;
scrollbar-shadow-color:#213839;
scrollbar-track-color:#637994;