Podstawowe formatowanie CSS

Transkrypt

1 Knrad Dżbik, pdstawy prgramwania, WYKŁAD 5 Pdstawwe frmatwanie CSS Dla każdeg znacznika XHTML mżna zdefiniwać styl w jakim ma się wyświetlać zawartść teg znacznika. Składnia jest bardz prsta: znacznik { własnść_1: wartść_a wartść_b; własnść_2: wartść; własnść_3: wartść_a wartść_b wartść_c wartść_d Własnści i wartści dtyczące tła (wszystkie) backgrund-clr - definiuje klr tła elementu; klr mżna pdać na trzy spsby: rgb(x, y, z) - gdzie x, y i z są liczbami z zakresu 0-255, znaczającymi dpwiedni ilść klru czerwneg, zielneg i niebieskieg; wartści graniczne, tzn. rgb(255, 255, 255) i rgb(0, 0, 0) znaczają dpwiedni klr biały i czarny #RRGGBB - gdzie RR, GG i BB są liczbami heksadecymalnymi, znaczającymi jw. ilść klru czerwneg, zielneg i niebieskieg; np. #FFFF00 znacza klr żółty (mieszanka czerwneg z zielnym) za pmcą jednej z szesnastu predefiniwanych nazw klrów (w języku angielskim): aqua, black, blue, fuchsia, gray, green, lime, marn, navy, live, purple, red, silver, teal, white, yellw backgrund-image - służy d pdania adresu URL brazka, który ma być wyświetlany jak tł; wartść pdaje się w następujący spsób: url(adres_brazka) backgrund-repeat - służy d pdania czy i w jaki spsób brazek ma być pwielany na tle strny; dpuszczalne wartści t: repeat - brazek pwielany w pzimie i pinie (wartść dmyślna) repeat-x - brazek pwielany w pzimie repeat-y - brazek pwielany w pinie n-repeat - tylk jedna kpia brazka backgrund-attachment - służy d pdania spsbu sadzenia brazka w tle; mżliwe są dwie wartści: fixed - brazek będzie "zafikswany" na strnie, tzn. przewijanie pasków przewijania nie zmieni jeg pzycji scrll - brazek będzie zwyczajnie sadzny - będzie się przewijał razem ze strną (wartść dmyślna) backgrund-psitin - służy d pdania pzycji na strnie, w której ma być umieszczny brazek; pzycję tę mżna pdać na 2 spsby: v h - gdzie v znacza pzycję brazka w pinie; mże być jedną z trzech wartści: tp - góra strny center - śrdek strny bttm - dół strny a h znacza pzycję brazka w pzimie; także mże t być jedna z trzech wartści: Żródł:

2 Knrad Dżbik, pdstawy prgramwania, WYKŁAD 5 left - lewa strna center - śrdek right - prawa strna x y - gdzie pzycje w pinie i pzimie tzn. x i y pdaje się w jednstkach dległści d leweg górneg narżnika; tymi jednstkami mgą być: in - cale cm - centymetry mm - milimetry pt - punkty typgraficzne (1pt = 1/72 in) pc - piki (1pc = 12 pt) em - szerkść litery m ex - wyskść litery x px - piksele (urządzenia wyświetlająceg) % - prcenty (szerkści i wyskści urządzenia wyświetlająceg) Wszystkie te wartści mżna także pdać we własnści agregującej pwyższe własnści tła: backgrund. Na przykład, aby brazek pznański ratusz był zafikswanym tłem całej strny, w dległści 100 pikseli d górnej krawędzi i 150 pikseli d lewej krawędzi, należy zdefiniwać następujący styl: bdy { backgrund-image: url(ratusz.jpg); backgrund-attachment: fixed; backgrund-repeat: n-repeat; backgrund-psitin: 150px 100px lub bdy { backgrund: url(ratusz.jpg) fixed n-repeat 150px 100px Zadanie Ddaj jedną z pwyższych definicji d swjeg stylu i zalinkuj ją w strnie Pznaniu. Ddaj także jakiś klr tła strny raz przetestuj inne wartści pzycjnwania brazka. Własnści i wartści dtyczące tekstu Własnści definiujące czcinkę (większść) fnt-family - służy d wymienienia listy nazw czcinek (p przecinku), które mają być użyte d napisania tekstu; jeśli na danym sprzęcie nie ma zainstalwanej pierwszej z wymieninych czcinek, t będzie użyta druga, itd. Na kńcu listy dbrze jest umieścić jedną z pięciu nazw rdzin czcinek, na wypadek gdyby żadna z wymieninych nie była zainstalwana - wówczas tekst będzie napisany czcinkę dmyślną dla tej rdziny; tymi rdzinami są: serif - czcinki szeryfwe, np. times new rman sans-serif - czcinki bezszeryfwe, np. helvetica, czy arial cursive - czcinki pchyłe, np. adbe petica, czy caflisch script fantazy - czcinki fantazyjne, np. cttnwd Żródł:

3 Knrad Dżbik, pdstawy prgramwania, WYKŁAD 5 mnspace - czcinki stałej szerkści znaków, np. curier fnt-style - służy d zdefiniwania stylu czcinki: nrmal - styl nrmalny (wartść dmyślna) italic - styl pchylny fnt-variant - służy d zdefiniwania spsbu wyświetlania czcinki: nrmal - spsób nrmalny (wartść dmyślna) small-caps - wyświetlanie kapitalikami fnt-weight - służy d zdefiniwania grubści czcinki; grubść tę mżna pdać za pmcą jednej z czterech wartści: nrmal - grubść nrmalna (wartść dmyślna) bld - grubść większa d nrmalnej blder - grubść największa lighter - grubść mniejsza d nrmalnej lub jednej z pniższych liczb grubść najmniejsza grubść nrmalna grubść największa fnt-stretch - służy d zdefiniwania rzciągłści czcinki w pzimie; dstępne są następujące wartści ultra-cndensed - najbardziej ściągnięta extra-cndensed - cndensed - semi-cndensed - nrmal - nrmalna semi-expanded - expanded - extra-expanded - ultra-expanded - najbardziej rzciągnięta fnt-size - służy d zdefiniwania rzmiaru czcinki. Rzmiar ten mżna zdefiniwać dwjak: alb w jednstkach wyskści takich jak przy mawianiu backgrund-psitin, alb jedną z predefiniwanych nazw wielkści: xx-small - najmniejsza x-small - small - medium - nrmalna large - x-large - xx-large - największa lub ewentualnie przez zwiększenie / zmniejszenie czcinki aktualnej: Żródł:

4 Knrad Dżbik, pdstawy prgramwania, WYKŁAD 5 larger - zwiększenie smaller - zmniejszenie Wszystkie te wartści mżna także pdać we własnści agregującej: fnt. Własnści definiujące frmatwanie tekstu (większść) text-indent - służy d pdania szerkści wcięcia akapitu; szerkść tę mżna pdać dwlną jednstką mówiną w backgrund-psitin text-align - służy d pdania spsbu wyrównania tekstu w pzimie: left - wyrównanie d lewej right - wyrównanie d prawej center - wyrównanie d śrdka justify - justwanie tekstu line-height - służy d pdania wyskści wiersza (np. w akapicie). Wyskść tę mżna wyspecyfikwać jedną z dwlnych, mówinych już jednstek (także w prcentach nrmalnej wyskści), lub przez pdanie liczby - znacza t wtedy mnżnik, ile razy ma być zwiększna wyskść wiersza w stsunku d wyskści nrmalnej. Aby pwrócić d wyskści nrmalnej mżna użyć predefiniwanej stałej nrmal vertical-align - służy d pdania spsbu wyrównania tekstu w pinie: baseline - wyrównanie linii bazwej tekstu, d linii bazwej elementu nadrzędneg middle - wyrównanie punktu śrdkweg, d linii bazwej elementu nadrzędneg plus płwa wyskści tekstu sub - wyrównanie linii bazwej, d linii indeksu dlneg elementu nadrzędneg super - wyrównanie linii bazwej, d linii indeksu górneg elementu nadrzędneg text-tp - wyrównanie górnej krawędzi, d górnej krawędzi tekstu elementu nadrzędneg text-bttm - wyrównanie dlnej krawędzi, d dlnej krawędzi tekstu elementu nadrzędneg tp - wyrównanie górnej krawędzi, d górnej krawędzi elementu nadrzędneg bttm - wyrównanie dlnej krawędzi, d dlnej krawędzi elementu nadrzędneg Mżna także pdać wyskść pdniesienia lub puszczenia linii bazwej w stsunku d elementu nadrzędneg specyfikując dkładnie tę wyskść (jedną z jednstek lub prcentw) text-decratin - służy d pdania ddatkwych zdbników tekstu: nne - nie ma być żadnych zdbników underline - pdkreślenie line-thrugh - przekreślenie verline - linia nad tekstem blink - migtanie Żródł:

5 Knrad Dżbik, pdstawy prgramwania, WYKŁAD 5 letter-spacing - służy d pdania dległści pmiędzy literami w wyrazach. Mżna użyć stałej nrmal lub szerkści pdanej w dwlnej jednstce wrd-spacing - służy d pdania dległści pmiędzy wyrazami. Także wartścią mże być stała nrmal lub szerkść pdana w dwlnej jednstce text-transfrm - służy d pdania spsbu w jaki tekst ma być przekształcny i wyświetlny: nne - nie ma być żadnych przekształceń capitalize - pierwsze litery wyrazów mają być duże, a klejne małe uppercase - wszystkie litery w napisie mają być duże lwercase - wszystkie litery w napisie mają być małe white-space - służy d pdania spsbu w jaki mają być traktwane tzw. białe spacje (spacje, tabulatry i kńce wierszy): nrmal - nrmalnie, tak jak w XHTML pre - tak jak w elemencie pre XHTML nwrap - także nrmalnie, lecz wiersze nie mają być łamane, chyba że w tekście są złamane clr - służy d pdania klru tekstu (wartści takie same jak przy mawianiu klru tła backgrund-clr (dla tekstu mżna także pdawać własne klry tła, inne niż ma tł elementu bdy - mżna dzięki temu uzyskać ciekawe efekty i twrzyć lepiej wyglądające menu nawigacyjne na strnach) Żródł: