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

Wielkość: px

Rozpocząć pokaz od strony:

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

Marcin Wójcik
5 lat temu
Przeglądów:

1 PROGRAMOWANIE

2 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 W pliku CSS umieszczamy reguły formatujące (opisujące wygląd) konkretnych elementów na stronie. Elementy te są definiowane przez selektory użyte w pliku HTML (#/.)NAV { WIDTH: 100PX; } SELEKTOR CSS WŁASNOŚĆ CSS WARTOŚĆ CSS ZASADA CSS

3 WSTAWIANIE CSS Sposób 1. INLINE <p style= background-color: lightgrey; font: 2em Arial; >Tekst</p> Sposób 2. EXTERNAL /* style.css */ p.text { background-color: lightgrey; font: 2em Arial; } <! index.html > ( ) <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> ( ) <p class= text >Tekst</p> Sposób 3. INTERNAL <html> <head> <style> p.text { background-color: lightgrey; font: 2em Arial; } </style> </head> <body> <p class= text >Tekst</p>

4 ZASADA CSS WŁASNOŚĆ1: WARTOŚĆ1; WŁASNOŚĆ2: WARTOŚĆ2; WŁASNOŚĆ3: WARTOŚĆ3 WARTOŚĆ4; background-color: lightgrey; font: 20px Times; <p style= background-color: lightgrey; font: 20px Arial; >Tekst</p>

5 WŁASNOŚCI CSS - TEKST hlp:// Text: color size text-align text-decoration text-transform letter-spacing line-height word-spacing font-family font-style font-size font-weight Arial Verdana, Helvetica normal italic <p style= background-color: lightgrey; font: 20px Arial; >Tekst</p>

6 CZCIONKA Czcionka - zwyczajowo przyjęte (błędne) określenie kroju pisma serif - szeryf sans-serif - bez szeryfa font-family: Arial, Helvetica, Verdana, sans-serif;

7 font-size: 16px; font-size: 1.6em; /* 1em = 10px */ font-size: 100%; font-size: 12pt; /* 1pt = 1.33px; 1px = 0.75 pt */ html { font-size: 62.5%; } /* 62.5%*16px = 10px */ h1 { font-size: 2.2em; } /* 22px */ h2 { font-size: 1.8em; } /* 18px */ p { font-size: 1.6em; } /* 16px */

8 font-style: italic; Tekst pochylony font-weight: 300; font-weight: 500; font-weight: 700; Tekst cieńszy Tekst normalny Tekst pogrubiony line-height: 2em; Tekst normalny Tekst normalny

9 WŁASNOŚCI CSS - BLOKI background-color width height float overflow margin /margin-top/margin-right/margin-bottom/margin-left padding /padding-top/padding-right/padding-bottom/padding-left

10 IDENTYFIKATORY I KLASY Identyfikator służy do identyfikacji pojedynczych elementów na stronie. W pliku może istnieć tylko jeden element HTML o takim samym identyfikatorze, a więc jest unikalny względem pliku. <div id= content > </div> <div id= sidebar > </div> Klasa, podobnie jak identyfikator, służy rozróżnianiu elementów na stronie. Jednak elementów o tej samej klasie, w pojedynczym pliku, może być wiele. <div class= podpis > </div> <div class= podpis > </div>

11 SELEKTORY CSS Identyfikator <div id= content > </div> #content { background-color: red; } Klasa <div class= intro > </div>.intro { background-color: blue; } Ścieżka dostępu <div class= intro > </div> <p class= intro > </p> div.intro { background-color: blue; } p.intro { color: green; } <div class= intro > <p class= text > <img src= image.jpg> </p> </div> div.intro p.text img { height:200px }

12 ELEMENTY BLOKOWE I LINIOWE

13 ELEMENTY LINIOWE Element liniowy zajmuje tyle miejsca ile mu potrzeba. <a> <img> <strong> <a href= # >Link 1</a> <a href= # >Link 2</a> <a href= # >Link 3</a> Link 1 Link 2 Link 3

14 ELEMENT BLOKOWY Element blokowy zajmuje całe dostępne miejsce w lini <p> <h1> - <h6> <ul> <ol> <li> <p>lorem Impsum</p><p>dolor sit amet</p> Lorem ipsum dolor sit amet

15 Dokument można podzielić na sekcje. Każda z nich reprezentowana jest przez znacznik <div> zawartość sekcji </div> CONTENER NAV Width: 80% Height:200px CONTENT Width: 80% Height:600px FOOTER Width: 80% Height:120px <div class= contener > <div class= nav >NAWIGACJA</div> <div class= content >CONTENT</div> <div class= footer >FOOTER</div> </div>

Podobne dokumenty

Znaczniki języka HTML

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