«
»
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

Zawodowy Webmaster

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”

  1. 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.

  2. Joana pisze:
    2011-10-31 o 15:36

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

  3. 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; }

  4. 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

  5. !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.

  6. 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.