Εξηγώντας γιατί το styling δεν πρέπει να γίνεται απευθείας σε HTML

ItamarG3 08/15/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

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

Αυτό με έκανε να σκεφτώ:

Θα διδάξει ρητά τη διαφορά μεταξύ της ρύθμισης του χαρακτηριστικού style μιας ετικέτας html και της εκτέλεσης του μέσω του CSS που είναι χρήσιμο για την αύξηση της κατανόησης από τους μαθητές της σύνδεσης των CSS και HTML;

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

Με την "ρητή διδασκαλία" αυτό που εννοώ είναι στην πραγματικότητα αφιερώνει ένα μάθημα με τον τίτλο "Styling through .CSS", ή κάτι παρόμοιο.

Κάποιο πλαίσιο, αν χρειαστεί:

Οι μαθητές μαθαίνουν βασικό σχεδιασμό ιστοσελίδων: HTML, JavaScript (πολύ βασικό), JSP και SQL. Τα μαθαίνουν για ένα έτος και στο τέλος του έτους θα πρέπει να έχουν μια ιστοσελίδα (για την οποία λαμβάνουν βαθμούς). Αναρωτιέμαι αν ένα μάθημα εξ ολοκλήρου σχετικά με το CSS θα μπορούσε ενδεχομένως να οδηγήσει σε καλύτερες ιστοσελίδες.

5 Comments
3 Puppy 07/30/2017
Το βασικό πρόβλημα εδώ είναι ότι υποθέτετε ότι το στυλ δεν πρέπει να γίνεται απευθείας σε HTML, και ότι η χρήση του CSS είναι καλύτερη. Κανένα από αυτά δεν είναι αλήθεια.
ItamarG3 07/31/2017
@Puppy καλά, ένα μέρος της ερώτησης είναι αν πρέπει να διδάξω αυτό ξεχωριστά. Εάν δεν το κάνω, τότε δεν θα χρησιμοποιήσουν τα φύλλα στυλ. Αλλά νομίζετε ότι οποιαδήποτε ιστοσελίδα οπουδήποτε στην πραγματικότητα hardcodes όλα είναι css σε html; Every div έχει ένα βουνό κώδικα στο χαρακτηριστικό style ;
1 David Spence 07/31/2017
Αυτός ο ιστότοπος δείχνει τη δύναμη διατήρησης του css ξεχωριστά. csszengarden.com - Ίδια δομή, διαφορετικό css stylesheet.
ItamarG3 07/31/2017
@DavidSpence ωραία. Θα το χρησιμοποιήσω σίγουρα
1 no comprende 07/31/2017
Ό, τι κι αν κάνετε, μην τους δείξετε αυτό το μήνυμα SO για την ανάλυση HTML με το Regex . Θα μπορούσε να τους δώσει εφιάλτες!

12 Answers


richard 07/30/2017.

Μου αρέσει η ιδέα να φτιάξω μερικά φύλλα στυλ και κάνοντας τους μαθητές να τους εφαρμόσουν στο HTML τους. Μπορούν στη συνέχεια να δουν τη δύναμη της ύπαρξης ξεχωριστών φύλλων στυλ.

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

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

Για να απαντήσω πρέπει να κρατηθούν ξεχωριστά

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

Για να απαντήσετε θα πρέπει να αφιερώσετε ένα μάθημα για τα ξεχωριστά αρχεία CSS.

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


Το έκανα μόνο με ένα ή δύο άτομα (όχι με τάξη).

