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

Save this PDF as:
 WORD  PNG  TXT  JPG

Wielkość: px
Rozpocząć pokaz od strony:

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

Transkrypt

1 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 czcionek, sposób formatowania tekstu, kolory, tła, marginesy itp. Same style nadpisuj niejako wi kszo atrybutów znaczników HTML'a, dodaj c swoje rozsze enia. Obecnie zalecane jest stosowanie styli zamiast takich atrybutów jak: align, face, size itp. Dzi ki stylom mo na te w do znaczny sposób ograniczy ilo wykorzystywanych rodzajów znaczników.

2 Kaskadowo stylów Informacja o stylu mo e by zapisana w oddzielnym pliku b d w samym dokumencie HTML. Od lokalizacji stylu zale y zasi g jego oddziaływania. Importowany arkusz stylów (imported Style Sheet). Zewn trzny arkusz stylów, który został importowany (doł czony) do innego arkusza. Zewn trzny arkusz stylów (external Style Sheet). Zwykły plik tekstowy z rozszerzeniem.css zawieraj cy definicje stylów. Odwołania do zewn trznego arkusza stylów znajdowa si mog w dowolnym dokumencie HTML. Styl osadzony (embedded style). Styl o zasi gu lokalnym - jego oddziaływanie ograniczone jest do dokumentu, w którym został umieszczony. Styl wpisany (in-line style). Styl o zasi gu lokalnym, doł czany do okre lonego znacznika HTML i okre laj cy sposób wy wietlania tylko tego elementu. Kaskadowo stylów objawia si w przypadku korzystania z przynajmniej dwóch z wymienionych wcze niej rodzajów arkuszy. W przypadku konfliktu (gdy jaki element znajduje si w zasi gu wi cej ni jednego stylu), obowi zuje zasada, e styl znajduj cy si bli ej formatowanego elementu znosi działanie stylu odległego. Najwy szy priorytet ma wówczas styl wpisany, drugim w kolejno ci jest styl osadzony, nast pnie zewn trzny, a na ko cu importowany. Przykładowo, styl wprowadzony w nagłówku HEAD dokumentu HTML (styl osadzony) b dzie miał pierwsze stwo przed stylem pochodz cym z pliku arkusza (zewn trznym). Sam jednak zostanie zneutralizowany przez styl umieszczony w obr bie znacznika formatowanego elementu - np. H1 (styl wpisany).

3 Składnia stylu Definicja stylu składa si z dwóch cz ci - selektorów okre laj cych HTML, do których b dzie odnosi si styl oraz deklaracji stylu. Definicj umieszcza si w znaczniku STYLE lub w zewn trznym pliku (arkuszu stylów) z zachowaniem nast puj cej składni: selektor1, selektor2,..., selektorn { własno 1: warto 1; własno 2: warto 2;... } Na deklaracj stylu składa si lista par własno :warto oddzielonych rednikiem i ograniczonych nawiasami klamrowymi. Własno to atrybut znacznika HTML, który podlega specyfikacji CSS (np. wielko czcionki dla akapitu), warto dookre lenie własno ci (np. 12px). Przykłady: P { text-indent: 10pt } wci cie akapitu o gł boko ci 10 punktów H1, H2 { font-style: bold } wytłuszczona czcionka dla nagłówków typu H1 i H2 A { color: red; text-decoration: none } - odsyłacz w kolorze czerwonym, bez podkre lenia

4 Umieszczanie stylu w dokumencie Specyfikacja HTML 4.0 okre la w jakim miejscu opis wygl du mo e si znajdowa : w dokumencie HTML; w osobnym pliku *.css. Aby umie ci opis wygl du wewn trz dokumentu HTML nale y u y znacznika <style>. W sekcji head wstawiamy np: <style type="text/css"> H1 { color: red } </style> Bardziej praktyczne jest zastosowanie zewn trznego arkuszu stylów. Takie rozwi zanie ma dwie zalety: tre opisu mo e by zmieniana bez modyfikacji ródłowego dokumentu HTML, pliki CSS mog by współdzielone przez kilka dokumentów. W celu przył czenia zewn trznego opisu wygl du dokumentu nale y wykorzysta znacznik <link> i w sekcji head wstawi : <LINK rel="stylesheet" href="przyklad.css" type="text/css">

5 Znacznik <link> zawiera: typ: "stylesheet"; nazw i poło enie opisu wygl du wewn trz atrybutu "href"; typ opisu wygl du okre lonego przez: "text/css". Nast pnie tworzymy plik tekstowy (np. w notatniku) zawierajacy styl: H1 { color: red } Plik zapisujemy z rozsze eniem *.css

6 Dziedziczenie Dziedziczenie jest zwi zane z hierarchi znaczników HTML'a. Polega na tym i warto ci przypisane danemu znacznikowi b d te miały zastosowanie dla znaczników mu podległych - czyli zawartych w jego ciele. Przyporz dkowuj c znacznikowi <body> jak własno (np.: kolor) b dzie ona te nadana wszystkim pozostałym znacznikom poza <head> i <html>. Warto nadana elementowi <p> zostanie odziedziczona przez znacznik <font>. Niestety nie zawsze wszystko wygl da tak jak powinno, np.: Netscape nie dziedziczy wła ciwo ci dla elementów tabeli.

