CSS Box: αυτοσχέδιο και το αποτέλεσμα

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

Κάθε οπτική ετικέτα HTML-σήμανση - μια ορθογώνια περιοχή μιας συγκεκριμένης δομής και του περιεχομένου. Το στοιχείο περιλαμβάνει μια ένδειξη του συντεταγμένες, το μέγεθος, το υλικό παραγεμίσματος, το χρώμα, τη γραμματοσειρά, στυλ γραμματοσειράς, και ούτω καθεξής. Frame CSS-στοιχείου αυτούς καθορίζει κατεχόμενη περιοχή, που βρίσκεται προς τα μέσα από τα όρια της επί ορίζεται εδώ πλάτος.

περιγραφή σύνταξη

στοιχείο τοποθέτηση των πεδίων καθορίζονται συντεταγμένες σε σχέση προς την άνω αριστερή γωνία της σελίδας (αριστερά, κορυφή), το μέγεθος στις οριζόντιες και κάθετες κατευθύνσεις (πλάτος, ύψος). Όλα σχεδιασμού και animation στοιχεία γίνονται σε ζεύγη «ιδιοκτησίας: αξίας».

Περιγραφή γίνεται απευθείας στον κώδικα της σελίδας για να εισάγετε το ύφος ή σε ένα ξεχωριστό αρχείο, δείχνοντας τον αναφορά LINK. σύνταξη:

#NAME {ιδιοκτησίας: τιμή? ιδιότητα: τιμή? ιδιότητα: τιμή? ...}

ή

.name {ιδιοκτησίας: τιμή? ιδιότητα: τιμή? ιδιότητα: τιμή? ...}

Το όνομα μπορεί επίσης να είναι p, το σώμα, html, επιτραπέζια, td ..., αυτό είναι το όνομα της ετικέτας HTML-σήμανσης. Μπορεί να συνδεθεί άμεσα με την περιγραφή του στοιχείου στυλ.

Πριν κάνετε το δικό μου στυλ γραφής, δεν βλάπτει να δούμε πώς γίνεται σε δημοφιλείς δικτυακούς τόπους, διατηρώντας τον κωδικό σελίδα ή πατώντας Ctrl-U για να τη δείτε απευθείας στο πρόγραμμα περιήγησης.

Οι κύριες παράμετροι

Πραγματικά στοιχείο του πλαισίου CSS αντιπροσωπεύεται στυλ (σύνορα-στυλ), χρώμα (σύνορα-χρώματος), το πλάτος (σύνορα-πλάτος). Μπορεί όλα να συνοψιστεί σε μία περιουσία - σύνορα. Μπορείτε να περιγράψετε κάθε περίγραμμα του πλαισίου ανεξάρτητα (border-top, σύνορα-κάτω, στα σύνορα-αριστερά, στα σύνορα δεξιά).

πλαισίου CSS περιγράφεται από τους γενικούς κανόνες της επικαλυπτόμενα φύλλα στυλ:

σύνορα: 3px?
σύνορα χρώμα: κόκκινο?
border-style: διπλή διακεκομμένη στερεά τελείες.

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

border-width: 1px 2px 4px 8 εικονοστοιχεία?
σύνορα χρωμάτων: μπλε?
border-style: διακεκομμένη.

Εδώ, οι διαστάσεις της κάθε πλευράς είναι, επίσης, διαδοχικά από πάνω, προς τα δεξιά, το χρώμα - μπλε, και το ύφος - Spot.

σύνορα χρωμάτων: μπλε κόκκινο πράσινο μαύρο?

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

σύνορα: 1px πράσινο στερεό?
border-radius: 0px 4px 8 εικονοστοιχεία 12px?
Μοζ-border-radius: 0px 4px 8 εικονοστοιχεία 12px?
-webkit-border-radius: 0px 4px 8 εικονοστοιχεία 12px?

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

Το πάχος του πλαισίου και του σκοπού της

Επιλέγοντας το πάχος του πλαισίου, που μπορείτε να χρησιμοποιήσετε px, pt, em ..., αλλά θα πρέπει να έχουμε κατά νου ότι είναι πάντα μέσα στο στοιχείο τομέα. Είναι δύσκολο να υποθέσουμε ότι το πλαίσιο έχει σκοπό το σχεδιασμό CSS, αλλά τεχνικά είναι πολύ χρήσιμο να επισημάνει τα στοιχεία της σελίδας.

Εάν η κύρια κλάση του πλαισίου είναι κλειδωμένο, ότι είναι απούσα, καθορίζοντας το σε ψευδο-class: hover, μπορεί να αποδειχθεί ότι ο επισκέπτης του στοιχείου της σελίδας, όταν είναι ο κέρσορας του ποντικιού, όπως τονίζει το στοιχείο του μενού. Μερικές φορές είναι απαραίτητο να επιλέξετε κάτι κάνοντας κλικ πάνω στην εικόνα ή σύρετε κάτι κάπου. Είναι πολύ βολικό να χρησιμοποιήσετε το πλαίσιο τελεία, και όχι για να αλλάξετε το φόντο του στοιχείου ή το περιεχόμενό του.

Ορισμένες εφαρμογές απαιτούν την κατανομή των περιοχών της σελίδας, ή επιλέξτε τα στοιχεία για περαιτέρω επεξεργασία. Σε αυτήν την περίπτωση, κατά τη στιγμή του κλικ για να δημιουργήσετε ένα div με τα σύνορα και εφ 'όσον η επισκέπτης δεν απαλλάσσει το κουμπί του ποντικιού, να αλλάξετε το μέγεθος, δείχνει οπτικά το αποτέλεσμα της επιλογής.

έξω από κάτω

CSS σεμινάρια είναι πολύ ενδιαφέρον, όπως είναι η σημασία της έρευνας κωδικούς σελίδες δημοφιλή sites. Ωστόσο, οι ίδιοι πόροι πρέπει να είναι μοναδικό, θα πρέπει να έχει το δικό της πρόσωπο.

Εφόσον η σύνταξη του πλαισίου CSS δεν δίνει μια τέτοια ποικιλία, όπως δική της πρωτοβουλία. Αυτοσχέδια - ένα σπουδαίο ξεκίνημα, και τίποτα δεν εμποδίζει έναν προγραμματιστή για να δημιουργήσουν το δικό τους πλαίσιο. Ειδικά με όλα τα επιτεύγματα της τεχνολογίας του Διαδικτύου και τις δυνατότητες των υφιστάμενων προτύπων έχουν πολλά υποσχόμενες ιδέες που βασίζονται σε πραγματικές αδυναμίες του υφιστάμενου σύνταξη, η οποία είναι (εξ ορισμού) ήταν πάντα ένα αυστηρά τυπική.

Ειδικότερα, αν και για να καθοριστεί το πεδίο εφαρμογής ορισμένων στοιχείων, κρίνεται σκόπιμο να γίνει αυτό πλήρως. Αναδειχθούν οι ετικέτες στις πλευρές και γωνίες μιας περιοχής, μπορείτε να πάρετε καταπληκτικά αποτελέσματα. Μια ανάθεση των αντίστοιχων χειριστές, μπορεί να δημιουργήσει δυναμικά στοιχεία της σελίδας, αλλάζοντας τη θέση, το σχήμα και το περιεχόμενο.