Szukaj na tym blogu

środa, 2 lutego 2011

CSS3 - pseudoklasa :target

W CSS 2.x wyróżnia się 7 pseudoklas - opisuję je w kursie HTML. W CSS3 ich liczba wzrosła o kilkanaście dalszych.

Jedną z pseudoklas jest :target. Służy ona do wyróżniania celów wewnętrznych linków w dokumencie. Przykładowo, gdy w długim dokumencie zawierającym śródtytuły tworzymy spis treści z odnośnikami do poszczególnych śródtytułów, kliknięcie odnośnika spowoduje nie tylko skok do odpowiadającego mu śródtytułu, ale i wyróżnienie tego śródtytułu odmiennym formatowaniem. Przykład jest niżej.

Najpierw musimy utworzyć w arkuszu stylów pseudoklasę, na przykład:

*:target {font-style:italic; color:green;}

W kolejnym kroku tworzymy kotwice dla poszczególnych śródtytułów.

<a name="polozenie"><h2>Położenie</h2></a>

Na koniec tworzymy spis treści, odwołując się za pomocą wewnętrznych linków do kotwic.

<a href="#polozenie">Położenie</a>

A teraz przykład (wykorzystamy hasło z Wikipedii):

Kotlina Raciborska

Położenie

Geologia

Morfologia terenu

Klimat

Gospodarka

Kotlina Raciborska (318.59[1][2]) - mezoregion fizycznogeograficzny w południowej Polsce, stanowiący południowo-wschodnią część Niziny Śląskiej.

Położenie

Kotlina Raciborska położona jest po obu stronach górnej Odry, pomiędzy Wyżyną Śląską na wschodzie a Płaskowyżem Głubczyckim na zachodzie i Równiną Niemodlińską na północnym zachodzie. Mezoregion jest najdalej na południe wysuniętą częścią Niziny Śląskiej, która rozciąga się wzdłuż biegu Odry na terenie powiatu raciborskiego oraz dalej na północ w kierunku Kędzierzyna-Koźla i Krapkowic. Powierzchnia wynosi 1219 km². Ponad połowa powierzchni gminy Racibórz leży w obrębie Kotliny Raciborskiej[2]. Północno-wschodnią część Kotliny Raciborskiej przecina Kanał Gliwicki.

Geologia

Dno kotliny budują osady holoceńskie i są to utwory gliniaste i pyłowe, rzadziej ilaste i piaszczyste o zróżnicowanej miąższości[1][2]. Natomiast pod nimi zalegają czwartorzędowe polodowcowe osady okruchowe w postaci piasków i żwirów[1][2][3][4].

Morfologia terenu

Kotlina osiągaja wysokości nieco poniżej 200 m n.p.m. Obszar ten jest bardzo słabo urozmaicony z przewagą rzeźby równinnej o różnicach wysokości z reguły nie przekraczających 3 metrów, a niewielkie urozmaicenia w rzeźbie tworzą zagłębienia w formie meandrycznych starorzeczy, często wypełnionych wodą lub podmokłych. Charakterystycznymi formami geomorfologicznymi w dolinie Odry są dwie tarasy akumulacyjne: zalewowy, który sięga 0,5 - 2,0 metrów nad poziomem rzeki oraz nadzalewowy, który sięga 4 - 7 metrów nad poziomem rzeki[1][2]. Obszar przecina dolina rzeki Rudy[3].

Klimat

Na klimat kotliny duży wpływ mają ciepłe masy powietrza, które napływają z południa przez Bramę Morawską, a także oceaniczne masy powietrza, które napływają z zachodu. Klimat jest o wiele cieplejszy niż w ościennych krainach geograficznych. Średnia temperatura powietrza kształtuje się na poziom +8°C, lato jest długie, a zimy łagodne. Średnie opady atmosferyczne wahają się w przedziale 600–700 mm. W lecie przeważają wiatry północno–wschodnie, a w ziemie południowo–wschodnie. Związane jest to z tym, że przez około 40% roku następuje wymuszony przepływ mas powietrza przez Bramę Morawską[4].

Gospodarka

Prawobrzeżna (wschodnia) część regionu jest pokryta lasem, lewobrzeżna (zachodnia) stanowi krainę rolniczą. Nad Odrą rozwinęły się duże ośrodki przemysłowe: Kędzierzyn-Koźle na północy i Racibórz na południu.

poniedziałek, 31 stycznia 2011

Nakładanie i przezroczystość

Background-size

Zmiana koloru zaznaczenia

W CSS3 możemy definiować kolor zaznaczonego tekstu i kolor zaznaczenia. Wykorzystujemy w tym celu pseudoelement selection.

W przykładach zastosowano następujący kod:

h1.green::selection {background: green; color:blue;} 
h1.red::selection {background: red; color:white;} 
h1.blue::selection {background: blue; color:red} 
h1.yellow::selection {background: yellow; color:black} 

Kod ten umieszczamy w arkuszu stylów witryny (tutaj, dla uproszczenia, umieściłem go w tekście wpisu, obejmując znacznikiem style).

Poniższe fragmenty tekstu zostały opatrzone odpowiednimi klasami, np. h1 class=”green” czy h1 class=”red”.


Niebieski tekst na zielonym tle.

Biały tekst na czerwonym tle.

Czerwony tekst na niebieskim tle.

Czarny tekst na żółtym tle.

Obejmij blokiem wyraz, wiersz czy kilka kolejnych wierszy i obserwuj zmianę kolorów.

niedziela, 30 stycznia 2011

Nieprzezroczystość

W CSS3 można stosować styl opacity:wartość, gdzie wartość mieści się w przedziale od 0 do 1. Na przykład:

Tekst o pełnej nieprzezroczystości

Tekst o nieprzezroczystości 0.75

Tekst o nieprzezroczystości 0.50

Tekst o nieprzezroczystości 0.25

Analogicznie można określać nieprzezroczystość obrazka.

 

Styl jest interpretowany przez wszystkie nowoczesne przeglądarki - Firefox 3.0, Internet Explorer 9, Safari 3.1, Chrome 4.0, Opera 10.0.

Nieprzezroczystość

W CSS3 można stosować styl opacity:wartość, gdzie wartość mieści się w przedziale od 0 do 1. Na przykład:

Tekst o pełnej nieprzezroczystości

Tekst o nieprzezroczystości 0.75

Tekst o nieprzezroczystości 0.50

Tekst o nieprzezroczystości 0.25

Analogicznie można określać nieprzezroczystość obrazka.