Podstawowe formatowanie CSS

Podobne dokumenty
Wprowadzenie do Internetu zajęcia 2

Lekcja 1:.Powtórka. <head> <title>kurs HTML</title> </head> <body> <p>to jest tresc...</p> </body>

WPROWADZENIE Kurs DO WIT INTERNETU WSISIZ Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Znaczniki języka HTML

Writer edytor tekstowy.

Wprowadzenie do Internetu zajęcia 1

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

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

Opis szablonów globalnych AdOcean

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

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

1. Objętość artykułu to maksymalnie 10 stron maszynopisu sformatowanego według wskazań. 2. Format strony A4:

Czcionki. Rodzina czcionki [font-family]

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

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

Temat 2: Tabela jako szablon strony

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

Tworzenie stron WWW. Ilustrowany przewodnik. Wydanie II

Edukacja na odległość

Ćwiczenie 4 - Tabele

I. Formatowanie tekstu i wygląd strony

[ HTML ] Tabele. 1. Tabela, wiersze i kolumny

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

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

Kaskadowe arkusze stylów cz. 2

Opis pliku XML Wersja 6.0

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

stworzyliśmy najlepsze rozwiązania do projektowania organizacji ruchu Dołącz do naszych zadowolonych użytkowników!

Skróty klawiszowe Window-Eyes

System CDN OPT!MA v Generator Raportów (GenRap) Kraków, Al. Jana Pawła II 41g tel. (12) , fax (12)

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

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

Przykłady stylów css

TWORZENIE PREZENTACJI MULTIMEDIALNYCH W PROGRAMIE MICROSOFT POWERPOINT

Wstęp do środowiska ILWIS

Znaczniki fizyczne i logiczne czcionki

imię kod ulica prześlij Dzięki formularzom możliwe jest pobieranie danych, a nie tylko ich wyświetlanie.

Języki programowania wysokiego poziomu. CSS Wskazówki

Ćwiczenie 8 Kolory i znaki specjalne

Alfabetyczna lista stylów

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

I. Wstawianie rysunków

Inwestycja - kompleks dwóch budynków mieszkalnych wielorodzinnych

PSO matematyka I gimnazjum Szczegółowe wymagania edukacyjne na poszczególne oceny

INSTRUKCJA OBSŁUGI Włączanie / wyłączanie indykatora Ważenie Ważenie zero Kalibracja 3

Tło CSS 3. Gabriela Panuś

Przedmiot: Grafika komputerowa i projektowanie stron WWW

Szczegółowe wytyczne zastosowania etykiet logistycznych GS1 dla poszczególnych form opakowaniowych występujących w dostawach do firmy ROSSMANN

6. KOLOR, TŁO I ŚCIEśKI DOSTĘPU

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

Przewodnik po e-sklepie

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

System CDN OPT!MA v Generator Raportów (GenRap) Kraków, Al. Jana Pawła II 41g tel. (12) , fax (12)

Word ćwiczenia 1. Napisz wzór kwasu siarkowego i oznaczenia godziny 1730 używając odpowiednio indeksów.

Technologie Informacyjne

Ćwiczenie 10 - Selektory

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

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

RGB25- TELEBIMY FULL KOLOR-PAMIĘĆ WBUDOWANA (RASTER 25mm) Oferta ważna od r.

RGB16- TELEBIMY FULL KOLOR-PAMIĘĆ WBUDOWANA (RASTER 16mm) Oferta ważna od r.

Szczegółowe wytyczne zastosowania etykiet logistycznych GS1 dla poszczególnych form opakowaniowych występujących w dostawach do firmy ROSSMANN

Sekcja B. Okoliczności powodujące konieczność złożenia deklaracji.

COMARCH ERP E-SKLEP...

Adres strony internetowej, na której Zamawiający udostępnia Specyfikację Istotnych Warunków Zamówienia:

za pomocą: definiujemy:

Szkolenie obejmuje także naukę języka angielskiego w stopniu umożliwiającym podstawową komunikację.

RGB20- TELEBIMY FULL KOLOR-PAMIĘĆ WBUDOWANA (RASTER 20mm) Oferta ważna od r.

Instrukcja korzystania z serwisu Geomelioportal.pl. - Strona 1/12 -

Tworzenie kwerend. Nazwisko Imię Nr indeksu Ocena

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

TEMAT: Rysowanie krzyżówek z wykorzystaniem programu komputerowego Microsoft Word.

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

Konstrukcja stylu nie należy do zbyt skomplikowanych i wygląda tak jak na poniższym przykładzie.

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

Adres strony internetowej, na której Zamawiający udostępnia Specyfikację Istotnych Warunków Zamówienia:

WYSTAWIANIE FAKTUR I FAKTUR KORYGUJĄCYCH W DZIAŁALNOŚCI GOSPODARCZEJ ŚRODA Z KSIĘGOWĄ JOANNA MATUSIAK

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

QuarkXpress skład i publikacja operacje podstawowe

Sugerowany sposób rozwiązania problemów. Istnieje kilka sposobów umieszczania wykresów w raportach i formularzach.

STANDARDY PRACY DYPLOMOWEJ (LICENCJACKIEJ, INŻYNIERSKIEJ I MAGISTERSKIEJ)

Ćwiczenia cz. 1. Teoria. Popularne skróty klawiszowe: Polskie znaki. ALT prawy + litera Utwórz spację nierozdzielającą: CTRL + SHIFT + Spacja

HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego.

Fragment tekstu zakończony twardym enterem, traktowany przez edytor tekstu jako jedna nierozerwalna całość.

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH

Tworzenie Stron Internetowych. odcinek 6

plansoft.org Zmiany w Plansoft.org

Justyna Klimczyk Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Znane problemy Ogólne (z programu Autodesk Revit Structure 2009 i poprzednie wydania)


Statystyka - wprowadzenie

CSS - layout strony internetowej

Programowanie WEB PODSTAWY HTML

Ćwiczenie 9 - CSS i wstawianie CSS

Standardy zapisu Dokumentów Planistycznych na potrzeby importu i eksportu dokumentów w ramach Modułu RP

Przestrzeń papier / model

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

CSS. Kaskadowe Arkusze Stylów

Sage Symfonia Odwrotne obciążenie - ewidencja księgowa

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

WYDAWNICTWA INFORMACYJNE - konspekt lekcji bibliotecznej dla klasy v szkoły podstawowej

Transkrypt:

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ł: http://www.2itam.pl/student/fakultet/html-css/

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ł: http://www.2itam.pl/student/fakultet/html-css/

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 200-100 - grubść najmniejsza 300-400 - grubść nrmalna 500-600 - 700-800 - 900 - 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ł: http://www.2itam.pl/student/fakultet/html-css/

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ł: http://www.2itam.pl/student/fakultet/html-css/

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ł: http://www.2itam.pl/student/fakultet/html-css/