5 comments
ItamarG3 07/30/2017
Αυτή η δεύτερη παράγραφος ακούγεται ιδιαίτερα χρήσιμη. Αλλά αυτό δεν απαντά αν θα έπρεπε πραγματικά να αφιερώσω ένα μάθημα για τη διδασκαλία του πώς και γιατί πρέπει να γράψω ένα css stylesheet, αντί των inline html ιδιοτήτων style .
richard 07/30/2017
Προστέθηκε μια μερική απάντηση στο If και γιατί να αφιερώσετε ένα μάθημα σε αυτό.
1 Buffy 07/30/2017
Συμφωνώ ότι η μη διδασκαλία είναι μια ιδιαίτερα σπάταλη χρήση του χρόνου όλων. Είναι καλύτερο να πιάσετε παρανοήσεις πριν χτιστούν και ενισχυθούν κακές συνήθειες.
1 richard 07/30/2017
@tim, αυτό είναι απλώς μια optimisation φορτίου. Η αντίληψη θα πρέπει να παραμείνει ξεχωριστή. Ωστόσο, η Google λέει ότι το έβαλε στο ίδιο αρχείο. Δεν λένε ότι πρέπει να στυλ κάθε κομμάτι χωριστά. Λένε να πάρει αυτό που θα μπορούσε να είναι σε ένα αρχείο css και να το προσθέσει στο τμήμα <style> του html.
1 Darren 07/31/2017
Αντί να δίνω στους μαθητές μια ποικιλία φύλλων στυλ που επηρεάζουν τον κώδικα τους, θα προσπαθούσα να ακολουθήσω την αντίθετη προσέγγιση. Μετά τη διδασκαλία τους σε γραμματοσειρές σε μορφή HTML, δώστε τους μια σελίδα που βασίζεται σε ένα έγγραφο CSS για το στυλ τους και ζητήστε τους να δημιουργήσουν το δικό τους φύλλο στυλ για αυτό (χρησιμοποιώντας τις ίδιες τεχνικές που έμαθαν από τη χρήση inline HTML - απλώς θέμα επισήμανσης των στυλ και τη συγκέντρωση τους σε ένα μέρος). Στη συνέχεια, όλοι στην τάξη μπορούν να συγκρίνουν τα φύλλα στυλ σε ένα κοινό θέμα δοκιμής (εκείνο που δώσατε) και να δούμε τις δυνατότητες.

Buffy 07/30/2017.

Εάν θέλετε να δημιουργήσετε μόνο μια σελίδα που είναι απλή και ad-hoc και δεν θα αλλάξει ποτέ στο μέλλον και θα εμφανιστεί ποτέ μόνο σε ένα είδος συσκευής, τότε βεβαιωθείτε ότι θα χτίσετε το styling απευθείας στο html. Είναι το ίδιο όταν γράφετε ένα πρόγραμμα που θα εκτελείται μόνο μία φορά σε μία συσκευή για να λάβετε μια απάντηση, μετά από την οποία το πρόγραμμα καθίσταται ξεπερασμένο. Δεν υπάρχει λοιπόν κανένας λόγος να κωδικοποιηθεί προσεκτικά. Το "γρήγορο και βρώμικο" λειτουργεί για τέτοια πράγματα.

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

Έτσι, αν θέλετε να δημιουργήσετε ιστότοπους που είναι σημαντικοί και διαρκείς και που πρέπει να διατηρηθούν στο μέλλον, χρησιμοποιήστε το CSS. Πιθανότατα δεν θα γράψετε ένα σημαντικό πρόγραμμα C όλα στο main , αλλά τουλάχιστον θα εξηγούσαμε τα πράγματα που πρέπει να είναι τα ίδια αλλά επαναχρησιμοποιούνται. Στον απλό προγραμματισμό C προετοιμάζουμε λειτουργίες για αυτό. Στο html διαμορφώνουμε το styling. Σε ένα βαθύτερο επίπεδο, η πλευρά του διακομιστή εξηγεί επίσης μεγάλο μέρος των δεδομένων κλπ. Αυτό επιτρέπει τα πράγματα που υποτίθεται ότι είναι τα ίδια, παραμένουν τα ίδια και μας επιτρέπει να τροποποιούμε ένα επίπεδο σχεδιασμού ανεξάρτητα από άλλα επίπεδα.

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

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

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

2 comments
1 Luke Sawczak 07/31/2017
Η σύγκριση με τις λειτουργίες είναι καλή. Υποθέτω ότι η εν λόγω αμαρτία παρέχει άμεσα χαρακτηριστικά στυλ στην προέλευση HTML. Εάν ναι, θα μπορούσε να συγκριθεί με τη λήψη του σώματος μιας μεθόδου και απλά να κολλήσει εκεί όπου θα καλούσατε τη μέθοδο. Αντιπαραγωγική στα άκρα.
no comprende 08/01/2017
Για έναν πραγματικό κλονισμό, δείτε την πηγή και τα φύλλα στυλ των σελίδων της Microsoft και του Moodle! Μπορούν να είναι εκατοντάδες γραμμές. Η αρχική ιδέα της HTML ήταν ότι θα λειτουργούσε σε συσκευές που "δεν υπάρχουν ακόμα". Και υπάρχουν τόσες πολλές διαστάσεις οθόνης που μπορεί να είναι απλώς μια μεταβλητή.

AnoE 07/30/2017.

