PHP: strefaphp.net
PHP: strefaphp.net
PHP: strefaphp.net / artykuły / html / Dołączanie pliku css oraz tworzenie klas i pseudoklas
home
dodaj news'a
dodaj art'a
zarejestruj się
forum
bbcode generator
SlaVee - bot irc
txtDB
o stronie
współpraca
reklama
skład
kontakt
mapa strony
działy
artykuły [63]
php [28]
mysql [5]
html, css [4]
recenzje [20]
inne [6]
download
linkownia
Tanie hotele na świecie
Alegro aukcje internetowe online
manual php
Szukaj dla:

statystyka
Mamy 1827 zarejestrowanych użytkowników

Online ludków

Ostatnio zarejestrował się nandis
 
Czy odwiedziłeś już te strony? -
dodał: Vengeance

Opis artykułu dodano: 22-08-2004 00:54
W tym arcie opiszę od podstaw dołączanie pliku kaskadowych arkuszy stylów oraz tworzenie klas i pseudoklas.
dodał: sm00f | autor: sm00f | czytano: 6923 razy

Inne materiały do artykułu

Dołączanie pliku css oraz tworzenie klas i pseudoklas
---/Spis Treści/---
1. Krótki opis zagnieżdżania pliku css w stronie html.
2. Składnia kaskadowego arkusza stylów.
3. Tworzenie klas, przykłady zastosowania.
4. Tworzenie pseudoklas, przykłady zastosowania.
5. Przykładowy plik css.
---/ /---

---1.---
Normalnie podczas osadzania klas w pliku html trzeba wpisać w sekcji <head>:

Kod:


<style type="text/css">
/* tutaj arkusz stylów */
</style>


Jest to jednak rozwiązanie nie zbyt dobre, ponieważ przy posiadaniu większej ilości plików trzeba by było kopiować wszędzie ten sam fragment kodu, co w efekcie wydłużałoby znacznie ładowanie strony oraz stwarzało problemy przy tworzeniu jakichkolwiek zmian w stylach. Naszczęście można stworzyć jeden, pojedyńczy plik css (napisany np. w notatniku), a na każdej podstronie wpisać w sekcji <head> odwołanie do niego:

Kod:


<link rel="stylesheet" href="style.css" type="text/css">


Plik style.css powinien zawierać czysty kod css bez żadnych znaczników html, ponieważ tylko wtedy plik style.css poprawnie zincluduje się do strony.

---2. Składnia kaskadowego arkusza stylów.---
Składnia css - klasa:

Kod:


nazwa_klasy {
    atrybut1: wartość1;
    atrybut2: wartość2;
}


Powyższy kod spowoduje stworzenie klasy "nazwa_klasy". W składni najważniejszymi rzeczami są nawiasy klamrowe, które definiują początek i koniec klasy, dwukropki, które wskazują na początek wartości (często mylone ze znakiem "=") oraz średniki, które definiują koniec atrybutu.

Składnia css - pseudoklasa:

Kod:


.nazwa_pseudoklasy {
    atrybut1: wartość1;
    atrybut2: wartość2;
}



Składnia css - kilka klas:

Kod:


nazwa_klasy1, nazwa_klasy2, nazwa_klasy3 {
    atrybut1: wartość1;
    atrybut2: wartość2;
}



--3. Tworzenie klas, przykłady zastosowania.--
Aby stworzyć klase, trzeba się posłużyć powyższym wzorcem. Za nazwę klasy może posłużyć dowolny tag html.

Kod:


p {
    color: red;
}


Powyższy kod spowoduje, że text zawarty we wszystkich znacznikach <p> na stronie html będzie koloru czerwonego. Tak więc, kod <p>Css jest super</p> spowoduje wyświetlenie w przeglądarce napisu "Css jest super" w kolorze czerwonym.

Kod:


p, span {
    background-color: white; 
    font-family: arial, times new roman; 
    font-weight: bold; 
    color: blue; 
    font-size: 20pt; 
    text-align: center;
}


Ten kod spowoduje, że wszystkie znaczniki <p> i <span> będą miały zadeklarowany w tym arkuszu wygląd (biały kolor tła, czcionka arial lub alternatywna times new roman, pogrubiony text, niebieskiego koloru, wielkości 20 pt, wyśrodkowany). Jeśli deklarujemy kilka właściwości, właściwości muszą być rozdzielone przecinkiem.

---4. Tworzenie pseudoklas, przykłady zastosowania.---
Aby stworzyć pseudoklase, należy przed jej nazwą postawić kropkę:

Kod:


.pseudoklasa1 {
    color: blue;
    font-size: 20pt;
}


Aby wywołać powyższą pseudoklasę, należy w znaczniku html dodać atrybut class="pseudoklasa1":

Kod:


<p class="pseudoklasa1">
    Tutaj text, który ma właściwości pseudoklasa1, tj bedzie niebieski o rozmiarze 20         pt.
</p>



---5. Przykładowy plik css.---
Przykładowy plik css może wyglądać tak:

Kod:


/* przykładowy plik style.css */
p {
    font-family: times new norman; 
    font-size=15pt; 
    color:white; 
    text-align:left;
}
.max {
    font-family: times new norman; 
    font-size=30pt; 
    color:red; 
    text-align:center;
}
a:link {
    color:yellow; 
    text-decoration:none;
}
a:visited {
    color:yellow; 
    text-decoration:none;
}
a:hover {
    color:#ACFF88; 
    text-decoration:none;
}
body {
    background-color: black;
}


Jeśli chcemy zastosować komentarz, możemy go umieścić pomiędzy znakami "/*" a "*/". "a:link", "a:visited" oraz "a:hover" również są pseudoklasami. Odnoszą się do linków (a:link - normalny link, a:visited - link odwiedzony, a:hover - link w trakcie najechania myszką).

Więcej informacji na temat kaskadowych arkuszy stylu (dokładne opisy atrybutów itp. itd.) można znaleźć na stronie http://www.w3schools.com/css/default.asp .

Jeśli coś pominąłem, proszę pisać na mojego e-maila w celu wyjaśnienia.

Przyjemnego tworzenia własnych kaskadowych arkuszy stylów!
logowanie
Login:
Hasło:

Zapamiętaj

Przypomnij hasło
Zarejestruj się
na forum
GG w PHP - znak nowe...
Edytor PHP...
Wielka Bitwa o kasę...
mail() - nie działa ...
insert danych do tab...
[MySQL] Wyświetlanie...
Pytanie o Delphi for...
[php/flash] problem ...
wyjasnienie php.iini...
[sprzedam] Rozbudowa...
najnowsze arty
Strona z 3kolumnami oparta na DIVach
emotikony
Software Developers&#8217; Journal, Czerwiec 2007
SDJ Extra - XOOPS, profesjonalny CMS
PHP Solutions Nr 3/2007
Internet Maker Nr 2/2007
Software Developer's Journal / Kwiecień 2007
Internet Maker Nr 1/2007
PHP Solutions Nr 2/2007
Software Developer's Journal / Marzec 2007
PracaIT
PHP: strefaphp.net
wyślij email informacje forum download skrypty katalog kursy porady artykuły home współpraca reklama kontakt