Anastasis 48 Report post Posted November 29, 2016 Στην ενότητα αυτή όπως σας είχαμε πει θα δούμε τους τρόπους ενσωμάτωσης της γλώσσας CSS στο αρχείο HTML μας. Υπάρχουν 3 τρόποι για να δώσουμε στυλ στην σελίδα μας. 1) ορισμός CSS μέσα στις ετικέτες (tags) της html. 2) ορισμός CSS μέσα στην σελίδα (internal style sheet) 3) ορισμός CSS σε εξωτερικό αρχείο (external style sheet) 1) Η εφαρμογή μπορεί να γίνει απευθείας μέσα στην ετικέτα της html μας. ? 1 <p style=“color: purple”>Hello!</p> Όμως με τη συγκεκριμένη μέθοδο χάνουμε μια βασική ευκολία που μας δίνει η γλώσσα CSS, δηλαδή την εύκολη διαχείριση των στυλ στις σελίδες μας. Στην περίπτωση αυτή το CSS εφαρμόζετε μόνο στην ετικέτα και πουθενά αλλού. Δεν προτείνουμε να χρησιμοποιείτε αυτό τον τρόπο εφόσον ξέρετε ότι το CSS θα το ξαναχρησιμοποιήσετε σε άλλα μέρη του site σας. 2) Εσωτερική φόρτωση CSS. Μέσα στο head τοποθετούμε την ετικέτα <style type=”text/css”>. Στο CSS γράφουμε όπως βλέπουμε παρακάτω. ? 1 2 3 4 5 6 7 8 <style type="text/css"> p { color: white; } a { color: red; } </style> 3)Εξωτερική φόρτωση αρχείου CSS (προτεινόμενος τρόπος) Με αυτή την μέθοδο έχουμε την δυνατότητα να χρησιμοποιήσουμε όσες φορές θέλουμε το αρχείο CSS έτσι ώστε να μορφοποιήσουμε τον κώδικα της html. Εδώ το αρχείο μας βρίσκετε σε ξεχωριστό αρχείο .css μέσα στο <head>. ? 1 2 3 4 <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 που φιλοξένει την σελίδα μας. Quote Share this post Link to post Share on other sites