Για να τους κατανοήσετε πραγματικά τι μπορείτε να κάνετε με το CSS μόνο - αντικαθιστώντας only ένα άλλο αρχείο CSS - μεταβείτε στο CSS Zen Garden . Με ακριβώς το ίδιο HTML για κάθε σελίδα, και only το αρχείο .css αντικατασταθεί, παίρνετε παράλογα άγρια ​​σελίδες. Από γαλήνιο μικρό τίποτα σε κύβους 3D κύλισης ...

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

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

Επίσης, επισημάνετε ότι τα εργαλεία για άτομα με προβλήματα όρασης μπορούν για παράδειγμα να αποσπάσουν κείμενα κτλ από το HTML εάν είναι καλά δομημένα και αυτό επιτρέπει επίσης την περιήγηση σε μια σελίδα με μόνο πληκτρολόγιο - κάτι που μπορεί να είναι χρήσιμο εάν είναι τόσο τείνει, ακόμα κι αν η όραση είναι καλή.

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


thehayro 07/30/2017.

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

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

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

4 comments
thesecretmaster♦ 07/30/2017
Είστε ο χαϊρό! Καλώς ήλθατε στους Εκπαιδευτές Πληροφορικής !
Puppy 07/30/2017
Εναλλακτικά, θα μπορούσαν να δημιουργήσουν το HTML τους μέσω κώδικα σαν ένα λογικό πρόσωπο, οπότε είναι ασήμαντο να αλλάξουμε το χρώμα κάθε στοιχείου χωρίς ξεχωριστά φύλλα στυλ.
1 thehayro 07/30/2017
Σίγουρος. Αυτό εξαρτάται από τις απαιτήσεις για την εμφάνιση της ιστοσελίδας (κινητό / επιτραπέζιο). Αλλά το ερώτημα στο βαθμό που το κατάλαβα ήταν πώς να εξηγήσω γιατί και πώς υπάρχει ανάγκη για διαχωρισμό του HTML και του CSS.
no comprende 08/01/2017
Όταν έμαθα το CSS, έδωσα τον εαυτό μου τα καθήκοντά του να δημιουργήσω μια ξανά μεσαία σκακιέρα και μια κανονική διάταξη σελίδων τριών στηλών με επικεφαλίδα και υποσέλιδο.

SpiritBH 07/31/2017.

Καλά ρωτήστε τον εαυτό σας: Γιατί χωρίζουμε οτιδήποτε σε οποιαδήποτε μορφή κώδικα;

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

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

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

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

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

1 comments
ItamarG3 07/31/2017
δημιουργείς μερικά πολύ ενδιαφέροντα σημεία. Ευχαριστώ! και καλωσορίσατε στους Εκπαιδευτές Πληροφορικής

gabe3886 07/31/2017.

Ένας ελαφρώς διαφορετικός τρόπος να το δούμε μπορεί να είναι να εισαγάγει τον κώδικα DRY (Do not Repeat Yourself).

Χρησιμοποιώντας το CSS για να κάνετε το styling, γνωρίζετε ότι προσθέτοντας απλά μια κλάση σε ένα στοιχείο HTML, το styling πρέπει να κρατηθεί. Αν έπρεπε να προσθέσετε με το χέρι όλα, τότε όταν πρέπει να αλλάξετε ένα μέρος, πρέπει να αλλάξετε πολλά, πολλά άλλα.

Για να κλέψετε μια ιδέα απεικόνισης από τα σχολεία του W3 , αν θέλετε, πείτε, οι παράγραφοι να έχουν διαφορετικά χρώματα φόντου, θα μπορούσατε να το κάνετε με αυτόν τον τρόπο:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Αλλά, αν θέλω να αλλάξω την παραγγελία, ώστε να είναι 2,4,3,1 αλλά να κρατήσω τον χρωματισμό, τότε πρέπει να αλλάξω όλα τα στυλ που είναι ενσωματωμένα σε κάθε ετικέτα. Αν αυτό συμβαίνει σε πολλές σελίδες, τότε το φορτίο εργασίας μπορεί να γίνει τεράστιο.

Εάν το έκανα στο CSS, μπορώ να κάνω τα εξής:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

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

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