7 Czcionka Wła ciwo Opis Warto Odnosi si do Przykład font-family font-style la typ czcionki nazwa czcionki la styl czcionki normal, italic, oblique font-variant normal, small-caps font-weight font-size font la grubo czcionki la rozmiar czcionki Zawiera w sobie wła ciwo ci dotycz ce czcionki normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, font-family, font-size, font-variant, font-weight, font-size {font-family: Arial} Przykład: Tekst {font-style: italic} Przykład: Tekst {font-variant: smallcaps} Przykład: TEKST {font-weight: bolder} Przykład: Tekst {font-size: 20px} Przykład: Tekst {font: 12pt sans-serif bold italic} Przykład: Tekst

8 Ŝ Tekst Wła ciwo Opis Warto Odnosi si do Przykład word-spacing letter-spacing textdecoration vertical-align la odległo la odległo mi mi la czy tekst ma by dzy wyrazami dzy literami podkre lony, przekre lony, itd. la poło enie tekstu w pionie wzgl dem elementu poprzedzaj cego normal, wzgl dem (em), normal, wzgl dem (em), none, underline, overline, line-through, blink baseline, sub, super, top, text-top, middle, bottom,procent {word-spacing: 1.2em} Przykład: Tekst {letter-spacing: 0.2em} Przykład: T e k s t {text-decoration: linethrough} Przykład: Tekst wewn trzne {vertical-align: top}

9 Ŝ text-transform la sposób przemiany tekstu text-align text-indent line-height la poło la odległo la odległo enie tekstu wewn trz elementu od lewego marginesu mi dzy dwoma s capitalize, uppercase, lowercase, none left, right, center, justify procent, wzgl dem (em), siednimi liniami normal, liczba, procent, wzgl dem (em), b b d d {text-transform: uppercase} Przykład: TEKST ce blokiem {text-align: center} ce blokiem {text-indent: 20%} {line-height: 120%}

10 Kolor i tło Wła ciwo Opis Warto Odnosi si do Przykład color la kolor czcionki nazwa koloru, warto hex {color: red} Przykład: Tekst {color: rgb(0,0,255)} Przykład: Tekst background-color la kolor tła nazwa koloru, warto hex {background-color: #FF5500} backgroundimage la grafik pełni ca rol tła none, adres URL {background-image: url(tlo.gif)} backgroundrepeat la powtrzalno tła repeat, repeat-x, repeat-y, no-repeat {background-repeat: repeat-x} backgroundattachment la czy tło ma si przesuwa wraz z zawarto ci (scroll) czy ma by stałe (fixed) scroll, fixed {background-attachment: scroll} backgroundposition la pozycj pocz tkow tła [top, center, bottom], [left, center, right], procent, b d ce blokiem {background-position: 100% 30%}

11 background Zawiera w sobie wła ciwo ci dotycz ce tła backgroundcolor, backgroundimage, backgroundrepeat, backgroundattachment, backgroundposition {background: red url(tlo.jpg) left top norepeat}

12 Elementy kwadratowe Wła ciwo Opis Warto Odnosi si do Przykład margin-top margin-right margin-bottom margin-left la odległo la odległo la odległo la odległo od górnej kraw od prawej kraw od dolnej kraw od lewej kraw dzi strony auto, procent, wzgl dem (em), dzi strony auto, procent, wzgl dem (em), dzi strony auto, procent, wzgl dem (em), dzi strony auto, procent, wzgl dem (em), {margin-top: 3em} {margin-right: 4px} {margin-bottom: 13%} {margin-left: 4em}

13 margin la odległo dolna, lewa od kraw dzi strony według kolejno ci: górna, prawa, auto, procent, centymetr (cm), wzgl dem (em), {margin: 2em 3em 1em 4em} padding-top la górny odst p elementu procent, centymetr (cm), wzgl dem (em), {padding-top: 0.2em} padding-right la prawy odst p elementu procent, centymetr (cm), wzgl dem (em), {padding-right: 12px} paddingbottom la dolny odst p elementu procent, centymetr (cm), wzgl dem (em), {padding-bottom: 0.4em}

14 padding-left la lewy odst p elementu procent, wzgl dem (em), {padding-left: 7%} padding la odst p elementu według kolejno ci: górna, prawa, dolna, lewa procent, wzgl dem (em), {padding: 2em 1em 3em 4em} border-top-width la szeroko górnej granicy (ramki) elementu thin, medium, thick, wzgl dem (em), {border-top-width: thin} border-rightwidth la szeroko prawej granicy (ramki) elementu thin, medium, thick, wzgl dem (em), {border-right-width: medium}

15 border-bottomwidth la szeroko dolnej granicy (ramki) elementu thin, medium, thick, wzgl dem (em), {border-bottom-width: thick} border-leftwidth la szeroko lewej granicy (ramki) elementu thin, medium, thick, wzgl dem (em), {border-left-width: 3px} border-width la szeroko granicy (ramki) elementu według kolejno ci: górna, prawa, dolna, lewa thin, medium, thick, wzgl dem (em), {border-width: thin thick medium thick} border-color la kolor granicy (ramki) elementu nazwa koloru, warto hex {border-color: red} border-style la styl granicy (ramki) elementu none, dotted, dashed, solid, double, groove, ridge, inset, outset {border-style: double}

16 border-top border-right border-bottom border-left border width height la szeroko la szeroko la szeroko la szeroko, kolor i styl górnej granicy (ramki) elementu border-top-width, border-style, color, kolor i styl prawej granicy (ramki) elementu border-rightwidth, border-style, color, kolor i styl dolnej granicy (ramki) elementu border-bottomwidth, border-style, color, kolor i styl lewej granicy (ramki) elementu border-left-width, border-style, color la szeroko, kolor i styl granicy (ramki) elementu według kolejno ci: górna, prawa, dolna, lewa la szeroko la wysoko elementu (np. grafiki) elementu (np. grafiki) float left, right, none border-width, border-style, color auto, procent, wzgl dem (em), auto, wzgl dem (em), {border-top: thin blue solid} {border-right: } {border-bottom: } {border-left:} {border: } b d ce blokiem b d ce blokiem {width: 80px} {height: 170px} {float: left}

17 clear none, left, right, both {clear: right}

18 Ŝ Klasyfikacja Wła ciwo Opis Warto Odnosi si do Przykład display white-space la w jaki sposób dany element ma by la w jaki sposób nale y obchodzi elementu si wy z odst wietlony pami wewn trz block, inline, list-item, none normal, pre, nowarp list-style-type disc, circle, square, decimal, lowerroman, upperroman, lower-alpha, upper-alpha, none list-style-image adres URL, none z display = listitem list-styleposition inside, outside b z display = listitem z display = listitem d {display: none} ce blokiem {white-space: pre} {list-style-type: lower-roman} {list-style-image: url(rysunek.gif)} {list-style-position: outside}

19 list-style disc, circle, square, decimal, lowerroman, upperroman, lower-alpha, upperalpha, none, inside, outside, adres URL, none z display = listitem {list-style: circle outside}

20 Grupowanie Je eli kilka selektorów posiada te same deklaracje, to mo na je zgrupowana w jedn deklaracj, a poszczególne b d oddzieli przecinkami. Na przykład: H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif } mo na zapisa równie jako: H1, H2, H3 { font-family: sans-serif }

