Rys.1. Prosty przykład strony www

Podobne dokumenty
Wykład 5_2 Arkusze stylów dziedziczenie. Technologie internetowe Zofia Kruczkiewicz

Wykład 6 Skrypty typu JavaScript. Technologie internetowe Zofia Kruczkiewicz

Wykład 2_1 TINT. Kaskadowe arkusze stylu Wprowadzenie, formatowanie tekstu, czcionki. Zofia Kruczkiewicz

Wykład 5_1 TINT Formularze. Zofia Kruczkiewicz

Wykład 4_1 TINT. Obiekty graficzne. Zofia Kruczkiewicz

Znaczniki języka HTML

ZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW

CSS pozwala przypisać poszczególnym elementom na. grubość, rozmiar czcionki, kolor tła, odległości między

LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW

Wykorzystano fragmenty wykładów dra inż. J. Kuchty ARKUSZE STYLÓW CSS. Dokumenty cyfrowe KASK ETI Politechnika Gdańska.

APLIKACJE INTERNETOWE 3 CSS - W Y G L Ą D S T R O N Y I N T E R N E T O W E J

Kaskadowe arkusze stylów cz. 2

Wykład 2: Kaskadowe arkusze stylów (CSS Cascade Style Sheets)

Alfabetyczna lista stylów

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH

Responsywne strony WWW

Wprowadzenie do Internetu zajęcia 3

CSS - layout strony internetowej

Arkusze styli zwi kszaj kontrol nad wygl dem strony, poprzez zastosowanie szeregu opcji przypisywanych do danych elementów samego HTML'a.

Tworzenie stylów w HTML

Zastosowanie kaskadowych arkuszy stylów (CSS - Cascading Style Sheets) w technologii JavaServer Faces

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

XHTML Budowa strony WWW

Projektowanie aplikacji internetowych. CSS w akcji

Technologie Informacyjne

TECHNOLOGIE SIECI WEB

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

Podstawy (X)HTML i CSS

Krótki przegląd własności języka CSS

Wykład 4. Specyfikacje XHTML, formularze

WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.

za pomocą: definiujemy:

Wykład 2 - część I. I. Klasy i selektory. dr Artur Bartoszewski - Nowoczesne technologie informatyczne - WYKŁAD

Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.

Inwestycja - kompleks dwóch budynków mieszkalnych wielorodzinnych

Wykorzystano fragmenty wykładów dra inż. J. Kuchty ARKUSZE STYLÓW CSS. Dokumenty cyfrowe KASK ETI Politechnika Gdańska.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Systemy internetowe Wykład 2 CSS

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz

HTML (HyperText Markup Language) hipertekstowy język znaczników

Hyper Text Markup Language

plansoft.org Zmiany w Plansoft.org

Sierpień 2015 rozwiązanie plik: index.htlm

H2.cjk { font-family: "Microsoft YaHei"; font-size: 14pt; font-style: italic; font-weight:

CSS - 2. Właściwości tekstu, czcionek

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

Laboratorium 1: Szablon strony w HTML5

HTML (HyperText Markup Language)

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets)

Dokument hipertekstowy

Dokument hipertekstowy

Aplikacje internetowe. Interfejs użytkownika

KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)

p { color: yellow; font-weight:bold; }

Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

CSS - style kaskadowe. Cascadind Style Sheets

HTML podstawowe polecenia

Budowa aplikacji wielowarstwowych. Zastosowanie Kaskadowych arkuszy stylów (CSS)

2. Prezentacja wizualna

Elementarz HTML i CSS

kaskadowe arkusze stylów

Paweł Rajba

A P L I K A C J E I N T E R N E T O W E KONSPEKT nr 3 (DIV, galeria, formularze)

Selektory Pseudoklasy. Gabriela Panuś

PROJEKTOWANIE STRON WWW

Tworzenie Stron Internetowych. odcinek 6

Projektowanie stron WWW

Systemy internetowe HTML

<body> <div style="max-width: 900px; margin: 0 auto;">

Norton Sec.3.0 STD PL CARD 1U 1Dvc 1Y Model : Norton Sec.3.0 STD PL CARD 1U 1Dvc 1Y ram sp. j.

CSS. Kaskadowe Arkusze Stylów

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Tworzenie stron WWW. Ilustrowany przewodnik. Wydanie II

Wykład 2 CSS. Michał Drabik

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

FrontPage 2002/XP PL. Æwiczenia praktyczne

Jednostki miar stosowane w CSS

Języki programowania wysokiego poziomu. CSS Wskazówki

Wybrane znaczniki HTML

1. HTML dla zielonych

CSS. Gotowe rozwi¹zania

Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach. dr Beata Kuźmińska-Sołśnia

Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r.

Budowa dokumentu HTML 5

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ

Rozwiązania zadań EGZAMINACYJNYCH- WITRYNY

Bazy Danych i Usługi Sieciowe

Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski

Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW

Czcionki. Rodzina czcionki [font-family]

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

DOM (Document Object Model)

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Transkrypt:

