Tworzenie stylów w HTML



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

Kaskadowe arkusze stylów cz. 2

Wprowadzenie do Internetu zajęcia 3

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

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

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

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

Projektowanie stron WWW

Technologie internetowe

Wykład 2 CSS. Michał Drabik

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

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

Znaczniki języka HTML

Języki programowania wysokiego poziomu CSS

CSS - style kaskadowe. Cascadind Style Sheets

Model blokowy. Model blokowy w CSS

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

Przykładowe pytania CSS

kaskadowe arkusze stylów

Dokument hipertekstowy

Projektowanie aplikacji internetowych. CSS w akcji

Czcionki. Rodzina czcionki [font-family]

Arkusze stylów CSS Cascading Style Sheets

Kaskadowe arkusze stylów

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

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

Technika pracy nad układem strony

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

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

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...

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

Tworzenie stron WWW. Ilustrowany przewodnik

Informatyka MPDI 3 semestr

Informacje wstępne: Dodatki, które warto doinstalować do przeglądarki:

Bezbolesny wstęp do CSS

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

CSS - 3. Pozostałe właściwości


CSS. Kaskadowe arkusze stylów CSS

Laboratorium 1: Szablon strony w HTML5

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

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.

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

I. Wstawianie rysunków

Dokument hipertekstowy

CSS - layout strony internetowej

TECHNOLOGIE SIECI WEB

ram sp. j. Transmiter FM USB SD/MMC BLUE AKCESORIA SAMOCHODOWE > Transmiter FM USB SD/MMC BLUE Utworzono : 06 październik 2016

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

*Kaspersky Internet Security 2016PL Box 1Desktop 1. Model : *Kaspersky Internet Security 2016PL Box 1Desktop 1. ram sp. j.

Układy witryn internetowych

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

HTML podstawowe polecenia

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

za pomocą: definiujemy:

Tworzenie stron internetowych w kodzie HTML Cz 5

I. Formatowanie tekstu i wygląd strony

Krok 1: Stylizowanie plakatu

1. Tworzenie prostej strony.

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

Technologie Informacyjne

I. Pozycjonowanie elementów

Języki programowania wysokiego poziomu. CSS Wskazówki

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

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

PROJEKTOWANIE STRON WWW

Wrocław dn. 20 kwietnia 2006 roku. Temat lekcji: Style CSS.

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

Programowanie WEB PODSTAWY HTML

CSS. Kaskadowe Arkusze Stylów

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

Systemy internetowe Wykład 2 CSS

Znaczniki HTML. Struktura dokumentu. Nagłówek strony

Technika pracy nad układem strony

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

Szablony. Wersja 7.6

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

HTML (HyperText Markup Language)

Deklarowanie tytułu związanej z tabelą

Ćwiczenie 9 - CSS i wstawianie CSS

Informatyka 2MPDI. Wykład 4

Kaskadowe arkusze stylów (CSS)

Prezentacja dokumentów XML

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

Odsyłacze. Style nagłówkowe

Prezentacja dokumentów XML

2. Prezentacja wizualna

UKŁAD INFORMACJI I POWIĄZAŃ MIĘDZY NIMI W INFORMACJI W SPRAWIE PODATKU LEŚNEGO (IL-1) W FORMACIE DANYCH XML

Tworzenie Stron Internetowych. odcinek 6

HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>.

zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >

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

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

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

Marginesy, dopełnienia i obramowanie

Podstawy pozycjonowania CSS

