Embed Size (px)
Citation preview
ΗTML και XHTML – Βασικές έννοιεςέννοιες
Βασική σύνταξη HTML και HTMLΗ δομή μιας HTML σελίδας
Η γραμματική της ΗΤML
Όπως κάθε γλώσσα έχει μια γραμματική<!ELEMENT IFRAME - - (%flow;)* -- inline subwindow -->!ELEMENT IFRAME (%flow;) inline subwindow <!ATTLIST IFRAME%coreattrs; -- id, class, style, title --longdesc %URI; #IMPLIED -- link to long description(complements title) --name CDATA #IMPLIED -- name of frame for targetting --
%URI #IMPLIED f f t tsrc %URI; #IMPLIED -- source of frame content --frameborder (1|0) 1 -- request frame borders? --marginwidth %Pixels; #IMPLIED -- margin widths in pixels --marginheight %Pixels; #IMPLIED -- margin height in pixels --scrolling (yes|no|auto) auto -- scrollbar or none --align %IAlign; #IMPLIED -- vertical or horizontal alignment --g g gheight %Length; #IMPLIED -- frame height --width %Length; #IMPLIED -- frame width -->
Δε χρειάζεται να μπούμε σε λεπτομέρειες για τηΔε χρειάζεται να μπούμε σε λεπτομέρειες για τη γραμματική της γλώσσας
Εlements and attributes
Ένα ΗΤΜL έγγραφο περιέχει “elements”Τα elements περιέχουν:
Πληροφορίες – κείμενο, εικόνες, βίντεο, κλπ.βΣυνδέσεις σε άλλα έγγραφα, εικόνες, βίντεο κλπ.
Άλλα elements
Κάθε element, γενικά, αποτελείται από τρία μέρη:Start tag, Content, Close tag
Δύο ειδών elements:Non emptyEmpty
Η ανατομία ενός element (non empty)
<p>Η οικονομική ζωή της πόλης</p>p μ ή ζ ή ης ης p
start tag content close tag
<h1 class=“main”>Οδηγός Θεσσαλονίκης</h1>
attribute
Η ανατομία ενός element (empty)
start tag
<img src=“images/map jpg" alt=«Χάρτης της πόλης" /><img src= images/map.jpg alt=«Χάρτης της πόλης />
tt ib t tt ib tattribute attribute
HTML versus XHTML
Η HTML είναι “case insensitive”Οι παρακάτω εντολές είναι ίδιες: <HEAD> <head> or <Head>Οι παρακάτω εντολές είναι ίδιες: <HEAD>, <head> or <Head>
Η XHTML είναι “case sensitive”Όλες οι εντολές πρέπει να γράφονται με μικρά γράμματαΌλες οι εντολές πρέπει να γράφονται με μικρά γράμματα.<head> : σωστό, <HEAD> : λάθος, <Head> : λάθος
Στην XHTML όλα τα empty elements πρέπει ναΣτην XHTML όλα τα empty elements πρέπει να κλείνουν με " />"Στην XHTML όλα τα non empty elements πρέπει η p y ρνα έχουν end tags
Η δομή ενός εγγράφου
<html><head><head>
</head><title> </title>
<body><h1> </h1>
<p><img />
<a> </a>
</html></body>
</p><a> </a>
</html>
Δομή και Εμφάνιση
Το XHTML αρχείο περιέχει τη δομή του εγγράφουΤ ί έ ά άΤα στοιχεία που έχουν να κάνουν με την εμφάνιση (τρόπο παρουσίασης) του εγγράφου καλό είναι να τοποθετούνται στο CSS αρχείοτοποθετούνται στο CSS αρχείο
Structural Elements Presentational Elements<f t><p>
<h1><h2>
<em><strong><blockquote>
<font><b><i><underline><h3>
<h4><h5>
<underline><blink>
Εμφάνιση CCS<h6>
Εμφάνιση Επιλογές χρήστη
Βασική δομή ενός εγγράφου
<html><head><title>Οδηγός Θεσσαλονίκης</title>ηγ ς ης</head><body><body></body></html>
Σχόλια
Χρησιμοποιούνται για το σχολιασμό του κώδικαΧρήσιμα στο μέλλον για τηνΧρήσιμα στο μέλλον για την ευκολότερη κατανόηση του κώδικαΔ ί ή ήΔεν είναι εμφανή στο χρήστη<!-- Το σχόλια μας -->! Το σχόλια μας
Κείμενο σε XHTML έγγραφα
ΕπικεφαλίδεςΠαράγραφοιΠαράγραφοιΛίστεςΆλλ ίΆλλα στοιχεία
Επικεφαλίδες
6 επικεφαλίδες, h1 έως h6<h1> επικεφαλίδα 1 </h1><h2> επικεφαλίδα 2 </h2>φ<h3> επικεφαλίδα 3 </h3><h4> επικεφαλίδα 4 </h4><h4> επικεφαλίδα 4 </h4><h5> επικεφαλίδα 5 </h5><h6> επικεφαλίδα 6 </h6>
Παράγραφοι
<p>Στον οδηγό αυτό θα βρείτε πληροφορίες σχετικές με τα αξιοθέατα, την
/οικονομική και κοινωνική ζωή της Θεσσαλονίκης.</p>Τα κενά στον XHTML κώδικα αγνοούνταιΑλλαγή γραμμής<br /><br />
Λίστες
Μη ταξινομημένες λίστες< l><ul><li>................</li><li> </li><li>.................</li></ul>
Τ ξ έ λίΤαξινομημένες λίστες<ol>
li /li<li>................</li><li>.................</li></ol></ol>
Λίστες (συνέχεια)
Λίστες ορισμών (definition lists)Χρησιμοποιούνται στις περιπτώσεις που μια λέξη ή ένας όρος χρειάζονται επιπλέον επεξήγηση
dl<dl><dt>……….</dt>
/<dd>................</dd><dd>................</dd><dt>.................</dt></dl>
Λίστες μέσα σε λίστες
<ul>li /li<li>................</li>
<ul>li /li<li>................</li>
<li>.................</li></ul>
<li>.................</li></ul>
Άλλα στοιχεία
<strong>…….</strong>Συνήθως έντονη γραφήΣυνήθως έντονη γραφή<em>………</em>Συνήθως πλάγια γραφήΣυνήθως πλάγια γραφή<pre>……..</pre>Το κείμενο διατηρεί τη μορφοποίησή του<blockquote >…....</ blockquote>Το κείμενο ξεχωρίζει από το υπόλοιπο<q lang=“xx”> </q><q lang= xx >…….</q>Το κείμενο τοποθετείται συνήθως σε εισαγωγικά
Σε περίπτωση λάθους
Σωστά ονόματα των ετικετών (tags)Όλ l t έ l tΌλα τα elements έχουν close tags Όλα τα close tags είναι σωστά (δηλ. της
ή /h2 ή / )μορφής </h2> ή </p>) Τα elements δεν επικαλύπτονται (αυτό
ί ό δ έ ώδ ήσημαίνει ότι δεν έχουμε κώδικα της μορφής <h1><p>Περιεχόμενο παραγράφου</h1></p>)παραγράφου</h1></p>)
Style Sheets
<html>h d<head>
<title>Οδηγός Θεσσαλονίκης</title><link rel="stylesheet" type="text/css"
href="style1.css" />y</head>
Χρώμα – Βασικές έννοιες
Το χρώμα στο χαρτί
Κύρια και δευτερεύοντα χρώματα στο μοντέλο CMYK
Το χρώμα στην οθόνη
Κύρια και δευτερεύοντα χρώματα στο μοντέλο RGB
Το πρότυπο sRGB
Τα χρώματα στο πρότυπο sRGB (Red Green Blue space)
Ορισμός χρωμάτων στο Web
Καθορισμός των χρωμάτων στο πρότυπο sRGB
Ορισμός χρωμάτων στο Web
Καθορισμός των βασικώνχρωμάτων
Καθορισμός των δευτερευόντων χρωμάτων
Καθορισμός αποχρώσεων του γκρι
Αριθμός χρωμάτων
256 (0-255) επίπεδα για καθένα από τα τρία βασικά χρώματα.Σύνολό 256 x 256 x 256 = 16 777 216Σύνολό 256 x 256 x 256 16,777,216 (16,8) χρώματα.24 bit ώ ή ό ώ24 bit χρώμα ή πραγματικό χρώμα (true color).Το ανθρώπινο μάτι δεν μπορεί να διακρίνει τόσα χρώματα στην οθόνηδιακρίνει τόσα χρώματα στην οθόνη.
Βάθος χρώματος
8 bit color = 28 = 258 χρώματα16 bit color = 216 = 65,536 χρώματα24 ή 32 bit color = 224 = 16 777 21624 ή 32 bit color = 224 = 16,777,216 χρώματα
Web safe colors
Ο κυβος με τα 216 “ασφαλή” χρώματαβ ς μ φ ή χρ μ
Χρώμα σε XHTML έγγραφα
Με χρήση CSS καθορίζουμε το χρώματου κειμένου ενός elementτου φόντου (background) ενός elementτου περιγράμματος (border) ενός elementτου περιγράμματος (border) ενός element
4 τρόποι δήλωσης ενός χρώματοςkeyword (red green blue κλπ)keyword (red, green, blue, κλπ)δεκαδική rgb τιμή (rgb(255,0,0) , rgb(0,255,0))ποσοστό rgb (rgb(100%,0%,0%) rgb(0%,100%,0%) )g ( g ( ) g ( ) )δεκαεξαδική rgb τιμή (#ff0000, #00ff00 )
16 Προκαθορισμένα χρώματα
Web safe colors σε δεκαεξαδική μορφή
Ο κυβος με τα 216 “ασφαλή” χρώματαβ ς μ φ ή χρ μ
Γραφικά στο Web
Βασικοί τύποι γραφικώνGIF, JPEG, PNG
Βασικοί τύποι γραφικών
Bitmaps (ράστερ)Πολλοί τύποι αρχείων
Vector (διανυσματικά )Οι browsers χρειάζονται ειδικόΠολλοί τύποι αρχείων
υποστηρίζονται από τους Browsers.Σ σ ώ α α φ ο ραφίες
Οι browsers χρειάζονται ειδικό πρόγραμμα (plug-in)για να τα δείξουνΣ ί άΣυνιστώνται για φωτογραφίες.
Δεν υπάρχει πρακτικά η δυνατότητα μεγέθυνσης
Συνίστανται για γραφικά που δημιουργούνται από υπολογιστές (σχέδια)Μ ί ί έθ ίΜεγάλο μέγεθος αρχείου,
ανάλογο του μεγέθους της εικόνας
Μπορεί να γίνει μεγέθυνση χωρίς να χαθεί η ποιότητα και η ευκρίνεια.Μικρό μέγεθος αρχείου, ανεξάρτητο
GIF, JPEG, PNG του μεγέθους της εικόναςFlash/SWF,SVG
Γραφικά τύπου Bitmap
GIF (Graphics Interchange Format)Συγκεκριμένος αριθμός χρωμάτων και συμπίεση χωρίς απώλειες (lossless).JPEG (Joint Photographic Experts Group)Πραγματικό χρώμα (16 8 εκατ ) καιΠραγματικό χρώμα (16,8 εκατ.) και συμπίεση με απώλειες (lossy).PNG (P t bl N t k G hi )PNG (Portable Network Graphic) Αντικαθιστά το GIF
Αρχεία GIF (.gif)
Μέχρι 256 χρώματαΚ άλλ λ ά ύ έ λίΚατάλληλο για γραφικά πού περιέχουν λίγα χρώματα (κείμενα, σχέδια, κλπ.)Υ ίζ “δ έ ” ώΥποστηρίζει “διαφανές” χρώμαΥποστηρίζει σταδιακή εμφάνιση της
ό (I t l i )εικόνας(Interlacing)Το μέγεθος του αρχείου εξαρτάται από τον
θ ό ά δ ά ( ήαριθμό των χρωμάτων, τις διαστάσεις (μήκος και πλάτος) της εικόνας και την πολυπλοκότητά τηςπολυπλοκότητά της
Αρχεία JPEG (.jpg)
24 bit χρώμα (πραγματικό χρώμα)Κατάλληλο για γραφικά πού περιέχουν πολλά χρώματα (φωτογραφίες, χρ μ (φ γρ φ ςτρισδιάστατα γραφικά)Διαφορετικά επίπεδα συμπίεσηςΔιαφορετικά επίπεδα συμπίεσηςΔεν υποστηρίζει “διαφανές” χρώμαΤ έ θ ί ξ ά όΤο μέγεθος του αρχείου εξαρτάται από τις διαστάσεις (μήκος και πλάτος) της
ό β θ ό ί ήεικόνας και το βαθμό συμπίεσής της
Αρχεία PNG (.png)
24 bit χρώμα, αποχρώσεις του γκρι ( l ) 8 bit (256) ώ(grayscale), 8 bit (256) χρώμα5-25% καλύτερη συμπίεση από το GIFΠολλά “διαφανή” χρώματαΠεριέχει πληροφορίες για “gamma correction”Περιέχει πληροφορίες για gamma correctionH σταδιακή εμφάνιση της εικόνας (Interlacing) είναι καλύτερηείναι καλύτερηΔεν υποστηρίζεται από παλιούς browsers
Εικόνες σε XHTML έγγραφα
Εισαγωγή στη σελίδαΟρισμός μεγέθουςΘέση στη σελίδαΘέση στη σελίδα
Εισαγωγή εικόνας στη σελίδα
φάκελος
<img src="images/map.gif" />
όνομα του αρχείου
Εναλλακτικό κείμενο
<img src="images/map.gif" alt="Χάρτης τηςimg src images/map.gif alt Χάρτης της Θεσσαλονικης" />
Καθορισμός μεγέθους
<img src="images/map.gif" alt="Χάρτης της Θ λ " idth "400" h i ht "100"Θεσσαλονικης" width= "400" height= "100" border= "2" />
Ο ορισμός των διαστάσεων βοηθάει στη γρηγορότερη εμφάνιση της σελίδας στο browser.Τις διαστάσεις της εικόνας τις βλέπουμε σε ένα πρόγραμμα επεξεργασίας γραφικών (π.χ Photoshop).Είναι προτιμότερο να αλλάζουμε τις διαστάσεις μιας εικόνας χρησιμοποιώντας ένα πρόγραμμα
ξ ί ώ ά bεπεξεργασίας γραφικών, παρά το browser.
Θέση της εικόνας στη σελίδα
H εικόνα στην αριστερή πλευρά της σελίδας:i "i / if" lt "Χά<img src="images/map.gif" alt="Χάρτης της Θεσσαλονικης" width="400" height="100" border="2"li "l f "align= "left" />H εικόνα στη δεξιά πλευρά της σελίδας:
<img src="images/map.gif" alt="Χάρτης της Θεσσαλονικης" width="400" height="100" border="2"ς galign= "right" />
Άλλες ιδιότητες (attributes)
Περίγραμμα<img src="images/map.gif" border= "2" />
Περιθώριο<img src="images/map gif" hspace= “10 "<img src images/map.gif hspace 10
vspace=“8" />
h i l δ ξ ά ά όhspace: pixels δεξιά και αριστερά της εικόναςvspace: pixels πάνω και κάτω της εικόνας
Συνδέσεις μεταξύ εγγράφων
Μορφές συνδέσεωνΕικόνες με «ενεργές» περιοχές
Συνδέσεις σε τοπικά έγγραφα
Όταν το έγγραφο στο οποίο κάνουμε τη σύνδεση βρίσκεται στον υπολογιστή μας, στο href=“” ορίζουμε τη «σχετική» διαδρομή απόυπολογιστή μας, στο href ορίζουμε τη σχετική διαδρομή από τη θέση όπου βρίσκεται το έγγραφο μας στο έγγραφο της σύνδεσης.Για παράδειγμα:Για παράδειγμα:<a href=“museums.html”>Τα μουσεία της Θεσσαλονίκης</a>το έγγραφο museums.html βρίσκεται στον ίδιο κατάλογο με το έγγραφό μας
<a href=“museums/byzantine.html”>Βυζαντινό μουσείο</a>το έγγραφο byzantine.html βρίσκεται στον κατάλογο museums
<a href=“ /index html”>Αρχική σελίδα</a><a href= ../index.html >Αρχική σελίδα</a>το έγγραφο index.html βρίσκεται στον προηγούμενο κατάλογο από αυτόν που βρίσκεται το έγγραφό μας
Συνδέσεις σε εξωτερικά έγγραφα
Όταν το έγγραφο στο οποίο κάνουμε τη σύνδεση βρίσκεται σε κάποιο άλλο υπολογιστή στο href=“” ορίζουμε την «απόλυτη»κάποιο άλλο υπολογιστή στο href ορίζουμε την απόλυτη θέση αυτού του εγγράφου.
http://www.urenio.org/courses/index.html
σχετική θέσηdomain
serverπρωτόκολλο
Για παράδειγμα:<a href=“http://www auth gr”>Αριστοτέλειο Πανεπιστήμιο</a><a href http://www.auth.gr >Αριστοτέλειο Πανεπιστήμιο</a><a href=“http://alexander.macedonia.culture.gr/mbp/main_en.htm”>Το Βυζαντινό Μουσείο στο Διαδίκτυο</a>
Εσωτερικές συνδέσεις
Μπορούμε να δημιουργήσουμε συνδέσεις σε συγκεκριμένο τμήμα ενός εγγράφου χρησιμοποιώνταςσυγκεκριμένο τμήμα ενός εγγράφου, χρησιμοποιώντας την ιδιότητα “id” για να το συγκεκριμένο τμήμα.Για παράδειγμα:Για παράδειγμα:<h2 id=“byzantine”>To Βυζαντινό Μουσείο</h2>Για να κάνουμε σύνδεση στο σημείο του εγγράφουΓια να κάνουμε σύνδεση στο σημείο του εγγράφου όπου υπάρχει η συγκεκριμένη επικεφαλίδα χρησιμοποιούμε την εντολή:χρη μ μ η ή<a href=“#byzantine”> ή<a href=“museums.html#byzantine”>y
Αποστολή e-mail
Η εντολή:h f " ilt i f @ th " Ε ί /<a href="mailto:[email protected]">Επικοινωνία</a>
ανοίγει στο χρήστη ένα παράθυρο e-mail όπου μπορεί να γράψει το μήνυμά του και να το στείλει στηνα γράψει το μήνυμά του και να το στείλει στη διεύθυνση: [email protected]
Συνδέσεις με εικόνες
Για να κάνουμε μια εικόνα ενεργή (σύνδεση) χρησιμοποιούμε την εντολή:χρησιμοποιούμε την εντολή:
<a href="../index.html"><img src="images/home.gif" /></a>
δίνοντας τη σχετική ή απόλυτη θέση της εικόνας
Εικόνα με «ενεργές» περιοχές
Για να κάνουμε συγκεκριμένες περιοχές μιας εικόνας ενεργές, ορίζουμε έναν «χάρτη» των περιοχών αυτών:
id “ ”<map id=“museums”><area shape ="rect" coords="1,114, 224,150" href="communications.html">< area shape="polygon" coords ="10,15,99,4,105,24,77,57,23,54" href ="web.html">< area shape ="circle" coords ="162,55,50" href ="earth.html"></map><img src="/graphics/thessaloniki_map.gif" usemap="# museums ">
όπουrect σημαίνει ορθογώνιο το οποίο ορίζεται στο coords=“” από τις συντεταγμένες της πάνω αριστερής και της κάτω δεξιάς γωνίας του.
l ί λύ ί ίζ d “” ό έpolygon σημαίνει πολύγωνο το οποίο ορίζεται στο coords=“” από τις συντεταγμένες των κορυφών του.circle σημαίνει κύκλος ο οποίος ορίζεται στο coords=“” από τις συντεταγμένες του κέντρου του και το μήκος της ακτίνας του.ρ μή ς ης ς
Χρήση Cascade Style Sheets
Χρήση σε XHML έγγραφα
Ένα αρχείο CSS περιέχει μια σειρά από εντολές(rules) που καθορίζουν τον τρόπο παρουσίασης των(rules) που καθορίζουν τον τρόπο παρουσίασης των στοιχείων της XHTML.Οι εντολές αυτές:Οι εντολές αυτές:
Βρίσκονται σε ένα αρχείο το οποίο συνδέεται σε μια XHTML σελίδα, ήμια XHTML σελίδα, ήΕνσωματώνονται στο XHTML έγγραφο
Σύνδεση αρχείου CSS
Τα αρχεία css συνδέονται με τρεις τρόπους σε ένα xhtml έγγραφο:
E t lExternal<head><link rel="stylesheet" type="text/css" media="all" href="style_sheets/style1.css" />y yp y _ y</head>
ή<head><head><style type="text/css" media="all">@import " style_sheets/style1.css ";</style></head>
Ενσωμάτωση εντολών CSS
Internal<h d><head>p {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 1emfont size: 1em}h1 {font-size: 1.5em}}</head>
In-lineIn line<body style=“font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em”>
Δημιουργία CSS
Όπως στην XHTML έχουμε Tags στα CSS έχουμε Selectors
Selector Declaration
Selectors
h1 {color: white;}Property Value
Μονάδες
'em' (πχ font-size: 2em) περίπου ίσο με το ύψος ενός γράμματοςενός γράμματος'px' (πχ font-size: 12px) pixels'%' (πχ font size: 80%) ποσοστό επί της% (πχ font-size: 80%) ποσοστό επί της προκαθορισμένης τιμής'pt' (πχ font-size: 12pt) pointspt (πχ font-size: 12pt) points
Σχετικές τιμές: em, %χ ς μ ς ,Απόλυτες τιμές: px, pt
Χρώματα
Έχουμε στη διάθεσή μας 16,777,216 χρώματα.Μπορούμε να τα δηλώσουμε χρησιμοποιώντας ένα 'όνομα'Μπορούμε να τα δηλώσουμε χρησιμοποιώντας ένα όνομα , μία 'rgb' (red/green/blue) τιμή ή έναν 'δεκαεξαδικό' κωδικό. Για παράδειγμα:redredrgb(255,0,0)rgb(100%,0%,0%)#ff0000 ή #f00#ff0000 ή #f00Υπάρχουν 16 προκαθορισμένα χρώματα: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, , g y, g , , , y, , p p ,red, silver, teal, white, και yellow.Μπορούμε επίσης να χρησιμοποιήσουμε την τιμή transparent
Χρώματα
Τα χρώματα εφαρμόζονται χρησιμοποιώντας τις ιδιότητες colorκαι background-color πχ:και background color πχ:
body { color: yellow;color: yellow;background-color: blue;
} h1 {
color: #ffc;background color: #009;background-color: #009;
}
Κείμενο
Μπορούμε να αλλάξουμε το μέγεθος και τη μορφή του κειμένου χρησιμοποιώντας μια σειρά από ιδιότητες όπως:χρησιμοποιώντας μια σειρά από ιδιότητες όπως:
font-family (όλες οι γραμματοσειρές)font-family: arial, helvetica ή font-family: Georgia, "Times New Roman", seriffont-sizefont weight (bold ή normal)font-weight (bold ή normal)font-style (italic ή normal)text-decoration (overline, line-through, underline, none)( , g , , )text-transform (capitalize, uppercase, lowercase, none)
Κείμενο
body { font-family: verdana arial helvetica serif;font family: verdana, arial, helvetica, serif;font-size: 0.8em;
} h1 { font-size: 2em; } h2 { font-size: 16px; } a { te t decoration none }a { text-decoration: none; } strong {
font-style: italic;font style: italic; text-transform: uppercase;
}
Κείμενο
letter-spacing και word-spacing (τιμή ή normal)line-height: ύψος μιας γραμμής (τιμή ποσοστό ήline height: ύψος μιας γραμμής (τιμή, ποσοστό ή normal)text-align (left, right, center ή justify)t t i d t ή ώ ήtext-indent: εσοχή της πρώτης γραμμής μιας παραγράφου (τιμή ή ποσοστό)
p { p {letter-spacing: 0.5em; word-spacing: 2em; line-height: 1.5em;line height: 1.5em; text-align: center;
}
Περιθώρια και περιγράμματα
Margin boxMargin box
Border box
Padding boxgElement box
Περιθώρια
Margin: Διάστημα έξω από το περίγραμμα έτου αντικειμένου.
Padding: Διάστημα ανάμεσα στο περίγραμμα και το αντικείμενο.margin, margin-top, margin-right, margin-g , g p, g g , gbottom, margin-left.padding padding-top padding-rightpadding, padding top, padding right, padding-bottom, padding-left.
Περιγράμματα
border-style: Καθορίζει το είδος του περιγράμματος (solid dotted dashed doubleπεριγράμματος (solid, dotted, dashed, double, groove, ridge, inset, outset).border-width: Καθορίζει το πάχος τουborder-width: Καθορίζει το πάχος του περιγράμματος. Μπορούμε να καθορίσουμε το πάχος της κάθε πλευράς χωριστά (border-top-ς ς ς (width, border-right-width, border-bottom-width, border-left-width).border-color: Καθορίζει το χρώμα του περιγράμματος.
Παράδειγμα
h1 {background-color: #DDEEBA;background color: #DDEEBA;border-style: solid;border-width: 2px;border-color: #81BD35;color: #038D03;font si e 1 6emfont-size: 1.6em;font-weight: bold;padding: 1em;padding: 1em;margin: 1em 0 1em 0;
}
Συνδέσεις
a:link { color: blue; } a:visited { color: purple; } a:active { color: red; } { ; }a:hover {
text-decoration: none;text decoration: none; color: blue; background-color: yellow;background color: yellow;
}
Συγκερασμός ιδιοτήτων
Πολλές φορές μπορούμε με μια ακολουθία τιμών να περιγράψουμε ιδιότητες των CSS χωρίς να τις αναφέρουμε. Οι τιμές πρέπει να χωρίζονται με κενά. Π.χ.:Αντί γιαp {
border-top-width: 1px; border right width: 5px;border-right-width: 5px; border-bottom-width: 10px; border-left-width: 20px;
} μπορούμε να γράψουμεp {border-width: 1px 5px 10px 20px;}Επίσης τα border-width, border-color και border-style μπορούν να συγκεραστουν π χ:συγκεραστουν, π.χ: p { border: 1px red solid; } Όπως επίσης και ιδιότητες σχετικές με το “font”, π.χ.:p { font: italic bold 1em/1 5 courier; }p { font: italic bold 1em/1.5 courier; } (Η τιμή 1.5 αφορά την ιδιότητα line-height)
Εικόνες στο φόντο
Τα css μας δίνουν μεγάλη ευελιξία στο χειρισμό των εικόνων που τοποθετούμε στο φόντο.background-color : χρώμαbackground-image : url(θέση της εικόνας) background repeat : τρόπος επανάληψης της εικόναςbackground-repeat : τρόπος επανάληψης της εικόναςrepeat, repeat-y, repeat-x, no-repeatbackground-position: θέση της εικόνας στη σελίδαtop center bottom left righttop, center, bottom, left, rightΓια παράδειγμαbody {{background: white url(images/bg.gif) no-repeat top right;}
Πίνακες σε XHTML έγγραφα
Δημιουργία πίνακα
t bl<table>
<tr>
<td>(γραμμή/
row)(κελί/cell)
Ο κώδικας<table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>
Ιδιότητες
widthwidth
cellpaddingp g
border
cellspacingcellspacing
Ο κώδικας<html><head><title></title><style type="text/css" media="screen"><style type= text/css media= screen >table {border: 4px solid #000; background: #96B45A;}td{font: 16px "arial black", sans-serif; border: 1px solid #000; background: #CDDFA9;}</style></head>
b d<body><table width="500" align="center" cellpadding="20" cellspacing="30"><tr><td>Σειρά 1 Κελί 1 </td><td>Σειρά 1 Κελί 2 </td>ρ<td>Σειρά 1 Κελί 3 </td></tr><tr><td>Σειρά 2 Κελί 1 </td><td>Σειρά 2 Κελί 2 </td><td>Σειρά 2 Κελί 2 </td><td>Σειρά 2 Κελί 3 </td></tr></table></body></ht l></html>
Πολύπλοκοι πίνακες
<td colspan="4"><td colspan= 4 >
<td> <td><td><td rowspan=“2">
<td> <td> <td>
<td rowspan “2” colspan “3"><td>
<td rowspan=“2” colspan=“3">
<td>
Ο κώδικας<table width="500" align="center" cellpadding="10" cellspacing="6"><tr><td colspan="4"></td></tr></tr><tr><td rowspan="2"></td><td></td><td></td>
td /td<td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td colspan="3" rowspan="2"></td><td colspan 3 rowspan 2 ></td></tr><tr><td></td></tr></t bl ></table>
Ιδιότητες πίνακα, κελιών
width: μήκος πίνακα ή κελιού (αυτόματο)border: περίγραμμα πίνακα ή κελιού (0)border: περίγραμμα πίνακα ή κελιού (0)cellspacing: απόσταση μεταξύ των κελιών (2px)cellpadding: απόσταση του περιεχομένου ενός p g η ρ χ μ ςκελιού από το περίγραμμα του κελιού (2px)colspan: αριθμός των στηλών που καταλαμβάνει ένα κελίένα κελίrowspan: αριθμός των γραμμών που καταλαμβάνει ένα κελίalign: οριζόντια στοίχιση, left – center -rightvalign: κατακόρυφη στοίχιση του περιεχομένου ό λ ύ t iddl b ttενός κελιού, top – middle - bottom
