6 formatowanie list






@import url("/extension/eznewsletter/design/standard/stylesheets/eznewsletter.css"); @import url("/extension/ezlabel/design/standard/stylesheets/ezlabel.css");
6. Formatowanie list - Webhosting.pl









#site{
background-image:url("/design/webhosting/images/side_shadows.png");
}
#top-icons{
background-image:url("/design/webhosting/images/top_menu_right_bg.png");
}
.content_box-bottom{
background-image:url("/design/webhosting/images/bottom_shadow.png");
}
.left_poll_link_vote{
background-image:url("/design/webhosting/images/left_poll_vote.png");
}
.content_box-wrapper{
background-image:url("/design/webhosting/images/right_shadow.png");
}
.content_box-head{
background-image:url("/design/webhosting/images/right_shadow_top.png");
}
.button{
background-image:url("/design/webhosting/images/button_middle.png");
}
#searcher{
background-image:url("/design/webhosting/images/searcher_background.png");
}
#tagcloud{
background-image:url("/design/webhosting/images/tagcloud_background.png");
}
#tagcloud-after{
background-image:url("/design/webhosting/images/tagcloud_after.png");
}












kontakt




newsletter




rss




zaloguj







































ANKIETA







Czy serwis MySpace odniesie w Polsce sukces?:

Tak


Nie


Nie mam zdania

Wyniki Głosuj








E-WYDANIA



Webhosting 4/2007:
- Platforma hostingowa .NET w home.pl,
- .NET od kuchni,
- Własna darmowa galeria internetowa,
- Polska odłona Google Analytics,
- Konfigurujemy filtry antyspamowe,
- Wszystko o telefonii VoIP,
- Bezpieczeństwo dynamicznych stron WWW.














WYDRUKUJ | WYŚLIJ





Kurs CSS 2.1. Budujemy nowoczesne i stylowe witryny


Marcin Modestowicz     12 sierpnia 2007     10:46





6. Formatowanie list
6.1. Definiowanie markerów

Reguły arkuszy stylów pozwalają również na podstawowe formatowanie
wyglądu elementów listy poprzez określenie wcięcia i rodzaju
wyróżnienia dla ich poszczególnych elementów. Przy użyciu właściwości list-style-position możemy ustalić, by marker wyróżniający poszczególne elementy listy był oddzielony od nich eleganckim wcięciem tekstu (wartość outside) lub też był przez ten tekst otaczany (wartość inside). Oprócz położenia znaku wyróżniającego możemy także określić jego rodzaj. Właściwość list-style-type wskazuje właśnie na typ markera, wykorzystując do tego celu następujące słowa kluczowe:




disc – kropka,

circle – kółko,

square – kwadrat,

decimal – liczby dziesiętne począwszy od 1 (1, 2, 3, 4 itp.),

lower-roman – liczby rzymskie małe (i, ii, ii, iv itp.),

upper-roman – liczby rzymskie duże (I, II, III, IV itp.),

lower-alpha – litery małe (a, b, c, d itp.),

upper-alpha – litery duże (A, B, C, D itp.),

none – brak markera.




Specyfikacja CSS 2.1 przewiduje także szereg innych słów kluczowych,
jednak fakt, że nie zaimplementowano ich obsługi w przeglądarkach
Microsoft Internet Explorer, pozbawia je w zasadzie możliwości
szerszego użycia. Zamiast określonych wyżej oznaczeń możemy też pokusić
się o użycie własnych obrazków jako markerów. W tym celu jako wartość
właściwości list-style-image wpisujemy w arkuszu stylów adres URL do wybranego pliku, np. ul {list-style-image: url("http://xyz.com/lista.gif") }.


6.2. Przykład nr 5

Aby zaprezentować przykład zastosowania możliwości arkuszy stylów w
zakresie formatowania list, sporządźmy dokument index.html zawierający
jedynie listę postaci:

<html>
<head>
<link rel="stylesheet" href="arkusz.css" type="text/css">
</head>
<body>
<ol>
<li>Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
Pierwsza pozycja listy Pierwsza pozycja listy
</li>
<li>Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy Druga pozycja listy
Druga pozycja listy
</li>
</ol>
</body>
</html>

Następnie dodajmy arkusz stylów z jedną regułą:

ol {
list-style-position: inside;
list-style-type: upper-roman;
}
W ten sposób nasza lista będzie zawierała markery w postaci dużych
liczb rzymskich, otoczone dookoła tekstem umieszczonym w kolejnych jej
pozycjach:


















poprzednia |  1 | 
2 | 
3 | 
4 | 
5 | 
6 |
7 | 
8 | 
9 | 
następna | 
| SKOMENTUJ |
CZYTAJ KOMENTARZE(0)

Wykop.pl  | gwar.pl  | delicious 
















var searcher = new SearcherBox("searcher_")
searcher.add("0");
searcher.add("1");
searcher.add("2");







