2011-10-31 14:40:22

Jak łączyć klasy

Obstylowując strony internetowe często używamy identycznych ustawień dla tych samych właściwości różnych elementów. Np. mamy pogrubione i powiększone fragmenty tekstu i nagłówki tabel, wyrównane do prawej nagłówki h3 i grafiki, pochylone i kolorowe nagłówki i linki. Jednocześnie każdy element ma nieco inne zestawienie tych właściwości. Nagłówki tabel i nagłówki h2 są dodatkowo wyśrodkowane, a fragmenty tekstu i części wykreślone są zapisane na zmienionym tle, a czym bardziej złożona strona, tym większa ilość kombinacji. Skutkiem tego jest coraz bardziej rozbudowany plik css.

Zaprezentuję to na przykładzie. Załóżmy, że chcę osiągnąć na stronie efekt jak w poniższej ramce.

Tekst

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor molestie dui, bibendum ullamcorper tortor sodales id. Suspendisse porttitor, lacus eget faucibus faucibus, tortor arcu eleifend est, id vehicula ligula magna et dolor. Duis ligula neque, aliquam quis egestas a, hendrerit vel lectus. Duis nec lectus lacus, sit amet adipiscing nibh. Pellentesque ultricies laoreet dapibus. Nam ut turpis quis felis adipiscing tincidunt. Cras ut massa dolor, ut ultricies tortor. Mauris id neque sed elit porta tempor sit amet sed urna. ~~Phasellus lacinia diam a ligula~~ lobortis non semper mauris gravida.

Grafika

Tabela

A	B	C
Lorem ipsum dolor sit amet, consectetur adipiscing elit.		Phasellus tempor molestie dui, bibendum ullamcorper tortor sodales id.
Suspendisse porttitor, lacus eget faucibus faucibus, tortor arcu eleifend est, id vehicula ligula magna et dolor.	Duis ligula neque, aliquam quis egestas a, hendrerit vel lectus.	Cras ut massa dolor, ut ultricies tortor.

Wyróżnione fragmenty tekstu są ujęte w znaczniki span z nadaną klasą wazne, grafika jest zawarta w bloku div z klasą prawe. Standardowo style dla tej ramki wyglądałyby następująco:

h2
{
	text-align: center;
	font-style: italic;
	color: #00cc00;
}
 
h3
{
	text-align: right;
	font-style: italic;
	color: #00cc00;
}
 
.wazne
{
	font-size: 120%;
	font-weight: bold;
	display: inline-block;
	background-color: #ccffee;
}
 
a
{
	font-style: italic;
	color: #00cc00;
}
 
del
{
	display: inline-block;
	background-color: #ccffee;
}
 
.prawe
{
	text-align: right;
}
 
thead
{
	font-size: 120%;
	font-weight: bold;
	text-align: center;
}

To skromne w końcu formatowanie można by było nieco uprościć definiując dodatkowe klasy, a usuwając definicje styli dla konkretnych elementów strony:

.wysrodkuj
{
	text-align: center;
}
 
.prawe
{
	text-align: right;
}
 
.pochylone-zielone
{
	font-style: italic;
	color: #00cc00;
}
 
.wazne
{
	font-size: 120%;
	font-weight: bold;
}
 
.tlo
{
	display: inline-block;
	background-color: #ccffee;
}

Elementom strony możemy nadać teraz odpowiednie klasy. Dzięki temu, że jeden element może mieć kilka klas, uzyskujemy wysoką elastyczność i wiele możliwości użycia tych samych definicji styli. Klasy w atrybucie class rozdzielamy spacją. Poniżej prezentuję to na fragmentach przykładu z ramki na początku tego artykułu.

	<h2 class="wysrodkuj pochylone-zielone">Tekst</h2>
 
	<span class="wazne tlo">Suspendisse porttitor</span>
 
	<a class="pochylone-zielone" href="#">Nam ut turpis quis felis adipiscing tincidunt</a>
 
	<del class="tlo" datetime="2011-10-31T12:08:54+00:00">Phasellus lacinia diam a ligula</del>
 
	<h3 class="prawe pochylone-zielone">Grafika</h3>
 
	<div class="prawe" style="text-align: right;">
		<img src="/wp-content/uploads/mini_zawodowy_webmaster.jpg" alt="Zawodowy Webmaster" />
	</div>
 
	<thead class="wazne wysrodkuj">
		<tr><td>A</td><td>B</td><td>C</td></tr>
	</thead>

