Cascading Style Sheets (CSS) Θεωρία 5 Cascading Style Sheets (CSS)

Τι είναι ; To CSS είναι η τα αρχικά των λέξεων Cascading Style Sheets. Με κώδικα CSS ορίζουμε κάποια στυλ που δίνουν οδηγίες για το πώς θα προβληθεί ο κώδικας HTML σε μια σελίδα. Με CSS μπορούμε π.χ. να ορίσουμε το χρώμα του κειμένου, τα περιγράμματα ενός πίνακα, το φόντο της σελίδας κτλ. Τα στυλ αυτά αποθηκεύονται συνήθως σε αρχεία CSS (.css) ή στην αρχή της HTML σελίδας Ορίζοντας κάποια στυλ σε ένα css αρχείο , μπορείτε να τα χρησιμοποιήσετε σε πολλαπλές σελίδες html χωρίς να χρειάζεται να τα ξανά-ορίσετε. Αν αλλάξετε κάτι σε κάποιο στυλ τότε οι αλλαγές θα ισχύσουν αυτόματα σε όλες τις html σελίδες που το χρησιμοποιούν. Τα CSS δίνουν γενικά πολλές δυνατότητες μορφοποίησης σελίδας που δεν υπήρχαν σε απλό HTML

Γενική μορφή σύνταξης Η γενική μορφή, με την οποία ορίζουμε ένα CSS Style είναι: selector {property: value} όπου: selector: είναι το όνομα του στυλ. Μπορεί να είναι : μια εντολή(tag) html (π.χ. body ή p ), αν θέλουμε το στυλ αυτό να χρησιμοποιηθεί στη σελίδα μας όπου υπάρχει η συγκεκριμένη εντολή π.χ. body {color: black} Ένα δικό μας στυλ (class), το οποίο μπορούμε να ορίσουμε μέσα στον html κώδικα της σελίδας που θα το χρησιμοποιήσουμε. property: είναι η ιδιότητα που θέλουμε να ορίσουμε (π.χ. color για το χρώμα του κειμένου ή text-align για την στοίχιση του κειμένου) value: είναι η τιμή που θέλουμε να δώσουμε στην ιδιότητα property (π.χ. color: red για να ορίσουμε το χρώμα του κειμένου να είναι κόκκινο)

