Osztály alapú kiválasztás

2014. február 20., csütörtök

Osztály alapú kiválasztás

A HTML elemeket lehetőségünk van osztályokba sorolni. Ekkor az adott osztályba sorolni kívánt elemhez egy`class` tulajdonságot rendelünk hozzá, amelynek az értéke az osztálynevünk lesz. A stíluslapban ehhez az osztályhoz határozhatunk meg megjelenést. Ha szeretnénk kiemelni egyes fejezeteket a szövegünkből, pirossal megjelenítve azokat, akkor a következőképpen járhatunk el:

<html>  
<head>  
  <title>CSS példa</title>  
  <style type="text/css"><!--  
  h1 { font-size: 20px; color: #a00000; }  
  p { font-size: 12px; color: #00a000; }  
  .fontos { color: #ff0000; }  
  --></style>  
</head>  
<body>  
<h1>A cserebogarak halhatatlanságáról</h1>  
<p class="fontos">A cserebogárnak vannak lábai. Ebből...</p>  
<p>Minden cserebogárnak van lába...</p>  
<p class="fontos">A cserebogárnak vannak szárnyai is...</p>  
<p>A szárnyaival repülni tud...</p>  
<p>A halhatatlanság azt jelenti, hogy...</p>  
<h1 class="fontos">FONTOS!</h1>  
<p class="fontos">A cserebogarak halhatatlansága tehát...</p>  
</body>  
</html>  

A példában három fejezetet és egy címsort soroltunk a fontos osztályba, a stíluslapban pedig a kiválasztónk ponttal kezdődött, ami azt jelezte, hogy ennek az osztálynak határozzuk meg a megjelenését. A példából még valami kiderül: az egyes stílusdefiníciók felül tudják bírálni egymást, illetve egy osztály bármelyik elemhez tartozhat. A fontos osztálynak mást színt adtunk meg, mint a bekezdéseknek, illetve a címsornak (itt ez a szín fog érvényesülni), míg a betűméretet tekintve a bekezdésben, illetve a címsorban meghatározott méretet öröklik a fontosnak besorolt bekezdések is.

Az egyes kiválasztókat keverhetjük is, például a következő példában a fontos címsoroknak definiálunk egy háttérszínt is:

<html>  
<head>  
  <title>CSS példa</title>  
  <style type="text/css"><!--  
  h1 { font-size: 20px; color: #a00000; }  
  p { font-size: 12px; color: #00a000; }  
  .fontos { color: #ff0000; }  
  h1.fontos { background: #ffcccc; }  
  --></style>  
</head>  
<body>  
<h1>A cserebogarak halhatatlanságáról</h1>  
<p class="fontos">A cserebogárnak vannak lábai. Ebből...</p>  
<p>Minden cserebogárnak van lába...</p>  
<p class="fontos">A cserebogárnak vannak szárnyai is...</p>  
<p>A szárnyaival repülni tud...</p>  
<p>A halhatatlanság azt jelenti, hogy...</p>  
<h1 class="fontos">FONTOS!</h1>  
<p class="fontos">A cserebogarak halhatatlansága tehát...</p>  
</body>  
</html>  

Frontend - Backend - IKT Project

2014. február 20., csütörtök

Osztály alapú kiválasztás

Nincsenek megjegyzések:

Megjegyzés küldése

Laravel 12 -vel REST API - hajomenetrend feladat megoldása