21 Atrybuty selektorów CSS2 pozwala autorom zaw a opisy wygl du poszczególnych elementów. Na przykład mo na opisa wygl d elementów o konkretnych atrybutach zdefiniowanych w dokumencie. Atrybuty selektorów mog wygl da nast puj co: [att] kiedy element ma atrybut 'att' i jak kolwiek jego warto. [att=val] kiedy warto atrybutu 'att' jest równa 'val'. [att~=val] kiedy warto atrybutu 'att' jest słowem lub zbiorem słów oddzielonych 'spacj ', a jedno z tych słów jest równe warto ci 'val'. Warto 'val' nie mo e zawiera 'spacji'. [att =val] kiedy warto atrybutu 'att' rozpoczyna si wyrazem okre lonym przez warto 'val'.

22 Dla przykładu, poni sza instrukcja dotyczy wszystkich znaczników H1, które maj okre lony atrybut title: H1[title] { color: blue; } Poni szy przykład dotyczy przypadku, kiedy znacznik SPAN musi posiada warto example atrybutu class: SPAN[class=example] { color: blue; } Inny przykład pokazuje wyst powanie dwóch atrybutów w znaczniku SPAN: SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; } Poni szy przykład pokazuje jak ukry, których warto atrybutu LANG jest równa 'fr' (tzn. kiedy j zyk jest francuski): *[LANG=fr] { display : none } Poni szy przykład pokazuje wykorzystanie " =" i dotyczy znaczników, których warto atrybutu LANG rozpoczynaj si od 'en' (np.: 'en', 'en-us', 'en-cockney'): *[LANG ="en"] { color : red }

23 Klasy <style>.nazwa_klasy1 {definicja_stylu} element.nazwa_klasy2 {definicja_stylu} </style> Odwołanie do tak zadeklarowanych klas: <dowolny_znacznik class="nazwa_klasy1"> <element class="nazwa_klasy2"> W opisie wygl du u ytym w HTML autorzy mog u ywa kropki (.) jako alternatywnego rozwi zania w stosunku do "~=" w przypadku atrybutu o nazwie class. Czyli, DIV.wartosc jest równowa ny zapisowi DIV[class~=wartosc]. Na przykład, mo na przypisa informacj o wygl dzie do wszystkich elementów, których atrybut class~="wartosc": lub inaczej: *.wartosc { color: green }.wartosc { color: green }

