ugrás a tartalomhoz

CSS alapjai III.

Bártházi András · 2004. Ápr. 20. (K), 22.00
CSS alapjai III.
A cikksorozat harmadik részében folytatjuk a CSS bemutatását, további kiválasztókat fogunk áttekinteni. Fontosnak tartom továbbra is kihangsúlyozni, hogy a szabványt nézzük végig, és nagyon könnyen előfordulhat, hogy nem minden böngésző tudja kezelni az ismertetett megoldásokat. Ez különös tekintettel igaz az ebben a cikkben bemutatandókra. A teljes böngésző támogatás hiánya azonban továbbra sem akadályozza meg olvasóinkat abban, hogy az ilyen kiválasztókat használó megoldásokat vezessenek be extraként oldalaikon. Csak az a fontos, hogy ne ezen múljon az oldal használhatósága.

További kiválasztók

A korábbiakban megismerkedtünk az elem, osztály, azonosító és tulajdonság alapú, továbbá a helyzetérzékeny és szülő-gyermek kapcsolatú kiválasztókkal. Ezek azok a kiválasztók, melyek kézzelfogható blokkokat jelölnek ki: egy-egy elemet annak paraméterként rögzített tulajdonságaitól függően. Ezeken túl azonban léteznek az úgynevezett látszólagos (virtuális) kiválasztók is, melyek vagy az adott elem egy részére illenek (látszólagos elemek), vagy az adott elem állapotától teszik függővé a kiválasztást (látszólagos osztályok). Ebben a részben ezeket fogjuk áttekinteni.

Linkekkel kapcsolatos látszólagos kiválasztók