Σύνταξη Αν η τιμή είναι περισσότερες από μια λέξεις τότε θα πρέπει να χρησιμοποιήσουμε εισαγωγικά (π.χ. p {font-family: "sans serif"} ) Μπορούμε να ορίσουμε περισσότερες από μια ιδιότητες σε ένα στυλ χωρίζοντας τις με ; (π.χ. p {text-align:center; color:red} Καλό είναι να γράφουμε μια ιδιότητα σε κάθε γραμμή για να είναι πιο ευκολοδιάβαστο. π.χ. p { text-align: center; color: black; font-family: arial }

Grouping Αν θέλουμε, μπορούμε να ορίσουμε πολλά στυλ να έχουν τις ίδιες ιδιότητες χωρίζοντάς τα με “,” : p, h1, h2, h3, h4 ,h5 { text-align: center; color: black; font-family: arial }

Class Selector Χρησιμοποιώντας τον class selector μπορούμε να ορίσουμε διαφορετικά στυλ για ένα html tag. Αυτό γίνεται βάζοντας μια τελεία μετά το tag και ένα όνομα δικής μας επιλογής. Για παράδειγμα αν θέλουμε να ορίσουμε για το tag <p> (παράγραφος) δυο διαφορετικά στυλ όπου στο ένα το κείμενο θα στοιχίζει δεξιά και στο άλλο στο κέντρο, και ένα ακόμη για να κάνει το κείμενο έντονο (bold) το κάνουμε ως εξής: p.right {text-align: right} p.center {text-align: center} p.bold {text-weight:bold} Σημειώστε ότι τα ονόματα των class (.right , .center, .bold) είναι δική μας επιλογή. Θα μπορούμε να τα ονομάσουμε .deksia και .kentro αν θέλαμε.

Class Selector σε HTML κώδικα Για να ορίσουμε τώρα μέσα στον html κώδικα να χρησιμοποιήσει το class που ορίσαμε, το κάνουμε ως εξής: <p class="right“ > This paragraph will be right-aligned. </p> <p class="center” > This paragraph will be center-aligned. </p> Δηλαδή χρησιμοποιούμε στo html tag την παράμετρο class και με αυτή ορίζουμε το class που θέλουμε να χρησιμοποιήσουμε. Αν επιθυμούμε να χρησιμοποιήσουμε περισσότερα από ένα classes σε ένα tag μπορούμε να το κάνουμε έτσι: <p class="center bold"> This is a paragraph. </p> (εδώ τώρα το στυλ θα είναι και center αλλά και bold)

Class Selector χωρίς tag Κάτι πολύ συχνό επίσης είναι να χρησιμοποιούμε μόνο το class κατά τον ορισμό του style (χωρίς κάποιο tag). Σε αυτή την περίπτωση μπορούμε να ορίσουμε το style να χρησιμοποιηθεί από οποιοδήποτε html tag. Π.χ. .center {text-align: center} Και παρακάτω βλέπουμε ότι το χρησιμοποιούμε και σε <h1> tag (κεφαλίδα) αλλά και σε <p> (παράγραφος) : <h1 class="center“ > This heading will be center-aligned </h1> <p class="center“ > This paragraph will also be center-aligned. </p>

ID Selector Εκτός από τον Class Selector μπορείτε να ορίσετε ένα στυλ με τον id selector βάζοντας ένα # μπροστά από το όνομα. Π.χ. #green {color: green} Με αυτό τον τρόπο, όλα τα tags που έχουν id green θα πάρουν αυτό το στυλ. Π.χ. <p id=“green” >green paragraph</p>

Σχόλια στο CSS Ανάμεσα στον κώδικα CSS, μπορείτε να παρεμβάλετε σχόλια που δεν έχουν καμία ισχύ αλλά είναι π.χ. επεξηγηματικά αρχίζοντας με /* και τελειώνοντας με */ . Παράδειγμα: /* Ένα σχόλιο */ p { text-align: center; /* Άλλο σχόλιο */ color: black; font-family: arial }

Που ορίζουμε τα Styles Γενικά ο κώδικας που ορίζει τα Style Sheets μπορεί να είναι είτε εσωτερικός σε μια σελίδα είτε εξωτερικός. Σε περίπτωση που θέλουμε να είναι εσωτερικός σε μια σελίδα HTML θα τον ορίσουμε στο head της σελίδας. Σε περίπτωση που θέλουμε να είναι εξωτερικός (προτιμότερο) θα τον ορίσουμε σε ένα χωριστό αρχείο CSS και θα ορίσουμε το όνομα και την τοποθεσία του αρχείου αυτού στο head της σελίδας μας. Τέλος, μπορούμε να ορίσουμε και κάποιο style κατευθείαν μέσα στο HTML tag (Inline).

Που ορίζουμε τα Styles (Εσωτερικά) Εσωτερικά, δηλαδή μέσα στην HTML σελίδα, θα πρέπει να ορίζουμε τα styles μόνο στην περίπτωση που θέλουμε να χρησιμοποιούνται ΜΟΝΟ από αυτή την HTML σελίδα και καμία άλλη. Ο κώδικας ορίζετε ανάμεσα στο head της σελίδας, μέσα στο TAG style με την παράμετρο type=“text/css”> Παράδειγμα: <head> <style type="text/css"> <!-- hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --> </style> </head> Μπορούμε εάν θέλουμε, να μην βάλουμε όλα τα styles σε ένα <style> tag αλλά μπορούμε να έχουμε περισσότερα.

Που ορίζουμε τα Styles (Εξωτερικά) Τα εξωτερικά style sheets είναι ιδανικά όταν θέλουμε να χρησιμοποιήσουμε τα στυλ που ορίζουν, σε πολλαπλές σελίδες HTML. Είναι εξωτερικό style sheet είναι ένα αρχείο κειμένου με επέκταση .css που περιέχει μέσα μόνο CSS κώδικα. Για παράδειγμα, θα μπορούσαμε να έχουμε ένα αρχείο με όνομα mystyle.css το οποίο θα περιέχει τις παρακάτω γραμμές κώδικα: hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} Για να χρησιμοποιήσουμε τώρα τα παραπάνω στυλ στην HTML σελίδα μας, θα πρέπει στο head της σελίδας να ορίσουμε να χρησιμοποιεί αυτό το αρχείο css ως εξής: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> Έτσι η HTML σελίδα θα μορφοποιηθεί ανάλογα με τα style μέσα στο mystyle.css. Είναι σημαντικό να παρατηρήσουμε ότι μπορούμε να αλλάξουμε τελείως την εμφάνιση της σελίδα, αλλάζοντας απλά το css αρχείο.

