Οποιαδήποτε σελίδα πωλήσεων δημιουργείται από συγκεκριμένα μπλοκ, χάρη στα οποία ο επισκέπτης σχηματίζει μια γενική άποψη για το προϊόν που προσφέρεται σε αυτήν. Κάθε ένα από αυτά τα μπλοκ μπορεί να σχεδιαστεί όμορφα και ως αποτέλεσμα ολόκληρη η σελίδα πωλήσεων θα μοιάζει με κάτι μοναδικό. Σε αυτό το σεμινάριο το σχεδίασα σε καθαρό CSS όμορφο μπλοκμε παροχές. Επειδή αυτό το στοιχείο βρίσκεται σε οποιονδήποτε ιστότοπο μιας σελίδας και πρέπει να τονιστεί.

Περισσότερος σχεδιασμός στοιχείων στον ιστότοπο:

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

Για να δείτε τα εφέ, μεταβείτε στη σελίδα του παραδείγματος:

Λήψη

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

Έτσι φαίνεται το μπλοκ όταν τοποθετείτε το δείκτη του ποντικιού:

Πώς να φτιάξετε ένα όμορφο σχέδιο για τον ιστότοπό σας;

1 Δομή HTML

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

1	<σύνδεσμος rel = "φύλλο στυλ" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Έχουμε ένα κοινό μπλοκ, το οποίο περιέχει και τα 3 μπλοκ με περιγραφές και εικονίδια:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div class = "bulletsBlock" > <div class = "bullet-item" > <span class = "iconBullet fa-cog" > <p class = "titleBullet" >Όφελος 1</p> <p class = "hideText" >Επιπλέον<br>κρυφό κείμενο 1</p> </div> <div class = "bullet-item" > </div> <div class = "bullet-item" > </div> </div>

Λίγα λόγια για τη δομή:

• Γραμμές: 1 έως 15— ένα γενικό μπλοκ που περιέχει 3 μπλοκ με περιγραφή.
• Γραμμές: 2 έως 6— ένα ξεχωριστό μπλοκ με περιγραφή του οφέλους.
• Γραμμή: 3— εικονίδιο μπλοκ.
• Γραμμή: 4— εμφανές μέρος με περιγραφή του οφέλους.
• Γραμμή: 5— κρυφό μέρος με λεπτομερή περιγραφή των πλεονεκτημάτων.

Η δομή είναι διαφανής και απλή. Ας περάσουμε στο σχεδιασμό και τη δημιουργία κινουμένων σχεδίων.

2 στυλ CSS

Για να δημιουργήσουμε το animation, χρειαζόμαστε μόνο CSS3 και όχι Javascript.

