Rys.1. Prosty przykład strony www
|
|
|
- Eugeniusz Sikorski
- 6 lat temu
- Przeglądów:
Transkrypt
1 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: Zofia Kruczkiewicz, Wykład 5, HTML 1
2 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" " <html xmlns=" 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 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" " <html xmlns=" 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
3 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" " <html xmlns=" 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
4 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=" ) lub stylów alternatywnych np. ( <link rel="alternate stylesheet" title="modernist" href=" Zofia Kruczkiewicz, Wykład 5, HTML 4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" 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=" <link rel="alternate stylesheet" title="modernist" href=" <link rel="alternate stylesheet" title="steely" href=" <link rel="alternate stylesheet" title="forest (by David Baron)" href=" <link rel="alternate stylesheet" title="forest (by David Baron)" href=" <link rel="stylesheet" title="plain (by David Baron) - domyślny" href=" <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. Zofia Kruczkiewicz, Wykład 5, HTML 5
6 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" " <html xmlns=" 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
7 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" " <html xmlns=" 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
8 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" " <html xmlns=" 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
9 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
10 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" " <html xmlns=" 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
11 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
12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" 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
13 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 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
14 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
15 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" 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
16 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
17 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
18 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" 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
19 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
20 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" 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
21 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" 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
22 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
23 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" 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=" <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
24 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: # px solid; font-size: 12px; }.poletekstowe { background-color: #99ccff; color: #09c09c; font-family: verdana; font-size: 12pt; }.wybor { background-color: #FF0000; color: #000000; border: # 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
25 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" " <html xmlns=" 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
26 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
27 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 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 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 border-bottom-color Sets the color of the bottom border border-color border-bottom-style Sets the style of the bottom border border-style border-bottom-width Sets the width of the bottom border thin medium thick border-color Sets the color of the four borders, color can have from one to four colors border-left A shorthand property for setting all border-left-width 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 border-left-style Sets the style of the left border border-style border-left-width Sets the width of the left border thin medium thick border-right A shorthand property for setting all border-right-width 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 border-right-style Sets the style of the right border border-style 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
28 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 border-top-color Sets the color of the top border border-color border-top-style Sets the style of the top border border-style 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 Zofia Kruczkiewicz, Wykład 5, HTML 28
29 Dimension On-line examples Property Description Values IE F N W3C height Sets the height of an element auto 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 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 Zofia Kruczkiewicz, Wykład 5, HTML 29
30 font-weight Sets the weight of a font normal bold bolder lighter 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 quotes Sets the type of quotation marks none 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 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 Margin On-line examples Property Description Values IE F N W3C Zofia Kruczkiewicz, Wykład 5, HTML 30
31 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 margin-right Sets the right margin of an element auto margin-top Sets the top margin of an element auto 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 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 Zofia Kruczkiewicz, Wykład 5, HTML 31
32 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 z-index Sets the stack order of an element auto number Table Property Description Values IE F N W3C border-collapse Sets the border model of a table collapse separate border-spacing Sets the distance between the borders of adjacent cells (only for the "separated borders" model) 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 Text On-line examples Property Description Values IE F N W3C color Sets the color of a text color direction Sets the text direction ltr rtl letter-spacing Increase or decrease the space normal 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 Zofia Kruczkiewicz, Wykład 5, HTML 32
33 word-spacing Increase or decrease the space between words normal Pseudo-classes On-line examples Pseudo-class Purpose IE F N W3C :active Adds special style to an activated element :focus Adds special style to an element while the element has focus :hover Adds special style to an element when you mouse over it :link Adds special style to an unvisited link :visited Adds special style to a visited link :first-child Adds special style to an element that is the first child of some other element :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 :first-line Adds special style to the first line of a text :before Inserts some content before an element 2 :after Inserts some content after an element 2 Zofia Kruczkiewicz, Wykład 5, HTML 33
Wykład 5_2 Arkusze stylów dziedziczenie. Technologie internetowe Zofia Kruczkiewicz
Wykład 5_2 Arkusze stylów dziedziczenie Technologie internetowe Zofia Kruczkiewicz 1. Dziedziczenie stylów Zagnieżdżone elementy dziedziczą styl od elementów zagnieżdżających. Dziedziczenie stylu wynika
Wykład 6 Skrypty typu JavaScript. Technologie internetowe Zofia Kruczkiewicz
Wykład 6 Skrypty typu JavaScript Technologie internetowe Zofia Kruczkiewicz 1 Umieszczanie kodu JavaScript w plikach XHTML http://www.w3schools.com/js/default.asp 1.1. W przypadku XHTML 1.x nie występuje
Wykład 2_1 TINT. Kaskadowe arkusze stylu Wprowadzenie, formatowanie tekstu, czcionki. Zofia Kruczkiewicz
Wykład 2_1 TINT Kaskadowe arkusze stylu Wprowadzenie, formatowanie tekstu, czcionki Zofia Kruczkiewicz 1. Wprowdzenie Kaskadowe arkusze stylów CSS element dynamiczny języka HTML (DHTML) Kaskadowe arkusze
Wykład 5_1 TINT Formularze. Zofia Kruczkiewicz
Wykład 5_1 TINT Formularze Zofia Kruczkiewicz Wytyczne języka XHTML (c.d.) Atrybut id Zamiast atrybutu name stosuje się atrybut id. W XHTML 1.0 można go stosować np. w znaczniku . Jednak, stosując jeszcze
Wykład 4_1 TINT. Obiekty graficzne. Zofia Kruczkiewicz
Wykład 4_1 TINT Obiekty graficzne Zofia Kruczkiewicz 1. Grafika i połączenia GIF (.gif) JPEG (.jpg,.jpeg), XBM (.xbm), TIFF (.tiff,.tif), BMP (.bmp),
Znaczniki języka HTML
www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline
ZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW
HTML i inne Struktura dokumentu standard języka użytego do budowy strony nagłówek strony zawartość strony ZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW Strona kodowa Opis strony Słowa
CSS pozwala przypisać poszczególnym elementom na. grubość, rozmiar czcionki, kolor tła, odległości między
Cascading Style Sheets CSS CSS pozwala przypisać poszczególnym elementom na stronie (HTML/XML) takie właściwości jak rodzaj, grubość, rozmiar czcionki, kolor tła, odległości między elementami, ich obramowania,
LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW
LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW 1. Definicja tła Tło elementu HTML można definiować w CSS korzystając z następujących cech: background-color background-image
Wykorzystano fragmenty wykładów dra inż. J. Kuchty ARKUSZE STYLÓW CSS. Dokumenty cyfrowe KASK ETI Politechnika Gdańska.
Wykorzystano fragmenty wykładów dra inż. J. Kuchty ARKUSZE STYLÓW CSS Waldemar Korłub KASK ETI Politechnika Gdańska Motywacje Początkowe wersje języka HTML:
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
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 PLAN PREZENTACJI Wprowadzenie do css Budowa stylu - selektor cecha wartość Klasa i identyfikator selektora Jednostki Miary
Kaskadowe arkusze stylów cz. 2
Formatowanie wyglądu tekstu Właściwości związane z czcionką Wybór czcionki Tworzenie czcionki pochyłej Pogrubianie czcionki Określanie wielkości czcionki Wykorzystanie kapitalików Określanie wysokości
Wykład 2: Kaskadowe arkusze stylów (CSS Cascade Style Sheets)
Wykład 2: Kaskadowe arkusze stylów (CSS Cascade Style Sheets) Przykład użycia stylu
Alfabetyczna lista stylów
Tematy: Kaskadowe arkusze stylów Alfabetyczna lista stylów Uwaga: wiele stylów CSS3 nie jest ciągle interpretowanych przez przeglądarki Styl Znaczen CSS1 CSS2 CSS3 IE FF A animation Zbiorcza definicja
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE KASKADOWE ARKUSZE STYLÓW CASCADING STYLE SHEETS Za pomocą HTML tworzymy strukturę dokumentu, jego elementy oraz treść CSS służy do opisu wyglądu struktury dokumentu, elementów oraz treści
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets) 1. Wprowadzenie Selektory należą do kluczowych pojęć, wskazują obiekty, którym przypisujemy jakiś zestaw
Responsywne strony WWW
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę zaprojektować następujący layout strony, oparty na DIV-ach: Aby osiągnąć powyższy efekt, w pliku CSS powinniśmy utworzyć reguły: #cala_strona width: 780px;
Wprowadzenie do Internetu zajęcia 3
Wprowadzenie do Internetu zajęcia 3 Zakres tematyczny zajęć CSS arkusz stylów. Formatowanie tekstu CSS w przykładach. CSS arkusz stylów Wprowadzenie Język HTML, XHTML został wzbogacony o potężne narzędzie
CSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Arkusze styli zwi kszaj kontrol nad wygl dem strony, poprzez zastosowanie szeregu opcji przypisywanych do danych elementów samego HTML'a.
Informacje ogólne Arkusze styli zwi kszaj kontrol nad wygl dem strony, poprzez zastosowanie szeregu opcji przypisywanych do danych elementów samego HTML'a. Dzieki nim mo na okre li takie cechy jak: rodzaje
Tworzenie stylów w HTML
Podstawy arkuszy stylów i JS CSS (kaskadowe arkusze stylów) to standard opisu formatowania języka HTML znacznie rozszerzający jego możliwości prezentacyjne. Może być stosowany zarówno dla statycznych stron
Zastosowanie kaskadowych arkuszy stylów (CSS - Cascading Style Sheets) w technologii JavaServer Faces
Zastosowanie kaskadowych arkuszy stylów (CSS - Cascading Style Sheets) w technologii JavaServer Faces wg http://www.w3.org/tr/css3-selectors/ http://courses.coreservlets.com/course-materials/pdf/jsf/jsf2/jsf2-
Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
XHTML Budowa strony WWW
XHTML Budowa strony WWW Wydział Fizyki Politechnika Warszawska 2019 dr inż. Marzena Sala-Tefelska Założenie strony www na serwerze student 1. Tworzymy główny plik o nazwie index.html (plik tekstowy). UWAGA!:
Projektowanie aplikacji internetowych. CSS w akcji
Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji
Technologie Informacyjne
Technologie Informacyjne Wykªad 7 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 23 HTML HTML Sªu»y do deniowania struktury dokumentu: akapity nagªówki
TECHNOLOGIE SIECI WEB
1. Wybrane elementy sk³adni CSS TECHNOLOGIE SIECI WEB Prowadz¹cy: dr in. Jan Prokop, e-mail: jprokop@prz.edu.pl, Politechnika Rzeszowska, Wydzia³ Elektrotechniki i Informatyki LABORATORIUM ÆWICZENIE nr
Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.
Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading
Podstawy (X)HTML i CSS
Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z
Krótki przegląd własności języka CSS
Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono
Wykład 4. Specyfikacje XHTML, formularze
Wytyczne języka XHTML (c.d.) Wykład 4 Specyfikacje XHTML, formularze Atrybut id Zamiast atrybutu name stosuje się atrybut id. W XHTML 1.0 można go stosować np. w znaczniku . Jednak, stosując jeszcze
WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1
WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1 KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets, CSS) Mechanizm służący do definiowania stylu prezentacji dokumentów w Internecie. Arkusz stylów CSS to lista
Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.
Kaskadowe arkusze stylów Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają np. określać rozmiar i kolor czcionki, definiować odstępy
za pomocą: definiujemy:
HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony
Wykład 2 - część I. I. Klasy i selektory. dr Artur Bartoszewski - Nowoczesne technologie informatyczne - WYKŁAD
Wykład 2 - część I. I. Klasy i selektory 1 I. Klasy i selektory Selektor potomka Jeśli selektorem w regule CSS jest nazwa znacznika, to będzie jej podlegał każdy znacznik tego typu. Na przykład, poniższa
Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.
Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów. Znaczniki HTML (tagi) postać ogólna: zawartość
Inwestycja - kompleks dwóch budynków mieszkalnych wielorodzinnych
Inwestycja - kompleks dwóch budynków mieszkalnych wielorodzinnych Plik wygenerowany przez generator ofert PDF przygotowany przez silnet.pl Opis inwestycji Typ realizacji: - kompleks dwóch budynków mieszkalnych
Wykorzystano fragmenty wykładów dra inż. J. Kuchty ARKUSZE STYLÓW CSS. Dokumenty cyfrowe KASK ETI Politechnika Gdańska.
Wykorzystano fragmenty wykładów dra inż. J. Kuchty ARKUSZE STYLÓW CSS Waldemar Korłub KASK ETI Politechnika Gdańska Motywacje Początkowe wersje języka HTML:
Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu
Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 1 Podstawy tworzenia stron internetowych Agenda Podstawy stron internetowych Przegląd języka HTML Wprowadzenie
Systemy internetowe Wykład 2 CSS
Systemy internetowe Wykład 2 CSS CSS - definicja CSS (Cascading Style Sheets) kaskadowe arkusze stylów CSS - język opisujący w jaki sposób elementy HTML będą wyświetlane na ekranie komputera, tabletu,
Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz
Wykład 2 TINT XHTML tabele i ramki Zofia Kruczkiewicz 1. Tabele 1.1. Przykład tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border ="" obramowanie tabeli,
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Hyper Text Markup Language
Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na
plansoft.org Zmiany w Plansoft.org
Zmiany w Plansoft.org Mapy Google... 1 Tworzenie mapy... 2 Wprowadzanie szerokości i długości geograficznej... 2 Tworzenie mapy... 2 Dostosowanie wyglądu mapy... 3 Ograniczanie liczby zasobów do wyświetlenia
Sierpień 2015 rozwiązanie plik: index.htlm
Sierpień 2015 rozwiązanie plik: index.htlm strona główna //ustalamy położenie wyświetlania
H2.cjk { font-family: "Microsoft YaHei"; font-size: 14pt; font-style: italic; font-weight:
Kod konspektu wygenerowany przez OpenOffice Writer
CSS - 2. Właściwości tekstu, czcionek
CSS - 2 Właściwości tekstu, czcionek Właściwości tekstu Służą do nadawania określonego wyglądu tekstowi:» color» direction» letter-spacing» text-align» text-decoration» text-indent» text-shadow» text-transform»
HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych
HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce
Laboratorium 1: Szablon strony w HTML5
Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}
Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.
KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets)
LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets) 1. Wprowadzenie Selektory należą do kluczowych pojęć, wskazują obiekty, którym przypisujemy jakiś zestaw
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 5 Box model i layouty mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Wysokość i szerokość domyślna szerokość elementu inline jest związana z jego zawartością
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 4 CSS mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Cel poznanie konceptu stylów tworzenie różnych typów reguł stylów Style służą do zmiany wyglądu elementów
Aplikacje internetowe. Interfejs użytkownika
Aplikacje internetowe Interfejs użytkownika Plan wykładu Formatowanie HTML za pomocą arkuszy stylów CSS Język XML ogólna struktura dokumentów opis struktury za pomocą DTD przestrzenie nazw Język XHTML
KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)
Sieci Komputerowe i Technologie Internetowe Materiał pomocniczy na podstawie fragmentu wykładu: KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Opracowanego przez dr inż. Dariusza Trawickiego
p { color: yellow; font-weight:bold; }
Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana
Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.
Prezentacja Danych i Multimedia II r Socjologia Ćwiczenia laboratoryjne nr 8 Podstawy języka XML. Celem ćwiczeń jest poznanie zasad tworzenia dokumentów w oparciu o język XML oraz metod modyfikacji ich
Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>
Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej
CSS - style kaskadowe. Cascadind Style Sheets
CSS - style kaskadowe Cascadind Style Sheets Znaczenie CSS Arkusze stylów pozwalają nam na ścisłą kontrolę wyglądu strony. Możemy zdefiniować np. odpowiednie czcionki dla danych elementów oraz zachowywanie
HTML podstawowe polecenia Szkielet dokumentu: Budowa aplikacji wielowarstwowych. Zastosowanie Kaskadowych arkuszy stylów (CSS)
Budowa aplikacji wielowarstwowych. Zastosowanie Kaskadowych arkuszy stylów (CSS) Laboratorium 7 Technologie internetowe Zofia Kruczkiewicz TINT_Lab_7, Zofia Kruczkiewicz 1 Wykaz pytań dotyczących materiału
2. Prezentacja wizualna
2. Prezentacja wizualna 2.1. Opis rozdziału Rozdział ten przedstawia jak stworzyć przykładowy układ graficzny dla naszej gry w HTML5 i CSS3, które w dalszej części poradnika zostaną wykorzystane do stworzenia
Elementarz HTML i CSS
Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna
kaskadowe arkusze stylów
Autor: Marek Buła bulkas@poczta.onet.pl CSS kaskadowe arkusze stylów CASCADING STYLE SHEETS Validator (X)HTML Validator CSS CSS CSS level 1 (1996, 1999) contains properties for fonts, margins, colors,
Paweł Rajba
Paweł Rajba pawel@cs.uni.wroc.pl http://pawel.ii.uni.wroc.pl/ http://itcourses.eu/ Wprowadzenie Osadzenie stylów CSS, Reguły CSS Podstawy Grupowanie, jednostki długości, ustalanie wartości Kolory i napisy,
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)
1 BLOK DOKUMENTU Polecenie div (blok, sekcja) odgrywa istotną rolę w grupowaniu wielu różnych elementów i pozycjonowaniu fragmentów dokumentu. We wcześniejszych wersjach HTML, od 3.2 do 4.01, na blokach
Selektory Pseudoklasy. Gabriela Panuś
Selektory Pseudoklasy Gabriela Panuś Selektor ogólnego rodzeństwa Selektor ogólnego rodzeostwa służy do wyróżniania elementów poprzedzonych innym elementem w danym pojemniku, np. akapitów poprzedzonych
PROJEKTOWANIE STRON WWW
PROJEKTOWANIE STRON WWW Wykład 1 Paweł Woszkowski SWSIM, 2010 PLAN ZAJĘĆ technologie, proces powstawania strony www, podstawowe zasady, xhtml, css, projektowanie, publikacja, hosting, promocja. STRONA
Tworzenie Stron Internetowych. odcinek 6
Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą
Systemy internetowe HTML
Systemy internetowe HTML West Pomeranian University of Technology, Szczecin; Faculty of Computer Science Kwestie organizacyjne Obecność na wykładach nieobowiązkowa Obecność na laboratoriach obowiązkowa
<body> <div style="max-width: 900px; margin: 0 auto;">
Załącznik Nr 2 do Uchwały Nr XXVII.144.2016 Rady Gminy Brańszczyk z dnia 28 czerwca 2016 roku
Norton Sec.3.0 STD PL CARD 1U 1Dvc 1Y Model : Norton Sec.3.0 STD PL CARD 1U 1Dvc 1Y ram sp. j.
OPROGRAMOWANIE > Model : 107587 Producent : - Symantec Norton Security 3.0 STANDARD 1Użytkownik 1Urządzenie 1Rok 21357596 'FONT-FAMILY: "Segoe UI", "Trebuchet MS", Helvetica, Arial; FONT-VARIANT: normal;
CSS. Kaskadowe Arkusze Stylów
CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać
używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów
opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu
Tworzenie stron WWW. Ilustrowany przewodnik. Wydanie II
Idź do Spis treści Przykładowy rozdział Katalog książek Katalog online Zamów drukowany katalog Twój koszyk Dodaj do koszyka Cennik i informacje Zamów informacje o nowościach Zamów cennik Czytelnia Fragmenty
Wykład 2 CSS. Michał Drabik
Wykład 2 CSS Michał Drabik XHTML CSS Struktura strony internetowej Prezentacja strony internetowej CSS = Cascading Style Sheets Kaskadowe arkusze stylów style umieszczone są według hierarchi, ustalającej
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.
Style CSS Wstęp 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. Podstawową zaletą i zadaniem stylów jest oddzielenie
FrontPage 2002/XP PL. Æwiczenia praktyczne
IDZ DO PRZYK ADOWY ROZDZIA KATALOG KSI EK ZAMÓW DRUKOWANY KATALOG Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl TWÓJ KOSZYK CENNIK I INFORMACJE ZAMÓW INFORMACJE
Jednostki miar stosowane w CSS
Wprowadzenie CSS (ang. Cascading Style Sheets) jest językiem służącym do opisu sposobu prezentowania informacji na stronach WWW, który został opracowany przez organizację W3C. Często skrót ten tłumaczony
Języki programowania wysokiego poziomu. CSS Wskazówki
Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:
Wybrane znaczniki HTML
Wybrane znaczniki HTML Struktura dokumentu HTML informacje o dokumencie i plikach zewnętrznych zawartość wyświetlana w przeglądarce wraz z tagami formatującymi
1. HTML dla zielonych
www.kurshtml.edu.pl 1. HTML dla zielonych Jeśli uważasz, że pisanie stron w języku HTML jest dla Ciebie "czarną magią", a sama strona jest jakimś tajemniczym i bardzo skomplikowanym dokumentem, to się
CSS. Gotowe rozwi¹zania
IDZ DO PRZYK ADOWY ROZDZIA SPIS TREœCI KATALOG KSI EK KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG CSS. Gotowe rozwi¹zania Autor: Richard York T³umaczenie: ukasz Piwko ISBN: 83-246-0574-6 Tytu³ orygina³u: CSS
Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach. dr Beata Kuźmińska-Sołśnia
Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach dr Beata Kuźmińska-Sołśnia CSS Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) specjalny język opracowany tylko
Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r.
Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r.
Budowa dokumentu HTML 5
Podstawy HTML 5 i CSS Budowa dokumentu HTML 5 Na dokument HTML składają się deklaracje: typu dokumentu DTD, nagłówka oraz treści strony. Deklaracja dokumentu DTD określa w jaki sposób przeglądarka reaguje
APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ
APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ PLAN PREZENTACJI Wprowadzenie do HTML Struktura dokumentu HTML Komentarze Znaczniki Nagłówki (tytuły) Akapit Znacznik końca wiersza Linia pozioma
Rozwiązania zadań EGZAMINACYJNYCH- WITRYNY
Rozwiązania zadań EGZAMINACYJNYCH- WITRYNY Zadanie maj 2015 rok Wykonaj zestaw grafik oraz stronę internetową dla zespołów medycznych zgodnie z wymaganiami dotyczącymi bazy danych, grafiki i strony internetowej.
Bazy Danych i Usługi Sieciowe
Bazy Danych i Usługi Sieciowe Wstęp do usług sieciowych Paweł Witkowski Wydział Matematyki, Informatyki i Mechaniki Jesień 2011 P. Witkowski (Wydział Matematyki, Informatyki i Mechaniki) BDiUS w. I Jesień
Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski
Podstawy HTML i CSS Grzegorz Arkit Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski 13 października 2016 G. Arkit (WMIiE) Podstawy HTML i CSS 13 października 2016 1 / 20 Informacja
Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW
Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW Rys.1. Przykład prostej tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border
Czcionki. Rodzina czcionki [font-family]
![Czcionki. Rodzina czcionki [font-family]](/thumbs/27/10053051.jpg "Czcionki. Rodzina czcionki [font-family]")
Czcionki W tej lekcji nauczysz się o czcionkach i jak nimi manipulować przy pomocy CSS. Omówimy także pewien problem, gdzie wybrana czcionka jest przedstawiana na stronie tylko gdy jest ona zainstalowana
Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty
Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language
DOM (Document Object Model)
DOM (Document Object Model) Czym jest DOM? Platforma, która pozwala skryptom na dynamiczny dostęp do zawartości strony i jej aktualizację. Elementy można dodawać, zmieniać lub usuwać. Specyfikacje Poziomy
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE HTML W składni języka HTML wykorzystuje się charakterystyczne znaczniki. Każdy z nich zaczyna się i kończy ostrokątnym nawiasem a pomiędzy nimi znajduje się wyrażenie html. Rozróżniamy znaczniki