Aki már egy kicsit is foglalkozott HTML-lel, készített, vagy egyszerűen csak látogatott már weboldalakat, biztosan tudja, hogy a linkek más-más színnel jelennek meg, ha már voltunk az általuk mutatott oldalon, illetve ha még nem. Ezekre a színekre a HTML-ből, a body elem tulajdonságainak (link, vlink) állításával is hatással lehetünk, azonban CSS-t használva, sokkal több lehetőségünk lesz. Látszólagos kiválasztókkal ugyanis külön-külön meghatározhatjuk a megjelenésüket! Ezeket a kiválasztókat a következőképpen használhatjuk:
a         { color: #0000FF; text-decoration: underline; }
a:link    { text-decoration: none; }
a:visited { font-style: italic; }
Az első sor semmi különöset nem tartalmaz, egy link elemnek határozzuk meg a stílusát. A második sorban azokat a linkeket választjuk ki, melyeket még nem látogattunk meg, a harmadik sorban pedig azokat, melyeket már meglátogattunk (nemrég). A két tulajdonság értelemszerűen kizárja egymást.

Dinamikus látszólagos kiválasztók

A HTML dokumentumokat az ember nem szokta egy ültő helyében elolvasni, majd otthagyni. Az egész lényege valahol a dinamizmus: linkekre kattingatunk, adott esetben form elemeket használunk, stb. Az internet már interaktív média, és erre a CSS-t is felkészítették. No, nem kell bonyolult dolgokra gondolni, az eszköztárunk a következő lehetőségeket tartalmazza: az egérkurzor az adott elem felett van, az adott elem éppen aktív, továbbá ha az adott elem éppen fókuszban van.
input        { font-size: 12px; border: 1px solid #000000; background: #ffffff; }
input:hover  { border: 1px solid #0000FF; }
input:active { font-weight: bold; }
input:focus  { background: #dddddd; }
Az első sorban itt sem tettünk semmi különöset, a beviteli mezők tulajdonságait határoztuk meg. A második sorban levő :hover kiválasztó akkor fog működni, ha az adott mező felé visszük az egérkurzort, ekkor kék színnel jelenik meg a kerete. A harmadik sorban azt határozzuk meg, miként jelenjenek meg az aktív elemek. Hogy mit értünk aktív elemen? Azt, amelyikkel éppen csinálunk valamit. Például "megragadjuk", azaz lenyomva tartjuk az egérkurzort, vagy éppen lenyomunk egy gombot, stb. Példánkban ilyenkor az elem betűi vastaggá válnak. Végül a negyedik sorban azt definiáljuk, mi történjen, mikor éppen ki van választva az elemünk, rajta van a fókusz, ebben az esetben éppen a kurzor villog az input mezőnkben. Ehhez a :focus kiválasztóhoz rendelt tulajdonságunkkal éppen azt határoztuk meg, hogy a háttérszíne legyen világosszürke. Fontos megjegyezni, hogy bár a példában éppen beviteli mezőt láttunk, de ez a tulajdonság például a linkekre ugyanúgy működik, mint a közönséges bekezdésekre, vagy más elemre!

Elemszerű látszólagos kiválasztók

A CSS lehetőséget biztosít kiválasztanunk egy-egy elem tartalmának csak bizonyos részeit, mintha azok külön-külön definiált elemek lennének. Ezekkel a látszólagos kiválasztókkal az adott elem első karakterét, vagy akár az első sorát is kiválaszthatjuk.
p:first-letter { font-size: 300%; }
p:first-line   { color: #000080; }
Így az adott betű, vagy az adott sor teljesen úgy fog viselkedni, mintha osztály alapú kiválasztással, például egy div vagy egy span elemmel határoltuk volna. A példa első sora egy bekezdés első betűjének kiválasztását (3-szor nagyobb lesz, mint a bekezdés többi betűje), míg a második sor egy bekezdés első sorának (sötétkék színű lesz) kiválasztását mutatja be.

Első gyermek látszólagos kiválasztó

További lehetőségünk egy adott gyermek elemről eldöntenünk, hogy első-e a sorban. Azaz például ha a body elemen belül szeretnénk, hogy az első (bevezető) bekezdésünk vastagon legyen szedve, a first-child látszólagos osztály kiválasztó ad nekünk lehetőséget erre:
body > p:first-child { font-weight: bold; }
Fontos megjegyeznünk, hogy ha a body dokumentumunkban az első bekezdésünk előtt van egy másik elem (például h1), akkor ez a kiválasztás már nem működik. Azaz nem az első bekezdés elemet, hanem az első bekezdést, amennyiben az az első gyermek elem is, választja ki ez a kiválasztó. Természetesen a következő definíció is elégséges lett volna:
p:first-child { font-weight: bold; }
A különbség a két kiválasztó között, hogy ez utóbbi egy táblázatban levő bekezdés elemekre is illeszkedik, míg az előző csak a közvetlenül a body-ban levőkre.

Nyelv szerinti látszólagos kiválasztó

A HTML-ben, de más leíró nyelveknél is, lehetőségünk van meghatározni hogy milyen nyelven íródott az adott dokumentum (HTML-nél meta elem a fejlécben), vagy adott elemekre is külön definiálhatjuk ezeket. A CSS biztosít számunkra erre is kiválasztót. Hogy a gyakorlatban mire jó ez (amellett, hogy az angol szavakat pirossal, a németeket kékkel, stb. írhatjuk), egyetlen épkézláb példát találtam, meg lehet határozni a segítségével, hogy milyen idézőjelek szerepeljenek a dokumentumban. Ehhez egy speciális tulajdonság elemet használatunk fel, a quote-ot. Íme:

:lang(hu) > q { quotes: '\201E' '\201D' }
:lang(en) > q { quotes: '"' '"' }
Ha a dokumentumunk Content-Language értéke hu, azaz magyar nyelvű dokumentumról van szó, akkor az idézőjelek alul és felül jelennek meg, míg angol nyelvű dokumentumok esetén mind a kettő felül - ha q elemet használunk az idézésekhez.

Elem előtt és után...

Végezetül lássuk a :before és :after kiválasztókat. Ezek segítségével az adott elem előtti és mögötti látszólagos részeket választjuk ki (fontos: nem az előtte levő elemeket, hanem az elem és az előtte levő elem közötti 0 hosszúságú részt). Több trükköt is meg lehet vele valósítani, egy egyszerű, de nagyszerű például:
b:before { content: '<b>'; }
b:after  { content: '</b>'; }
Ezzel a dokumentumunkban láthatóvá válnak a b elemeink, "mintha" a HTML forrást néznénk.

Összefoglalás

Az eddigi részekben gyakorlatilag áttekintettük az összes kiválasztót, illetve azokat a tulajdonságokat, melyeket általában használni szokás a weblapok készítésekor. A következő részben befejezzük a gyakran használt tulajdonságok áttekintését is, hogy utána még izgalmasabb dolgokkal foglalkozhassunk.
 
Bártházi András arcképe
Bártházi András
Az Emarsys-nál dolgozik vezető fejlesztőként, és az API-ért, integrációkért felelős termékmenedzserként. Szeret profi csapatban profit alkotni.
1

elavult html példa

Jano · 2004. Ápr. 21. (Sze), 13.12
Az utolsóként említett before, after kiválasztós példa nem túl szerencsés hiszen a 'b' elem elavultnak, nem szabványosnak számít. Helyette például strong.

A linkeknél jobb mindig megadni a :link kiválasztot mert az
a {}
szabály az oldalon belüli nevesített ugró pontokra is vonatkozik.

Ha valaki probálgatni akarja ezeket a tulajdonságokat akkor IE-t elfeljtheti mert szinte nem támogat ezek közül semmit.
2

Re: elavult html példa

Bártházi András · 2004. Ápr. 21. (Sze), 14.49
A példa valóban nem a legjobb, de nem javítom, mert szerintem így érthetőbb. Fogd fel úgy, hogy te pont az elavultnak nyilvánított elemeket szeretnéd láthatóvá tenni a dokumentumodban, hogy utána eltávolítsd ezeket a belőle. :)

Ha a linknél megadod a :link kiválasztót, akkor az :active kiválsztót is le kell írnod, nem? Szerencsésebb inkább a[href] formában hivatkozni talán a linkekre.

Az IE sajnos tényleg nem támogatja ezeket... Az IE7 kiegészítővel, vagy Gyuris Gellért oldalán levő HTC-kkel lehet azonban ezeket is használni.

-boogie-
3

Hibajelentés

Zorius · 2004. Ápr. 25. (V), 10.25
Üdv.

Nem kötözködni akarok, csak van egy (tényleg!) kis megjelenítési gond.
Az egész cikk az impresszum alá csúszik, ott kezdődik. A hiba valószínű oka: az egyik példasor, ami gondolm preformatált, túl széles, nem fér be a main contentbe, ezért a szélessége miatt, az oldal legalján kezdődik (xp, explorer, 1024). Nem tudom, standard böngészőben mit csinál, mindegy, a felvetésem, hogy a sort törd meg, hogy ne legyen olyan széles. Ez a bűnös:

input { font-size: 12px; border: 1px solid #000000; background: #ffffff; }

bye
4

Ki a bűnös?

Anonymous · 2004. Ápr. 25. (V), 12.38
Szerintem nagy hiba lenne, ha külalaki problémák miatt tartalom változna...
Zorius: inkább azt írd meg, hogy css-ben mit állítsanak át, hogy helyesen jelenjen meg a két-három évvel ezelőtti böngészőkön is. :D
5

Hiba

Zorius · 2004. Ápr. 25. (V), 12.49
A cssben nem nagyon lehet mit változtatni. Ha a main adott szélességű és van egy túl széles preformatált szöveg, akkor az kilóg, nem töri meg a sort, ha nincs elég hely (pont ez a preformat értelme). Ezért egyszerűen azt az egy sort kellene megtörni, nem kellene átírni semmit, a tartalmat sem kellene megváltoztatni.

Amúgy már volt egy-két vitánk a srácokkal, szóval nem akarom már őket cseszegetni ilyenek miatt. Ez egy apró, könnyen javítható hibácska lenne csak...
7

Nem ott van a hiba

Hojtsy Gábor · 2004. Ápr. 25. (V), 14.09
Először is vitának nem nevezném azt, amely eszmecserét megpróbáltunk lefolytatni :) Másodszor is nem ott van a hiba, ahol keresed. Az overflow tulajdonságot használjuk, hogy ami kilóg, az külön scrollozható dobozban jelenjen meg. Ezt az IE-nek is minden probléma nélkül kell támogatnia. Nekem nincs IE-m egyáltalán, úgyhogy nem tudom megnézni, mi más lehet a gubanc, bár egy másik IE bug miatt be kellett vezetni egy-két új dolgot tegnapelőtt, ami lehet, hogy itt most gondot okoz. Amint valakinek jut ideje arra, hogy valódi megoldást adjon, kijavítjuk.
10

Biztos? ;-)

Zorius · 2004. Ápr. 25. (V), 20.13
Nyah. Szoval, igen, standard bongeszoben scrollozhato a cucc es az jo. De sem az IE5.5 sem a 6 nem scrollozza. Es vegul is igy az a hiba, hogy szelesek azok a divek. Tenyleg tamogatniuk kellene az emlitett bongeszoknek, de valahogy megsem. Nem ertem miert. A lenyeg, hogy olyan szeles kb az a hosszu pelda, mint az egesz oldal maga, ezert nem fer be, hanem, az egesz main lecsuszik alulra. Kersz screenshotot?

Jo bogaraszast, majd torom en is a fejem.
11

Poen

Zorius · 2004. Ápr. 25. (V), 20.20
Ja, most vettem eszre, hogy ha egy hozzaszolasra valaszolok, akkor kozvetlenul az utan teszi be, meg ha mas irt is mar elobb. Es beljebb kezdi.
Ez tok jo, tetszik. Azert vannak egesz jo otletek es megvalositasok itt, kezd megtetszeni az oldal...
Ki is probalom
12

Örülök

Hojtsy Gábor · 2004. Ápr. 25. (V), 20.26
Örülök, hogy tetszik valami :) Bár a beljebb kezdést sajnos (még) nem látják az IE tulajdonosok, mert nagyon gányul lehetne megoldani, hogy a bugos böngészőjükben menjen. Én annak örülnék, ha megnéznéd a tokenizer cikket is, mert abban is vannak ilyen overflow-s divek. Az sem korrekt?
6

Megjelenési probléma

TJoe · 2004. Ápr. 25. (V), 12.52
Hi!
Firefox alatt tökéletes a cikk, de IE alatt egy pillanatra feltűnik a helyén, utána a jobb oldali oszlop alatt kezd megjelenni.

:-) TJoe
8

Nekem is jo opera, firefox, m

kmm · 2004. Ápr. 25. (V), 17.13
Nekem is jo opera, firefox, mozilla,galeon,konkveror es netscape alatt!

--
üdv: kmm...
9

azokat a hibakat amik vannak

kmm · 2004. Ápr. 25. (V), 17.14
azokat a hibakat amik vannak 7.5 opera alatt azokat meg mar irtam regebben
--
üdv: kmm...
13

Táblázatok css-el

Anonymous · 2004. Május. 1. (Szo), 22.30
Hi!

Megoldható css-el, hogy pl. egy 500 soros táblázat 3. oszlopát középre, 4. oszlopát pedig jobbra igazítsuk?

Ez dreamweaver-rel összesen négy kattintás, viszont ilyen méretű táblázatnál már +33 kb kódot jelent és a 4000+ soros kódokat már egy 1,6 GHz gépen is nehézkesen kezeli a DW.
Kitaláltam, hogy legyen az egyik oszlop h5 a másik h6, amelyek tulajdonságait felülbírálom a css-ben, de ez nem tűnik túl kúltúráltnak és persze olyan megoldást keresek, ami IE 5-ön is működik.
14

Re: Táblázatok css-el

Bártházi András · 2004. Május. 3. (H), 05.49
Szia!

Igen, megoldható, de nem lesz sokkal takarékosabb - mindegyik cellának be kell állítani egy osztályt. A legrövidebb megoldás: class="c", class="r", a sima HTML-es ugye align="center" és align="right" lenne. Ezután még persze be kell állítani ennek a két osztálynak a stílusát, de az már elenyésző.

Ilyen méretek esetén megfontolandó az egészet JS-ből állítgatni, írni egy kis kódot, ami végigmegy a táblázaton, és beállítja az igazítást. Elég sokat tudsz vele spórolni.

-boogie-
17

col, colgroup

Jano · 2004. Okt. 3. (V), 01.21
Van szep megoldas a dologra: col es colgroup HTML elemek. Ezekkel lehet stilus definiciot adni oszloponkent.

Azonban a stilus definiciok kozul csak nehanyat lehet hasznalni.

Tudni kell, hogy ezek specialis elemek hiszen valojaban a cellak a soroknak a gyermek elemei es a COL vagyis oszlop igy nem jelenik meg a dokumentum faban.

IE alatt szepen megy az igazitas, FireFox alatt nem.

Itt olvashatsz errol többet:

<col> in Mozilla
15

Mi lehet a content tulajdonság?

Anonymous · 2004. Okt. 1. (P), 13.19
Tudja valaki, hogy az :after kiválasztó esetében lehet-e képet betenni a content tulajdonság segítségével? Próbáltam content 'url(...)'; formában, de szövegként értelmezte.
16

Sokminden

Bártházi András · 2004. Okt. 1. (P), 14.34
A szabvány áttekintése lehet ilyenkor az egyedüli üdvözítő út. :) Eszerint a következők lehetnek:

[ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Az URI leírásánál ott van, hogy bármely külső elem lehet, viszont jelen szabvánnyal nem megoldható ehhez ALT, TITLE, vagy bármely más tulajdonság beállítása. Ha a böngésző nem ismeri fel a címen levő állományt, akkor figyelmen kívül kell hagynia.

Amit a hozzászólásodban írsz formátumot, az két dolog miatt is rossz. Egyrészt a content után kettőspont kell, másrészt pedig ha aposztrófok közé teszel valamit, akkor az bizony "string" lesz, s ennek megfelelően meg fog jelenni. A helyes:

kiválasztó { content: url("képed.jpg") }
-boogie-
18

Dinamikus látszólagos kiválasztók példa

jpeter · 2006. Feb. 6. (H), 20.56
Nagyon jó a cikk, sokat segít a CSS elsajátításában és megértésében.
A fenti példában szerintem találtam egy apró hibát, mely a következő:

input:active { font-style: bold; }

A font-style tulajdonságnak nem lehet bold értéke.

Helyesen:
input:active { font-weight: bold; }

vagy

input:active { font-style: italic; }

üdvözlettel: jpeter
19

Jogos

Bártházi András · 2006. Feb. 7. (K), 00.52
Igazad van, javítottam.

-boogie-
20

Kép link-ként

Redback · 2007. Feb. 23. (P), 16.13
Nekem az a problemám,hogy a menümet képekből akarom megcsinálni,de akármit csinálok egy keret(azért mert link) mindig körülötte van.Ezt hogy tudnám kiküszöbölni???
21

előző óra

gex · 2007. Feb. 23. (P), 16.38
előző órán volt róla szó, a keretek címszó alatt...
22

látszólagos kiválasztók

engineer · 2010. Már. 2. (K), 15.36
ezeket a látszólagos kiválasztókat lehet valahogy kombinálni?

Pl. olyat lehet csinálni hogy ha ráviszem az egeret a linkre azaz :hover
akkor tegyen elé > mögé pedig < jelet azaz :before és :after ?

Remélem nem kérdeztem nagy butaságot.
JS megoldás nem érdekel, mindenképpen CSS-el kéne megoldani (ha lehet egyáltalán).
23

Két szabályban

Joó Ádám · 2010. Már. 2. (K), 20.35
Add meg két külön szabályban őket.
24

?

engineer · 2010. Már. 3. (Sze), 14.09
Ezt hogy érted?
Valahogy így gondoltam, csak nem tudom helyes-e:

.link:hover:before { content: '>'; }
.link:hover:after { content: '<'; }
25

Igen

Joó Ádám · 2010. Már. 3. (Sze), 16.59
Erre gondoltam. De hány másodpercbe tellett volna, ha inkább kipróbálod? ;)
26