Ένα άλλο πλεονέκτημα της ύπαρξης ενός χωριστού αρχείου, μακριά από τις αρμοδιότητες διάσπασης, είναι η απόδοση. Τα προγράμματα περιήγησης είναι πολύ καλά στα αρχεία προσωρινής αποθήκευσης, οπότε αν πρέπει να μεταφορτώσει ένα μοναδικό (ιδεωδώς μικροσκοπικό) αρχείο CSS για τον ιστότοπο μια φορά που μπορεί στη συνέχεια να εφαρμοστεί ξανά, είναι ένα μικρότερο πράγμα για να το κατεβάσετε για άλλες σελίδες. Η απόδοση πρέπει πάντα να είναι μια εκτίμηση για τους ανθρώπους, ειδικά με την αύξηση της περιήγησης στο κινητό. Εάν μια ιστοσελίδα έχει πολλά CSS σε αυτήν τότε η πηγή είναι, φυσικά, μεγάλη. Αυτό απαιτεί περισσότερο χρόνο για να κατεβάσετε και / ή να καταστεί εφικτός, πράγμα που μπορεί να βάλει τους ανθρώπους μακριά από αυτό, η αναμονή γίνεται απαράδεκτη γι 'αυτούς.


ncmathsadist 08/01/2017.

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

Η εμφάνιση καθορίζεται από το CSS, το οποίο έχει πρόσβαση στο DOM για τη μορφοποίηση και το στυλ της σελίδας. Αυτό διατηρείται σε ένα ξεχωριστό αρχείο, ώστε να μπορεί να μοιράζεται από μια σχετική ομάδα σελίδων. Το HTML χειρίζεται καταστάσεις ad hoc χρησιμοποιώντας id ή class . Η χρήση αυτών καθιστά ευκολότερη τη διατήρηση σελίδων, καθώς το στυλ για αντικείμενα που φέρουν αυτά τα χαρακτηριστικά γίνεται σε one place σε ένα αρχείο CSS.

Το τρίτο επίπεδο είναι συμπεριφορά, η οποία θα πρέπει να εμφανίζεται σε ένα αρχείο JavaScript. Το JavaScript never χρειάζεται να εμφανίζεται never σε μια σελίδα, εκτός από τις λειτουργίες κλήσης από τον κώδικα χειρισμού συμβάντων. Ακόμη και αυτό μπορεί να επισυναφθεί σε ένα αρχείο JS. Βεβαιωθείτε ότι οι σπουδαστές σας γνωρίζουν σχετικά με τα συμβάντα onload και την load νωρίτερα, ώστε να καθυστερήσουν την κλήση του κώδικα μέχρι να υπάρξουν στοιχεία σελίδας.

Αν εγκαταστήσετε κόμβο, μπορείτε να εκτελέσετε δοκιμές κώδικα JS στη γραμμή εντολών και να αναπτύξετε σειρές δοκιμών για τις λειτουργίες που έχετε δημιουργήσει.

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


user1639154 07/31/2017.

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

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

Οι περισσότεροι θα βάλουν όλα τα css στο δικό τους αρχείο επειδή είναι ευκολότερο να διατηρηθεί και δεν θα απαιτήσει τόση εργασία όταν ενημερωθεί / αλλάξει.

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

5 comments
1 ItamarG3 07/31/2017
Ουάου. Καλώς ήρθατε στους Εκπαιδευτές Πληροφορικής . Αυτό είναι πραγματικά κάτι που δεν είχα εξετάσει. Θα μου άρεσε αν θα μπορούσατε να προσθέσετε κάποια παραδείγματα ή περιγραφή που δείχνουν ότι. (Μπορώ can γράψω εγώ, αλλά ενδιαφέρομαι περισσότερο να δω τι μπορείτε να σκεφτείτε). Αυτό είναι πραγματικά μια ενδιαφέρουσα απάντηση :)
1 ItamarG3 07/31/2017
Άσχετα: γιατί δεν παίρνετε την περιοδεία μας; Είμαι σίγουρος ότι θα το βρείτε ενδιαφέρον.
user1639154 07/31/2017
Το έκανα ελαφρώς λανθασμένο, το εξωτερικό στυλ φύλλου πρώτα, στη συνέχεια τα στυλ των εγγράφων και στη συνέχεια στο στοιχείο, ο εγκέφαλός μου δεν είναι ποτέ 100% σε ένα πρωινό της Κυριακής. :)
ItamarG3 07/31/2017
συγχωρώ και ξεχνώ ;). Μπορείτε να επεξεργαστείτε την απάντησή σας. Υπάρχει ένα κουμπί edit \ link απευθείας κάτω από την απάντησή σας. Ενώ βρίσκεστε σε αυτό, θα θέλατε να προσθέσετε κάποιο παράδειγμα για να δείξετε ποια είναι η απάντησή σας; Θα έκανε πραγματικά μια πολύ καλύτερη απάντηση: D
user1639154 07/31/2017
Δυστυχώς δεν έχω χρόνο τώρα. Απλά ήθελα να αναφέρω την κληρονομιά του css, καθώς είναι σημαντική πτυχή του css.

