Το CSS είναι ένα διαδοχικό φύλλο στυλ, το οποίο είναι μια γλώσσα για την περιγραφή της εμφάνισης των ιστοσελίδων. Ένα από τα κύρια πλεονεκτήματα του CSS είναι η δυνατότητα αντικατάστασης διάταξης πίνακα με διάταξη μπλοκ.
Είναι απαραίτητο
Πρόγραμμα επεξεργασίας κώδικα HTML
Οδηγίες
Βήμα 1
Δημιουργήστε το πρώτο μπλοκ. Σε μορφή HTML, θα μοιάζει με ετικέτα div με αναγνωριστικό 'block01'. Εδώ, το αναγνωριστικό block01 δηλώνει ότι στην περιγραφή CSS, όλες οι ιδιότητες αυτού του μπλοκ καθορίζονται για τον επιλογέα # block01.
Βήμα 2
Περιγράψτε το μπλοκ στο CSS. Στα στυλ CSS, καθορίστε το όνομα του αναγνωριστικού (# block01) και σε σγουρά τιράντες περιγράψτε τις παραμέτρους του - πλάτος, τοποθέτηση, μετατόπιση, χρώμα φόντου κ.λπ. Για παράδειγμα, μπορεί να μοιάζει με αυτό: # block01 {πλάτος: 150 εικονοστοιχεία; ύψος: 150px; θέση: απόλυτη; κορυφή: 0px; αριστερά: 0px; χρώμα φόντου: ροζ}. Αυτή η περιγραφή προϋποθέτει ότι το κουτί θα έχει μήκος 150 εικονοστοιχεία και πλάτος 150 εικονοστοιχεία, θα τοποθετηθεί άκαμπτα στην επάνω αριστερή γωνία του εγγράφου και το φόντο του θα έχει χρώμα ροζ.
Βήμα 3
Δώστε στο μπλοκ σχετική θέση. Εάν δεν χρησιμοποιείτε απόλυτη, αλλά σχετική τοποθέτηση στην περιγραφή CSS, τότε μπορείτε να τοποθετήσετε μπλοκ όχι με άκαμπτο κλείσιμο σε πλέγμα συντεταγμένων, αλλά σε σχέση με άλλα ήδη υπάρχοντα μπλοκ. Για να το κάνετε αυτό, αλλάξτε τη θέση του κωδικού: απόλυτο; κορυφή: 0px; αριστερά: 0px ανά θέση: σχετική; κορυφή: 200 εικονοστοιχεία; αριστερά: 100 εικονοστοιχεία.
Βήμα 4
Δώστε στο μπλοκ στρογγυλοποίηση. Στο CSS, η δήλωση περίγραμμα ακτίνας είναι υπεύθυνη για αυτό. Προσθέστε τον ακόλουθο κώδικα στο φύλλο στυλ σας: περίγραμμα-ακτίνα: 8 εικονοστοιχεία. Το μπλοκ θα έχει τώρα στρογγυλεμένες γωνίες. Αν θέλετε μόνο να στρογγυλοποιήσετε ορισμένες γωνίες, περιγράψτε την ακτίνα ξεχωριστά για καθεμία από αυτές: ακτίνα περιγράμματος: 8px 8px 0px 0px
Βήμα 5
Δώστε στο μπλοκ ένα κτύπημα. Για να επισημάνετε το περίγραμμα ενός μπλοκ με μια λεπτή γραμμή, προσθέστε τον ακόλουθο κώδικα στην περιγραφή του CSS: border-top: 1px διακεκομμένο μαύρο. Αυτή η οδηγία σημαίνει ότι το περίγραμμα του μπλοκ θα είναι μαύρο και θα έχει πάχος ενός pixel. Σε αυτήν την περίπτωση, η ίδια η γραμμή περιγράμματος θα εμφανίζεται ως διακεκομμένη γραμμή (διακεκομμένη - διακεκομμένη γραμμή, διακεκομμένη - τελείες, συμπαγής - σταθερή γραμμή).
Βήμα 6
Ορίστε τις υπόλοιπες ιδιότητες μπλοκ. Προσδιορίστε στην περιγραφή CSS τι είδους γραμματοσειρά πρέπει να χρησιμοποιείται για το κείμενο μέσα στο μπλοκ, ποιο θα πρέπει να είναι το μέγεθος της γραμματοσειράς, η ευθυγράμμιση και η εσοχή από τις άκρες του μπλοκ. Αυτές οι ιδιότητες περιγράφονται στους ορισμούς font-family, font-size, text-align και padding.
Βήμα 7
Μπορείτε να χρησιμοποιήσετε την ιδιότητα float για να προσαρμόσετε τη ροή ενός μπλοκ πάνω από ένα άλλο. Εάν το ρυθμίσετε στο "αριστερά", τότε τα υπόλοιπα στοιχεία θα ρέουν γύρω από το μπλοκ στα αριστερά και "δεξιά" - στα δεξιά. Εάν ορίσετε την τιμή float ως "κανένας", η ευθυγράμμιση μπλοκ δεν θα οριστεί. Η καθαρή ιδιότητα στο CSS εμποδίζει τη ροή του μπλοκ προς τα δεξιά, αριστερά ή και τις δύο πλευρές και παρακάμπτει τη δήλωση float.