24 Poni szy przykład dotyczy tylko znacznika <code>, którego atrybut class~="wartosc": code.wartosc { color: green } Wykonanie tej instrukcji w pierwszej linii poni szego dokumentu HTML nie spowoduje ustawienia koloru tekstu na zielony, za w drugiej linii tak: <code>ten tekst nie jest w kolorze zielonym.<code> <code class="wartosc">ten tekst jest w kolorze zielonym.</code> W przypadku wi kszej ilo ci warto ci atrybutu class, ka da warto musi by oddzielona kropk ".". Poni szy przykład pokazuje instrukcj, w której znacznik P powinien mie za warto ci atrybutu class wyrazy: wart1 i wart2 oddzielone klawiszem spacji: P.wart1.wart2 { color: green} Instrukcja ta zadziała w przypadku, gdy class="wart1 jest jakas tam i wart2 tez", ale nie zadziała je eli class="wart1 jest jakas tam".

25 Identyfikatory Dzi ki identyfikatorom dany styl mo na przypisa tylko do okre lonych elementów. Deklaracja styli przy u yciu identyfikatorów: <style> #nazwa_id1 {definicja_stylu} element#nazwa_id2 {definicja_stylu} </style> Odwołanie do tak zadeklarowanych identyfikatorów: <dowolny_znacznik id="nazwa_id1"> <element id="nazwa_id2">

26 Selektory potomne Czasami autorzy chc wyró ni, które zawieraj si wewn trz innych elementów w dokumencie (np. element I, który znajduje si w elemencie P). Nast puj ce deklaracje: Deklaracja: p i{color:cyan; font-weight:bold;} B dzie wykorzystywana przez element i, pod warunkiem e znajduje si on bezpo rednio w ciele znacznika p np. <p>tekst<i>tekst</i>tekst</p> Deklaracja: p * i{color:cyan; font-weight:bold;} B dzie wykorzystywana przez element i, pod warunkiem e znajduje si on w ciele znacznika p (wcze niej mo e wyst powa jeszcze w ciele innego znacznika) np. <p>tekst<b>tekst<i>tekst</i>tekst</b>tekst</p>

27 Selektor dziecka Selektor 'dziecko' wyst puje wtedy, gdy znacznik 'dziecko' znajduje si wewn tz innego znacznika. Np. <h1> tekst<h3>tekst </h3>tekst </h1> Selektor 'dziecko' składa si z dwóch lub wi cej selektorów oddzielonych znakiem ">". Poni sza instrukcja ustawia wygl d wszystkich znaczników P, które s 'dzie mi' w stosunku do znacznika BODY: BODY > P { line-height: 1.3 } Poni szy przykład przedstawia kombinacj selektorów potomnych i selektorów 'dzieci': DIV OL>LI P Opis: w tym przypoadku znacznik P jest elementem potomnym w stosunku do LI; znacznik LI musi by 'dzieckiem' znacznika OL; znacznik OL musi by elementem potomnym w stosunku do DIV.

28 Selektor uniwersalny Warto ci uniwersalne mo emy nadawa na poziomie BODY albo stosuj c uniwersalny selektor z gwiazdk : * { color : red } /* cały tekst b dzie czerwony */ *.classname {color : red } /* o klasie classname b d czerwone */ H1 * PRE { color:red } /* bloki PRE zawarte w H1 b d czerwone */

29 mo wo Ŝ Ŝ Ŝ Ŝ t k s e t e c j k u fi d y S C e l t y es w t a d s P o Własno ci czcionek Atrybut Opis atrybutu Warto font-family krój pisma np. Tahoma, Arial, Times New Roman font-style styl czcionki normal, italic, oblique font-variant wariant czcionki normal, small-caps font-weight waga kroju font-size rozmiar czcionki warto Parametry tekstu lighter, normal, bold, bolder, warto ci liczbowe od 100 do 900 ci ci liczbowe, np. 12px, 9 pt Atrybut Opis atrybutu Warto word-spacing letter-spacing text-decoration vertical-align text-align text-transform text-indent text-height odst p mi dzy wyrazami odst p mi dzy znakami dekoracja tekstu pionowe ustawienie tekstu poziome ustawienie tekstu transformacja tekstu wielko wysoko wci linii warto warto cia tekstu warto ci liczbowe ci liczbowe underline, overline, strikethrough (przekre lony) bottom, middle, top, text-top, textbottom, baseline, sub, super, warto ci procentowe left, center, right, justify (wy rodkowany), warto ci procentowe ci np. na du e litery = uppercase; capitalize, lowercase, none warto ci liczbowe ci liczbowe Za pomoc własno ci przedstawionych w powy szej tabeli mo emy dowolnie formatowa h1...h6, a, div, li, blockquote, code itd. tekst u ywaj c naprzykład nastepuj cych selektorów: p, text,

