10. fejezet: Pszeudo-osztályok és egyéb tulajdonságok

• !important deklaráció: A későbbi tulajdonságokat felülírja.
  Paraméterek: Bármilyen CSS-attribútum.
  HTML-minta: { paraméter!important }
  Scriptben: Nem támogatott.
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530769%28v=VS.85%29.aspx)

  <STYLE>
      P { color:red!important }
  </STYLE>
  <P STYLE="color:green">Piros szöveg.</P>

• :active pszeudo-osztály: Az a HTML-tag stílusát határozza meg aktív állapotban.
  Csak itt használható!
  HTML-minta: [A]:active { szabályok }
  Scriptben: Nem támogatott.
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530714%28v=VS.85%29.aspx)

  <style>
  A:active { font-weight:bold; color:purple }
  </style>

• :first-letter pszeudo-elem: Az objektum első betűjének stílusát határozza meg!
  HTML-minta: :first-letter { szabályok }
  Scriptben: Nem támogatott.
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530753%28v=VS.85%29.aspx)

  <style>
  P.Iniciale:first-letter { font-size: 200%; float: left }
  </style>
  <p>A bekezdés első betűje kétszeres méretben lesz látható.</p>

• :first-line pszeudo-elem: Az objektum első sorának stílusát határozza meg.
  HTML-minta: :first-line { szabályok }
  Scriptben: Nem támogatott.
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530754%28v=VS.85%29.aspx)

  <style>
  .CapFirst:first-line { text-transform: uppercase }
  </style>
  <p>Az első sor a bekezdésben csupa nagybetű lesz, az összes többi normális marad.</p>

• :hover pszeudo-osztály: Az a HTML-tag stílusát határozza meg, ha az egérmutató a link felett van. Csak itt használható!
  HTML-minta: [A]:hover { szabályok }
  Scriptben: Nem támogatott.
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530766%28v=VS.85%29.aspx)

   <STYLE> A:hover { font-weight:bold; color:red } </STYLE>

• :link pszeudo-osztály: Az a HTML-tag stílusát határozza meg, ha az elem még nem volt meglátogatva. Csak itt használható!
  HTML-minta: [A]:link { szabályok }
  Scriptben: Nem támogatott.
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530787%28v=VS.85%29.aspx )

  <STYLE> A:link { color:#C0C0C0 } </STYLE>

• :visited pszeudo-osztály: Az a HTML-tag stílusát határozza meg, ha az elem már meg volt látogatva. Csak itt használható!
  HTML-minta: [A]:visited { szabályok }
  Scriptben: Nem támogatott.
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms531181%28v=VS.85%29.aspx )

  <STYLE> A:visited { font-weight:bolder } </STYLE>

• @charset szabály: Meghatározza, hogy melyik külső karakterkészlet használható.
  HTML-minta: @charset KarakterkészletLeírás
  Scriptben: Nem támogatott.
  További példa:

  @charset "Windows-1251";

• @font-face szabály: A HTML-dokumentumba beágyazott karakterkészlet meghatározása.
  Paraméterek: font-family:fontFamilyName (betűkészlet neve), src: url(/pontosan) (megtalálási helye; relatív vagy abszolút URL!), Internet Explorer 9 esetén újabb paraméterek is vannak.
  HTML-minta: @charset KarakterkészletLeírás
  Scriptben: Nem támogatott.
  További minták: http://msdn.microsoft.com/en-us/library/ms530757%28v=VS.85%29.aspx

• @import szabály: Importál egy külső stíluslapot.
  HTML-minta: @import [url]PontosURL
  Scriptben: Nem támogatott.
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530768%28v=VS.85%29.aspx)

  <STYLE TYPE="text/css">
  @import url("URL");
  P {color:blue}
  </STYLE>

