Przykłady stylów css

Transkrypt

1 Przykłady stylów css

2 Styl lokalny 1. <p style="font-size: 12pt; font-weight: bold; font-family: 'Andale mono', 'Courier New', monospace">treść akapitu</p> To jest akapit wyświetlany za pomocą czcionki Andale mono, Courier New lub innej monotypicznej, pogrubionej, o wielkości 12 punktów. 2. <h1 style="font-size: 25pt; font-weight: bold; font-family: Arial, sans-serif">treść tytułu</h1> Tytuł stopnia 1, Arial, pogrubiony, 25 punktów 3. <ul style="font: italic bold 14pt Times; color: red"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> pierwszy punkt drugi punkt trzeci punkt

3 4. <p style="text-transform: capitalize">to jest akapit, w którym pierwsze litery wyrazów są wyświetlane za pomocą kapitalików.</p> 5. Pozioma linia z kilkoma atrybutami (tylko IE4 i 5) <hr style="height: 3mm; width: 200pt; color: lime"> 6. <ul style="list-style: lower-roman inside"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> pierwszy punkt drugi punkt trzeci punkt

4 7. klasa notatka..notatka {font-family: verdana, arial; font-weight: bold; color: blue; margin-left: 10%; margin-right: 10%} <div class=notatka> fragment dokumentu objęty blokiem </div>

5 8. osadzony styl <HTML> <STYLE TYPE="text/css">  </STYLE> </HTML>

6 Własności czcionek W przypadku czcionek rozróżniamy kilka bloków informacji. Rodzina czcionek (font-family) Styl czcionki (font-style)) Warianty czcionek (font-variant) Waga czcionki (font-weight) Wielkość czcionki (font-size) Atrybuty mieszane (font) Poziome rozstrzelenie czcionek (font-stretch) Pionowe proporcje czcionek (font-size-adjust)

7 Rodzina czcionek (font-family) <p style="font-family: Times, 'Times New Roman', 'Times New Roman CE'">Treść akapitu</p> To jest akapit wyświetlony za pomoc ą pierwszej dostę pnej czcionki. Gdy podajemy kilka czcionek, rozdzielamy je przecinkami i spacją. Gdy czcionka ma kilka wyrazów w nazwie, ujmujemy je w apostrof ', podczas gdy cała definicja jest objęta cudzysłowem. Możemy także poslużyć się nazwą rodzajową, np. serif, akapit zostanie wyświetlony czcionką szeryfową <p style="font-family: serif">treść akapitu</p> To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki szeryfowej. Możemy wykorzystywać także inne nazwy rodzajowe, np. sans-serif, cursive, fantasy, monospace. A oto przykłady (niektóre wyświetlane z błędami): To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki bezszeryfowej. To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki pochyłej. T o je s t a k a p it w y św ie tlo n y z a p o m o c ą p ie rw s z e j d o s tę p n e j c z c io n k i o z d o b n e j. To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki monotypicznej. Oczywiście można mieszać definicje, podając nazwy imienne i rodzajowe, np. "Times, 'Times New Roman', serif".

8 Styl czcionki (font-style) Do dyspozycji mamy trzy style czcionki: normal, italic i oblique. Dwie ostatnie są wyświetlane w podobny sposób. <p style="font-style: normal">treść akapitu</p> Treść akapitu wyświetlana w stylu normal <p style="font-style: italic">treść akapitu</p> Treść akapitu wyświetlana w stylu italic <p style="font-style: oblique">treść akapitu</p> Treść akapitu wyświetlana w stylu oblique Wariant czcionki (font-variant) Rozróżniane są dwa warianty czcionek: normal i small-caps (małe kapitaliki). <p style="font-variant: normal">treść akapitu</p> Treść akapitu wyświetlana w wariancie normal <p style="font-variant: small-caps">treść akapitu</p> Treść akapitu wyświetlana w wariancie small-caps

9 Waga czcionki (font-weight) Do dyspozycji mamy aż 13 rozmaitych "wag" czcionki, różniących się stopniem pogrubienia (nawet trudno je będzie niekiedy rozróżnić na ekranie): normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Pokażmy to na przykładach: <p style="font-weight: waga">treść akapitu wyświetlana za pomocą wybranej wagi</p> Treść akapitu wyświetlana za pomocą wagi normal Treść akapitu wyświetlana za pomocą wagi bold Treść akapitu wyświetlana za pomocą wagi bolder Treść akapitu wyświetlana za pomocą wagi lighter Treść akapitu wyświetlana za pomocą wagi 100 Treść akapitu wyświetlana za pomocą wagi 200 Treść akapitu wyświetlana za pomocą wagi 300 Treść akapitu wyświetlana za pomocą wagi 400 Treść akapitu wyświetlana za pomocą wagi 500 Treść akapitu wyświetlana za pomocą wagi 600 Treść akapitu wyświetlana za pomocą wagi 700 Treść akapitu wyświetlana za pomocą wagi 800 Treść akapitu wyświetlana za pomocą wagi 900