rackandboneman 08/03/2017.

Κάντε ένα έργο στο οποίο το αποτέλεσμα είναι ΔΥΟ διαφορετικές απόψεις του same document , π.χ. μια έκδοση που φαίνεται μεγάλη σε μια μεγάλη οθόνη και μια άλλη που φαίνεται μεγάλη σε ένα iPhone.

Με τη χρήση όχι μιας στατικής ιστοσελίδας, αλλά με έγγραφα που μπορούν να αναβαθμιστούν από τον υπολογιστή, θα αυξηθεί ακόμη περισσότερο το σημείο στο σπίτι, καθώς η ενσωμάτωση των πληροφοριών στυλ στη γεννήτρια εγγράφων θα καταστήσει ορατά πιο περίπλοκη - οι μόνες επιλογές για σάρωση με στυλ θα είναι είτε η αλλαγή της generator εγγράφων όλες τις παρενοχλήσεις ή το stylesheet που είναι ακριβώς αυτό που σκοπεύατε. Ακόμα καλύτερα: Αντιστοιχίστε two ομάδες σε ξεχωριστές γωνίες του δωματίου για να κάνετε το έγγραφο που παράγει και τα μέρη του φύλλου στυλ - και ρυθμίστε τον τρόπο επικοινωνίας των προδιαγραφών μεταξύ των δύο.

4 comments
ItamarG3 08/03/2017
Αυτό είναι καταπληκτικό. Ουάου.
rackandboneman 08/03/2017
Λοιπόν, κάντε το τότε αξιόπιστο.
ItamarG3 08/03/2017
Είναι απίστευτο διότι λύει ένα πρόβλημα με περιστάσεις που δεν μπορώ να αποκαλύψω (σχολικό υλικό), αλλά δεν εξετάζει exactly το ερώτημα ...
1 rackandboneman 08/03/2017
Ω, και είμαι αναμειγνύεται στη συζήτηση ως όχι δάσκαλος, αλλά ένας επαγγελματίας πληροφορικής - αυτό που περιέγραψα είναι γιατί τα πράγματα γίνονται στην πράξη ακριβώς όπως η θεωρία που θέλετε να διδάξετε λέει :)

Chris M. 08/02/2017.

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

4 comments
ItamarG3 08/02/2017
Ουάου. Δεν το είχα σκεφτεί. Μήπως θέλετε να επεκτείνετε λίγο το πώς μπορώ να το εξηγήσω αυτό σε ένα ξεχωριστό μάθημα σχετικά με τη χρήση των φύλλων στυλ CSS;
Chris M. 08/02/2017
Θα χρησιμοποιούσα μια αναλογία. Οι μηχανικοί της αυτοκινητοβιομηχανίας δεν επιλέγουν χρώματα αυτοκινήτων. Οι σεναριογράφοι γενικά δεν σχεδιάζουν κοστούμια.
ItamarG3 08/02/2017
Βλέπω. Ίσως πρέπει να συμπεριλάβετε τέτοιες αναλογίες στην απάντησή σας, επεξεργάζοντας την απάντηση.
1 Buffy 08/03/2017
Στην πραγματικότητα είναι χειρότερο από αυτό. Σε ορισμένες μεγάλες εταιρείες με σημαντική παρουσία στο διαδίκτυο, υπάρχει μια ομάδα προτύπων που κάθεται πάνω από τις ομάδες περιεχομένου και διαμόρφωσης. Εάν η διάταξη είναι ένα pixel μακριά από το πρότυπο, το κάνετε πάνω. Ένα εικονοστοιχείο.

thesecretmaster 08/03/2017.

Ένας σημαντικός λόγος για τον οποίο τα inline styles είναι κακό είναι η αναγνωσιμότητα κώδικα, απλή και απλή. Σε αυτή την περίπτωση, ένα παράδειγμα θα πρέπει να είναι αρκετό για να αποδείξει το σημείο σας:

  
The Title
This is a super great article

Σε σύγκριση με:

  
The Title
This is a super great article

