Wiele dokumentow xHTML = wiele CSS Opcje

[y3ti]

Czesc,

Ostatnio glowkuje sobie jak rozwiazac pewnien blachy z pozoru problem.
Mam strone www, ktora sklada sie z powiedzmy 10 dokumentow xhtml.
Kazdy z tych dokumentow budowany jest na podstawie danego szablonu, czyli
ten sam layout.

Problem pojawia sie w momencie kiedy chce, aby np.

1) w pierwszym dokumencie xhtml pierwszy akapit ma byc zielony, drugi czerwony
2) w drugim dokumencie xhtml pierwszy akapit ma byc niebieski, drugi brazowy
3) ....
4) ....
5) i tak dalej.

Chodzi mi o to, ze na kazdej stronie sa inne style css. Tutaj jeden wyraz moze miec kolor inny. Oczywiscie mozna uzyc klasy, ale gdy taki "czerwony akapit" wystepuje tylko w jednym dokumencie xhtml rozwiazanie jest brzydkie. Poza tym
takich oryginalnych fragmentow strony moze byc pelno i co kazdemu dawac klase?

Jedyne co mi przychodzi do glowy to:
- wszystko do jednego globalnego pliku css i tam takie male szczegoly dawac w klasy
- jeden artkusz styli css - globalny w ktorym bedziemy trzymac defincje calego niezmieniajacego sie layoutu, nawigacji oraz podstawowych selektorow dla body, p, h1, h2 itp. a takie oryginalne fragmenty jak czerwony akapit, ktore wystepuja tylko w jednym akapicie robic jako style wewnatrz atrybutu style="" np.

[HTML] pobierz, plaintext 
<p style="color: red">Czerwony tekst</p>
[HTML] pobierz, plaintext 

- trzecie rozwiazanie, ktore m najbardziej by pasowalo to globalne definicje wrzucic do jednego zewnetrznego arkusza stylow oraz by kazda dokument xhtml posiadal swoj wlasny arkusz styli css np:

dokument1.html -> dokument.css
dokument2.html -> dokument.css

I wszystko bylo by ladnie gdyby nie nurtujace pytanie jak to zrealizowac, czy

1) globalny arkusz styli zaladowac poprzez <link rel=".. a drugi umiescic w <style>
2) globalny i lokalny arkusz styli zaladowac poprzez <link rel="..."

Co do punktu drugiego to jak bedzie wygladac sprawa jesli bedziemy robis "skorki" dla strony, czyli alternatywne arkusze stylow?

Z gory dziekuje za cenne uwagi i wskazowki.

[sztosz]

Moim zdaniem to jezeli te akapity różnią sie tylko kolorami, to wrzucić wszystko do jednego arkusza zewnętrznego. I wtedy:

[HTML] pobierz, plaintext 
<p id="jakis_id" class="red">jakiś czerwony tekscior</p>
<p id="jakis_inny_id" class="blue">jakiś niebieski tekscior</p>
[HTML] pobierz, plaintext 

A w CSS:

Kod

/* DEFINICJA WSZELKICH ID ITP, ELEMENTÓW STAŁYCH LAYA */
#jakis_id {
  /* CSS */
}

#jakis_inny_id {
  /* CSS */
}

/* DEFINICJA KOLORÓW AKAPITÓW */
.red {
  background-color:#FF0000;
}
.blue {
  background-color:#0033CC;
}

Ten post edytował sztosz 15.02.2006, 23:58:17

[y3ti]

Tak masz racje - jesli to bedzie prosty przypadek. Z tymi kolkami akapitow, chcialem powiedziec, ze sa elementy na stronie, ktore sa niepowtarzalne na innych (ten akapit pisany wyjatkowa taka i tak czcionka, odpowiednie marginesy, cos jest w ramce, cos ma tlo itp.).

Wyobrazmy sobie duzy serwis internetowy (do 1000 dokumentow xhtml) i w kazdym z nich sa elementy, ktore nie pojawiaja sie nigdzie indziej - badz pojawiaja sie w gora 3 dokumentach (np. nawigacja w dziale artykuly: kategorie, wyswietlanie, komentarze).

Chodzi mi w glownej mierzy o panowanie nad arkuszem css. Oczywiscie mozna wszystko wcisnac do jednego duzego arkusza, ale

1) Taki arkusz styli bedzie strasznie duzo wazyl. Mimo, ze zostanie pobrany tylko raz, to czesto mamy nastepujaca sytuacje. Uzytkownik wchodzi na strone glowna, klika na jeden link i wychodzi zamykajac okno przegladarki. Uzytkownik sciagnie duzy plik css mimo ze np. ok 87% jego definicji selektorow bedzie niepotrzebne (bo nie bedzie czytal newsow, komentarzy, spisu tresci ksiazki itp.)

2) Zarzadzanie takim duzym arkuszem styli jest niewygodne. Sam sie gubie jak mam 100+ roznych definicji w jednym arkuszu

Oczywiscie w niektorych przypadkach podawane przyklady to czysta sztuka dla sztuki, ale w koncu projektowanie www jest sztuka i kazdy chce to robic jak najlepiej.

Pozdrawiam.

Ten post edytował y3ti 16.02.2006, 00:52:30

[gekon]

Ja raczej proponowałbym trzecie rozwiązanie: jeden główny oraz kilka, które zawierają szczegóły charakterystyczne dla danej strony.
Szczegóły ładnie można zrobić nadając id dla elementu body, np:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Strona</title>
</head>
<body id="blue">
 
<p class="first">foo</p>
<p class="second">bar</p>
 
</body>
</html>
[HTML] pobierz, plaintext 

Kod

body#blue p.first { color:#0000FF; }
body#blue p.second { color:#00FF00; }

body#red p.first { color:#FF0000; }
body#red p.second { color:#00FF00; }

A jak wrzucać?

[HTML] pobierz, plaintext 
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />	
<link rel="stylesheet" type="text/css" href="shop.css" media="screen" />
 
<link rel="alternate" type="text/css" href="shop-light.css" media="screen" />
[HTML] pobierz, plaintext 

Ten post edytował gekon 16.02.2006, 21:36:13