10 Wielkość czcionki (font-size) Wielkość czcionki możemy regulować za pomocą czterech metod: imiennych wielkości absolutnych, wielkości relatywnych, wysokości w jednostkach miary i wysokości w procentach. Imienne wielkości absolutne xx-small, x-small, small, medium, large, x-large, xx-large <p style="font-size: wielkość absolutna">treść akapitu</p> Treść akapitu wyświetlana za pomocą wielkości xx-small Treść akapitu wyświetlana za pomocą wielkości x-small Treść akapitu wyświetlana za pomocą wielkości small Treść akapitu wyświetlana za pomocą wielkości medium Treść akapitu wyświetlana za pomocą wielkości large Treść akapitu wyświetlana za pomocą wielkości x-large Treść akapitu wyświetlana za pomocą wielkości xx-large Wielkości relatywne larger, smaller (w stosunku do domyślnej) <p style="font-size: wielkość relatywna">treść akapitu</p> Treść akapitu wyświetlana za pomocą wielkości larger Treść akapitu wyświetlana za pomocą wielkości smaller Wielkość w jednostkach miary W dokumencie można użyć kilku klasycznych jednostek miary: centymetry (cm), cale (in), milimetry (mm), punkty (pt) i pica (pc). 1in = 2.54cm 1pt=1/72in 1pc=12pt Na przykład: <p style="font-size: 1cm"></p> Treść akapitu wyświetlana za pomocą wielkości 1 cm Treść akapitu wyświetlana za pomocą wielkości 8 mm Treść akapitu wyświetlana za pomocą wielkości 0,1 cala Treść akapitu wyświetlana za pomocą wielkości 14 punktów Treść akapitu wyświetlana za pomocą wielkości 1,5 pica

11 Wielkość w procentach Podanie wielkości w procentach powinno dać w efekcie procent wielkości domyślnej dla danego selektora, np. akapitu, tytułu itp. Wszystkie trzy przeglądarki interpretują to polecenie częściowo błędnie, np. w odniesieniu do tytułu, choć akapit jest wyświetlany poprawnie. Na przykład: <h1 style="font-size: 125%">To jest tytuł stopnia pierwszego 125%</h1> To jest tytuł stopnia pierwszego To jest tytuł stopnia pierwszego 125% Normalny akapit Akapit 125%

12 Własności tekstu Odstępy między wyrazami (word spacing) Odstępy między literami (letter spacing) Dekoracja tekstu (text decoration) Pusta przestrzeń (white space) Transformacja tekstu (text transformation) Wyrównanie tekstu (text alignment) Wcięcie tekstu (text indent) Odstępy między wierszami (line height) Odstępy między wyrazami Odstępy między wyrazami podajemy jednostkach miary. Na przykład: <p style="word-spacing: 1cm">1-centymetrowe odstępy między wyrazami.</p> 1-centymetrowe odstępy między wyrazami. Na razie nie akceptuje ich żadna przeglądarka Odstępy między literami Odstępy między literami podajemy jednostkach miary. Na przykład: <p style="letter-spacing: 2mm">2-milimetrowe odstępy między literami.</p> 2-milimetrowe odstępy między literami, akceptowane przez IE. Dekoracja tekstu Rozróżnia się pięć rodzajów dekoracji tekstu: pozostawienie bez zmiany (none), podkreślenie (underline), nadkreślenie (overline), przekreślenie (line-throguh) i migotanie (blink). <a style="text-decoration: none" href=" jest odsyłacz do firmy Corel.</a> To jest odsyłacz do firmy Corel. <p style="text-decoration: underline">to jest podkreślenie tekstu.</p> To jest podkreślenie tekstu. <p style="text-decoration: overline">to jest nadkreślenie tekstu.</p> To jest nadkreślenie tekstu. <p style="text-decoration: line-through">to jest przekreślenie tekstu.</p> To jest przekreślenie tekstu. <p style="text-decoration: blink">to jest migotanie tekstu.</p> To jest migotanie tekstu w NC4.