Που ορίζουμε τα Styles (Inline) Ένας ακόμη τρόπος για να ορίσουμε ένα style είναι κατευθείαν μέσα σε ένα HTML TAG, όχι δηλαδή πλέον στο head αλλά στο body. Αυτό είναι χρήσιμο, εάν θέλουμε να κατασκευάσουμε ένα στυλ που θα χρησιμοποιηθεί μόνο μια φορά, για την μορφοποίηση του συγκεκριμένου αντικειμένου. Για να το κάνουμε αυτό, χρησιμοποιούμε την παράμετρο style , η οποία υποστηρίζεται από όλες σχεδόν τις εντολές HTML . Παράδειγμα: <p style="color: blue; margin-left: 20px" > This is a paragraph </p> Εδώ ορίσαμε το style του <p> να είναι χρώματος μπλε και ένα έχει 20 pixels περιθώριο από τα αριστερά. Έτσι το κείμενο ανάμεσα στο <p> Tag (This is a paragraph) θα μορφοποιηθεί με αυτό το στυλ.

Πολλαπλοί ορισμοί ενός Style Έχουμε το δικαίωμα, να χρησιμοποιήσουμε τον ίδιο selector για να ορίσουμε παραπάνω από ένα styles όπως στο παρακάτω παράδειγμα: h3 { color: red; text-align: left; font-size: 8pt } και λίγο παρακάτω να έχουμε : h3 { text-align: right; font-size: 20pt } Στην περίπτωση αυτή, το δεύτερο h3 δεν αναιρεί το πρώτο, αλλά αυτά συνδυάζονται μεταξύ τους. Απλά, το δεύτερο είναι πιο ισχυρό από το πρώτο, δηλαδή αν ορίζουν την ίδια ιδιότητα, θα ισχύσει η τιμή του τελευταίου (στην περίπτωσή μας text-align:right και font-size:20pt ) Έτσι λοιπόν το παραπάνω στυλ όταν θα χρησιμοποιηθεί στο HTML για μορφοποίηση θα έχει τις παρακάτω ιδιότητες: color: red; text-align: right; font-size: 20pt