Pokazana metoda budowania styli części z Was była z pewnością znana, ale wiem, że dla większości będzie to odkrycie, które ułatwi znacznie pracę nad stylami na stronach internetowych.

Ten wpis został opublikowany poniedziałek, 31 Październik 2011 o 14:40 i jest zaszufladkowany do kategorii Darmowe artykuły, Sekrety Webmasterów. Możesz śledzić wszystkie odpowiedzi do tego wpisu poprzezkanał RSS 2.0. Możesz dodać odpowiedź lub trackback ze swojej strony.

6 odpowiedzi do “Jak łączyć klasy”

Marek pisze:

2011-10-31 o 14:51

To tak można!??

Od kilku lat używam styli, ale tego nie wiedziałem. Dzięki.
Joana pisze:

2011-10-31 o 15:36

A można tak w id np id=”menu przycisk” ?
Grego pisze:

2011-10-31 o 16:25

Pozwolę sobie wyrazić pewne wątpliwości na temat klasy „pochylone-zielone”. Po pierwsze jeśli pewniego dnia zdecydujemy zmienić kolor elementów należących do tej klasy, będziemy musieli zmienic nie tylko instrukcję „color: #00cc00″ lecz również i nazwę klasy, bo tylko dla zmylenia przeciwnika można nazywać
„pochylony-zielony” elementy o kolorze np. #FF0000.

Zmiana nazwy klasy wiaże się oczywiście z koniecznością znalezienia i poprawienia wszystkich miejsc, w których została ona użyta, chyba że używamy jakiegoś „sprytnego” edytora, który potrafi interpretować składnię css.

W podanym przykładzie klasa pochylone-zielone została użyta do ustawienia wyglądu dwóch typów elementów, które semantycznie nie wydają się mieć żadnego związku, byłoby więc znacznie lepiej zadeklarować dwie klasy: „tytul” i „kotwica”, mimo iz (na razie) miałyby tą samą zawartość, i użyć ich w odpowiednich miejscach.
W ten sposób, jeśli któregoś dnia dojdziemy do wniosku że tytuł lepiej się wyróżnia jeśli jest czerwony i nie pochlony a kotwice lepsze są niebieskie lecz nadal pochylone, nic nie stoi na przeszkodzie aby to poprawić w dwie minuty, znajdując bez trudu miejsca w skrypcie
w których należy interweniować.

.tytul { color: #FF0000; }
.kotwica { color: #0000CC; font-style: italic; }
tom pisze:

2011-10-31 o 16:56

id powinno być unikatowe w obrębie strony, więc błędem jest zrobienie np:
#menu{
float: left;
}
#przycisk{
border: 1px solid black;
}
a później przypisywanie tego id różnym elementom np:
…
….
Od tego są właśnie klasy
!Leszek Sewastianowicz pisze:

2011-11-01 o 01:05

Grego, częściowo masz rację, ale artykuł był o łączeniu klas, a nie o roli semantyki elementów strony. Oprócz klas można używać też innych selektorów – wszystko powinno mieć swoje uzasadnienie. Zmiany kolorów różnych elementów często wiążą się ze zmianą całego layoutu i wtedy nie ma znaczenia, jak klasy nazywały się poprzednio.

Tom, Joanie chodziło chyba o to, czy można zapisać:
<ul id=”menu przycisk”>
Odpowiedź brzmi: nie można. Jest to nielogiczne i nawet jeżeli jakaś przeglądarka da radę coś z tym zrobić, to nie należy używać tego typu konstrukcji.
Kasia pisze:

2011-11-01 o 21:14

Są plusy i minusy łączenia klas. Wszystko zależy od punktu widzenia i potrzeb. Dla mnie jest to rewelacyjne rozwiązanie i z pewnością zastosuję je w kolejnym projekcie. Do tej pory unikałam tego typu rozwiązań, ale ten wpis mnie do tego przekonał.

Niby proste, a tak ułatwia życie

Dodaj odpowiedź

Musisz się zalogować aby dodać komentarz.