Wykład 5 Kaskadowe arkusze stylów CSS element dynamiczny języka HTML (DHTML) Kaskadowe arkusze stylów pozwalają projektantowi: kontrolować wygląd dokumentu oddzielić tę kontrolę od języka HTML, czyli od struktury dokumentu łączyć w sposób uporządkowany sekwencję informacji na temat stylu z wielu źródeł stąd kaskadowe arkusze stylów- wg kolejności priorytetów (najwyŝszy priorytet ma sposób 1): 1. włączane arkusze stylów (w elementach HTML jako atrybut) 2. wewnętrzne arkusze stylów (w bloku znacznika <head>) 3. zewnętrzne arkusze stylów 4. domyślne style przeglądarki 1. Dołączanie arkuszy stylów do strony www Rys.1. Prosty przykład strony www Walidacja: http://jigsaw.w3.org/css-validator/ Zofia Kruczkiewicz, Wykład 5, HTML 1

1.1. Włączane arkusze stylów zastosowane do danych znaczników HTML atrybut style <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>arkusze stylów</title> </head> <body> <h1 style="color:blue ">Styl nagłówka</h1> <div style="color:red"> Tekst akapitu.</div> </body> </html> Rys.2. Włączany arkusz stylów jako atrybut w znacznikach <h1> i <div> dla strony z rys.1 1.2. Wewnętrzny arkusz stylów <style> </style> umieszczony w nagłówku dokumentu HTML (w bloku <head>) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>arkusze stylów</title> <style type="text/css"> body { color: red} h1 { color: blue } </style> </head> <body> <h1>styl nagłówka </h1> <div> Tekst akapitu.</div> </body> </html> Rys.3. Wewnętrzny arkusz stylów w bloku znacznika <head > dla strony z rys.1 Zofia Kruczkiewicz, Wykład 5, HTML 2

1.3. Zastosowanie zewnętrznych arkuszy stylów body { color: red } h1 { color: blue } Rys. 4. Definicja arkusza stylów w pliku zewnętrznym Styl1.css <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>arkusze stylów</title> <link rel="stylesheet" href="styl1.css" type="text/css"></link> </head> <body> <h1>styl nagłówka</h1> <div> Tekst akapitu.</div> </body> </html> Rys. 5. Sposób dołączania zewnętrznych arkuszy stylów, których definicja jest umieszczona w pliku zewnętrznym Zastosowanie pliku zewnętrznego ułatwia ujednolicenie wyglądu stron www wchodzących w skład prezentacji. Zasady stosowania ze stylów umieszczonych w plikach zewnętrznych <link rel="stylesheet" href="styl1.css" type="text/css"></link> Styl narzucony (rel="stylesheet") jest stosowany zawsze, niezaleŝnie od wyboru dokonanego przez uŝytkownika Styl domyślny (title="dowolny styl", gdy rel = "stylesheet") jest stosowany po załadowaniu strony, lecz moŝna go zastąpić stylami alternatywnymi Style alternatywne dla rel= "alternate stylesheet" moŝna wybierać jak opcje dla uŝytkownika (w przeciwieństwie do stylu domyślnego) Zofia Kruczkiewicz, Wykład 5, HTML 3

Przykład definiowania stylu nagłówka i akapitów za pomocą stylu narzuconego ( <link rel="stylesheet" href="styl2.css" type="text/css"></link>) i uzupełniania go za pomocą stylu domyślnego ( <link rel="stylesheet" title="plain (by David Baron) - domyślny" href="http://dbaron.org/style/plain"></link> ) lub stylów alternatywnych np. ( <link rel="alternate stylesheet" title="modernist" href="http://www.w3.org/stylesheets/core/modernist"></link>) Zofia Kruczkiewicz, Wykład 5, HTML 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>arkusze stylów</title> <link rel="alternate stylesheet" title="oldstyle" href="http://www.w3.org/stylesheets/core/oldstyle"></link> <link rel="alternate stylesheet" title="modernist" href="http://www.w3.org/stylesheets/core/modernist"></link> <link rel="alternate stylesheet" title="steely" href="http://www.w3.org/stylesheets/core/steely"></link> <link rel="alternate stylesheet" title="forest (by David Baron)" href="http://www.w3.org/stylesheets/core/steely"></link> <link rel="alternate stylesheet" title="forest (by David Baron)" href="http://dbaron.org/style/forest"></link> <link rel="stylesheet" title="plain (by David Baron) - domyślny" href="http://dbaron.org/style/plain"></link> <link rel="stylesheet" title=" - domyślny" href="styl2_.css"></link> <link rel="stylesheet" href="styl2.css" type="text/css"></link> </head> <body> <h1 id="body1">styl body1 nagłówka</h1> <p id="box1" id="box3"> Styl box1 akapitu.</p> <p id="box2"> Styl box2 akapitu.</p> </body> </html> Dołączanie stylów alternatywnych wg. http://www.w3.org/style/examples/007/alternatives.html Zofia Kruczkiewicz, Wykład 5, HTML 5