Ιδιότητες Style Sheet Τα style sheets περιέχουν πολλές ιδιότητες που μπορούμε να ορίσουμε Μερικές από αυτές τις είδαμε στα παραπάνω παραδείγματα (π.χ. color ) Επειδή είναι πάρα πολλές, δεν μπορούμε να τις θυμόμαστε όλες απ΄ έξω, για αυτό καλό θα είναι να έχουμε μια λίστα με αυτές (π.χ. όπως εδώ http://www.w3schools.com/css/css_background.asp ). Εξ άλλου τα περισσότερα προγράμματα σχεδιασμού ιστοσελίδων, μας αφήνουν να τις ορίσουμε από γραφικό interface επιλέγοντας τις από μια λίστα (π.χ. Dreamweaver ) Συχνά είναι εύκολο να καταλάβουμε την χρήση τους, μόνο από το όνομά τους. Για παράδειγμα, η ιδιότητα background-color ορίζει το χρώμα του φόντου. Στις επόμενες σελίδες θα δούμε όλες τις ιδιότητες καθώς και την χρήση τους (στα αγγλικά). http://www.w3schools.com/css/css_background.asp

Ιδιότητες Φόντου (background properties) Ιδιότητα Περιγραφή Τιμές background A shorthand property for setting all background properties in one declaration background-color , background-image , background-repeat , background-attachment, background-position background-attachment Sets whether a background image is fixed or scrolls with the rest of the page scroll fixed background-color Sets the background color of an element color-rgb , color-hex , color-name , transparent background-image Sets an image as the background url(URL) none Sets the starting position of a background image top left , top center , top right , center left , center center , center right , bottom left , bottom center , bottom right , x% y% , xpos ypos background-repeat Sets if/how a background image will be repeated Repeat , repeat-x , repeat-y , no-repeat

Ιδιότητες Φόντου (Παράδειγμα χρήσης) Ιδιότητες Φόντου (Παράδειγμα χρήσης) <html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

Ιδιότητες Κειμένου (text properties) Ιδιότητα Περιγραφή Τιμές color Sets the color of a text direction Sets the text direction ltr , rtl line-height Sets the distance between lines normal , number, length, % letter-spacing Increase or decrease the space between characters normal length text-align Aligns the text in an element left, right, center, justify text-decoration Adds decoration to text none , underline , overline , line-through , blink text-indent Indents the first line of text in an element length , % text-shadow   None , color , length text-transform Controls the letters in an element none , capitalize , uppercase , lowercase unicode-bidi normal , embed , bidi-override white-space Sets how white space inside an element is handled normal , pre , nowrap word-spacing Increase or decrease the space between words normal, length

Ιδιότητες Γραμματοσειράς (font properties) Ιδιότητα Περιγραφή Τιμές font A shorthand property for setting all of the properties for a font in one declaration font-style, font-variant, font-weight font-size/line-height, font-family, caption, icon, menu, message-box small-caption, status-bar font-family A prioritized list of font family names and/or generic family names for an element family-name generic-family font-size Sets the size of a font xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, % font-size-adjust Specifies an aspect value for an element that will preserve the x-height of the first-choice font none number font-stretch Condenses or expands the current font-family Normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded ultra-expanded font-style Sets the style of the font Normal, italic, oblique font-variant Displays text in a small-caps font or a normal font Normal, small-caps font-weight Sets the weight of a font Normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

Ιδιότητες Πλαισίου 1 (Border properties) Ιδιότητα Περιγραφή Τιμές border A shorthand property for setting all of the properties for the four borders in one declaration border-width, border-style, border-color border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration border-bottom-width, border-style, border-color border-bottom-color Sets the color of the bottom border border-color border-bottom-style Sets the style of the bottom border border-style border-bottom-width Sets the width of the bottom border Thin, medium, thick, length Sets the color of the four borders, can have from one to four colors color border-left A shorthand property for setting all of the properties for the left border in one declaration border-left-width, border-style, border-color border-left-color Sets the color of the left border border-left-style Sets the style of the left border border-left-width Sets the width of the left border

Ιδιότητες Πλαισίου 2 (Border properties) Ιδιότητα Περιγραφή Τιμές border-right A shorthand property for setting all of the properties for the right border in one declaration border-right-width, border-style, border-color border-right-color Sets the color of the right border border-color border-right-style Sets the style of the right border border-style border-right-width Sets the width of the right border Thin, medium, thick, length Sets the style of the four borders, can have from one to four styles None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-top A shorthand property for setting all of the properties for the top border in one declaration border-top-width, border-style, border-color border-top-color Sets the color of the top border border-top-style Sets the style of the top border border-top-width Sets the width of the top border border-width A shorthand property for setting the width of the four borders in one declaration, can have from one to four values

Ιδιότητες Περιθωρίου (Margin properties) Ιδιότητα Περιγραφή Τιμές margin A shorthand property for setting the margin properties in one declaration margin-top, margin-right, margin-bottom, margin-left margin-bottom Sets the bottom margin of an element Auto, length, % margin-left Sets the left margin of an element margin-right Sets the right margin of an element margin-top Sets the top margin of an element

Ιδιότητες Γεμίσματος (Padding properties) Property Description Values padding A shorthand property for setting all of  the padding properties in one declaration padding-top, padding-right, padding-bottom, padding-left padding-bottom Sets the bottom padding of an element length % padding-left Sets the left padding of an element padding-right Sets the right padding of an element padding-top Sets the top padding of an element

Ιδιότητες Γεμίσματος (Padding properties) Property Description Values padding A shorthand property for setting all of  the padding properties in one declaration padding-top, padding-right, padding-bottom, padding-left padding-bottom Sets the bottom padding of an element length % padding-left Sets the left padding of an element padding-right Sets the right padding of an element padding-top Sets the top padding of an element

Ιδιότητες Λίστας (List properties) Property Description Values list-style A shorthand property for setting all of the properties for a list in one declaration list-style-type list-style-position list-style-image list-style-image Sets an image as the list-item marker none url list-style-position Sets where the list-item marker is placed in the list inside outside list-style-type Sets the type of the list-item marker None, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, Hebrew, Armenian, Georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha  marker-offset   Auto, length