Γράφουμε γενικά στυλ για 3 μπλοκ:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.bulletsBlock :after ( περιεχόμενο : "" ; εμφάνιση : πίνακας ; διαγραφή : και τα δύο ; ) .bulletsBlock > div (πλάτος : 30% ; float : αριστερά ; φόντο : rgba(0 , 0 , 0 , 0.3 ) ; περιθώριο-αριστερό : 5% ; στοίχιση κειμένου : θέση : σχετική ; /*Κάτω σκιά του μπλοκ όταν αιωρείται*/.bulletsBlock > div:hover ( -webkit-box-shadow : 0 35px 35px -35px #000000 ; -moz-box-shadow : 0 35px 35px -35px #000000 ; box-shadow : 0 35px 5px 0x3;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.bullet-item span( line-height : 1,5em ; size font : 12,5em ; color : #fff ; position : absolute ; top : 0 ; left : 0 ; display : block ; πλάτος : 100% ; -webkit-transition : όλα τα 0,35s ease : όλα τα 0,35s ease ) /*Κινούμενη εικόνα εικονιδίων όταν αιωρείται - συρρικνώνεται και κινείται προς τα πάνω*/.bulletsBlock > div:hover span.iconBullet( ύψος γραμμής : 1,35em ; μέγεθος γραμματοσειράς : 10,625em ; επάνω :-2 ,7% ; )

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

.titleBullet, .hideText (θέση: απόλυτη; αριστερά: 0; κάτω: 0; στοίχιση κειμένου: κέντρο; πλάτος: 100%; περιθώριο: 0; χρώμα: #fff; -webkit-transition: όλα τα 0,35 δευτερόλεπτα ευκολία; μετάβαση: όλα τα 0,35s ease; em ; 1em 0 ; /*Κινούμενη εικόνα κατά την αιώρηση ενός ορατού μπλοκ κειμένου*/.bulletsBlock > div:hover p.titleBullet( bottom : 80px ; ) /*Κινούμενη εικόνα κατά την αιώρηση ενός μπλοκ κρυφού κειμένου*/.bulletsBlock > div:hover p.hideText( background : #454545 ; )

Reg.ru: τομείς και φιλοξενία

Ο μεγαλύτερος καταχωρητής και πάροχος φιλοξενίας στη Ρωσία.

Περισσότερα από 2 εκατομμύρια ονόματα τομέα σε υπηρεσία.

Προώθηση, αλληλογραφία τομέα, επιχειρηματικές λύσεις.

Περισσότεροι από 700 χιλιάδες πελάτες σε όλο τον κόσμο έχουν ήδη κάνει την επιλογή τους.

*Τοποθετήστε το ποντίκι για παύση της κύλισης.

Πίσω Εμπρός

12 Καταπληκτικά χαρακτηριστικά CSS

Αν είστε σαν εμένα, όταν βλέπετε ένα εντυπωσιακό demo ενός νέου εφέ CSS3, δεν μπορείτε παρά να αρχίσετε να το χρησιμοποιείτε στη δουλειά σας.

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

Περιμένετε μέχρι αυτό το αποτέλεσμαθα υποστηρίζεται από όλα τα προγράμματα περιήγησης. Αλλά έχω συχαρίκιαγια σένα! Με την πιο πρόσφατη ενημέρωση του προγράμματος περιήγησης, υπάρχουν μερικά εξαιρετικά πράγματα CSS3 που υποστηρίζονται από όλα τα προγράμματα περιήγησης και μπορείτε να αρχίσετε να τα χρησιμοποιείτε αμέσως τώρα!

Λυρική παρέκβαση:Τα περισσότερα από αυτά τα εφέ δεν λειτουργούν σε παλαιότερες εκδόσεις του IE (από την έκδοση 9 και παρακάτω). Εάν συμβεί στη χώρα σας αυτά τα προγράμματα περιήγησης να χρησιμοποιούνται παντού, τότε φοβάμαι ότι θα πρέπει να σας στενοχωρήσω, αυτό το μάθημα δεν είναι για εσάς. Αλλά για όσους παραμένουν, εδώ είναι τι μπορούν να μας προσφέρουν τα σύγχρονα προγράμματα περιήγησης:

1. Κινούμενα σχέδια και μεταβάσεις CSS

Το CSS animation είναι επιτέλους διαθέσιμο για όλα τα μεγάλα προγράμματα περιήγησης, ακόμη και για τον IE! (ξεκινώντας από την έκδοση 10). Υπάρχουν 2 τρόποι για να δημιουργήσετε κινούμενα σχέδια CSS. Το πρώτο είναι πολύ απλό και λειτουργεί μέσω της ιδιοκτησίας μετάβαση.

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

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

Η δεύτερη μέθοδος κινούμενης εικόνας είναι λίγο πιο περίπλοκη - σχετίζεται με την περιγραφή της κινούμενης εικόνας μέσω ενός κανόνα @keyframe, το οποίο σας επιτρέπει να δημιουργήσετε ένα επαναλαμβανόμενο ή looping animation, ανεξάρτητα από ενέργειες χρήστη ή ενεργοποίηση JavaScript.

Ο κωδικός εφέ φαίνεται παρακάτω:

Container( πλάτος: 300 px; ύψος: 300 px; περιθώριο: 0 αυτόματο; θέση: σχετικό; υπερχείλιση: κρυφό; ) .planet( position:absolute; top:0; left:0; πλάτος:100%; ύψος:100%; φόντο :url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) κέντρο χωρίς επανάληψη ) .rocket( position:absolute ; top:0; width:100%; background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets /img/rocket.png) no-repeat 50px κέντρο /* Το Chrome εξακολουθεί να απαιτεί το -webkit- */ -webkit-animation:orbit 2s linear infinite; :80px κέντρο; ( από ( transform:rotate(0deg); /* Συμπεριέλαβα την ιδιότητα -webkit-transform επειδή το Google Chrome ενδέχεται να αρχίσει να υποστηρίζει βασικά καρέ χωρίς προθέματα στο μέλλον */ -webkit-transform :rotate(0deg);) σε (transform:rotate (360 μοίρες);

-webkit-transform:rotate(360deg); ) ), και υποθέτω ότι θα ξεκινήσετε με αυτό το άρθρο. Εάν είστε περίεργοι αν το πρόγραμμα περιήγησής σας υποστηρίζει αυτό το εφέ ή όχι, τότε αγαπήστε και προτιμήστε αυτόν τον πίνακα.

2. Καταμέτρηση τιμών με χρήση ιδιότητας calc()

Ένα άλλο ωραίο νέο gizmo CSS είναι η λειτουργία calc(). Σας επιτρέπει να κάνετε απλούς αριθμητικούς υπολογισμούς σε CSS. Μπορείτε να το χρησιμοποιήσετε οπουδήποτε χρειάζεστε για να αντιμετωπίσετε το μήκος ή το πλάτος.

Αλλά αυτό που είναι ακόμα πιο ωραίο είναι ότι μπορείτε εύκολα να αναμίξετε διαφορετικές διαστάσεις, είτε πρόκειται για pixel είτε για ποσοστά.

Αυτό σας επιτρέπει να δημιουργήσετε τεράστιο ποσόδιάφορα κόλπα και τεχνικές (για παράδειγμα, με layers και τοποθέτηση), βάζοντας στον ώμο όλα εκείνα τα κόλπα στα οποία ίσως έπρεπε να καταφύγεις για να πετύχεις ένα παρόμοιο αποτέλεσμα. Τι θα μπορούσε να είναι καλύτερο; Αλλά εδώ είναι το θέμα: λειτουργεί με IE έκδοση 9 (yay!) και υψηλότερη και χωρίς πρόσθετα προθέματα.

/* Υπολογίστε το πλάτος */ .container( πλάτος: calc(100% - 40 px); background-color:#CDEBC4; color:#6D8B64; text-align:center; padding:25px 0; margin: 0 auto; )

3. Προηγμένοι επιλογείς

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

Αυτό υποστηρίζεται από όλα τα μεγάλα προγράμματα περιήγησης, συμπεριλαμβανομένου του IE9 και άνω.

Παράδειγμα:

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

/* Στυλ CSS - τίποτα ενδιαφέρον εδώ */ p( μέγεθος γραμματοσειράς: 16 εικονοστοιχεία, πλάτος: 420 εικονοστοιχεία, περιθώριο: 20 εικονοστοιχεία αυτόματα 0, στοίχιση κειμένου: κέντρο; ) .container( πλάτος: 420 εικονοστοιχεία, περιθώριο: 50 εικονοστοιχεία αυτόματη 0, υπερχείλιση: hidden; padding: 5px; δεξιά: 5px; bottom:5px; : # FFF μέγεθος γραμματοσειράς: κανονικό padding: 0 5px (μέγεθος γραμματοσειράς: 18px; ) /* Κάνε το πρώτο και τελευταίο στοιχείομωβ */ .elem:first-child, .elem:last-child( background-color:#948bd8; ) /* Κάντε όλα τα άλλα στοιχεία στρογγυλά */ .elem:nth-child(odd)( border-radius:50% ; ) /* Κάντε κάθε 6ο στοιχείο κόκκινο */ .elem:nth-child(6)( background-color:#cb6364; ) /* Δώστε στυλ στο στοιχείο που περιέχει την ετικέτα span */ .elem:not(:empty) ( background-color:#444 -webkit-transform:rotate(25deg) /* Target element by χαρακτηριστικό */ .elem( background-color:#aaa; ( background-color:#d7cb89; ) /* Η τιμή του χαρακτηριστικού πρέπει να ξεκινά με "bar". επειδή αυτό αντιστοιχεί στα δύο στοιχεία που περιγράφονται παραπάνω*/ .elem( πλάτος: 16px; ύψος: 16px; περιθώριο: 11px; ) /* Το στοιχείο που ακολουθεί αυτό με data-foo="bar2"*/ .elem + .elem ( φόντο -color:#78ccd2;

4. Δημιουργήθηκε περιεχόμενο και μετρητές

Το παραγόμενο περιεχόμενο είναι ισχυρό εργαλείοστα χέρια του προγραμματιστή, το οποίο γίνεται διαθέσιμο μετά την εφαρμογή ψευδοστοιχείων ::προτούΚαι ::μετά.

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

CSS3Επίσης, παρέχει πρόσβαση σε ψευδοστοιχεία σε μετρητές που μπορούν να αυξηθούν με κανόνες CSS. Μπορούν επίσης να λαμβάνουν τιμές χαρακτηριστικών από γονικά στοιχεία που τις περιέχουν. Παράδειγμα παρακάτω:

Container( /* Ορίζει τον μετρητή με όνομα cnt σε μηδέν */ counter-reset: cnt; position:relative; text-align:center; padding:20px 0; width:420px;ύψος:160px; περιθώριο: 0 auto; ) /* Μπορείτε να κάνετε στυλ ψευδοστοιχείων και να τους δώσετε περιεχόμενο σαν να ήταν πραγματικά στοιχεία στη σελίδα */ .container::before( display: block; content:"Τοποθετήστε το δείκτη του ποντικιού πάνω από αυτά τα στοιχεία:"; μέγεθος γραμματοσειράς: 18px; γραμματοσειρά- βάρος : bold-align: padding: 15px; ; δρομέας:προεπιλογή ) /*Δημιουργία μετρητή με ψευδοστοιχείο*/ .container span::after( /* Κάθε φορά που εφαρμόζεται αυτός ο κανόνας, ο μετρητής θα αυξάνεται κατά 1 */ counter-increment: cnt; / * Προσθήκη στην τιμή μετρητή μέρους του περιεχομένου */ content:" #" counter(cnt) /* Τα ψευδοστοιχεία μπορούν να έχουν πρόσβαση στις ιδιότητες των γονέων τους */ .container span::before( position:absolute); ;

bottom:0;

αριστερά: 0; πλάτος:100%; content:attr(data-title);

χρώμα:#666;

Οι διαβαθμίσεις δίνουν στους σχεδιαστές ιστοσελίδων τη δυνατότητα να δημιουργούν

Μπορείτε να φανταστείτε μια εποχή που περιοριζόμασταν σε μερικές χειροποίητες γραμματοσειρές που ταιριάζουν ακριβώς σε όλα τα προγράμματα περιήγησης; Είναι δύσκολο να το πιστέψει κανείς, αλλά σήμερα, χάρη σε υπηρεσίες όπως π.χ Γραμματοσειρές Googleκαι typekit, που σας επιτρέπουν να χρησιμοποιείτε εξαιρετικές γραμματοσειρές απλά συνδέοντάς τις με τα στυλ της σελίδας σας.

Υπάρχουν ακόμη και γραμματοσειρές εικονιδίων, όπως το fontawesome, που διαθέτουν χαριτωμένα διανυσματικά εικονίδια αντί για γράμματα ή αριθμούς. Όλα αυτά έγιναν δυνατά με τη βοήθεια του κανόνα @font-face, το οποίο σας επιτρέπει να καθορίσετε το όνομα, τα χαρακτηριστικά και την πηγή της γραμματοσειράς, η οποία μπορεί αργότερα να γίνει αναφορά μέσω μιας ιδιότητας γραμματοσειρά / γραμματοσειρά-οικογένεια.

Εδώ είναι η όμορφη γραμματοσειρά μου!)

H1( /* Συνδέουμε τη χρήση της επιλεγμένης γραμματοσειράς σε HTML */ font-family: Satisfy, cursive; font-weight: normal; font-size:24px; padding-top: 60px; )

Με μερικές λύσεις, οι γραμματοσειρές λειτουργούν σε προγράμματα περιήγησης που ξεκινούν με τον IE 6. Ωστόσο, υπάρχουν 2 υπηρεσίες που περιγράφηκαν παραπάνω, επομένως δεν χρειάζεστε αυτές τις λύσεις τώρα.

7. Μέγεθος μπλοκ. Ιδιοκτησία μέγεθος κουτιού

Η μόνη μεγαλύτερη αιτία πονοκεφάλου για αρχάριους CSS είναι το μοντέλο κουτιού.

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

Αυτή η μικρή παράλειψη σπάει τα πάντα, αλλά επιτέλους έχουμε έναν τρόπο να αποκαταστήσουμε τη λογική και να απαλλαγούμε από τον πονοκέφαλο. Τηρήστε τον κανόνα μέγεθος κουτιού! Τώρα μπορείτε να ρωτήσετε περίγραμμα-κουτί, χάρη στο οποίο τα στοιχεία παραμένουν ακριβώς όπως θα θέλατε να είναι. Δείτε μόνοι σας:

Container( text-align:center; ) .container div( /*Ρύθμιση της μεθόδου box-sizing */ box-sizing:border-box; /*Έχουμε έναν ειδικό Firefox, επομένως εξακολουθεί να απαιτεί προθέματα*/ -moz-box -Μέγεθος: πλάτος περιγράμματος: 120 εικονοστοιχεία: κάθετη στοίχιση: επάνω, μπορούμε να ρυθμίσουμε τις τιμές γεμιστήρα θέλουν, και τα στοιχεία θα παραμείνουν το ίδιο μέγεθος, όπως ήταν*/ #el1( color:#524480; background-color:#B2A4E0; ) #el2( padding:8px; border:10px solid #9ec551; background-color. :#fff ) #el3( padding:32px ; background-color:#ccc )

8. Εικόνες ως σύνορα ή ιδιοκτησία εικόνα συνόρων

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

Πείτε γεια στα χαριτωμένα περιγράμματα μπλοκ εικόνων!

P( text-align:center; padding:20px;πλάτος:340px; margin: 0 auto; /*Ορισμός ιδιοτήτων για το περίγραμμα και για την εικόνα που χρησιμοποιείται ως περίγραμμα*/ περίγραμμα:30px στερεά διαφανή; border-image:url( http ://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 γύρος )

Για μια πιο εμπεριστατωμένη ματιά, ρίξτε μια ματιά σε αυτήν τη σελίδα και αυτήν την παράγραφο. Υποστηρίζεται από όλα τα μεγάλα προγράμματα περιήγησης και τον IE 11.

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

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

Τα ερωτήματα πολυμέσων είναι απίστευτα εύχρηστα: το μόνο που χρειάζεται να κάνετε είναι να τυλίξετε τα στυλ CSS σας σε ένα μπλοκ κανόνων @μέσα ενημέρωσης.Κάθε @μέσα ενημέρωσηςένα μπλοκ ενεργοποιείται όταν πληρούνται μία ή περισσότερες προϋποθέσεις.

/* Στυλ για το κύριο περιεχόμενο και την πλαϊνή γραμμή */ .container(πλάτος:900px; περιθώριο: 0 αυτόματο; υπερχείλιση:κρυφό; ) .main-section( background-color:#CDEBC4; color:#6D8B64; πλάτος:520px; float: αριστερά, ύψος: 500 εικονοστοιχεία; text-align:center; padding-top:60px font-style:italic) /* Αυτά τα απλά ερωτήματα πολυμέσων επιτρέπουν στα μπλοκ να προσαρμόζονται στο πλάτος της οθόνης σας */ @media (max-width:900px)( .container(πλάτος; :100 % ) .main-section, .sidebar(πλάτος:auto; margin-bottom:20px; float:none;) )

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

10. Φόντα σε διαφορετικά στρώματα

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

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

Space( /* Ορίστε μια λίστα υποβάθρων διαχωρισμένων με κόμματα */ background:url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big .png" ) no-repeat center 70px, url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg") no- επανάληψη στο κέντρο ; 200 px ; όπως θέση φόντου και επανάληψη */ θέση φόντου:35% 20 εικονοστοιχεία, επάνω δεξιά)

Για περισσότερες πληροφορίες δείτε εδώ. Πολύ καλή υποστήριξηπρογράμματα περιήγησης - όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν αυτόν τον κανόνα. .

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

Container(πλάτος: 500 px; περιθώριο: 0 αυτόματα; ) /* Έτσι δημιουργούμε απλώς στήλες */ .container p( -moz-columns:3; -webkit-columns:3; columns:3; )

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

12. Τρισδιάστατοι μετασχηματισμοί CSS

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

Δείτε το παράδειγμα κώδικα παρακάτω:

Container( /* Πώς πρέπει να εκφράζονται τα εφέ 3D */ προοπτική: 800 px; -webkit-perspective: 800px; φόντο: radial-gradient(#e0e0e0, #aaa); πλάτος:480px; ύψος:480px; περιθώριο:0 αυτόματα; περίγραμμα -radius:6px:relative ) .iphone-front, .iphone-back( /* Connecting 3D transformation */ transform-style: ruaj-3d; -webkit-transform-style: ruaj-3d; /*Χρησιμοποιούμε 2 διαφορετικά div για το μπροστινό και το πίσω μέρος του τηλεφώνου Αυτή η ιδιότητα κρύβει το div όταν περιστρέφεται, οπότε θα εμφανίζεται η αντίθετη πλευρά */backface-visibility: hidden; :absolute;αριστερά:-166px 0 -100px background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-finally-; use/assets/img/iphone.png) χωρίς επανάληψη στο αριστερό κέντρο /* Transition animation */ transition:0.8s ) .iphone-back( /*Πίσω περιστρέφεται 180 μοίρες από προεπιλογή*/ transform:rotateY(180deg) ) ; -webkit-transform:rotateY(180deg); φόντο-θέση:δεξιό κέντρο; ) .container:hover .iphone-front( /*Όταν το κοντέινερ τοποθετείται με το ποντίκι και ενεργοποιείται το δείκτη του ποντικιού, περιστρέψτε το μπροστινό μέρος και αποκρύψτε το */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg) ; ) .container :hover .iphone-back( /*... ταυτόχρονα περιστροφήπίσω

και κάνει ορατό*/ transform:rotateY(360deg);

-webkit-transform:rotateY(360deg); )

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

Εάν θέλετε να μάθετε περισσότερα για το 3D CSS, ρίξτε μια ματιά στη λεπτομερή εισαγωγή. Εάν δεν στοχεύετε παλαιότερα προγράμματα περιήγησης IE, η υποστήριξη του προγράμματος περιήγησης για 3D CSS είναι επίσης πολύ καλή. Άλλα οφέλη που αξίζει να αναφερθούνΚαι Εάν χρησιμοποιείτε επίσης προθέματα σε, τότε τώρα μπορείτε να το ξεχάσετε με ασφάλεια.

Επίσης, μπορείτε τώρα να αρχίσετε να χρησιμοποιείτε data-uriγια εικόνες φόντου, για όλα τα προγράμματα περιήγησης.

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

Θα χρειαστεί ακόμα λίγος χρόνος μέχρι να υπάρξει υποστήριξη μεταξύ προγραμμάτων περιήγησης flexbox, @υποστηρίζει, φίλτρα και μάσκες CSS, αλλά είμαι σίγουρος ότι αξίζει την αναμονή!

Όλα τα παρουσιαζόμενα πρότυπα για τον ιστότοπό σας είναι χτισμένα σε σύγχρονες εκδόσεις HTML5 και CSS3. Επιπλέον, οι συγγραφείς χρησιμοποιούν μοντέρνα χαρακτηριστικά όπως επίπεδη σχεδίαση, αποκριτική σχεδίαση, προσαρμοστική διάταξη, ρυθμιστικά jQuery, κινούμενα σχέδια CSS3 κ.λπ. Δηλαδή, εάν ψάχνετε για ένα πρότυπο ιστότοπου για κινητά, μπορείτε να επιλέξετε οποιοδήποτε από τα παρουσιαζόμενα. Όμορφα πρότυπα html5 2017, αν και δωρεάν, φαίνονται premium.

Εδώ θα βρείτε περισσότερα από 50 δωρεάν αποκριτικά πρότυπα ιστοτόπων υψηλής ποιότηταςσε HTML5 και CSS3, τα οποία μπορούν να χρησιμοποιηθούν τόσο για νέους ιστότοπους όσο και για επανασχεδιασμό υπαρχόντων. Κομψά πρότυπα ιστοτόπων html5- αυτό χρειάζεσαι!

Ενημερώθηκε 03/12/2019: Από τότε που γράφτηκε το άρθρο πριν από 2 χρόνια, πολλοί σύνδεσμοι χάλασαν. Είτε οι κάτοχοι των προτύπων συγχωνεύτηκαν, είτε άλλαξαν την κατάσταση των προτύπων από δωρεάν σε επί πληρωμή, είτε οι εξωγήινοι κατέστρεψαν τα πάντα. Σας ζητάμε, αγαπητοί αναγνώστες, αν βρείτε τέτοιο σύνδεσμο, αφήστε το στα σχόλια, θα το διορθώσω.

1. Πρότυπο σελίδας προορισμού χωρίς χιόνι με χρήση HTML5 και CSS3

Το πρότυπο html5 css3 της σελίδας προορισμού Snow είναι χτισμένο στο πλαίσιο Bootstrap. Το πρότυπο είναι πολύ κομψό και δροσερό! Σταθερό φόντοκαι ένα τεράστιο Jumbotron - κάτι που εμφανίζει το κύριο περιεχόμενο του ιστότοπου. Ποιο είναι το πιο σημαντικό πράγμα στη σελίδα προορισμού; Αυτό είναι σωστό, ένα κάλεσμα για δράση. Φυσικά, το πρότυπο είναι πλήρως προσαρμοσμένο για κινητές συσκευές. Μπορείτε ακόμη και να το χρησιμοποιήσετε ως βάση για τα δικά σας πρότυπα.

2. Sima - κομψό πρότυπο εμπορικού ιστότοπου

Αυτό το πρότυπο html5 css3 είναι επίσης χτισμένο στο πλαίσιο Bootstrap. Μπορείτε να δημιουργήσετε έναν μοναδικό ιστότοπο σε αυτό το πρότυπο με ένα χαρτοφυλάκιο, την ομάδα σας, τιμές, κριτικές και οτιδήποτε άλλο είναι απαραίτητο. Για παράδειγμα, αυτό το πρότυπο είναι τέλειο για έναν ιστότοπο για υπηρεσίες καθαρισμού. Η κίνηση σε αυτό το πρότυπο είναι ομαλή και αποτελεσματική, οι γραμματοσειρές είναι καθαρές και ευανάγνωστες. Απλά το τέλειο πρότυπο!

3. Λευκό - ένα υπέροχο μονοσέλιδο πρότυπο!

Ένα χαρακτηριστικό γνώρισμα του προτύπου ιστότοπου White είναι δύο επιλογές φόντου στην κορυφή. Η επιλογή σας είναι είτε ένα ρυθμιστικό με εικόνες είτε ένα φόντο βίντεο. Πολύ υψηλής ποιότητας και αποτελεσματικό πρότυπο για τον ιστότοπο!

4. Platz - Δωρεάν πρότυπο ιστοτόπου βάσει πλέγματος HTML5

Ένα μοντέρνο, οπτικά ελκυστικό πρότυπο ιστότοπου HTML5 σχεδιασμένο σε πλέγμα (διαβάστε περισσότερα για το πλέγμα). Όμορφη και ανταποκρινόμενη σχεδίαση προτύπου για ένα blog ή έναν ιστότοπο.

5. Mart eCommerce - όμορφο πρότυπο ιστότοπου ηλεκτρονικού εμπορίου HTML5 και CSS3

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

6. Nava - εντυπωσιακό πρότυπο HTML5 και CSS3 για δημιουργικούς ιστότοπους

Το Nava είναι ένα σύγχρονο πρότυπο ιστότοπου HTML5 που χρησιμοποιείται κυρίως για δημιουργικούς επαγγελματίες που θέλουν να επιδείξουν τη δουλειά τους σε όλο της το μεγαλείο. Πολλές παραλλαγές των ρυθμίσεων προτύπων σάς επιτρέπουν να κάνετε τον ιστότοπό σας μοναδικό. Ελαφρύ, όμορφο και αποκριτικό πρότυπο ιστότοπου.

7. Box Portfolio - ένα μοναδικό δημιουργικό πρότυπο ιστότοπου που χρησιμοποιεί HTML5 και CSS3

Το πρότυπο ιστότοπου Box Portfolio έχει καθαρό και μοντέρνο μινιμαλιστικό σχέδιο. Ιδανικό για επαγγελματίες που θέλουν να προβάλλουν αποτελεσματικά τη δουλειά τους στο διαδίκτυο. Όπως υποδηλώνει το όνομα, το πρότυπο ιστότοπου είναι ιδανικό για χαρτοφυλάκιο.

8. Mountain King - δημοφιλές και λειτουργικό πρότυπο ιστότοπου HTML5 και CSS3

Το θέμα του βουνού στο σχεδιασμό ιστοσελίδων είναι πολύ δημοφιλές πρόσφατα. Το πρότυπο ιστότοπου Mountain King δεν αποτελεί εξαίρεση. Περιλαμβάνει 336 διανυσματικά εικονίδια από το Typicons. Επιπλέον εξαιρετική κινούμενη εικόνα με χρήση CSS3. Το πρότυπο είναι τέλειο για ιστοσελίδες ταξιδιών και χαρτοφυλακίου.

9. Beauty Spa - ωραίο πρότυπο ιστότοπου HTML5 και CSS3 για σαλόνια σπα

Το Beauty Spa είναι ένα αποκριτικό πρότυπο ιστότοπου που διαθέτει πολλές δυνατότητες, ιδανικό για ιστοσελίδες σπα, κέντρα υγείας ή γυμναστικής, ιστότοπους γιόγκα ή ακόμα και κομμωτήρια. Εξαιρετική αναγνωσιμότητα γραμματοσειρών και διακριτικός μινιμαλισμός.

10. Bent – ​​κομψή και αποτελεσματική σελίδα προορισμού για ιστότοπους που χρησιμοποιούν HTML5 και CSS3

Το Bent είναι ένα εξαιρετικό δωρεάν πρότυπο ιστότοπου σε html5 και css3. Responsive Design, κινούμενα σχέδια CSS3, κύλιση παράλλαξης, προσαρμοσμένη πλοήγηση και άλλα καλούδια. Αυτό είναι ένα καθαρό σχέδιο προτύπου για ιστότοπους που θέλουν να χρησιμοποιήσουν μια ισορροπημένη σχεδίαση για να εξασφαλίσουν ότι οι επισκέπτες απολαμβάνουν εμφάνισηιστοσελίδα, και ταυτόχρονα να δείτε καθαρά το κύριο περιεχόμενό του.

11. Triangle - Δωρεάν Responsive Multipurpose Template HTML5 και CSS3

Το Triangle είναι ένα αποκλειστικό δημιουργικό πρότυπο ιστοτόπου HTML5 και CSS3 ειδικά για όσους θέλουν να τροποποιήσουν τον όμορφο σχεδιασμό τους, αλλά να μην το κάνουν χειρότερο. Το πρότυπο συνοδεύεται από περισσότερες από 40 προσχεδιασμένες σελίδες που σας επιτρέπουν να προσαρμόσετε τον ιστότοπό σας σύμφωνα με το περιεχόμενο της καρδιάς σας.

12. Future Imperfect - ένα εξαιρετικό πρότυπο ιστότοπου για δημιουργικούς ανθρώπους!

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

13. Bodo - ένα εξαιρετικό πρότυπο για έναν προσωπικό ιστότοπο

Bodo- όμορφο πρότυποιστότοπος σε HTML5 και CSS3, ο οποίος είναι ιδανικός για έναν προσωπικό ιστότοπο. Ειδικά για την οργάνωση χαρτοφυλακίου. Καθαρή και ευκρινή τυπογραφία, ρυθμιστικό καρουζέλ, αναδυόμενα παράθυρα για εμφάνιση εργασίας και πολλά άλλα.

14. Φακός - το τέλειο πρότυπο ιστότοπου HTML5 για φωτογράφους

Οι φωτογράφοι αναζητούν πάντα το τέλειο πρότυπο για τον ιστότοπό τους για να δείξουν τη δουλειά τους σε όλο της το μεγαλείο, εντυπωσιακά και το πιο σημαντικό - μεγάλο! Ένα σπάνιο πρότυπο ιστότοπου πληροί αυτές τις απαιτήσεις. Το Lens είναι ένα τέτοιο πρότυπο ιστότοπου φωτογράφων.

15. Spectral - ένα μοναδικό χειροποίητο πρότυπο ιστότοπου με χρήση HTML5 και CSS3

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

16. Oxygen - πρότυπο ιστότοπου HTML5 και CSS3 μιας σελίδας

Το Oxygen είναι ένα βολικό και μοναδικό πρότυπο για έναν επιχειρηματικό ιστότοπο. Μοντέρνα επίπεδη σχεδίαση, προσαρμοστική διάταξη. Για παράδειγμα, αυτό το πρότυπο είναι ιδανικό για έναν ιστότοπο σχετικά με εφαρμογές για κινητά ή τεχνολογία κινητής τηλεφωνίας.

17. Mobirise Bootstrap - το τέλειο δωρεάν πρότυπο ιστότοπου σε HTML5 και CSS3

Αν ψάχνετε για ένα δωρεάν πρότυπο ιστότοπου, τότε το Mobirise Bootstrap είναι ιδανικό για να ξεκινήσετε. Αυτό είναι ένα πολυλειτουργικό πρότυπο με πολλά πρόσθετα που περιλαμβάνονται. Τρεις προκατασκευασμένες διατάξεις αρχικής σελίδας και ιστολογίου θα σας βοηθήσουν σε αυτό. Το Mobirise Bootstrap είναι επίσης 100% βελτιστοποιημένο SEO και προσαρμόζεται σε οποιοδήποτε μέγεθος οθόνης.

18. La Casa - όμορφο και δωρεάν πρότυπο HTML5 για έναν ιστότοπο ακινήτων

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

19. Drifolio - κομψό πρότυπο ιστότοπου HTML5 για χαρτοφυλάκιο

Κομψό και κινούμενο πρότυπο ιστότοπου HTML5 και CSS3 για την οργάνωση ενός χαρτοφυλακίου. Καθαρός σχεδιασμός, εξαιρετική τυπογραφία, όμορφα εικονίδιακαι πολλά άλλα.

20. Pluton - ένα φωτεινό και κομψό πρότυπο για έναν ιστότοπο μιας σελίδας

Το Pluton είναι ένα φωτεινό και αποτελεσματικό πρότυπο ιστότοπου που βασίζεται στο Bootstrap. Ένα μοντέρνο πρότυπο ιστότοπου, με τη μοναδική διάταξη μιας σελίδας και τον ανταποκρινόμενο σχεδιασμό που είναι ιδανικό για στούντιο, φωτογράφους και δημιουργικούς σχεδιαστές.

21. SquadFree - επαγγελματικό πρότυπο ιστοσελίδας μιας σελίδας σε HTML5

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

22. Sublime - ένα συναρπαστικό πρότυπο ιστότοπου σε HTML5 και CSS3

Το Sublime είναι ένα καθαρό και εκπληκτικά όμορφο πρότυπο ιστοτόπου HTML5 και CSS3, ιδανικό για startup, δημιουργική εταιρεία ή ιστότοπο χαρτοφυλακίου. Responsive σχεδιασμός και επιλογές δύο σελίδων για να διαλέξετε.

23. Ξύλο - ασυνήθιστο και όμορφο πρότυπο ιστότοπου HTML5 και CSS3

Το Timber είναι ένα φρέσκο, κομψό και ασυνήθιστο θέμα προτύπου ιστότοπου μιας σελίδας. Η διαγώνιος είναι το κύριο χαρακτηριστικό σχεδιασμού αυτού του προτύπου. Το πρότυπο είναι ιδανικό για έναν ιστότοπο επιχείρησης ή ένα χαρτοφυλάκιο. Υπάρχει μια ενσωματωμένη συλλογή, χάρτης και στοιχεία επικοινωνίας που μπορείτε εύκολα να προσαρμόσετε στις ανάγκες σας.

24. E-Shopper - το καλύτερο πρότυπο ιστότοπου ηλεκτρονικού εμπορίου

Το E-Shopper είναι ένα εξαιρετικό πρότυπο ιστότοπου για ηλεκτρονικό εμπόριο. Χτισμένο σε bootstrap με ένα εκπληκτικό σύνολο δυνατοτήτων για ένα πλήρες και αποτελεσματικό ηλεκτρονικό κατάστημα.

25. Μαγνητικό - δωρεάν πρότυπο HTML5 και CSS3 για μια τοποθεσία φωτογραφιών

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

26. Mabur Portfolio - ένα όμορφο πρότυπο ιστότοπου σε μινιμαλιστικό στυλ χρησιμοποιώντας HTML5 και CSS3

Η επίπεδη σχεδίαση αυτού του μινιμαλιστικού προτύπου ιστότοπου είναι ιδανική για τη δημιουργία ενός χαρτοφυλακίου. Στο πρότυπο, όλες οι λεπτομέρειες ελέγχονται τέλεια!

27. Μοντέρνο Bootstrap HTML5 - Δωρεάν πρότυπο ιστότοπου μίας σελίδας

Αυτό το δωρεάν πρόγραμμα μιας σελίδας βασίζεται σε Bootstrap πλαίσιοΙδανικό για εταιρικούς ιστότοπους, τόσο μικρών όσο και μεγάλων εταιρειών. Επίπεδη σχεδίαση, προσαρμοστική διάταξη, όλα τα υψηλής ποιότητας σχεδιαστικά στοιχεία. Το πρότυπο διατίθεται σε 4 διαφορετικά χρώματα.

28. Infusion - κομψό μονοσέλιδο πρότυπο ιστότοπου με χρήση HTML5 και CSS3

Το Infusion είναι ένα εξαιρετικό παράδειγμα προτύπου ιστότοπου HTML5 και CSS3 που έχει σχεδιαστεί ειδικά για τη δημιουργία ενός επιχειρηματικού χαρτοφυλακίου. Η πλούσια λειτουργικότητα αυτού του προτύπου σάς επιτρέπει να εργάζεστε αποτελεσματικά με πελάτες και να προσελκύετε νέους.

29. Yebo - πρότυπο εταιρικού ιστότοπου σε HTML5 και CSS3

Αυτό το πρότυπο ιστότοπου επίπεδης ποιότητας υψηλής ποιότητας είναι ιδανικό για κάθε εταιρικό ιστότοπο. Προσαρμοστικός σχεδιασμός, πολλές ρυθμίσεις και επιλογές επεξεργασίας.

30. Είκοσι - θεαματικό πρότυπο ιστότοπου HTML5 και CSS3 με παράλλαξη

Αυτό το μοναδικό και πολύ όμορφο πρότυπο ιστοσελίδας με εφέ parallax δεν θα αφήσει κανέναν αδιάφορο. Πρότυπο μίας σελίδαςχτισμένο σε καθαρό HTML5 και CSS3 με προσαρμοστική διάταξη, εντυπωσιακά φόντα, υποστήριξη μέσα κοινωνικής δικτύωσηςκαι τα λοιπά.

31. Urbanic – εξαιρετικό πρότυπο ιστότοπου HTML5 και CSS3 στο Bootstrap

Το Urbanic είναι ένα φρέσκο ​​και δροσερό πρότυπο ιστότοπου HTML5 και CSS3 που έχει δημιουργηθεί στη μηχανή Bootstrap. Ιδανικό για να ξεκινήσετε τον ιστότοπό σας αμέσως χωρίς ειδικά προβλήματα. Το πρότυπο προσαρμόζεται τέλεια σε οποιοδήποτε μέγεθος οθόνης.

32. Design Showcase - πρότυπο ιστοτόπου χαρτοφυλακίου HTML5

Ένα οπτικά αρμονικό και αποτελεσματικό πρότυπο ιστότοπου HTML5 για την οργάνωση του χαρτοφυλακίου σας. Το πρότυπο είναι τέλεια προσαρμοσμένο για κινητές συσκευές, κάτι που είναι πολύ δύσκολο να γίνει για ιστότοπους αυτής της μορφής.

33. Mamba One - ένα απλό και κομψό πρότυπο ιστότοπου που χρησιμοποιεί HTML5 και CSS3

Το Mamba One είναι ένα παράδειγμα απλού αλλά κομψού προτύπου ιστότοπου για τη δημιουργία μιας σελίδας. Συμβατό με όλους σύγχρονα προγράμματα περιήγησηςκαι θα εμφανίζεται επαρκώς παντού.

34. KreativePixel - δωρεάν πρότυπο ιστότοπου για φωτογράφους

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

35. Retina Ready Responsive App - δωρεάν πρότυπο σελίδας προορισμού με χρήση HTML5 και CSS3

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

36. Βουρτσισμένο - αποκριτικό πρότυπο ιστότοπου HTML5 και CSS3 που βασίζεται στη μηχανή Bootstrap

Το Brushed είναι ένα αποκριτικό, δωρεάν πρότυπο ιστότοπου HTML5 και CSS3 που βασίζεται στη μηχανή Bootstrap. Βελτιστοποιήθηκε επίσης για οθόνες Retina (iPhone, iPad, iPod Touch και MacBook Pro Retina).

37. Πρότυπο ιστότοπου Big Picture HTML5 και CSS3

Καλώς ήλθατε στο Big Picture! Αυτό αποκριτικό πρότυποΟ ιστότοπος HTML5 είναι ιδανικός για όλους τους δημιουργικούς ανθρώπους που έχουν κάτι να δείξουν και το εμφανίζουν μεγάλο και εντυπωσιακό στον ιστότοπό τους. Επιπλέον, το πρότυπο χρησιμοποιεί εξαιρετική κινούμενη εικόνα.

38. Tesselatte - Δωρεάν Responsive HTML5 και CSS3 Template

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

39. Υπερχείλιση - ένα μοναδικό πρότυπο ιστότοπου σε HTML5 και CSS3

Αυτό το μοναδικό καθαρό πρότυπο ιστότοπου HTML5 και CSS3 είναι τέλειο για κάθε δημιουργικό άτομο. Είναι πλήρως responsive και εντελώς δωρεάν.

40. Runkeeper - Responsive και πολύ όμορφο πρότυπο ιστοσελίδας

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

41. Φλίπερ Responsive Grid Style - Great Grid Based Website Template

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

42. Πρόλογος - καθαρίστε το πρότυπο ιστότοπου μιας σελίδας χρησιμοποιώντας HTML5 και CSS3

Αυτό το καθαρό, απλό και σαφές πρότυπο ιστότοπου HTML5 και CSS3 είναι ιδανικό για τη δημιουργία μιας σελίδας προορισμού. Ο μινιμαλιστικός σχεδιασμός δεν αποσπά την προσοχή από το κύριο πράγμα. Μια εντυπωσιακή κυλιόμενη πλαϊνή γραμμή πλοήγησης και καθαρές γραμμές σελίδας είναι απλώς ο τέλειος συνδυασμός!

43. Helios - σύγχρονο πρότυπο ιστότοπου με χρήση καθαρού HTML5 και CSS3

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

44. Telephasic - δωρεάν και αποκριτικό πρότυπο ιστότοπου HTML5

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

45. Strongly Typed - ένα πολύ όμορφο πρότυπο ιστότοπου σε στυλ ημι-ρετρό

Ένα νέο πρότυπο ιστότοπου με μινιμαλιστικό ημι-ρετρό στυλ. Απλώς το ρετρό δεν είναι πλέον στη μόδα, αλλά μια μικρή υπόδειξη του είναι πολύ ευπρόσδεκτη. Αυτό το πρότυπο ιστότοπου είναι πλήρως αποκριτικό, βασίζεται σε καθαρά HTML5 και CSS3 και περιλαμβάνει όλα τα απαραίτητα βασικά στοιχεία σελίδας. Το πρότυπο Strongly Typed είναι ιδανικό για δημιουργικούς ιστότοπους. Για παράδειγμα, για έναν ιστότοπο σχετικά με τη διακόσμηση του σπιτιού.

46. ​​Ριγέ - καθαρό, όμορφο και λειτουργικό πρότυπο ιστότοπου HTML5 και CSS3

Φρέσκο ​​και καθαρό, όμορφο και λειτουργικό, νέο πρότυπο ιστότοπου σε HTML5 και CSS3. Έχει στο οπλοστάσιό του όλα τα απαραίτητα στοιχεία σελίδας, συμπεριλαμβανομένων σχεδιασμένων εισαγωγικών, πινάκων και λιστών, καθώς και μια προσαρμοσμένη πλαϊνή μπάρα (δεξιά ή αριστερά - όπως θέλετε).

47. Parallelism - ένα ασυνήθιστο και κομψό πρότυπο ιστότοπου που χρησιμοποιεί HTML5 και CSS3

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

48. Miniport - πλήρως αποκριτικό πρότυπο ιστότοπου HTML5 σε μινιμαλιστικό στυλ

Εξαιρετικό πρότυπο ιστότοπου σε μινιμαλιστικό στυλ σε HTML5. Ιδανικό για έναν προσωπικό ιστότοπο/ιστολόγιο, καθώς και για έναν μικρό εταιρικό ιστότοπο μιας σελίδας ή ως ιστότοπο για επαγγελματικές κάρτες.

49. Verti - ευρύχωρο και δωρεάν αποκριτικό πρότυπο ιστότοπου HTML5

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

50. ZeroFour - εντυπωσιακό και κομψό πρότυπο ιστότοπου με χρήση HTML5 και CSS3

Και τελευταίο στη λίστα, αλλά όχι λιγότερο σημαντικό όσον αφορά την ποιότητα και την οπτική αποτελεσματικότητα, είναι το πρότυπο ιστότοπου - ZeroFour. Κομψή σχεδίαση, πολύ όμορφο μενού, τέλεια ευθυγραμμισμένες φόρμες και κουμπιά, όμορφα εικονίδια και πολλά άλλα. Και όλα αυτά είναι εντελώς δωρεάν!

Ελπίζω να βρήκατε κάτι κατάλληλο για τον εαυτό σας ανάμεσα σε αυτά τα καταπληκτικά πρότυπα ιστοτόπων HTML5 και CSS3. Καλή τύχη!

Σημειώστε το για να το βρείτε γρήγορα.

ΥΓ: Αν δεν μπορείτε να αποφασίσετε, διαβάστε το άρθρο «Δεν ξέρω τι θέλω». Θα είναι χρήσιμο.

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

CSS 3D σύννεφα

Σε αυτό το demo θα μπορείτε να δημιουργείτε και να επεξεργάζεστε φανταχτερά σύννεφα σε 3D. Αυτά τα σύννεφα CSS μας καθιστούν σαφές ότι οι δυνατότητες των τεχνολογιών Ιστού είναι σχεδόν απεριόριστες.

Καθαρά λογότυπα CSS

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

Αλφάβητο με κινούμενα σχέδια CSS

Εξαιρετικό και καλλιτεχνικό παράδειγμα χρησιμοποιώντας CSSστο αλφάβητο

Τρισδιάστατη πλοήγηση για τον ιστότοπο

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

Google Doodle με CSS

Ένα από τα πολλά doodle από μηχανή αναζήτησης Google, κατασκευασμένο σε CSS. Αυτό είναι ένα εξαιρετικό παράδειγμα καλής χρήσης κινούμενων εικόνων CSS.

Ολισθητής

Ένα καλοφτιαγμένο και υψηλής ποιότητας ρυθμιστικό εικόνας. Συν 4 παραδείγματα στο demo.

Διπλό κινούμενο δαχτυλίδι

Ένα όμορφο κινούμενο και πολύχρωμο δαχτυλίδι με όχι πολύ κώδικα CSS

Θάμπωμα στο CSS

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

Ο πλήρης οδηγός για το Flexbox

Αυτό το άρθρο αφορά τα αποκριτικά μπλοκ Flexbox. Μιλάει εντελώς για αυτά τα μπλοκ, αν και το άρθρο είναι στα αγγλικά.

Πολύχρωμο και κινούμενο μενού στο CSS3

Ένα όμορφο αναπτυσσόμενο μενού για έναν ιστότοπο με εικονίδια. Ένα τεράστιο πλεονέκτημα είναι ότι είναι κατασκευασμένο εξ ολοκλήρου σε CSS.

Φίλτρα CSS

Υλικό υψηλής ποιότητας στα αγγλικά, το οποίο μιλά για τη χρήση φίλτρων CSS σε εικόνες.

Φόρμες CSS

Δημοσίευση για Φόρμες CSSμε πολλά παραδείγματα

Γραμμές προόδου στο CSS

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

Κινούμενα σχέδια - Animate.css

Το πιο δημοφιλές έργο CSS animation στο Διαδίκτυο σήμερα. Και ίσως το πιο απλό και ποιοτικό, και επίσης δωρεάν.

Ενδείξεις φόρτωσης - Spinkit

Για να είμαι ειλικρινής, αυτοί οι δείκτες έχουν ήδη δει στο blog, αλλά μου φαίνεται ότι αξίζει να σας δείξω ξανά. Γιατί αυτοί είναι οι πιο όμορφοι δείκτες στο Διαδίκτυο με χρήση CSS.

Κουμπιά

Σήμερα είναι δύσκολο να εκπλήξεις με τα κουμπιά CSS, αλλά αυτή είναι μια αρκετά αξιοπρεπής επιλογή

Γεννήτρια για τη δημιουργία διακοπτών

Μια μικρή και υψηλής ποιότητας εφαρμογή Διαδικτύου με την οποία μπορείτε να δημιουργήσετε όμορφους διακόπτες για χρήση στον ιστότοπο.

Συμβουλές εργαλείων

Βιβλιοθήκη CSS για δωρεάν συμβουλές εργαλείων - Hint.css

Σχέδια χρωμάτων

Σχέδια χρωμάτων για άτομα που δεν τους αρέσει να εμβαθύνουν στον κώδικα

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

Εργαλείο αυτό το καθήκονδυνατό με τρεις τρόπους:

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

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

Το χαρακτηριστικό στυλ.

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

Είναι γραμμένο έτσι:

style="">

Όλα όσα θα γραφτούν ανάμεσα στα εισαγωγικά των χαρακτηριστικών στυλκαι θα είναι μια περιγραφή στυλ για αυτού του στοιχείου, V σε αυτή την περίπτωσηστοιχείο

Λοιπόν για παράδειγμα:

style="color: #ff0000; font-size:12px"> αυτή είναι μια παράγραφος με προσωπικό ύφος

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

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

style="background-color: #c5ffa0">

style="color: #0000ff; font-size:18px">Τα πάντα για τους ελέφαντες

Αγοράστε έναν ελέφαντα

style="color: #ff0000; font-size:14px">

style="color: #0000ff; font-size:16px">Νοικιάστε έναν ελέφαντα

style="color: #ff0000; font-size:14px">

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

Ετικέτα (δεν πρέπει να συγχέεται με το ομώνυμο χαρακτηριστικό) στο οποίο περιγράφονται τα στοιχεία που χρειαζόμαστε.

Ρίξτε μια ματιά στο παράδειγμα, θα υπάρξουν σχόλια παρακάτω.

Τα πάντα για τους ελέφαντες

Σε αυτόν τον ιστότοπο θα βρείτε πληροφορίες για τους ελέφαντες.

Αγοράστε έναν ελέφαντα

Σε εμάς μπορείτε να αγοράσετε τους καλύτερους ελέφαντες σε ανταγωνιστικές τιμές!!

Νοικιάστε έναν ελέφαντα

Μόνο εδώ μπορείτε να νοικιάσετε ελέφαντες!!

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

,

- οι παράγραφοι θα είναι μπλε

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

Τώρα τα υποσχόμενα σχόλια:

Ετικέτα υπάρχει μια άμεση δήλωση των στυλ ορισμένων στοιχείων HTML σύμφωνα με την ακόλουθη σύνταξη:

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

CSS σε ξεχωριστό εξωτερικό αρχείο.

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

Ανοίξτε λοιπόν το σημειωματάριο (ή άλλο πρόγραμμα επεξεργασίας) και γράψτε το ακόλουθο κείμενο σε αυτό:

Σώμα (χρώμα φόντου: #c5ffa0)
a (color:#000060; font-weight: bold;)
a:hover (χρώμα:#ff0000; γραμματοσειρά-βάρος: έντονη, κείμενο-διακόσμηση: κανένα)
h1 (χρώμα: #0000ff; μέγεθος γραμματοσειράς: 18 px)
h2 (χρώμα: #ff00ff; μέγεθος γραμματοσειράς: 16 px)
p (χρώμα: #600000, μέγεθος γραμματοσειράς: 14 px)

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

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

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

Ετικέτα έχει ιδιότητες:

href- Διαδρομή προς το αρχείο.
σχετ- Καθορίζει τη σχέση μεταξύ του τρέχοντος εγγράφου και του αρχείου στο οποίο γίνεται αναφορά.

• εικονίδιο συντόμευσης - Καθορίζει ότι το αρχείο που περιλαμβάνεται είναι ένα .
• φύλλο στυλ- Καθορίζει ότι το αρχείο που περιλαμβάνεται περιέχει ένα φύλλο στυλ.
• application/rss+xml - Ένα αρχείο σε μορφή XML για την περιγραφή της ροής ειδήσεων.

τύπος- Τύπος δεδομένων MIME του συνημμένου αρχείου.

Αφού συνδεόμαστε ως εξωτερικό αρχείο cascading style sheet, τότε ο σύνδεσμος υπηρεσίας μας έχει την ακόλουθη μορφή:

Επαναλαμβάνω, για να διαλύσουμε σίγουρα πιθανές παρεξηγήσεις. Ιδιότης σχετεκχωρήστε μια τιμή φύλλο στυλΕφόσον συνδέουμε ένα επικαλυπτόμενο φύλλο στυλ ως εξωτερικό αρχείο, υποδεικνύουμε τη διαδρομή προς το αρχείο css (σε αυτό το παράδειγμα το αρχείο ονομάζεται mystyle.cssκαι βρίσκεται δίπλα στο έγγραφο HTML στο οποίο είναι γραμμένος αυτός ο σύνδεσμος) υποδεικνύουμε επίσης ότι αυτό το αρχείο είναι κείμενο και περιέχει μια περιγραφή στυλ type="text/css"

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

αρχείο mystyle.css
σώμα (χρώμα φόντου: #c5ffa0)
a (χρώμα:#000060; βάρος γραμματοσειράς: έντονη;)
a:hover (χρώμα:#ff0000, βάρος γραμματοσειράς: έντονη, κείμενο-διακόσμηση: κανένα)
h1 (χρώμα: #0000ff; μέγεθος γραμματοσειράς: 18 px)
h2 (χρώμα: #ff00ff; μέγεθος γραμματοσειράς: 16 px)
p (χρώμα: #600000, μέγεθος γραμματοσειράς: 14 px)
αρχείο index.html

Μενού:

Τα πάντα για τους ελέφαντες.
Αγοράστε έναν ελέφαντα.
Νοικιάστε έναν ελέφαντα.

---

Τα πάντα για τους ελέφαντες

Σε αυτόν τον ιστότοπο θα βρείτε πληροφορίες για τους ελέφαντες.

Αρχείο elephant.html

Μενού:

Τα πάντα για τους ελέφαντες.
Αγοράστε έναν ελέφαντα.
Νοικιάστε έναν ελέφαντα.

---

Αγοράστε έναν ελέφαντα

Σε εμάς μπορείτε να αγοράσετε τους καλύτερους ελέφαντες σε ανταγωνιστικές τιμές!!

Αρχείο elephant1.html

Μενού:

Τα πάντα για τους ελέφαντες.
Αγοράστε έναν ελέφαντα.
Νοικιάστε έναν ελέφαντα.

---

Νοικιάστε έναν ελέφαντα

Μόνο εδώ μπορείτε να νοικιάσετε ελέφαντες!!

Στο παραπάνω παράδειγμα, "ιστότοπος σχετικά με τους ελέφαντες", υπάρχουν αυτήν τη στιγμή τρεις σελίδες, καθεμία από τις οποίες συνδέεται με ένα μόνο εξωτερικό αρχείο css- mystyle.css. Έτσι, το «ξεφορτώσαμε» σημαντικά και κάναμε τη σχεδίαση ολόκληρου του ιστότοπου «φιλική για κινητά». Φανταστείτε πόσα kilobyte θα κερδίζαμε αν αυτός ο ιστότοπος είχε εκατό πλήρεις σελίδες!; Και επίσης, πόσο χρόνο θα εξοικονομούσαμε αν χρειαζόταν να αλλάξουμε κάτι στον σχεδιασμό του!;

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

• Χρησιμοποιήστε το χαρακτηριστικό στυλγια οποιοδήποτε στοιχείο, εάν αυτό το στοιχείο με διαφορετικό στυλ από άλλα στοιχεία είναι το μόνο σε ολόκληρο τον ιστότοπο.
• Χρήση ετικέτας