Blok dokumentu. <div> </div>

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Transkrypt:

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 www, stron dynamicznych (JavaScript, PHP, Java, Python itp.) jak i do stron przygotowywanych w systemach CMS (Yoomla, Wordpress, Drupal). Tworzenie stylów w HTML umieszczenie <LINK REL=STYLESHEET TYPE="text/css" HREF="sheetaddress" TITLE="Sheetname"> w części nagłówkowej <HEAD> użycie tagów <STYLE> w części nagłówkowej : <STYLE TYPE="text/css"> <!-- @import url(sheetaddress) mediatype; H1 { color: blue } --> </STYLE>... <H1>This headline becomes blue</h1> użycie @import url(sheetaddress) w secji STYLE, aby wykorzystać style określone w zewnętrznych plikach, jak to pokazano wyżej. mediatype to opcjonalna, oddzielona przecinkiem lista mediów obsługiwanych przez arkusz. użycie atrybutów STYLE w ramach tagów HTML, choć nie jest to zalecane: <P STYLE="color: green">paragraph is green.</p> Ogólna konstrukcja informacji o stylu CSS : selector1,selector2,...,selectorn { property1: value ; property2: value ; } np. H1,H5 { color: blue} #krzyzyk {cursor:crosshair}.cl1 {border: 1px solid blue} #przyklad2 { position: absolute; top: 250px; left: 300px; z-index: 2; background-color: red }

<TABLE ALIGN=LEFT WIDTH=30% HEIHT=20% style="bordercollapse:collapse;empty-cells:show;border: 1px solid blue;cursor:crosshair" > Efektywne wykorzystanie arkuszy stylów do formatowania dokumentów HTML wymaga znajomości podstawowych atrybutów i ich dopuszczalnych wartości. Tabele od 1 do 6 zawierają najważniejsze atrybuty CSS pogrupowane kategoriami, zaś listing 5 prezentuje sposoby użycia części atrybutów. wyrównanie 1. text-align justify, left, right, center poziome 2. verticalalign baseline, sub, super, top, text-top, middle, bottom, textbottom, długość Tabela 1. Wyrównanie pionowe i poziome Poprawne lp. Atrybut wartości 1. width długość szerokość 2. height długość wysokość wyrównanie pionowe Opis 3. max-width długość maksymalna szerokość 4. max-height długość maksymalna wysokość 5. min-width długość minimalna szerokość 6. min-height długość minimalna wysokość 7. margin długość marginesy (wszystkie cztery) 8. margin-left, margin-right, margin-top, margin-bottom długość marginesy lewy, prawy, górny i dolny 9. padding długość otaczanie (z czterech stron) 10. padding-left, padding-right, padding-top, padding-bottom długość Tabela 2. Wysokość, szerokość, marginesy i otaczanie otaczanie z lewej, prawej, górne i dolne 1. fontfamily nazwa kroju czcionki, np. Courier, Verdana, Arial, Serif nazwa kroju czcionki 2. font-size długość, larger, smaller wielkość czcionki 3. fontweight normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 grubość kroju 4. font-style normal, italic, oblique kursywa 5. fontvariant 6. fontstretch normal, small-caps normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semicondensed, semi-expanded, expanded, extra-expanded, ultraexpanded kapitaliki rozstrzelenie liter

7. font kombinacja powyższych wartości oddzielonych białymi znakami Tabela 3. Czcionki 1. text-indent długość wielkość wcięcia akapitu 2. text-decoration none, underline, overline, line-through, blink dekoracja tekstu 3. text-transform capitalize, uppercase, lowercase, none przekształcanie tekstu 4. word-spacing normal, długość odstępy między słowami 5. white-space normal, pre, nowrap interpretacja białych znaków 6. letter-spacing normal, długość odstępy między literami 7. line-height normal, długość wysokość linii Tabela 4. Tekst 1. border-style 2. none, hidden, dotted, dashed, solid, double, groove ridge, inset, outset takie jak border-style rodzaj obramowania (linia ciągła, przerywana, itd.) rodzaj obramowania każdej krawędzi z osobna 3. border-width thin, medium, thick, długość grubość obramowania 4. takie jak border-width grubość obramowania każdej krawędzi z osobna 5. border-color kolor kolor obramowania 6. border-style-left, border-styleright, border-style-top, border-stylebottom border-leftwidth, border-rightwidth, border-topwidth, border-bottomwidth border-leftcolor, border-rightcolor, kolor border-top-color, border-bottomcolor 7. border-collapse collapse, separate 8. border kombinacja wszystkich właściwości oddzielonych białymi znakami 9. border-left, kombinacja wszystkich kolor obramowania każdej krawędzi z osobna złączanie krawędzi sąsiadujących komórek tabeli