2. Przykłady definiowania własnych arkuszy stylów Rys.6. Definiowanie własnych stylów 2.1. Zastosowanie własnych (uŝytkownika) wewnętrznych arkuszy stylów - zastosowanie atrybutu id <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>arkusze styl?</title> <style type="text/css"> h1#body1 { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin-left:50px;color:blue;} #box1 {position: relative; left:50px; width:150px;color:red; overflow:auto;} #box2 {position: relative; top:5px; left:50px; color:green; overflow:auto;} </style> </head> <body> <h1 id="body1">styl body1 nagłówka </h1> <p id="box1"> Styl box1 akapitu.</p> <p id="box2"> Styl box2 akapitu.</p> </body> </html> Rys.7. Strona www o postaci z rys.6- definicja wewnętrznych arkuszy stylów uŝytkownika w nagłówku dokumentu - zastosowanie atrybutu id Zofia Kruczkiewicz, Wykład 5, HTML 6

2.2. Zastosowanie własnych (uŝytkownika) zewnętrznych arkuszy stylów atrybut id h1#body1 { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin-left:50px;color:blue } #box1 {position: relative; left:50px; width:150px;color:red; overflow:auto} #box2 {position: relative; top:5px; left:50px; color:green; overflow:auto} Rys.8. Plik zewnętrzny styl2.css z definicją arkusza stylów uŝytkownika wykorzystywanych za pomocą atrybutu id <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>arkusze stylów</title> <link rel="stylesheet" href="styl2.css" type="text/css"></link> </head> <body> <h1 id="body1">styl body1 nagłówka </h1> <p id="box1"> Styl box1 akapitu.</p> <p id="box2"> Styl box2 akapitu.</p> </body> </html> Rys. 9. Definicja strony o postaci z rys.6 z wykorzystaniem definicji zewnętrznych arkuszy stylów uŝytkownika w pliku styl2.css, stosowanych za pomocą atrybutu id Zofia Kruczkiewicz, Wykład 5, HTML 7

2.3. Zastosowanie definicji własnych (uŝytkownika) zewnętrznych arkuszy stylów - zastosowanie atrybutu class h1.body1 { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin-left:50px;color:blue; }.box1 {position:relative;left:50px;width:150px;color:red; overflow:auto;}.box2 {position: relative; top:5px; left:50px; color:green; overflow:auto;} Rys.10. Plik zewnętrzny styl3.css z definicją zewnętrznego arkusza stylów uŝytkownika uŝywanego za pomocą atrybutu class <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>arkusze stylów</title> <link rel="stylesheet" href="styl3.css" type="text/css"></link> </head> <body> <h1 class="body1">styl body1 nagłówka </h1> <p class="box1"> Styl box1 akapitu.</p> <p class="box2"> Styl box2 akapitu.</p> </body> </html> Rys.11. Strona www o postaci z rys.6- definiowanie zewnętrznych arkuszy stylów uŝytkownika - zastosowanie atrybutu class Zofia Kruczkiewicz, Wykład 5, HTML 8

Property Description Values margin A shorthand property margin-top margin-right for setting the margin margin-bottom margin-left properties in one declaration margin-bottom Sets the bottom margin of an element auto margin-left Sets the left margin of auto an element margin-right Sets the right margin auto of an element margin-top Sets the top margin of auto an element Property Description Values color Sets the color of a text color direction Sets the text direction ltr rtl letter-spacing Increase or decrease the normal space between characters text-align Aligns the text in an left right center justify element text-decoration Adds decoration to text none underline overline line-through blink text-indent Indents the first line of text in an element text-shadow none color text-transform Controls the letters in an element none capitalize uppercase lowercase unicode-bidi normal embed bidi-override white-space word-spacing Sets how white space inside an element is handled Increase or decrease the normal pre nowrap normal space between words Uwaga: W trzeciej kolumnie dla elementów napisanych pochyloną czcionką naleŝy podawać wartości we właściwych jednostkach. Zofia Kruczkiewicz, Wykład 5, HTML 9

2.4. Zastosowanie selektorów kontekstowych h1 i { font-family: "Gill Sans", sans-serif; font-size: 12pt; color:blue } #box1 {position: relative; left:50px; width:150px;color:red;overflow:auto} #box2 {position: relative; top:5px; left:50px; color:green;overflow:auto} Rys.12. Plik zewnętrzny styl4.css z definicjami zewnętrznych arkuszy stylów uŝytkownika i kontekstowego <i> dla znacznika <h1> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>arkusze stylów</title> <link rel="stylesheet" href="styl4.css" type="text/css"></link> </head> <body> <h1> <i> Styl nagłówka</i></h1> <h1> Styl nagłówka</h1> <p id="box1"> <i> Styl box1 akapitu.</i></p> <p id="box2"> Styl box2 akapitu.</p> </body> </html> Rys.13. Strona www o postaci z rys.14-zastosowanie selektora kontekstowego <i> w zewnętrznych arkuszach stylów Rys.14. Zastosowanie selektora kontekstowego <i> do wyróŝnienia stylu nagłówka Zofia Kruczkiewicz, Wykład 5, HTML 10

