CSS SuperHero : Σύνταξη
Στο πρώτο μέρος της νέας μας σειράς CSS SuperHero, ειδαμε τα βασικά χαρακτηριστικά των CSS και μάθαμε κάποιες βασικές αρχές για την σύνταξη τους. Σε αυτό το μέρος θα δούμε αναλυτικά ότι πρέπει να γωρίζουμε για την σωστή σύνταξη των CSS
Εισαγωγή
Κατά την διάρκεια που γράφουμε HTML κώδικα, χρειάζεται να “ντύνουμε” τον κώδικα μας με κάποια στοιχεία τα οποία θα μας βοηθήσουν να δώσουμε στύλ και να μορφοποιήσουμε όπως θέλουμε τον κώδικα μας χρησιμοποιώντας CSS. Τα στοιχεία αυτά, τα οποία είναι γνωστά ως selectors (επιλογείς) , χωρίζονται σε δύο κατηγορίες. Στα Classes και στα Ids.
Σύνταξη Των Στοιχείων Id
Τα Ids είναι μοναδικά στοιχεία που προσθέτουμε σε ένα div στον HTML κώδικα μας. Όταν λέμε μοναδικά εννοούμε πως δηλώνουν στοιχεία που θα εμφανιστούν μια και μοναδική φορά σε μία σελίδα. Για παράδειγμα:
<div id="logo"> <a href="/home.html"><img src="/images/logo.png" /></a> </div>
Το στοιχείο id=logo θα εμφανίζεται μόνο μια φορά στην σελίδα μας και αυτό είναι στην κορυφή. Έτσι καλό είναι να του δώσουμε Id και όχι Class.
Για να δώσουμε στύλ στους Id selectors όταν γράφουμε CSS, χρησιμοποιούμε την δίαιση (#). Έτσι για παράδειγμα, για το στοιχείο id=logo θα γράψουμε:
#logo { margin-left:10px; position:relative; }
Σύνταξη Tων Στοιχείων Class
Τα Classes χρησιμοποιούνται διαφορετικά από τα Ids και συνήθως τα εφαρμόζουμε σε στοιχεία τα οποία θέλουμε να κατηγοριοποιήσουμε και να κατατάξουμε. Με άλλα λόγια, το χρησιμοποιούμε σε στοιχεία στα οποία θέλουμε να έχουν όλα την ίδια μορφοποίηση, ενώ θα εμφανίζονται όσες φορές θέλουμε στην σελίδα μας. Για παράδειγμα λοιπόν
<p class="description"> Lorem Ipsumis simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p>
Δίνοντας στο στοιχείο της παραγράφου παραπάνω την κλάση description, ουσιαστικά κατηγοριοποιούμε αυτού του είδους την παράγραφο να έχει συγκεκριμένες ιδιότητες διαφορετικές από τις υπόλοιπες παραγράφους της σελίδας μας.
Για να δώσουμε στύλ στους Class selectors όταν γράφουμε CSS, χρησιμοποιούμε την τελεία (.). Έτσι για παράδειγμα, για το στοιχείο class=description γράφουμε:
p.description { font-size:12px; color:#c9c9c9; }
Σύνδεση CSS Με HTML
Αφού εξηγήσαμε τον τρόπο με τον οποίο δίνουμε στύλ στα διάφορα στοιχεία στην σελίδα μας, τώρα θα δούμε πως ακριβώς γίνετε η σύνδεση των CSS με το HTML αρχείο μας.
Υπάρχουν τρείς τρόποι για να δώσουμε στύλ και μορφοποίηση στα στοιχεία της HTML σελίδας μας.
Δήλωση Στο Head
Ο πρώτος είναι να γράψουμε όλο τον CSS κώδικα μας στο <head> μέρος της ιστοσελίδας μας. Ας δούμε ένα παράδειγμα:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen, projection">
p.description { font-size:12px; color:#c9c9c9; }
</style>
<title>Test</title>
</head>
<body>
</body>
</html>
Με τον παραπάνω τρόπο, δίνουμε σε όλες τις παραγράφους που έχουν class=description χρώμα και μέγεθος γραμματοσειράς.
Inline
Ο δεύτερος είναι να γράψουμε τον CSS κώδικα μέσα στο HTML στοιχείο μας. Αυτός ο τρόπος είναι γνωστός ως Inline Styling. Ας δούμε ένα παράδειγμα
<p style="font-size:12px; color:#c9c9c9"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p>
Με τον παραπάνω τρόπο δίνουμε χρώμα και μέγεθος γραμμάτων μόνο στο συγκεκριμένο στοιχείο παραγράφου.
Εξωτερικό Αρχείο
Τέλος, ο πιό διαδεδομένος τρόπος είναι να συμπεριλάβουμε στο <head> μέρος της ιστοσελίδας μας ένα νέο εξωτερικό που θα έχει κατάληξη .css, στο οποίο θα περιλαμβάνεται όλος ο CSS κώδικας μας. Ας δούμε ένα παράδειγμα:
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
Στο επόμενο μέρος…
Αφού είδαμε αναλυτικά ότι χρειαζόμαστε για τα Ids και τα Classes, αλλά και το πώς τα συνδέουμε με τον HTML κώδικα μας, στο επόμενο μέρος θα δούμε πιο αναλυτικά πράγματα που μπορούμε να κάνουμε με τα CSS όπως να δώσουμε εικόνες παρασκηνίου, να δημιουργήσουμε μορφοποιημένα κείμενα και άλλα πολλά.