igazad lehet...

engineer · 2010. Már. 4. (Cs), 10.30
... de mivel nem a CSS a szakterületem, ugyanakkor tapasztalataim már vannak, úgy vélem ha valami itt működik, ott nem biztos hogy szintén menni fog. Arra voltam csak kíváncsi hogy az okosok szerint is helyes eljárás-e ez így.

Egyébként az normális dolog hogy 2 div-et a pozícionálás, margók, szélesség, meg behúzás álítgatásával sehogy sem tudok úgy összepasszintani, hogy az mindkét domináns böngészőben ugyanúgy nézzen ki?

A honlap amin kínódok: www.ti-mi.hu
Van egy fejléce aminek háttere van, és alul pedig egy keretet szeretnék pontosan a háttérhez illeszteni, de akárhogy szenvedek, vagy a firefoxban vagy az IE-ben el van csúszva a jobb oldala.

A vége az lesz hogy megcsinálom táblázatokkal...
27

erre a problémára (div

tiku I tikaszvince · 2010. Már. 4. (Cs), 10.58
erre a problémára (div margin/padding) lehet egy megoldás, hogy a dobozodat beburkolod egy másik div-be. A belső div-nek megadod a doboz szélességét és az alsó felső margin/padding értéket, a külsőnek pedig a magasságot és a jobb-ball margin/padding értéket. Igény szerint lehet változtatni, melyikkel állítod a szélességet és melyikkel a magasságot.

<div id="dobozom" class="kivul">
  <div class="belul">
   sok szép egyedi tartalom
  </div>
</div>

#dobozom.kivul {
  width: 170px;
  margin: 10px 0;
  padding: 5px 0;
}
#dobozom .belul {
  height: 170px;
  margin: 0 10px;
  padding: 0 5px;
}
28

