[#] Sposoby użycia CSS

( Ostatnio zmieniony pon., 09/06/2008 - 22:54 )
 

Inny styl dla odnośnika wskazującego na konkretną stronę

.klasa_css a[href$="http://moja-strona.pl/?q=node"]  { color: red; }
.klasa_css a[href$="http://moja-strona.pl/?q=node"]:hover  { color: green; }

Uwaga: IE nie radzi sobie z tym standardem … zresztą nic nowego. Polecam Firefox


Jak dodać tekst „Informacja:“ przed każdym elementem należącym do klasy info?

.info:before {
  font-weight: bold;
  color: blue;
  content: "Informacja: ";
}

Automatyczny licznik z numerowaniem rozdziałów np.: 1", „1.1“, „1.2“, itd.

BODY {
  counter-reset: rozdzial;      /* Utwórz pole licznika rozdziałów */
}

H1:before {
  content: "Rozdział " counter(rozdzial) ". ";
  counter-increment: rozdzial;  /* Dodaj 1 do rozdziału */
}

H1 {
  counter-reset: sekcja;      /* Ustaw sekcję na 0 */
}

H2:before {
  content: counter(rozdzial) "." counter(sekcja) " ";
  counter-increment: sekcja;
}

Przyciski zmieniane dynamicznie

.green-button {
  background-color:#cec;
  color:#black;
  border:2px outset #cec;
}

.green-button[disabled] {
  background-color:#cdc;
  color:#777;
}

.green-button:active {
  border-style: inset;
}

Przykład użycia:

<input type="button" class="green-button" value="Guzik"/>

Drukowanie stron – „media=print“

Przykładowa strona index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
  <TITLE>Print sample</TITLE>
  <LINK rel="stylesheet" type="text/css" media="print" href="print.css"></strong>
</HEAD>

<BODY>
  <H1>Section A</H1>
  <P>This is the first section...</P>

  <H1>Section B</H1>
  <P>This is the second section...</P>

  <DIV id="print-head">Heading for paged media</DIV>
  <DIV id="print-foot">Page:&nbsp;</DIV>

</BODY>
</HTML>

Przykładowy arkusz styli print.css

/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
  display: none;
}

/* print only */
@media print {

  h1 {
    page-break-before: always;
    padding-top: 2em;
  }

  h1:first-child {
    page-break-before: avoid;
    counter-reset: page;
  }

  #print-head {
    display: block;
    position: fixed;
    top: 0pt;
    left:0pt;
    right: 0pt;

    font-size: 200%;
    text-align: center;
  }

  #print-foot {
    display: block;
    position: fixed;
    bottom: 0pt;
    right: 0pt;

    font-size: 200%;
  }

  #print-foot:after {
    content: counter(page);
    counter-increment: page;
  }
}
/* end print only */

Przydatne linki

Mozilla developer docs

CSS2 Selectors

CSS3 Selectors

5
Twoja ocena: Brak Średnio: 5 (1 vote)