Μάθημα : Α' Λυκείου | Εφαρμογές Πληροφορικής -

Α' Λυκείου | Εφαρμογές Πληροφορικής -

EL49190 - ΝΙΚΟΣ ΛΥΜΠΕΡΤΑΣ

Ενότητες μαθήματος

09. CSS - Εισαγωγή

08. HTML - Links <a>

Τι είναι η CSS;

 

Η CSS είναι η γλώσσα με την οποία μορφοποιούμε τις ιστοσελίδες, η γλώσσα δηλαδή με την οποία καθορίζουμε τις λεπτομέρειες της εμφάνισης των ιστοσελίδων (χρώματα φόντου, κειμένου κλπ. γραμματοσειρές, μέγεθος γραμμάτων, σχήματα, περιγράμματα, θέση και μέγεθος των στοιχείων μιας ιστοσελίδας και πολλά άλλα). 

Τα αρχικά CSS προκύπτουν από τις λέξεις Cascading Style Sheets. Η CSS μπορεί να διευκολύνει και να επιταχύνει την προσπάθειά μας να δημιουργήσουμε ιστοσελίδες αφού μας δίνει τη δυνατότητα να ελέγξουμε την εμφάνιση πολλών ιστοσελίδων κάνοντας μόνο μια φορά τις σχετικές ρυθμίσεις.

 

Παραδειγμα: Δείτε στο w3schools πως το ίδιο περιεχόμενο μπορεί να εμφανιστεί με διαφορετικούς τρόπους χρησιμοποιώντας τη CSS.

 

Βασικοί Συντακτικοί κανόνες της CSS

 

Χαρακτηριστικά της γλώσσας:

Δημιουργούμε Δηλώσεις (Declarations) με τις οποίες δίνουμε Τιμές (Values) στις Ιδιότητες (Properties). Σε κάθε δήλωση πρέπει να υπάρχει : (άνω-κάτω τελεία) μεταξύ της ιδιότητας και της τιμής και να τελειώνει με τον χαρακτήρα ; (semicolon-αγγλική άνω τελεία)

 

Παράδειγμα δήλωσης (declaration)

background-color: lightsalmon;

 

 

Τρόποι εισαγωγής της CSS στις ιστοσελίδες

 

Inline (<body>):

 

Μέσα στο start tag των elements, χρησιμοποιώντας το attribute style μπορούμε να παρεμβάλουμε δηλώσεις css μέσα στην html. Οι δηλώσεις αυτές επηρεάζουν μόνο το συγκεκριμένο element.

 

Παράδειγμα inline css

<h3 style="color: silver; background-color: seaGreen;"> inline CSS </h3>

inline CSS

 

Internal (<head>):

 

Μέσα στο <head> ανοίγουμε (και κλείνουμε) το <style> </style> και  μέσα γράφουμε κώδικα css αποκλειστικά. Για να έχω το ίδιο αποτέλεσμα με το παραπάνω παράδειγμα χρησιμοποιώντας την internal css θα έκανα τα εξής:

 

<head>

    <style>

         h3{

             color: silver;

             background-color: seaGreen;

              }

    </style>

</head>

<body>

     <h3> inline css </h3>

     <h3> internal css </h3>

</body>

 

inline CSS

internal CSS

 

Η internal css επηρεάζει όποιο element του <body> αναφέρεται ώς selector μέσα στο <style>. Στο παράδειγμά μας, selector (επιλογέας) είναι το h3 (προσοχή, στη css δεν βάζουμε ποτέ τα < >). Οι δηλώσεις css για τον κάθε selector πρέπει να είναι κλεισμένες μέσα σε αγκύλες { }. Οι δηλώσεις στο παράδειγμα επηρεάζουν όλα τα <h3> που  ανοίγουν στο <body> της συγκεκριμένης ιστοσελίδας. 

External (σε ανεξάρτητο αρχείο): 

 

Γράφουμε αποκλειστικά κώδικα css χωρίς καθόλου html και αποθηκεύουμε σε αρχείο με επέκταση .css. (πχ style01.css). 

 

Για να εφαρμοστούν οι επιλογές που αποθηκεύσαμε στο αρχείο style01.css σε μία ιστοσελίδα πρέπει αυτή να συνδεθεί με το αρχείο css.  Μέσα στο <head> προσθέτουμε την γραμή:

    

<link rel="stylesheet" type="text/css" href="style01.css">

 

Συντακτικά δεν διαφέρει από την internal. Πάλι δηλαδή έχουμε selectors, declarations με properties και values μέσα σε { }. Όμως με την external css μπορούμε να επηρεάσουμε με ένα αρχείο .css απεριόριστες ιστοσελίδες που θέλουμε να έχουν την ίδια αισθητική.

 

Επιτρέπεται οποιοσδήποτε συνδυασμός των 3 μεθόδων (inline, internal και external). Ανακαλύψτε μόνοι σας ποια υπερισχύει αν "συγκρουστούν" για ένα property.