• @media szabály:Meghatározza a kiviteli médiát.
  Paraméterek: Médiatípusok: screen (képernyő), print (nyomtató), all (mindkettő).
  Szabályok: Annál az adott médiatípusnál érvényes szabályok.
  HTML-minta: @media MediaTípus { szabályok }
  Scriptben: Nem támogatott.
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530813%28v=VS.85%29.aspx)

  // Képernyős karakterméret legyen 12-es.
  @media screen {
     BODY {font-size:12pt;}
  }
  // Nyomtatón pedig 8-as.
  @media print {
     BODY {font-size:8pt;}
  }

• @page szabály: Meghatározza megjelenített lap méreteit, irányát és margóit.
  Paraméterek: VálasztottLap: :first (a gyűjtemény 1. lapjára érvényes), :left (összefűzésnél a bal oldalra kerülőknél érvényes), :right(összefűzésnél a jobb oldalra kerülőknél érvényes).
  Szabályok: Annál az adott médiatípusnál érvényes szabályok.
  HTML-minta: @page VálasztottLap { szabályok }
  Scriptben: Nem támogatott.
  További minták: http://msdn.microsoft.com/en-us/library/ms530841%28v=VS.85%29.aspx

• cursor tulajdonságok: Megadja vagy visszaadja az egérkurzor tulajdonságait, amikor az adott objektum fölé kerül.
  Paraméterek: auto (alapértelmezett; a böngésző szabályai érvényesek), all-scroll (min. IE 6; minden irányban gördíthatő-minta), col-resize (min. IE6; átméretezhető oszlopok-minta), crosshair (egyszerű célkereszt), default (platform-függő; általában mutató kéz), hand (mutatóujját kinyújtó kéz, amikor az objektum fölé megy az egér), help (segítségkérés-minta), move (irány-nyilak), no-drop (mutató-kéz kis áthúzott körrel), not-allowed (link nem követhető-minta), pointer (mutató kéz), progress (nyíl és homokóra), row-resize (sorátmérezetés-minta), text (sima szöveg-kurzor), url(uri) (pontosan URL-ben leírt cursorfájl; minta: url('myccursor.cur'); használható kiterjesztések: .CUR és .ANI), vertical-text (min. IE 6; függőlegesen javítható-szöveg minta), wait (homokóra), *-resize (átméretezés-minta a 8 alapirányba; csillag helyett: N, NE, NW, S, SE, SW, E, vagy W ).
  HTML-minta: { cursor : paraméter }
  Scriptben: objectum.style.cursor [ = paraméter ]
  További minták: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms533701%28v=VS.85%29.aspx)

  <h1>Vigye a szövegek fölé a cursort!</h1>
  <p title="all-scroll" onmouseover="this.style.cursor='all-scroll'">all-scroll</p>
  <p title="col-resize" onmouseover="this.style.cursor='col-resize'">col-resize</p>
  <p title="crosshair" onmouseover="this.style.cursor='crosshair'">crosshair</p>
  <p title="default" onmouseover="this.style.cursor='default'">default</p>
  <p title="hand" onmouseover="this.style.cursor='hand'">hand</p>
  <p title="help" onmouseover="this.style.cursor='help'">help</p>
  <p title="move" onmouseover="this.style.cursor='move'">move</p>
  <p title="no-drop" onmouseover="this.style.cursor='no-drop'">no-drop</p>
  <p title="not-allowed" onmouseover="this.style.cursor='not-allowed'">not-allowed</p>
  <p title="pointer" onmouseover="this.style.cursor='pointer'">pointer</p>
  <p title="progress" onmouseover="this.style.cursor='progress'">progress</p>
  <p title="row-resize" onmouseover="this.style.cursor='row-resize'">row-resize</p>
  <p title="text" onmouseover="this.style.cursor='text'">text</p>
  <p title="vertical-text" onmouseover="this.style.cursor='vertical-text'">vertical-text</p>
  <p title="wait" onmouseover="this.style.cursor='wait'">wait</p><p title="*-resize" onmouseover="this.style.cursor='*-resize'">*-resize</p>

   

© TFeri.hu, 2011