Szukaj
Artykuły | Forum | Google








Szukaj


Artykuły | Forum | Google








Szukaj







Artykuły | Forum | Google









TOP


10


AKTUALNOŚCI


Najdroższe domeny tygodniaczytaj
Microsoft i Oracle wspierają PHPczytaj
AP przeciwko VeriSignczytaj
Chude lata na rynku serwerów?czytaj
BitTorrent DNA dla Hollywoodczytaj
Microsoft Windows XP Service...czytaj
Domeny ze znakami innymi niż...czytaj
Allegro.pl wyświetla oferty...czytaj
Najwięksi rejestratorzy miesiącaczytaj
Niebezpieczne routeryczytaj

Najnowsze | Najpopularniejsze









TOP


10


AKTUALNOŚCI


Miranda IM w wersji 0.7czytaj
Rusza sprzedaż domen .asiaczytaj
Nazwa.pl wprowadza usługę...czytaj
Pierwsze urządzenia przenośne z...czytaj
Hosting Windows w home.plczytaj
Allegro.pl wyświetla oferty...czytaj
Najwięksi rejestratorzy miesiącaczytaj
GoogleOS systemem operacyjnym...czytaj
Tańszy Internet satelitarnyczytaj
Pensylwania przeciwko piractwu...czytaj

Najnowsze | Najpopularniejsze




var tops = new StaticBox("top_")
tops.add("0");
tops.add("1");






BLOGI









YouTube na reklamowo

Jeśli zastanawialiście się kiedyś, dlaczego Google kupił YouTube, to
spieszę z odpowiedzią: oczywiście po to, by na nim zarabiać. Nie
widzieliście w serwisie YouTube żadnych reklam? Nie szkodzi,...
czytaj





Expression Blend - uruchamiamy produkt /arturz/czytaj
Ściągasz pliki? Zapłacisz karę /dAREuS/czytaj
Expression Blend - zaczynamy pracę /arturz/czytaj
Naucz się IIS 7 /arturz/czytaj







TOP


10


ARTYKUŁY


Cybersquatting. (Nie)legalne domeny EURO 2012czytaj
Kurs PHP. Wstęp do programowania w popularnym języku skryptowymczytaj
Najlepsze sprzętowe firewalleczytaj
Kurs "ABC hostingu"czytaj
Czym się różnią procesory serwerowe od zwykłychczytaj
Kurs CSS 2.1. Budujemy nowoczesne i stylowe witrynyczytaj
Biuro w Sieciczytaj
Kurs XHTML. Formatujemy strony WWWczytaj
Siedem najgroźniejszych ataków na serwisy WWWczytaj
Visual Web Developer 2005 Express Edition. Prosty sposób na tworzenie stron WWWczytaj





FORUM


GORĄCE TEMATY


Nowa poczta w o2.plczytaj
Hosting Windows w home.plczytaj
Intel zmienia nazwy procesorówczytaj
Tajemnicze zniknięcie Demonoidaczytaj
Kurs "ABC hostingu"czytaj





TOP


5


PLIKI


Spamihilator 0.9.9.32czytaj
Internet Explorer 7czytaj
Notepad++ 4.2.2czytaj
Pixel 1.0 Beta 7.699 dla Windowsczytaj
Majster 1.1czytaj








TAGI




802.11n cpu chiny cybersquatting google intel internet microsoft nokia p2p skype sun microsystems www wi-fi youtube atak bezpieczeństwo blokada cenzura cyberprzestępczość domena domeny e-mail firewall ftp hosting html kurs php piractwo procesory serwer serwery serwis społecznościowy



więcej tagów








Technologie



Czym się różnią procesory serwerowe od zwykłych



Kursy



Kurs CSS 2.1. Budujemy nowoczesne i stylowe witryny



Microsoft



Visual Web Developer 2005 Express Edition. Prosty sposób na tworzenie stron WWW



Google



Biuro w Sieci



Kursy



Kurs "ABC hostingu"



© 2007 by Webhosting.pl | Powered by home.pl | Kontakt | Reklama | Polityka prywatności




_uacct = "UA-2712831-1";
urchinTracker();


var pp_gemius_identifier = new String('p3XldnOByUbcszHKIpd_bPVnnOlFx5gJUp7qLSqRzzj.T7');




Wyszukiwarka

Podobne podstrony:
show list
Fadal Format 2 (AC) B807 12
track list
anonymous ftp sites list nl 2
anonymous ftp sites list org 7
Fadal Format 2 [MM] MW60 89
Fadal Format 2 [PEP] M116 89 1
List motywacyjny
SGH Flasher Dumper v 07 dif format
Konwersja Filmów Z Płyt Dvd Do Formatu Divx
Benedykt XVI 2007 07 07 list apostolski Summorum Pontyficum instr
list motywacyjny prosty informacja uzyskana od znajomych2

więcej podobnych podstron