Εκτός από αυτό το παράδειγμα, χωρίς να χρησιμοποιείτε τάξεις και IDs, κάνετε το DOM πιο δύσκολο να χειριστείτε χρησιμοποιώντας javascript και καθιστάτε αδύνατη τη χρήση ψευδοεξελιγμένων και μερικών από τους πολύ ωρασικούς επιλογείς CSS όπως :nth-child() και :first-child , για να αναφέρουμε μερικά.


Puppy 07/31/2017.

Θα διαφωνούσα εντελώς - το στυλ πρέπει να γίνει απευθείας σε HTML.

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

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

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

Η ύπαρξη πρωτογενούς CSS είναι εξαιρετικά προβληματική καθώς τα στυλ είναι εντελώς τυχαία και σε παγκόσμιο πεδίο και είναι δύσκολο να επαναχρησιμοποιηθούν. Κάνετε ένα όνομα κατηγορίας με την ελπίδα ότι κανένας άλλος δεν το χρησιμοποίησε. Μπορείτε να φτιάξετε τις δικές σας κλάσεις μέσα σε αυτό το στοιχείο για να προσπαθήσετε να λύσετε αυτό το πρόβλημα λίγο, αλλά τώρα δεν μπορείτε να επαναχρησιμοποιήσετε αυτές τις τάξεις σε άλλα μέρη, καθώς δεν είναι στη σωστή δομή DOM. Στη συνέχεια, θα διαπιστώσετε ότι κάποιο τυχαίο dude σε κάποιο τελείως ξεχωριστό μέρος της σελίδας σας χρησιμοποίησε την τάξη σας χωρίς να σας ειδοποιήσει και τώρα το έχετε σπάσει αλλάζοντας τα στυλ σας. Και καλή τύχη είναι ο έλεγχος τύπων, η υποστήριξη IDE, κλπ. Είναι επίσης δύσκολο να δημιουργήσετε π.χ. παραμετροποιημένες κατηγορίες ή να εφαρμόσετε παγκόσμια αντικαταστάσεις, π.χ. display: flex με display: flex και display: -webkit-flex για iOS.

Ο σωστός τρόπος αντιμετώπισης των στυλ είναι να τα αντιμετωπίζετε όπως και με οποιονδήποτε άλλο κώδικα - να τα ενσωματώνετε σε ορισμένες λειτουργίες.

5 comments
1 thesecretmaster♦ 07/31/2017
Γεια σου κουτάβι, καλωσορίσατε στους Εκπαιδευτές Πληροφορικής ! Αν θέλετε να συναντήσετε ένα άλλο κουτάβι, μπορείτε να πείτε γεια στη Buffy , που είναι μπουλντόγκ, στην κουβέντα . Αυτή είναι μια ενδιαφέρουσα απάντηση, ευχαριστώ που μοιραστήκατε την άποψή σας εδώ!
2 richard 07/31/2017
Αν και δεν συμφωνώ με όλα όσα λέτε. Βλέπω το σημείο σας. Ειδικά η τελευταία γραμμή (νομίζω ότι θα πρέπει να επεκταθεί σε αυτό). Δείξε μας πώς νομίζετε ότι πρέπει να γίνει. Ακόμα κι αν δεν συμφωνούμε 100%, θα μπορούσαμε να μάθουμε κάτι.
no comprende 08/01/2017
Η απάντησή σας θυμίζει την ώρα που έθεσα μια ερώτηση και κάποιος είπε: "Αν διαβάζεις τη λατινική μάζα". Υπάρχουν πολλοί «σωστοί» τρόποι για να κάνετε τα πράγματα, και από την άποψή σας, με το HTML που παράγεται, πράγματι δεν κάνει καμία διαφορά. Αλλά οι περισσότεροι εκπαιδευτές δεν διδάσκουν παραγόμενο HTML, όπως και οι περισσότεροι προγραμματιστές δεν μαθαίνουν πώς να γράφουν μεταγλωττιστές. Το επίπεδο που προσθέτουμε για να διευκολύνουμε τη διατήρηση των αρχείων HTML είναι περιττό με το HTML που πετάει. Θέλω κι εγώ να δημιουργήσω πράγματα, αλλά είμαι στη μεγάλη μειονότητα. Ίσως μπορούμε να μιλάμε κάποτε για τις συγκεκριμένες περιοχές;
Puppy 08/01/2017
Οι εκπαιδευτές που δεν διδάσκουν τη δημιουργούμενη HTML δεν διδάσκουν χρήσιμο HTML.
ItamarG3 08/02/2017
@ Puppy Είναι έτσι;

Related questions

Hot questions

Language

Popular Tags