3.Wygląd czcionki i jej styl Rys.15. Zastosowanie atrybutu font body {font-family:verdana, Geneva, Arial, Helvetica, sans-serif; color:red; background-color:#ffffff}.tekst1 { font: 12pt/14pt sans-serif }.tekst2 { font: 80 sans-serif }.tekst3 { font: x-large/110 "new century schoolbook", serif}.tekst4 { font: bold italic large Palatino, serif }.tekst5 { font: normal small-caps 120/120 fantasy }.tekst6 { font: oblique 12pt "Helvetica Nue",serif; font-stretch:condensed} h1{color:blue;background-color:#ffffff} Rys.16. Plik zewnętrzny styl5.css z definicjami zewnętrznych arkuszy stylów uŝytkownika i kontekstowych <h1> i <body> Zofia Kruczkiewicz, Wykład 5, HTML 11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>arkusze stylów</title> <link rel="stylesheet" href="styl5.css" type="text/css"></link> </head> <body> <h1>test-1</h1> <h2>test-1</h2> <h1 style= "font-family: 'Times New Roman', Times, serif">test0</h1> <p class="tekst1">test1</p> <p class="tekst2">test2</p> <p class="tekst3">test3</p> <p class="tekst4">test4</p> <p class="tekst5">test5</p> <p class="tekst6">test6</p> <p>test 7</p> </body> </html> Rys.17. Strona www o postaci z rys.15 - zastosowanie selektorów kontekstowych <h1> oraz stylów uŝytkownika w zewnętrznych arkuszach stylów Zofia Kruczkiewicz, Wykład 5, HTML 12

Ustawienie jednoczesne właściwości czcionki atrybut font Property Description Values font A shorthand property for font-style font-variant setting all of the properties for a font in one declaration font-weight font-family font-size/line-height caption icon menu message-box small-caption status-bar font-family A prioritized list of font family names and/or generic family names for an element family-name generic-family font-size Sets the size of a font xx-small x-small small medium large x-large xx-large smaller larger font-size-adjust Specifies an aspect value for an element that will preserve the x-height of the first-choice font font-stretch Condenses or expands the current font-family none number normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded font-style Sets the style of the font normal italic oblique font-variant Displays text in a smallcaps normal font or a normal font small-caps font-weight Sets the weight of a font normal bold bolder lighter 100 200 300 400 500 600 700 800 900 Uwaga: W trzeciej kolumnie dla elementów napisanych pochyloną czcionką naleŝy podawać wartości we właściwych jednostkach. Zofia Kruczkiewicz, Wykład 5, HTML 13

4. Zewnętrzne arkusze stylów dla tabel i tła Rys.18. Formatowanie tabeli i tła za pomocą zewnętrznych arkuszy stylów table { color:blue; border-top: 8px solid #003366; border-right: 6px solid #123456; border-bottom: 2px solid #FF2356; border-left: 4px solid #FF0033;} td { color:red;font: 12pt/14pt sans-serif; padding: 10px; border-top: 8px solid #000000; border-right: 6px solid #000000; border-bottom: 2px solid #000000; border-left: 4px solid #000000;} th { color:green; font: bold italic large Palatino, serif; padding: 10px; border-top: 8px solid #FF0000; border-right: 6px solid #FF0000; border-bottom: 2px solid #FF0000; border-left: 4px solid #FF0000;} body { background-image: url(clouds.wmf); background-repeat: repeat-x; background-position: center;}.tlo2 { background-color:#ffffff; margin-left:50px;} Rys. 19. Zewnętrzne arkusze stylów w pliku styl6.css ze stylem tabeli (<table>, <th><td>) oraz tła (background) dla <body> oraz uŝytkownika.tlo2 Zofia Kruczkiewicz, Wykład 5, HTML 14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>arkusze styl?</title> <link rel="stylesheet" href="styl6.css" type="text/css"></link> </head> <body> <h1>nagłówek H1</h1> <h2>nagłówek H2</h2> <h3>nagłówek H3</h3> <h4>nagłówek H4</h4> <p>napis w akapicie</p> <table class="tlo2"> <tr> <th>nagłówek kolumny 1</th> <th>nagłówek kolumny 2</th> </tr> <tr> <td>pierwsza komórka w pierwszym wierszu</td> <td>druga komórka w pierwszym wierszu</td> </tr> <tr> <td>pierwsza komórka w drugim wierszu</td> <td>druga komórka w drugim wierszu</td> </tr> </table> </body> </html> Rys. 20. Kod html strony www z rys. 18 stosujący zewnętrzne arkusze stylów z pliku styl6.css (kontekstowe i uŝytkownika) Zofia Kruczkiewicz, Wykład 5, HTML 15

Property Description Values background A shorthand property for setting all background properties in one declaration background-color background-image background-repeat backgroundattachment background-position background-attachment Sets whether a background image is fixed or scrolls with the rest of the page background-color Sets the background color of an element background-image Sets an image as the background background-position Sets the background-repeat scroll fixed color-rgb color-hex color-name transparent url none top left starting position top center of a background top right image Sets if/how a background image will be repeated center left center center center right bottom left bottom center bottom right x- y- x-pos y-pos repeat repeat-x repeat-y no-repeat Uwaga: W trzeciej kolumnie dla elementów napisanych pochyloną czcionką naleŝy podawać wartości we właściwych jednostkach. Zofia Kruczkiewicz, Wykład 5, HTML 16

5. Pozycjonowanie tekstu znacznik div i arkusze stylów. Zastosowanie- Tabele wykonane za pomocą znacznika div i arkuszy stylów Przykład 1 Rys.21. Strony z tabelami wykonane za pomocą znaczników div i arkuszy stylów Zofia Kruczkiewicz, Wykład 5, HTML 17

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Znacznik div - wersja z kaskadowymi arkuszami stylów. </title> <link rel="stylesheet" type="text/css" href="styldiv0.css" media="screen" /> </head> <body> <div class="tabela"> <div class="naglowek"> <h1 class="naglowek">znaczniki div i arkusze stylów. </h1> </div> <div class="komorka1"> <p>pierwsza komórka.</p> </div> <div class="komorka2"> <p> Środkowa komórka </p> </div> <div class="komorka3"> <p>trzecia komórka.</p> <object class="rozmiar" type="text/html" data="b3.html"></object> </div> <div class="stopka"> <p>podpis tabeli</p> </div> </div> </body> </html> Rys.22. Kod html strony z rys.21 rolę znacznika <iframe> przejął <object> div.tabela { width: 900px; height: 400px; margin: 0 auto; } div.naglowek, div.stopka {padding:0.5em; color:white; background-color:blue; clear:left; } h1.naglowek { padding:0; margin:0; } div.komorka1 { float: left; height: 100; width: 20; margin: 0; padding: 0; } div.komorka2 { float: left; height: 100; width:20; margin: 0; padding: 0; border-left:1px solid gray; } div.komorka3 { float: left; height: 100; margin: 0; padding: 0; border-left:1px solid gray; } object.rozmiar { width:100; height:80; } Rys.23. Kod css dla strony z rys.21 definicja stylów div, h1 i object Zofia Kruczkiewicz, Wykład 5, HTML 18

Przykład 2 dokonano zmiany arkusza stylów- wprowadzono definicję wiersza Rys. 24. Znaczniki div i arkusz stylów zastosowane do budowy jednowierszowej tabeli z nagłówkiem i podpisem div.tabela {width: 900px; height: 400px; margin: 0 auto; } div.naglowek,div.stopka {padding:0.5em; color:white; background-color:blue; clear:left; } h1.naglowek {padding:0; margin:0;} div.wiersz {width:100; height:50; border-bottom:1px solid gray; border-top:1px solid gray; border-right:1px solid gray;} div.komorka1, div.komorka2 {float: left; height:100; margin: 0; padding: 0; border-left:1px solid gray; } div.komorka2 { width:20; } object.rozmiar { width:100; height:80;} Rys.25 Arkusz stylów z wprowadzonym stylem wiersza Zofia Kruczkiewicz, Wykład 5, HTML 19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Znacznik div - wersja z kaskadowymi arkuszami stylów. </title> <link rel="stylesheet" type="text/css" href="styldiv.css" media="screen" /> </head> <body> <div class="tabela"> <div class="naglowek"><h1 class="naglowek">znaczniki div i arkusze stylów.</h1> </div> <div class="wiersz"> <div class="komorka1"> <h2>pierwsza komórka. </h2> <div class="komorka1"> <h2> Środkowa komórka. </h2> <div class="komorka2"> <h2>trzecia komórka. </div> </h2> <object class="rozmiar" type="text/html" data="b3.html"> </object> <div class="stopka"> <h2>podpis tabeli</h2> </div> </body> </html> Rys.26. Kod html jednowierszowej tabeli Przykład 3. Plik ze stylem bez zmian, dodano drugi wiersz. </div> </div> </div> </div> Rys. 27. Znaczniki div i arkusz stylów zastosowane do budowy dwuwierszowej tabeli z nagłówkiem i podpisem Zofia Kruczkiewicz, Wykład 5, HTML 20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Znacznik div - wersja z kaskadowymi arkuszami stylów. </title> <link rel="stylesheet" type="text/css" href="styldiv.css" media="screen" /> </head> <body> <div class="tabela"> <div class="naglowek"><h1 class="naglowek"> Znaczniki div i arkusze stylów.</h1> </div> <div class="wiersz"> <div class="komorka1"><h2>pierwsza komórka. </h2> <div class="komorka1"><h2> Środkowa komórka. </h2> <div class="komorka2"><h2>trzecia komórka. </h2> </div> </div> <object class="rozmiar" type="text/html" data="b3.html"> </object> </div> </div> <div class="wiersz"> <div class="komorka1"><h2>pierwsza komórka. </h2> <div class="komorka1"><h2> Środkowa komórka. </h2> <div class="komorka2"><h2>trzecia komórka. </h2> </div> </div> <object class="rozmiar" type="text/html" data="b3.html"> </object> </div> </div> <div class="stopka"> <h2>podpis tabeli</h2> </div> </div> </body> </html> Rys. 28. Kod html tablicy dwuwierszowej wykonanej za pomocą znaczników div i arkuszy stylow Zofia Kruczkiewicz, Wykład 5, HTML 21

6. Zewnętrzne arkusze stylów dla formularzy i list Rys.29. Formatowanie elementów formularza (<input>, <textarea>, <select>) oraz listy <ol> i elementów listy <li> za pomocą zewnętrznych arkuszy stylów kontekstowych i uŝytkownika Zofia Kruczkiewicz, Wykład 5, HTML 22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>formularz ankiety-zewnetrzne arkusze stylów</title> <link rel="stylesheet" href="styl7.css" type="text/css"></link> </head> <body> <h2>ankieta</h2> <form method="post" action="http://sprocket.ict.pwr.wroc.pl/~zkruczkiewicz/ankieta1.php"> <pre> <i>podaj nazwisko:</i><input type ="text" name="nazwisko" class="poletekstowe"/> <i>podaj imię</i> <input type ="text" name="imie"/></pre> <p><i>płeć</i> <select name="plec" size="1"> <option>męŝczyzna</option> <option selected="selected" class="wybor">kobieta</option> </select></p> <p><i>podaj swoje umiejętności<br/> Zaznacz wszystkie moŝliwe odpowiedzi</i> </p> <ol> <li><input type="checkbox" name="komputer" checked="checked" class="wybor"/>znajomość obsługi komputera</li> <li><input type="checkbox" name="prawo_jazdy"/> Posiadanie prawa jazdy</li> <li><input type="checkbox" name="angielski" checked="checked"/> Znajomość języka angielskiego</li> <li><input type="checkbox" name="niemiecki"/> Znajomość języka niemieckiego</li> </ol> <i>napisz o swoich dodatkowych umiejętnościach</i><br/> <textarea name="coment" rows="5" cols="50"></textarea> <p> <input type="submit" value="prześlij dane operacji"/><br/> <input type="reset" value="wyczyść dane" class="przycisk"/><br/> </p> </form> </body> </html> Rys. 30. Kod html strony www z rys. 21 stosujący zewnętrzne arkusze stylów z pliku styl7.css (kontekstowe i uŝytkownika) Zofia Kruczkiewicz, Wykład 5, HTML 23

input { background-color: #ececec; color: black; font-family: arial, verdana, ms sans serif; font-weight: bold; font-size: 12pt } textarea { background-color: gray; color: white; border: black 2px solid; font-family: arial, verdana, ms sans serif; font-size: 12pt; font-weight: normal } select { font-family: arial, verdana, ms sans serif; font-size: 12pt;font-weight: bold; }.przycisk { background-color: #c0c0c0; color: #778899; font-family: verdana; border: #000000 1px solid; font-size: 12px; }.poletekstowe { background-color: #99ccff; color: #09c09c; font-family: verdana; font-size: 12pt; }.wybor { background-color: #FF0000; color: #000000; border: #000000 solid 1px; font-family: verdana; font-size: 12px; } li { font-family: arial, verdana, ms sans serif; font-size: 15px; } ol { list-style-type: upper-roman; list-style-position: inside; } Rys. 31. Zewnętrzne arkusze stylów w pliku styl7.css ze stylami (<input>, <textarea>, <ol>, <li>, <select>) oraz uŝytkownika (.wybor,.poletekstowe,.przycisk) Zofia Kruczkiewicz, Wykład 5, HTML 24

7. Połączenia pseudoklasy dla znacznika <a> Rys.32. Formatowanie połączeń <a> (visited, hover, active, link) za pomocą zewnętrznych arkuszy stylów kontekstowych i uŝytkownika (uwaga: wybór linku oznacza najechanie na jego tekst kursorem myszy) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset= utf-8"/> <title>zewnętrzne arkusze stylów</title> <link rel="stylesheet" href="styl8.css" type="text/css"></link> </head> <body> <h1>czym jest XHTML</h1> <p> XHTML słuŝy do tworzenia stron Internetowych. <br/>pozwala on na:</p> <ul type="circle"> <li><a href="c1.html" class="podkreslenie"> Wybrany link staje się podkreślony</a></li> <li><a href="c3.html" class="wybor">wybrany link zmienia styl napisu</a> </li> <li><a href="#" class="podswietlenie">po wybraniu linku znika tekst</a> </li> <li><a href="b.html" class="ramka"> Po wybraniu link podświetla się i znika tekst.</a></li> </ul> </body> </html> Rys. 33. Kod html strony www z rys. 24 stosujący zewnętrzne arkusze stylów z pliku styl8.css (kontekstowe i uŝytkownika) Zofia Kruczkiewicz, Wykład 5, HTML 25

a:link {text-decoration:none;color: red;} a:visited {color: green;} a:hover {text-decoration:none;} a:active {color: blue;} a.podkreslenie {color: black;} a.podkreslenie:visited {text-decoration:none;color: blue;} a.podkreslenie:hover {text-decoration:underline;color: green;} a.podkreslenie:active {color: red;} a.podswietlenie:visited { color: gray; padding: 12px;} a.podswietlenie:hover {color: white; background-color:white; padding: 12px;} a.wybor { font-family: arial, helvetica, sans-serif; text-decoration: underline;} a.wybor:hover {font-family: arial, helvetica, sans-serif; font-weight: bold; text-decoration: underline; letter-spacing: 3px;} a.ramka { background-color: #FFFFFF; color: #000000; text-decoration: none; border: medium solid #000000; font-family: Verdana, Arial, Helvetica, sans-serif;} a.ramka:hover { background-color: #000000; color: #000000; text-decoration: none; border: medium solid #0000FF; font-family: Verdana, Arial, Helvetica, sans-serif;} Rys. 34. Zewnętrzne arkusze stylów w pliku styl8.css ze stylami dla znacznika <a> oraz uŝytkownika (.wybor,.podswietlenie,.podkreslenie,.ramka) Pseudoklasy dla znacznika <a> - przykłady stylów kolorów a:link { color: red } /* unvisited links */ a:visited { color: blue } /* visited links */ a:hover { color: yellow } /* user hovers */ a:active { color: lime } /* active links */ Zofia Kruczkiewicz, Wykład 5, HTML 26

Property Description Values IE F N W3C background A shorthand property for setting all background properties in one declaration background-color background-image background-repeat background-attachment background-position 4 1 6 1 background-attachment background-color Sets whether a background image is fixed or scrolls with the rest of the page Sets the background color of an element Zofia Kruczkiewicz, Wykład 5, HTML 27 scroll fixed color-rgb color-hex color-name transparent background-image Sets an image as the background url none background-position Sets the starting position of a top left background image top center top right center left center center center right bottom left bottom center bottom right x- y- x-pos y-pos background-repeat Sets if/how a background image will be repeated repeat repeat-x repeat-y no-repeat 4 1 6 1 4 1 6 1 Border On-line examples Property Description Values IE F N W3C border A shorthand property for setting all border-width of the properties for the four borders border-style in one declaration border-color border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration border-bottom-width border-style border-color 4 1 6 1 border-bottom-color Sets the color of the bottom border border-color 4 1 6 2 border-bottom-style Sets the style of the bottom border border-style 4 1 6 2 border-bottom-width Sets the width of the bottom border thin medium thick border-color Sets the color of the four borders, color 4 1 6 1 can have from one to four colors border-left A shorthand property for setting all border-left-width 4 1 6 1 of the properties for the left border in one declaration border-style border-color border-left-color Sets the color of the left border border-color 4 1 6 2 border-left-style Sets the style of the left border border-style 4 1 6 2 border-left-width Sets the width of the left border thin medium thick border-right A shorthand property for setting all border-right-width 4 1 6 1 of the properties for the right border border-style in one declaration border-color border-right-color Sets the color of the right border border-color 4 1 6 2 border-right-style Sets the style of the right border border-style 4 1 6 2 border-right-width Sets the width of the right border thin medium thick border-style Sets the style of the four borders, can have from one to four styles none hidden dotted 4 1 6 1

border-top A shorthand property for setting all of the properties for the top border in one declaration dashed solid double groove ridge inset outset border-top-width border-style border-color 4 1 6 1 border-top-color Sets the color of the top border border-color 4 1 6 2 border-top-style Sets the style of the top border border-style 4 1 6 2 border-top-width Sets the width of the top border thin medium thick border-width A shorthand property for setting the thin width of the four borders in one declaration, can have from one to four values medium thick Classification On-line examples Property Description Values IE F N W3C clear cursor display float position visibility Sets the sides of an element where other floating elements are not allowed Specifies the type of cursor to be displayed left right both none url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help Sets how/if an element is displayed none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption Sets where an image or a text will appear in another element Places an element in a static, relative, absolute or fixed position Sets if an element should be visible or invisible left right none static relative absolute fixed visible hidden collapse 4 1 6 2 4 1 4 2 4 1 6 2 Zofia Kruczkiewicz, Wykład 5, HTML 28

Dimension On-line examples Property Description Values IE F N W3C height Sets the height of an element auto 4 1 6 1 line-height Sets the distance between lines normal number max-height max-width Sets the maximum height of an element Sets the maximum width of an element none none min-height Sets the minimum height of an element min-width Sets the minimum width of an element width Sets the width of an element auto - 1 6 2-1 6 2-1 6 2-1 6 2 Font On-line examples Property Description Values IE F N W3C font A shorthand property for setting all of the properties for a font in one declaration font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar font-family A prioritized list of font family names family-name and/or generic family names for an generic-family element font-size Sets the size of a font xx-small x-small small medium large x-large xx-large smaller larger font-size-adjust font-stretch Specifies an aspect value for an element that will preserve the x- height of the first-choice font Condenses or expands the current font-family none number font-style Sets the style of the font normal italic oblique font-variant Displays text in a small-caps font or a normal font normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded normal small-caps 3 1 4 1 3 1 4 1 - - - 2 - - - 2 4 1 6 1 Zofia Kruczkiewicz, Wykład 5, HTML 29

font-weight Sets the weight of a font normal bold bolder lighter 100 200 300 400 500 600 700 800 900 Generated Content Property Description Values IE F N W3C content counter-increment counter-reset Generates content in a document. Used with the :before and :after pseudo-elements Sets how much the counter increments on each occurrence of a selector Sets the value the counter is set to on each occurrence of a selector string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, liststyle-type) attr(x) open-quote close-quote no-open-quote no-close-quote none identifier number none identifier number 1 6 2 quotes Sets the type of quotation marks none - 1 6 2 string string List and Marker On-line examples Property Description Values IE F N W3C list-style list-style-image list-style-position A shorthand property for setting all of the properties for a list in one declaration Sets an image as the list-item marker Sets where the list-item marker is placed in the list list-style-type list-style-position list-style-image none url inside outside 2 2 4 1 6 1 4 1 6 1 4 1 6 1 list-style-type Sets the type of the list-item marker none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha marker-offset auto 1 7 2 Margin On-line examples Property Description Values IE F N W3C Zofia Kruczkiewicz, Wykład 5, HTML 30

margin margin-bottom A shorthand property for setting the margin properties in one declaration Sets the bottom margin of an element margin-top margin-right margin-bottom margin-left auto margin-left Sets the left margin of an element auto 3 1 4 1 margin-right Sets the right margin of an element auto 3 1 4 1 margin-top Sets the top margin of an element auto 3 1 4 1 Outlines Property Description Values IE F N W3C outline outline-color outline-style outline-width A shorthand property for setting all the outline properties in one declaration Sets the color of the outline around an element Sets the style of the outline around an element Sets the width of the outline around an element outline-color outline-style outline-width color invert none dotted dashed solid double groove ridge inset outset thin medium thick - - - 2 - - - 2 - - - 2 - - - 2 Padding On-line examples Property Description Values IE F N W3C padding padding-bottom padding-left padding-right padding-top A shorthand property for setting all of the padding properties in one declaration Sets the bottom padding of an element Sets the left padding of an element Sets the right padding of an element Sets the top padding of an element padding-top padding-right padding-bottom padding-left Positioning On-line examples Property Description Values IE F N W3C bottom clip left overflow position Sets how far the bottom edge of an element is above/below the bottom edge of the parent element Sets the shape of an element. The element is clipped into this shape, and displayed auto shape auto Sets how far the left edge of an auto element is to the right/left of the left edge of the parent element Sets what happens if the content of an element overflow its area Places an element in a static, relative, absolute or fixed position visible hidden scroll auto static relative 5 1 6 2 4 1 6 2 4 1 4 2 4 1 6 2 4 1 4 2 Zofia Kruczkiewicz, Wykład 5, HTML 31

right top vertical-align Sets how far the right edge of an element is to the left/right of the right edge of the parent element absolute fixed auto Sets how far the top edge of an auto element is above/below the top edge of the parent element Sets the vertical alignment of an element baseline sub super top text-top middle bottom text-bottom 5 1 6 2 4 1 4 2 z-index Sets the stack order of an element auto 4 1 6 2 number Table Property Description Values IE F N W3C border-collapse Sets the border model of a table collapse 5 1 7 2 separate border-spacing Sets the distance between the borders of adjacent cells (only for the "separated borders" model) - 1 6 2 caption-side empty-cells table-layout Sets the position of the caption according to the table Sets whether cells with no visible content should have borders or not (only for the "separated borders" model) Sets the algorithm used to lay out the table top bottom left right show hide auto fixed - 1 6 2-1 6 2 5 1 6 2 Text On-line examples Property Description Values IE F N W3C color Sets the color of a text color 3 1 4 1 direction Sets the text direction ltr 6 1 6 2 rtl letter-spacing Increase or decrease the space normal 4 1 6 1 between characters text-align Aligns the text in an element left right center justify text-decoration Adds decoration to text none underline overline line-through blink text-indent Indents the first line of text in an element text-shadow none color text-transform Controls the letters in an element none capitalize uppercase lowercase unicode-bidi normal embed bidi-override 5 2 white-space Sets how white space inside an element is handled normal pre nowrap 5 1 4 1 Zofia Kruczkiewicz, Wykład 5, HTML 32

word-spacing Increase or decrease the space between words normal 6 1 6 1 Pseudo-classes On-line examples Pseudo-class Purpose IE F N W3C :active Adds special style to an activated element 4 1 1 :focus Adds special style to an element while the element has focus - - 2 :hover Adds special style to an element when you mouse over it 4 1 7 1 :link Adds special style to an unvisited link 3 1 4 1 :visited Adds special style to a visited link 3 1 4 1 :first-child Adds special style to an element that is the first child of some other element 1 7 2 :lang Allows the author to specify a language to use in a specified element 1 2 Pseudo-elements On-line examples Pseudo-element Purpose IE F N W3C :first-letter Adds special style to the first letter of a text 5 1 1 :first-line Adds special style to the first line of a text 5 1 1 :before Inserts some content before an element 2 :after Inserts some content after an element 2 Zofia Kruczkiewicz, Wykład 5, HTML 33