Συνδυασμός CSS και HTML (2)

VN:F [1.9.22_1171]
Rating: 5.0/5 (2 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
24/01/2013 από
m_web

Συνδυασμός CSS και HTML.

Στην ενότητα αυτή όπως σας είχαμε πει θα δούμε τους τρόπους ενσωμάτωσης της γλώσσας CSS στο αρχείο HTML μας.

Υπάρχουν 3 τρόποι για να δώσουμε στυλ στην σελίδα μας.

1) ορισμός CSS μέσα στις ετικέτες (tags) της html.
2) ορισμός CSS μέσα στην σελίδα (internal style sheet)
3) ορισμός CSS σε εξωτερικό αρχείο (external style sheet)

1) Η εφαρμογή μπορεί να γίνει απευθείας μέσα στην ετικέτα της html μας.

<p style=“color: purple”>Hello!</p>

Όμως με τη συγκεκριμένη μέθοδο χάνουμε μια βασική ευκολία που μας δίνει η γλώσσα CSS, δηλαδή την εύκολη διαχείριση των στυλ στις σελίδες μας. Στην περίπτωση αυτή το CSS εφαρμόζετε μόνο στην ετικέτα και πουθενά αλλού. Δεν προτείνουμε να χρησιμοποιείτε αυτό τον τρόπο εφόσον ξέρετε ότι το CSS θα το ξαναχρησιμοποιήσετε σε άλλα μέρη του site σας.

2) Εσωτερική φόρτωση CSS.

Μέσα στο head τοποθετούμε την ετικέτα <style type=”text/css”>. Στο CSS γράφουμε όπως βλέπουμε παρακάτω.

<style type="text/css">
p {
color: white;
}
a {
color: red;
}
</style>


3)Εξωτερική φόρτωση αρχείου CSS (προτεινόμενος τρόπος)

Με αυτή την μέθοδο έχουμε την δυνατότητα να χρησιμοποιήσουμε όσες φορές θέλουμε το αρχείο CSS έτσι ώστε να μορφοποιήσουμε τον κώδικα της html. Εδώ το αρχείο μας βρίσκετε σε ξεχωριστό αρχείο .css μέσα στο <head>.

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

Με αυτόν τον τρόπο μπορούμε να εισάγουμε ένα αρχείο .css μέσα σε όσες σελίδες html θέλουμε. Είναι εφικτό να δώσουμε το ίδιο στυλ σε παραπάνω από 2 σελίδες html στο ίδιο site.

Όπως βλέπουμε είναι προτιμότερο να χρησιμοποιήσουμε τον τελευταίο τρόπο που μάθαμε διότι:

– το css γράφετε σε εξωτερικό αρχείο και ετσι μπορούμε να το χρησιμοποιήσουμε σε πολλά μέρη του site μας εξοικονομώντας χρόνο.
– έχουμε πιο ευανάγνωστο κώδικα και “καθαρότερο” διότι δεν περιέχετε κώδικας CSS μέσα στο head της html. O καθαρότερος κώδικας είναι πιο εύκολα διαχειρίσιμος για τον προγραμματιστή.
– τέλος, γνωρίζουμε το εξωτερικό αρχείο css αποθηκεύετε στην cache του χρήστη στον browser. O browser έχει ως αποτέλεσμα να διαβάσει πιο γρήγορα το αρχείο CSS από την cache, μειώνοντας έτσι τον όγκο δεδομένων που κατεβάζει από τον server που φιλοξένει την σελίδα μας.

Σε επόμενες ενότητες θα δούμε περισσότερα θέματα για CSS σχετικά με την σύνταξη.

 











Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.