30 Przykłady: p { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: normal; color: #002448; text-decoration: none} li { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: normal; color: #330099; text-decoration: none} h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; font-style: normal; font-weight: bold; color: #2C2C43; text-decoration: none} code { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-style: normal; font-weight: bold; color: #666666; text-decoration: none}

31 Kolorowe tło pierwszy akapit drugi akapit trzeci akapit W ramach znacznika <p> wstaw styl definiuj cy kolor tła: style='background:#cccc99' przykładowy kod html: <p style='background:#cccc99'>pierwszy akapit<br></p> <p style='background:#e0e0e0'>drugi akapit<br></p> <p style='background:#9da2bf'>trzeci akapit<br></p>

32 Styl ten poprawnie interpretowany jest przez IE, natomiast Netscape interpretuje go cz efekt nale y w sekcji HEAD wstawi poni szy znacznik styli wraz z kilkoma definicjami: ciowo. Aby uzyska ten <style type="text/css"> <!-- a:link { font-family: arial; text-decoration: none; color: blue; } a:visited { font-family: arial; text-decoration: none; color: blue; } a:hover { color: red; font-family: arial; text-decoration: none; } a:active { font-family: arial; text-decoration: none; color: blue; } --> </style>

33 ZNACZENIE POSZCZEGÓLNYCH STYLI: a:link - oznacza kolor i atrybuty linku "normalnego", a:visited - okre la kolor i atrybuty linku odwiedzonego, a:hover - okre la kolor i atrybuty linku pod wietlonego, a:active - okre la kolor i atrybuty linku aktywnego. ATRYBUTY: font-family: - okre la krój czcionki (np. Arial, Verdana), text-decoration: - okre la czy link ma by podkre lony (underline), czy nie podkre lony (none), color: - okre la kolory (np. Red, Blue, #FFCC00), font-size: - rozmiar czcionki (np. np. 12px, 9 pt).

34 Tworzenie pod wietlanych linków przedstawione zostało na stronie pod wietlane linki. W celu u ycia kilku, ró ego rodzaju pod wietlanych linków, nale y w kodzie stylu linku zdefiniowa klasy: Kod podstawy: (definiowanie stylu podstawowych linków) a:link {} a:active {} a:visited {} a:hover {} Kod zawieraj cy klasy: (definiowanie stylów ró nych linków) a.klasa:link {} a.klasa:active {} a.klasa:visited {} a.klasa:hover {} gdzie: klasa - zdefiniowana przez Ciebie (dowolna, ale zaczynaj ca si od litery) nazwa klasy. KOD ODNO NIKA WYKORZYSTUJ CEGO ZDEFINIOWAN KLAS : <a href="strona.html" class="klasa">odno nik</a>

35 PRZYKŁADY: pod wietlany link I, pod wietlany link II A.right:link { color: #336699; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; line-height: normal; text-decoration: none} A.right:visited { color: #9999FF; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; text-decoration: none} A.right:hover { color: #996699; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; text-decoration: none} A.right:active { color: #009999; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-decoration: none} A.left:link { font-family: "Courier New", Courier, mono; font-size: 10pt; font-style: normal; font-weight: bold; color: #CC0000; text-decoration: none} A.left:hover { font-family: "Courier New", Courier, mono; font-size: 10pt; font-style: normal; font-weight: bold; color: #FF9900; text-decoration: none} A.left:visited { font-family: "Courier New", Courier, mono; font-size: 10pt; font-style: normal; font-weight: bold; color: #336600; text-decoration: none} A.left:active { font-family: "Courier New", Courier, mono; font-size: 10pt; font-style: normal; font-weight: bold; color: #009999; text-decoration: none} Gdzie right i left to dwie klasy Uwaga!!! Istotna jest kolejno aby działała funkcja hover - je eli umie cimy definicj hover po visited to efekt hover b dzie widoczny tylko przed klikni ciem.

Znaczniki języka HTML

Znaczniki języka HTML www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline

Bardziej szczegółowo

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

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,

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Kaskadowe arkusze stylów cz. 2

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

Bardziej szczegółowo

Technologie Informacyjne

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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

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 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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

CSS. Kaskadowe Arkusze Stylów

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ć

Bardziej szczegółowo

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

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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

za pomocą: definiujemy:

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

Bardziej szczegółowo

Wprowadzenie do Internetu zajęcia 3

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

Bardziej szczegółowo

Projektowanie aplikacji internetowych. CSS w akcji

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

Bardziej szczegółowo

Języki programowania wysokiego poziomu. CSS Wskazówki

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:

Bardziej szczegółowo

Czcionki. Rodzina czcionki [font-family]

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

Bardziej szczegółowo

Tworzenie stylów w HTML

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

Bardziej szczegółowo

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH

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

Bardziej szczegółowo

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

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»

Bardziej szczegółowo

Elementy typografii. Technologia Informacyjna Lekcja 22

Elementy typografii. Technologia Informacyjna Lekcja 22 Elementy typografii Technologia Informacyjna Lekcja 22 Jakie sąs zalety komputerowego tworzenia tekstu? Podstawowe kroje pisma Krój szeryfowy uŝywany jest do składu gazet, ksiąŝ ąŝek, wypracowań,, małe

Bardziej szczegółowo

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.

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

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

Bardziej szczegółowo

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Kaskadowe arkusze stylów

Kaskadowe arkusze stylów KASKADOWE ARKUSZE STYLÓW CSS Żeby tworzyć atrakcyjnie wyglądające, rozbudowane serwisy należy skorzystać z innych języków, np. CSS (kaskadowych arkuszy stylów, ang. Cascading Style Sheets). CSS nie jest

Bardziej szczegółowo

Dokument hipertekstowy

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

Bardziej szczegółowo

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. 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

Bardziej szczegółowo

EGZAMIN POTWIERDZAJ CY KWALIFIKACJE W ZAWODZIE Rok 2013 CZ PRAKTYCZNA

EGZAMIN POTWIERDZAJ CY KWALIFIKACJE W ZAWODZIE Rok 2013 CZ PRAKTYCZNA Nazwa kwalifikacji: Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami Oznaczenie kwalifikacji: E.14 Numer zadania: 01 Arkusz zawiera informacje prawnie chronione do momentu rozpocz

Bardziej szczegółowo

CSS - style kaskadowe. Cascadind Style Sheets

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

Bardziej szczegółowo

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 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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Tworzenie stron WWW. Ilustrowany przewodnik. Wydanie II

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

Bardziej szczegółowo

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

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS

Bardziej szczegółowo

I. Menu oparte o listę

I. Menu oparte o listę I. Menu oparte o listę We wcześniejszych przykładach założyliśmy, że menu posiada tylko jeden poziom nawigacji. Czasem jednak jeden poziom nie wystarczy za pomocą list elementów oraz kaskadowych arkuszy

Bardziej szczegółowo

Alfabetyczna lista stylów

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

Bardziej szczegółowo

www.fwrl.pl/szkolenie

www.fwrl.pl/szkolenie STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa

Bardziej szczegółowo

Systemy internetowe Wykład 2 CSS

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,

Bardziej szczegółowo

Wykład 2 CSS. Michał Drabik

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

Bardziej szczegółowo

KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets)

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

Bardziej szczegółowo

Kilka zasad o których warto trzeba pamiętać

Kilka zasad o których warto trzeba pamiętać Kilka zasad o których warto trzeba pamiętać Pamiętaj o celu pisania dokumentu. Dostosuj do niego format strony i jej układ. Pozostaw rozsądnie duże marginesy, nie stłaczaj tekstu. Jeżeli strony będą spięte,

Bardziej szczegółowo

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

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.

Bardziej szczegółowo

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. 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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Przedmiot: Grafika komputerowa i projektowanie stron WWW

Przedmiot: Grafika komputerowa i projektowanie stron WWW KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup

Bardziej szczegółowo

Wyższa Szkoła Zarządzania i Bankowości w Krakowie www.wszib.edu.pl

Wyższa Szkoła Zarządzania i Bankowości w Krakowie www.wszib.edu.pl - w ten sposób wpisujemy informację o dacie utworzenia dokumentu. Tez znacznik jest bardzo rzadko spotykany. W zasadzie jest wykorzystywany

Bardziej szczegółowo

Krok 1: Stylizowanie plakatu

Krok 1: Stylizowanie plakatu HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

1. Podstawy budowania wyra e regularnych (Regex)

1. Podstawy budowania wyra e regularnych (Regex) Dla wi kszo ci prostych gramatyk mo na w atwy sposób napisa wyra enie regularne które b dzie s u y o do sprawdzania poprawno ci zda z t gramatyk. Celem niniejszego laboratorium b dzie zapoznanie si z wyra

Bardziej szczegółowo

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. 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:

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 6

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ą

Bardziej szczegółowo

Ć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. Ć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ść

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

Mailingi HTML. Specyfikacja techniczna

Mailingi HTML. Specyfikacja techniczna Mailingi HTML Specyfikacja techniczna Informacje wstępne Grupa Morizon S.A. zastrzega sobie prawo do odmowy emisji materiałów reklamowych bez podania przyczyny, w szczególności gdy ich jakość techniczna

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

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

Bardziej szczegółowo

TECHNOLOGIE SIECI WEB

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

Bardziej szczegółowo

Model blokowy. Model blokowy w CSS

Model blokowy. Model blokowy w CSS Model blokowy Model blokowy w CSS opisuje bloki, które są generowane dla elementów HTML. Model blokowy zawiera także dokładne opcje związane z ustawieniem maginesu zewnętrznego, wewnętrznego, obramowania

Bardziej szczegółowo

Elementarz HTML i CSS

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

Bardziej szczegółowo

Tło CSS 3. Gabriela Panuś

Tło CSS 3. Gabriela Panuś Tło CSS 3 Gabriela Panuś body { background-color: kolor; TŁO - CSS } TŁO OBRAZKOWE background-image: url(tlo.jpg); /* podajemy ścieżkę do tła */ body { } background: #6495ed url(image/obrazek.png); Właściwości

Bardziej szczegółowo

Ramki tekstowe w programie Scribus

Ramki tekstowe w programie Scribus - 1 - Ramki tekstowe w programie Scribus 1. Co to jest Scribus? Scribus jest to bezpłatny program do składu tekstu. Umożliwia tworzenie różnego rodzaju publikacji : broszury, ogłoszenia, biuletyny, plakaty,

Bardziej szczegółowo

Ćwiczenie 9 - CSS i wstawianie CSS

Ćwiczenie 9 - CSS i wstawianie CSS Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 6

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ą

Bardziej szczegółowo

HTML podstawowe polecenia

HTML podstawowe polecenia HTML podstawowe polecenia Szkielet dokumentu:

Bardziej szczegółowo

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

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

Bardziej szczegółowo

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 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

Bardziej szczegółowo

Technologie internetowe

Technologie internetowe Technologie internetowe Cascading Style Sheets Paweł Rajba pawel@ii.uni.wroc.pl http://www.kursy24.eu/ Zawartość modułu Wprowadzenie Wstawienie arkusza CSS, Reguły CSS Drzewo dokumentu Grupowanie, jednostki

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 7

Tworzenie Stron Internetowych. odcinek 7 Tworzenie Stron Internetowych odcinek 7 CSS dziedziczenie Drzewo dokumentu Drzewo dokumentu to hierarchia elementów umieszczonych w dokumencie źródłowym HTML. Każdy element w takim drzewie ma dokładnie

Bardziej szczegółowo

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:

Bardziej szczegółowo

CSS (kaskadowe arkusze stylów) to narzędzie do formatowania dokumentu. Obecna wersja to CSS 2.1

CSS (kaskadowe arkusze stylów) to narzędzie do formatowania dokumentu. Obecna wersja to CSS 2.1 CSS (kaskadowe arkusze stylów) to narzędzie do formatowania dokumentu. Obecna wersja to CSS 2.1 Wstawianie stylów Przeglądarka wyświetla strony pozbawione stylów autorskich, stosując własne, wbudowane

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień. Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać

Bardziej szczegółowo

Specyfikacja techniczna banerów Flash

Specyfikacja techniczna banerów Flash Specyfikacja techniczna banerów Flash Po stworzeniu własnego banera reklamowego należy dodać kilka elementów umożliwiających integrację z systemem wyświetlającym i śledzącym reklamy na stronie www. Specyfikacje

Bardziej szczegółowo

Blok dokumentu. <div> </div>

Blok dokumentu. <div> </div> Blok dokumentu Polecenie div (blok, sekcja) jest jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów

Bardziej szczegółowo

Arkusze stylów CSS Cascading Style Sheets

Arkusze stylów CSS Cascading Style Sheets Arkusze stylów CSS Cascading Style Sheets HTML a CSS HTML odpowiada za strukturę tworzonej witryny internetowej i poszczególnych dokumentów (ich stronę semantyczną) CSS odpowiada za wizualną prezentację

Bardziej szczegółowo

Hyper Text Markup Language

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

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie stron internetowych w kodzie HTML Cz 5 Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia

Bardziej szczegółowo

OBUDOWA ZALMAN Z3 PLUS MIDI TOWER (Z OKNEM, BEZ PS. ram sp. j.

OBUDOWA ZALMAN Z3 PLUS MIDI TOWER (Z OKNEM, BEZ PS. ram sp. j. Model : 101102 Producent : - "BORDER-BOTTOM: rgb(204,204,204) 1px dotted; PADDING-BOTTOM: 5px; LINE-HEIGHT: normal; WIDOWS: 1; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(255,255,255); FONT-VARIANT: normal;

Bardziej szczegółowo

Instrukcja obsługi Norton Commander (NC) wersja 4.0. Autor: mgr inż. Tomasz Staniszewski

Instrukcja obsługi Norton Commander (NC) wersja 4.0. Autor: mgr inż. Tomasz Staniszewski Instrukcja obsługi Norton Commander (NC) wersja 4.0 Autor: mgr inż. Tomasz Staniszewski ITM Zakład Technologii Maszyn, 15.10.2001 2 1.Uruchomienie programu Aby uruchomić program Norton Commander standardowo

Bardziej szczegółowo

Powtórzenie materiału: CSS3 Spis treści

Powtórzenie materiału: CSS3 Spis treści Powtórzenie materiału: CSS3 Spis treści Kolory...2 Jednostki...3 Czcionka...3 Elementy blokowe...3 Cienie...5 Gradient...5 Zgodność z przeglądarkami...6 Kolory Wartości kolorów w CSS podawać można na 4

Bardziej szczegółowo

Kaskadowe arkusze stylów

Kaskadowe arkusze stylów CSS Kaskadowe arkusze stylów Gabriela Przęczek Co to jest CSS?. Skrót pochodzi z angielskiego Cascading Style Sheets Kaskadowe arkusz stylu to narzędzie dające szerokie możliwości formatowania dokumentów

Bardziej szczegółowo

ZASADY REPRODUKCJI SYMBOLI GRAFICZNYCH PRZEDMOWA

ZASADY REPRODUKCJI SYMBOLI GRAFICZNYCH PRZEDMOWA Poprzez połączenie symbolu graficznego Unii Europejskiej oraz części tekstowej oznaczającej jeden z jej programów operacyjnych powstaje symbol graficzny, który zgodnie z obowiązującymi dyrektywami ma być

Bardziej szczegółowo

7. Jak nazywa się program, który wykonuje instrukcje zawarte w kodzie źródłowym tworzonego programu bez uprzedniego generowania programu wynikowego?

7. Jak nazywa się program, który wykonuje instrukcje zawarte w kodzie źródłowym tworzonego programu bez uprzedniego generowania programu wynikowego? 1. Którego polecenia należy użyć, aby wyraz TEKST został wyświetlony w kolorze czarnym w oknie przeglądarki internetowej? A. tekst B. tekst C.

Bardziej szczegółowo

Audyt SEO. Elementy oraz proces przygotowania audytu. strona

Audyt SEO. Elementy oraz proces przygotowania audytu. strona Audyt SEO Elementy oraz proces przygotowania audytu 1 Spis treści Kim jesteśmy? 3 Czym jest audyt SEO 4 Główne elementy audytu 5 Kwestie techniczne 6 Słowa kluczowe 7 Optymalizacja kodu strony 8 Optymalizacja

Bardziej szczegółowo

Języki programowania wysokiego poziomu CSS

Języki programowania wysokiego poziomu CSS Języki programowania wysokiego poziomu CSS Kaskadowe Arkusze Stylów CSS (ang. Cascading Style Sheets) to język służący do formatowania dokumentów WWW, utworzonych w językach HTML oraz XHTML. CSS stworzono

Bardziej szczegółowo

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze

Bardziej szczegółowo

PROJEKTOWANIE STRON WWW

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

Bardziej szczegółowo

Asynchroniczne interfejsy WWW

Asynchroniczne interfejsy WWW Asynchroniczne interfejsy WWW Wprowadzenie do tworzenia aplikacji webowych, dokumentów HTML5 oraz CSS mgr inż. Rafał Grycuk mgr inż. Patryk Najgebauer Strona służbowa: http://iisi.pcz.pl/~rgrycuk/ Kontakt:

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

Struktura oraz wygląd witryny internetowej język HTML oraz kaskadowe arkusze stylów CSS

Struktura oraz wygląd witryny internetowej język HTML oraz kaskadowe arkusze stylów CSS 1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się ze składnią języka HTML dotyczącą identyfikacji i grupowania elementów strony oraz podstawami formatowania strony za pomocą kaskadowych arkuszy stylów

Bardziej szczegółowo

Konfiguracja Wyszukiwarki

Konfiguracja Wyszukiwarki Konfiguracja Wyszukiwarki Wyszukiwarka posiada wiele ciekawych opcji, które możecie Państwo ustawić własnoręcznie wprost z własnego panelu zarządzającego, po uprzednim zalogowaniu się do oprogramowania

Bardziej szczegółowo

Podstawowe znaczniki języka HTML.

Podstawowe znaczniki języka HTML. Podstawowe znaczniki języka HTML. Struktura dokumentu. Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. Sposób użycia Sekcja HEAD zawiera podstawowe

Bardziej szczegółowo

STRONA GŁÓWNA SPIS TREŚCI. Zarządzanie zawartością stron... 2 Tworzenie nowej strony... 4 Zakładka... 4 Prawa kolumna... 9

STRONA GŁÓWNA SPIS TREŚCI. Zarządzanie zawartością stron... 2 Tworzenie nowej strony... 4 Zakładka... 4 Prawa kolumna... 9 STRONA GŁÓWNA SPIS TREŚCI Zarządzanie zawartością stron... 2 Tworzenie nowej strony... 4 Zakładka... 4 Prawa kolumna... 9 1 ZARZĄDZANIE ZAWARTOŚCIĄ STRON Istnieje kilka sposobów na dodanie nowego szablonu

Bardziej szczegółowo

Tekst ozdobny i akapitowy

Tekst ozdobny i akapitowy Tekst ozdobny i akapitowy Tekst ozdobny poddaje się manipulacjom, kształtowaniu, zniekształcaniu i tworzeniu efektów, do wyróŝnienia pojedynczych wyrazów lub krótkich wersów, takich jak nagłówki, logo

Bardziej szczegółowo

WordPad. Czyli mój pierwszy edytor tekstu

WordPad. Czyli mój pierwszy edytor tekstu WordPad Czyli mój pierwszy edytor tekstu Żadna sztuka? Witaj młody adepcie sztuk tajemnych. Jestem Maggus twój nauczyciel i przewodnik w świecie edytora tekstu. Zapewne, mój młody i niedoświadczony uczniu,

Bardziej szczegółowo

kaskadowe arkusze stylów

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,

Bardziej szczegółowo