Lényeges dolog

Poetro · 2010. Már. 4. (Cs), 11.12
Pár lényeges dolgot elfejeltettél megadni, mint amilyen például a DOCTYPE, és DOCTYPE nélkül ne számíts semmi jóra Internet Explorerben.
Valahogy így nézne ki ha minden rendben van:
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>ti-mi</title>
    <link rel='stylesheet' href='http://www.ti-mi.hu/stiluslap.css' type='text/css'>
    <style type="text/css">
      body {
        width: 978px;
        margin: 0 auto;
      }

      .fejlec {
        position: static;
        width: 978px;
        height: 261px;
        margin: 0;
      }

      .tartalom {
        position: static;
        width: 934px;
        margin: 0 0 0 38px;
        text-align: center;
      }
      .tartalom p {
        margin: 0 0 1em;
      }

      a.text {font-family: "Verdana"; font-size: 11px; color: #2222AA}
    </style>
  </head>
  <body>
    <div class="fejlec"><!-- Fejléc grafika --></div>
     <div class="tartalom">
      <p><img src="http://www.ti-mi.hu/ti-mi/images/ti-mi.png" alt="ti-mi" border="0"></p>
      <p>... az újjászületés csodáját éljük ...<br>
        (részletek hamarosan)</p>
      <p><a href="http://www.egeszsegbolt.net" class="main_link">&gt;&gt; EGÉSZSÉGBOLT &lt;&lt;</a></p>
    </div>
  </body>
</html>
29

és tényleg

engineer · 2010. Már. 4. (Cs), 13.18
Roppant érdekes. Csak a DOCTYPE sort szúrtam be, és máris tökéletesen működik.

Köszönöm.