border-right, border-top, border-bottom Tabela 5. Obramowanie właściwości oddzielonych białymi znakami w stosunku do każdej krawędzi z osobna 1. list-style-type 2. list-styleposition 3. list-styleimage disc, circle, square, decimal, decimal-leading-zero, lowerroman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, none inside, outside adres uri obrazu styl numerowanie i wypunktowania położenie numeracji względem tekstu ikona wypunktowania Pozycjonowanie Element position najczęściej jest związany z tagiem <div>. Może przyjąć następujące wartości. static (statyczne) relative (relatywne) absolute (absolutne) fixed (ustalone) Pozycjonowanie statyczne Elementy z position:static. Jest to wartość domyślna dla wszystkich elementów. Umieszczenie elementu zależy od pozycji w dokumencie. Pozycjonowanie relative Elementy z position:relative. Możemy przesunąć element w dowolnym kierunku od miejsca w którym by się znalazł domyślnie. Możliwości przesunięcia to top, bottom, left, right. Jeśli przesuniemy element nadając mu top:10px to element przesunie się o 10px w dół. Zajmuje on miejsce tam gdzie powinien być domyślnie wyświetlany a pokazywany jest w innym miejscu. Można nadawać też wartości ujemne. Tak pozycjonowany element staje się kontenerem dla wszystkich innych, które są absolutnie w nim pozycjonowane. Pozycjonowanie absolut Elementy z position:absolute. Możemy przesunąć element w dowolnym kierunku od miejsca położenia w kontenerze. Kontenerem są elementy z position relative, absolute, fixed. Gdy

niema takiego elementu nadrzędnego to wybiera go przeglądarka. Może to być body ale nie musi. Możliwości przesunięcia to top, bottom, left, right. Elementy pozycjonowane w ten sposób nie zajmują miejsca w dokumencie. Możemy więc przenieść element poza widzialny obszar w przeglądarce. position:relative i position:absolute Pozycjonowanie fixed Elementy z position:fixed. Możemy przesunąć element w dowolnym kierunku od miejsca położenia kontenera, którym w tym przypadku zawsze jest okno przeglądarki. Możliwości przesunięcia to top, bottom, left, right. Elementy pozycjonowane w ten sposób nie zajmują miejsca w dokumencie. Możemy więc przenieść element poza widzialny obszar z-index Elementy pozycjonowane mają wagę widoczności elementu na osi-z czyli warstwy. Widoczność określa nam atrybut z-index. Czym wartość liczbowa jest większa tym większy jest priorytet widoczności. Zadania: 1. Utwórz dla dowolnych kilku zdjęć dokument, w którym zdjęcia te będą sprawiały wrażenie rzuconych jedno na drugie

2. Zmień kolor suwaka paska przewijania. 3. Utwórz tabelę 3 na 3, w której każda komórka ma inny kolor tła. 4. Stwórz element, po najechaniu na który kursor myszy będzie zamieniał się w krzyżyk. 5. Stwórz kilka odnośników, z których każdy będzie przyjmował inny kolor po odwiedzeniu, inny po najechaniu myszką a inny jeśli odnośnik nie jest odwiedzony. Pozmieniaj układ i kolory w przykładach 1-5 JavaScript to język rozszerzający HTML o elementy dynamiczne. Działa po tronie przeglądarki (klienta) w przeciwieństwie do języków serwerowych (PHP, ASP, Java Server Pages). Uruchom przykłady przedstawione w pierwszej części laboratorium, wyodrębnij elementy w tagu <script>, przeanalizuj działanie skryptów.