13 Wyrównanie tekstu Tekst w bloku możemy wyrównywać za pomocą czterech sposobów: do lewego marginesu (left), do prawego marginesu (right), do środka (center) i do obu marginesów jednocześnie). <p style="text-align: left">to jest przykładowy akapit wyrównany do lewego marginesu.</p> To jest przykładowy akapit wyrównany do lewego marginesu. To jest przykładowy akapit wyrównany do lewego marginesu. To jest przykładowy akapit wyrównany do lewego marginesu. To jest przykładowy akapit wyrównany do lewego marginesu. To jest przykładowy akapit wyrównany do lewego marginesu. <p style="text-align: right">to jest przykładowy akapit wyrównany do prawego marginesu.</p> To jest przykładowy akapit wyrównany do prawego marginesu. To jest przykładowy akapit wyrównany do prawego marginesu. To jest przykładowy akapit wyrównany do prawego marginesu. To jest przykładowy akapit wyrównany do prawego marginesu. To jest przykładowy akapit wyrównany do prawego marginesu. <p style="text-align: center">to jest przykładowy akapit, który środkujemy w stosunku do obu marginesów.</p> To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. <p style="text-align: justify">to jest przykładowy akapit, który powinien być wyrównany w stosunku do obu marginesów.</p> To jest przykładowy akapit, który powinien być wyrównany w stosunku do obu marginesów, jak w edytorach tekstów - prawy brzeg akapitu powinien być równy, a nie postrzępiony. To jest przykładowy akapit, który powinien być wyrównany w stosunku do obu marginesów, jak w edytorach tekstów - prawy brzeg akapitu powinien być równy, a nie postrzępiony..

14 Wcięcie tekstu Wcięcie tekstu odnosi się do bloków tekstu i oznacza odstęp pierwszego wiersza bloku od lewego marginesu strony. <p style="text-indent: 10%">To jest akapit, w którym pierwszy wiersz...</p> To jest akapit, w którym pierwszy wiersz jest odsunięty od lewego marginesu o 10 procent, natomiast drugi wiersz i każdy następny rozpoczyna się już dokładnie od lewego marginesu. <h2 style="text-indent: 1in">Tytuł rozpoczynający się w odległości 1 cala...</h2> Tytuł rozpoczynający się w odległości 1 cala od lewego marginesu Odstępy między wierszami Style pozwalają regulować odstępy między liniami bazowymi elementów, np wierszy akapitu. Możemy podać wielkość absolutną, np. w centymetrach, albo względną, w procentach. 200% oznacza podwojenie odstępu, 50% - zmniejszenie o połowę. <p style="line-height: 1cm">To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm...</p> To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. <p style="line-height: 50%">To jest akapit, w którym odstęp między wierszami wynosi 50 proc. normalnego</p> To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%.

15 Własności koloru i tła Kolor (color) Kolor tła (background color) Grafika jako tło (background image) Powtarzanie tła (background repeat) Zaczepienie tła (background attachment) Pozycja tła (background position) Mieszane atrybuty tła (background) Kolor Kolor możemy przypisywać dowolnym elementom. Kilka przykładów: <h2 style="color: #FF0000">Czerwony tytuł drugiego stopnia</h2> Czerwony tytuł drugiego stopnia <p style="color: #FF00FF">Akapit w kolorze Fuchsia</p> Akapit w kolorze Fuchsia <table border> <tr> <td style="color: #808000">Komórka tabeli z oliwkowym tekstem</td> </tr> </table> Komórka tabeli z oliwkowym tekstemnumerowany wykaz w kolorze niebieskim <ol style="color: blue"> <li>punkt pierwszy <li>punkt drugi <li>punkt trzeci </ol> 1.punkt pierwszy 2.punkt drugi 3.punkt trzeci

16 Kolor tła Wiele elementów może mieć przypisany kolor tła. Przykłady (IE i NN wyświetlają je nieco odmiennie): <h2 style="background-color: yellow">tytuł stopnia drugiego na żółtym tle</h2> Tytuł stopnia drugiego na żółtym tle <p style="background-color: blue">akapit na tle Aqua</p> Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. <table border> <tr> <td style="background-color: #808000">Komórka tabeli z zielonym tłem</td> </tr> </table> Komórka tabeli z zielonym tłem

17 Grafika jako tło Rozmaitym elementom możemy przypisywać grafikę jako tło. Przykłady: <h1 style="background-image: url(canvas2.gif)">tytuł stopnia pierwszego na tle płótna</h1> Tytuł stopnia pierwszego na tle płótna <table border> <tr> <td style="background-image: url(greendot.gif)>komórka tabeli z zieloną kropką jako tłem</td> </tr> </table> Komórka tabeli z zieloną kropką jako tłem Zaczepienie tła Tłem strony może być grafika. Wystarczy podać w stylu definicję BODY {background: url(nazwa_obrazka)}, aby obrazek pojawił się w tle dokumentu. Obrazek może się przesuwać w miarę przewijania dokumentu (czyli tkwić w miejscu w stosunku do treści) lub pozostawać nieruchomo (tkwić w miejscu w stosunku do ekranu). W tym drugim przypadku powinniśmy podać definicję: BODY {background: url(nazwa_obrazka); background-attachment: fixed}

18 Pozycja tła Tło może mieć różną pozycję. Najbardziej typowym przykładem jest tło strony, którym jest obrazek. tło na środku strony tło jako pojedynczy obrazek na środku ekranu, czyli za pomocą polecenia BODY {background: url(pcq.gif) fixed no-repeat center}. background-position: wartość W przykładowej tabeli (z jedną komórką) możemy wstawić grafikę jako tło, bez definiowania pozycji. Możemy jednak określić pozycję tła: background-position: top background-position: center background-position: bottom W powyższych przykładach grafika ustawiała się domyślnie na środku, jeśli chodzi o położenie poziome. Możemy jednak definiować także wartości dla położenia poziomego: background-position: left Możemy mieszać wartości pozycji pionowej i poziomej, na przykład top left czy bottom right: background-position: top right Możliwe jest wreszcie podanie wartości liczbowych, np. background-position: 1cm 2cm, czyli 1 centymetr od lewego brzegu i 2cm od prawego. background-position: 1cm 2cm background-position: 20% 80%

19 Mieszane atrybuty tła Najwygodniejszym sposobem definiowania tła jest oczywiście wykorzystanie tzw. definicji mieszanej, w której nie powtarza się całego zestawu "zaklęć" background-repeat, background-position itd. Wykorzystujemy tu polecenie: background: kolejne wartości Na przykład, polecenie dla komórki tabeli: <td style="background: url(obrazek) no-repeat bottom right> spowoduje, że w komórce pokaże się dany obrazek (url), nie będzie się powtarzał (no-repeat) i będzie umieszczony w dolnym prawym rogu (bottom right). Pokazana wyżej strona z pojedynczym obrazkiem jako tłem ma mieszaną definicję: BODY {background: url(pcq.gif) fixed no-repeat center} Dzięki takiej definicji strona ma tło w postaci pojedynczego (no-repeat) obrazka (url), który jest umieszczony na środku ekranu i nie porusza się (center fixed).

20 Suwaki Nowsze wersje Internet Explorera interpretują definicję kolorów suwaków (scrollbar), pojawiających się w oknie przeglądarki, gdy dokument jest dłuższy lub szerszy niż okno. Definicja taka została zastosowana m.in. w naszym kursie.definicja może dotyczyć wszystkich elementów, w których pojawiają się suwaki. Typowym użyciem jest BODY, choć może to być np. także IFRAME, SELECT czy TEXTAREA. W tym miejscu zaprezentujemy przykłady dla ciała dokumentu. 7 możliwych części suwaków: Scrollbar-Base-Color: kolor powierzchni suwaka i strzałek oraz rynny suwaka Scrollbar-Face-Color: kolor powierzchni suwaka i strzałek, a także kolor składowy rynny suwaka Scrollbar-Arrow-Color: kolor strzałek Scrollbar-Highlight-Color: kolor składowy rynny suwaka Scrollbar-Shadow-Color: kolor płytszego cienia Scrollbar-Dark-Shadow-Color: kolor głębszego cienia Scrollbar-3dLight-Color: kolor zewnętrznego cienia scrollbar-base-color:blue

21 scrollbar-face-color:blue scrollbar-arrow-color:blue scrollbar-highlight-color:blue scrollbar-shadow-color:blue

22 scrollbar-dark-shadow-color:blue scrollbar-3dlight-color:blue Pełna definicja kolorów suwaków : body { scrollbar-3dlight-color:tan; scrollbar-arrow-color:#000000; scrollbar-base-color:black; scrollbar-dark-shadow-color:#000000; scrollbar-face-color:#008080; scrollbar-highlightcolor:snow; scrollbar-shadow-color:lightblue}

23 cursor:styl_kursora <img src="lupus.gif" width=176 height=200 alt="" border="0" style="cursor:help"> Oto cała lista kursorów cursor:crosshair cursor:hand cursor:move cursor:e-resize cursor:ne-resize cursor:nw-resize cursor:n-resize cursor:se-resize cursor:sw-resize cursor:s-resize cursor:w-resize cursor:text cursor:wait cursor:help cursor:default cursor:auto