Εκφράζοντας IT

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

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

#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}

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

Πρόβλημα: Το αντικείμενο δεν υποστηρίζει αυτή την ιδιότητα ή μέθοδο (on line 3)

 function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } 

Λύση:
Το σφάλμα προκαλείται στην thirdrow στο παραπάνω παράδειγμα (Γραμμή 3 ... "shortdesc = document.getE ...."). Δοκίμασα κάθε είδους από τα ηλίθια πράγματα που Ι dont ακόμη και αξίζει την αναφορά εδώ και, τέλος, μάντεψε! απλά αλλάζοντας το var shortdesc σε κάτι άλλο πια απαλλαγεί από το σφάλμα. Βασικά! Το όνομα της μεταβλητής έπρεπε να διαφέρει από το fieldID

Για λίγες ώρες τώρα έχω ψάξει τις λύσεις για να τρέξει / στατική δοκιμή HTMLs μου στην Eclipse / Android εξομοιωτή. Δεν ήταν απόλυτα επιτυχημένη ακόμα .... τι εννοώ με "Εντελώς" είναι η HTML φορτώνει όλα ΟΚ, αλλά το CSS και JS, δηλαδή η οπτική έκφραση δεν έχει δει. Σύμφωνα με τα λόγια του έργου, το CSS δεν εφαρμόζεται στη σελίδα ...

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

Και Android γκουρού, προσθέστε τα σχόλιά σας για να μας βοηθήσει αρχάριους στο κινητό προγραμματιστές UI εφαρμογή περαιτέρω!

Συγγνώμη! αλλά Im υποθέτοντας ότι ξέρετε πώς να δημιουργήσετε ένα Android κινητό Εφαρμογή στην έκλειψη.

Δημιουργήστε αυτό ως δραστηριότητα σας? Αυτό θα διαβάσει "index.html" του αρχείου από τα περιουσιακά στοιχεία του έργου / φάκελο σας.

 public class Test extends Activity {  /** Called when the activity is first created. */  @Override  public void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    WebView webview = new WebView(this);    setContentView(webview);    try {      InputStream fin = getAssets().open("index.html");        byte[] buffer = new byte[fin.available()];        fin.read(buffer);        fin.close();        webview.loadData(new String(buffer), "text/html", "UTF-8");    } catch (IOException e) {      e.printStackTrace();    }  } } 

Re-Ποδηλασία είναι Buzzword και στην ανάπτυξη Web δεν σημαίνει ότι δεν υπάρχουν διαφορετικές. Είναι εξοικονομεί ενέργεια, από την άποψη της προσπάθειας!

Πάνω από χρόνια γράφοντας CSS και HTML από τη δημιουργία σχεδίων, έχω ακολουθήσει μερικές από τις καλύτερες πρακτικές, για την επιδίωξη των εξοικονομώντας χρόνο και ενέργεια σε αυτό που συνήθως ως όρος «επανεφεύρεση του τροχού». Ξανά και ξανά, έχω τον εαυτό μου είπαν, ότι πρέπει να δημιουργήσει μερικά πρότυπα, μερικά πρότυπα επαναχρησιμοποιήσιμα CSS ότι θα χρησιμοποιήσετε ΑΠΟ ΤΗ ΣΥΣΚΕΥΑΣΙΑ στο μέλλον τη δουλειά μου. Αν και δεν είναι εντελώς, αλλά δεν είχα καταφέρει να επιτύχει ορισμένους από τους στόχους.

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

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

Κλειδιά ανακύκλωση των CSS:

Χρησιμοποιήστε συμβάσεις ονομασίας

Αυτό πρέπει να είναι ο πιο σημαντικός παράγοντας στη λήψη της CSS / HTML επαναχρησιμοποιήσιμα. Δίνοντας ονόματα συνεπείς με τα στοιχεία της σελίδας επιτρέπει την επαναχρησιμοποίηση των συστατικών σελίδα και στυλ τους με ελάχιστη ή τροποποιήσεις. Σύμφωνα με αυτό το επιχείρημα, ακόμη και HTML5, σε μια σημαντική αλλαγή για την αλλαγή τους προκατόχους του, είναι να εισαγάγει κάποια συγκεκριμένα διαρθρωτικά ετικέτες. <article>, <section>, <header>, <aside>, και <nav> [ Τι θα φέρει το HTML5; ]. Ακόμη και με την HTML 4 (ή κάτω), είναι καλύτερα να αναφέρουμε πρότυπο ενότητες της σελίδας σας consistanly όπως στο παρακάτω απλό παράδειγμα ...

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

  <div id="container">
    <div id="header"> ... </ p>
    <div id="nav"> ... </ p>
    <div id="sidebar"> ... </ p>
    <div id="footer"> ... </ p>
   </ Span> 

Επαναφορά προεπιλεγμένων στυλ (CSS Επαναφέρει): Είτε θέλετε να χρησιμοποιήσετε ένα πλαίσιο ή γράψε τη δική σου, θα πρέπει να παρέχουν CSS Επαναφέρει [ Τι είναι CSS Επαναφέρει; ], όπως τη μείωση ή την εξάλειψη της οπτικής μερικές φορές αντιφάσεις που εμφανίζονται μεταξύ των διαφόρων browsers. Με απλά λόγια ο μηχανισμός επαναφοράς CSS ορίζει το στυλ του στοιχείου HTML στο μηδέν ή μηδενικές τιμές, με αποτέλεσμα να παρακάμψετε τις προεπιλεγμένες τιμές πρόγραμμα περιήγησης μπορεί να δημιουργεί. Αυτό παρέχει μια καθαρή πλάκα για να ρυθμίσετε τις ιδιότητες αυτών των στοιχείων άκυρη κάθε User-Agent προεπιλογών [ CSS2.1 προεπιλογών χρήστη Φύλλο στυλ Agent ]. Όλα τα πλαίσια CSS χρειάζεται επαναφορά του μηχανισμού. Αν γράφετε το δικό σας Επαναφέρει CSS, μια λέξη της προσοχής είναι ότι, αν τύχει να ξεχάσετε να επαναφέρετε μια βασική ιδιότητα, θα μπορούσε να οδηγήσει σε cross-browser ζητήματα, που είναι πολύ δύσκολο για τον εντοπισμό σφαλμάτων. Θυμηθείτε, Κρατήστε ένα αντίγραφο των επαναφορά στυλ και απόθεση τους σε κάθε νέο έργο που δημιουργείτε.

  σώμα, div, dl, dt, dd, ul, ol, Li,
  H1, H2, H3, H4, H5, H6,
  προ, τη μορφή, πεδίων, των εισροών, επιλέξτε, textarea,
  p, blockquote, τραπέζι, ου, TD
  {
    σύνορα: 0px?
    margin: 0?
    padding: 0?
  } 

Ορισμός προεπιλογών (Στυλ Baseline) Στοιχεία για:

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

Οι περισσότεροι πλαισίων CSS, πάντα εισάγει ορισμένες νέες προεπιλογές, εκτός από την επαναφορά στυλ προεπιλεγμένο πρόγραμμα περιήγησης.
Αυτές οι προεπιλογές είναι άκυρες των User-Agent προεπιλογών (απογυμνωθεί μακριά από το Reset CSS), αυτά θα είναι συνεπής σε όλους τους φυλλομετρητές.

Θυμηθείτε, τα στυλ εκκίνησης χρησιμοποιούνται για να ορίσετε στυλ που πρόκειται να χρησιμοποιηθούν για το σχεδιασμό επίπεδο. π.χ..

  html {font-size: 77%? font-family: Arial, sans-serif?}
 ισχυρή, H1, H2, H3, H4, H5, H6 {font-weight: bold?} 

Περίληψη Στυλ για την Κοινή HTML Εξαρτήματα και κοινές κατατάξεις:

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

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

  input μορφή {border: 0px? υπόβαθρο: # ffffff? padding: 0px 10px? _padding: 0px 0px? ύψος: 26px? χρώμα: # 000000? γραμμή-ύψος: 30px? font-size: 1.1em?}
 textarea μορφή {border: 0px? υπόβαθρο: # ffffff? χρώμα: # 000000? font-size: 0,9 em? γραμμή-ύψος: 1.5em? υπερχείλιση: ορατός?}
 . Fbold {font-weight: τολμηρό? Χρώμα: # cccccc?}
 . Fgrey {color: # 666666?}
 . Flightgrey {color: # bbbbbb?}
 . Clearfix {σαφής: τόσο?}
 . Διαχωριστικό {σύνορα-top: 1px solid # 647B06? Σύνορα-κάτω: 1px solid # 9CC00A? Ύψος: 0px?}
 . Displayb {display: block?}. Displayn {display: none?}
 . Alignr {text-align: right}. Alignc {text-align: center}
 . Floatr {float: δικαίωμα?}. Floatl {float: αριστερά?} 

Διορθώσεις στην κοινή ιδιορρυθμίες φυλλομετρητή

Διάφορα προγράμματα περιήγησης εφαρμόσουν κώδικα CSS και παρέχει διαφορετικό επίπεδο υποστήριξης για τις προδιαγραφές CSS. Το αποτέλεσμα αυτό .... "Παραξενιές Browser", ότι είμαστε προγραμματιστές έφυγαν για την αντιμετώπιση της. Ειδικά, IE6 στοιχειώνει πλέον CSS προγραμματιστές με μια προθεσμία για να ανταποκριθεί. Τα καλά νέα είναι ότι η εμπειρία έχει συγκεντρώσει το δυνατόν ΕΠΑΝΑΧΡΗΣΙΜΟΠΟΙΗΣΙΜΗ διορθώσεις σε αυτά τα θέματα (όπως αποκαλείται συχνά CSS αμυχές ).

Θυμηθείτε, Κρατήστε αυτές τις αμυχές / διορθώσεις πρακτικό

  / * Το ζουμ εξής: 1 κανόνας είναι ειδικά για τον IE6 + IE7.  * /
    * Html. Clearfix,
    *:. Πρώτο παιδί + html {clearfix
           ζουμ: 1?
      } 

Κρατήστε Εξευγενισμός CSS σας

• Η συνήθεια της ανακύκλωσης δεν θα έρχονται σε σας με την ημέρα. Πρέπει να αναπτυχθεί. Έτσι σχεδιάζουν σας Re-Ποδηλασία. Έχετε αυτό στο μυαλό σας ότι θα μπορούσε αφηρημένη προεπιλογές στυλ, ορισμοί τυπογραφία, σχεδιαγράμματα, HTML Στυλ Στοιχείων κ.λπ. Προσπαθήστε να σκεφτούμε το μέλλον.
• Επίσης κοιτάζουμε πίσω στο παρελθόν τα έργα σας, θα βοηθήσει στον εντοπισμό στυλ ότι έχετε την τάση να χρησιμοποιείτε συχνά σε όλη την porjects. Περίληψη αυτό.
• Αφαιρέστε τυχόν αχρησιμοποίητο στυλ. Η πρακτική αυτή θα κρατήσει πλαίσιο CSS σας από ένα κοινό σύμπτωμα που ονομάζεται «Φούσκωμα» -
• Αφαιρέστε επαναλαμβανόμενες μορφές.
• Φτιάξτε ένα σύνολο στυλ που είναι αρκετά ευέλικτο ώστε να το μεταφέρουν σε όλα τα έργα.

Μια ματιά στα πλαίσια CSS

Τέλος. Αν είναι εμπνευσμένα και σκοπεύουν να χρησιμοποιήσουν ένα ή περισσότερα από τα πλαίσια CSS, Heres είναι γρήγορη λίστα με μερικές δημοφιλείς ....

• 960 ΔΕΣΜΗΕ : Το 960 ΔΕΣΜΗΕ είναι μια προσπάθεια για τον εξορθολογισμό web ανάπτυξη της ροής εργασίας με την παροχή που χρησιμοποιούνται συνήθως διαστάσεις, βασίζεται σε πλάτος 960 pixel. Υπάρχουν τρεις παραλλαγές: 12, 16 και 24 στήλες, οι οποίες μπορούν να χρησιμοποιηθούν χωριστά ή σε συνδυασμό. Η σκέψη ότι τίποτα δεν μπορείτε να δημιουργήσετε ένα για το δικό σας αρκετά εύκολα, το πλαίσιο προβλέπει πρότυπα πλέγμα για εκτύπωση σε μορφή PDF, το οποίο μπορεί κανείς να χρησιμοποιήσει για να σκίτσο designs.Bet σελίδα σας, αυτό θα κάνει μια επαγγελματική εντύπωση, αν φέρετε μερικά φύλλα όταν πηγαίνετε σε έναν πελάτη για τη συλλογή UI απαιτήσεις. Παρέχει επίσης βασικές πρότυπα πλέγμα για γνωστά σχεδιαστικά προγράμματα όπως το Fireworks, Flash, InDesign, Illustrator, Photoshop, το Visio, κ.λπ. παρέχοντας μια "μίζα για δέκα" για να ξεκινήσει το έργο το σχέδιό σας.
• Σχεδιάγραμμα : σχεδιάγραμμα παρέχει ευδιάκριτα ταξινομούνται τα αρχεία CSS για Επαναφέρει, πλέγματα, έντυπα, εκτύπωση, τυπογραφία, για Plug-κουμπιά, καρτέλες και ξωτικά κλπ. Επίσης παρέχει υποστήριξη για το IE ως ξεχωριστό περιλαμβάνουν.
• SenCSs : Σε αντίθεση με τους δύο παραπάνω, SenCSs (προφέρεται Sense), δεν έχει ορισμούς για CSS διάταξης. Κάνει περιλαμβάνουν γραμματοσειρές, μαξιλαράκια, τα περιθώρια, πίνακες, λίστες, κεφαλίδες, Η Eτικέτα Blockquote, φόρμες και άλλα.
• BlueTrip : αρχική απαίτηση του στη φήμη ήταν ότι, ήταν ένας συνδυασμός από τα καλύτερα χαρακτηριστικά γνωρίσματα που παρέχονται από άλλα πλαίσια, όπως άλλοι μπλε εκτύπωσης, ταξιδιού oli ... απ 'όπου παίρνει το όνομά του. Το χαρακτηριστικό της περιλαμβάνει 24-στήλη πλέγματος, στυλ τυπογραφίας, στυλ ORM, εκτύπωσης, κουμπιά κλπ.
• YUI πλέγματα : Έφερε σε σας από το δίκτυο προγραμματιστών Yahooo, υποστηρίζει υγρό πλάτους (100%) σχεδιαγράμματα καθώς και προκαθορισμένο σταθερό πλάτος σε διατάξεις 750px, 950px, και 974px, και η δυνατότητα εύκολης προσαρμογής σε οποιοδήποτε αριθμό. Όπως μπορείτε να δείτε, του μόνο τα τεχνικά Εξαρτήματα διάταξη. YUI παρείχε επίσης HTML / CSS σύνολα για άλλα στοιχεία σελίδας
• YAML (Yet Another Multicolumn Διάταξη)
• Emastic

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

CSS συμπλήρωσε 10 χρόνια ύπαρξης του τρέχοντος έτους! Εκείνοι που ήταν γύρω για μια στιγμή, κερδίζοντας το ψωμί τους (ή όχι) με χρήση CSS, τότε ίσως να γνωρίζει πώς έχουν πείνα για μια καλή επιλογή των γραμματοσειρών. Ακόμη και με την έλλειψη των γραμματοσειρών σχεδιαστές όπως αυτές στο css Zen Garden έχουν κάνει χρήση των CSS εικόνες φόντου για την αντικατάσταση γραμματοσειρών κατά την άσκηση του κάνει τη δικαιοσύνη για τα σχέδιά τους. Έχουμε επίσης προσπαθήσει Flash / JavaScript ® αμυχές να επιτύχει τους στόχους του σχεδιασμού μας. Με κανένα τρόπο αυτός είναι ένας λανθασμένος τρόπος για να πάρετε τις γραμματοσειρές που επιθυμούμε σε σχέδια ιστοσελίδα μας, αλλά σίγουρα, δεν είναι το πιο επιθυμητό τρόπο. και το πέρασμα των ετών σχεδιαστής ιστοσελίδων, όπως εγώ, έχουν πλήρως στηρίχθηκε σε δέκα ή έτσι γραμματοσειρές για τα σχέδιά τους.

Οι πρόσφατες εξελίξεις στο Web Standards και μορφή της γραμματοσειράς να είναι δυνατόν να καταστήσουν το κείμενο σε μορφή HTML γραμματοσειρές, εκτός από τα ίδια παλιά προεπιλεγμένες γραμματοσειρές. Έρχεται στο "@ fontface" decleration CSS.

@ Fontface provids μια λύση για τη σύνδεση με το πραγματικό αρχείο γραμματοσειράς και να ανακτούν από το web. Χρησιμοποιώντας @ fontface, οι σχεδιαστές μπορούν να χρησιμοποιήσουν τις γραμματοσειρές χωρίς να χρειάζεται να παγώσει το κείμενο ως εικόνες φόντου. Η εφαρμογή είναι πολύ απλή, όπως φαίνεται παρακάτω, αλλά όπως όλα τα καλά πράγματα έχουν ένα CON μέρος σε αυτό, όλοι οι browsers δεν υποστηρίζουν μια ενιαία "γραμματοσειρά". Εάν σκοπεύετε να χρησιμοποιήσετε @ fontface σε site με σταυρό που απαιτούν υποστήριξη του προγράμματος περιήγησης, τότε θα πρέπει να παρέχουν σε διάφορες πηγές font-τύπους του ίδιου.

1. TrueType - Μια μορφή σχεδιαστεί για να φαίνονται καλά στην οθόνη. Συνιστάται ιδιαίτερα για τα Windows browsers (Chrome).
2. OpenType (CFF) - Αυτό το σχήμα είναι το καλύτερο για την εργασία εκτύπωσης και δεν είναι πάντα φαίνονται καλά στα Windows.
3. ΕΟΤ - Θα πρέπει αυτήν τη μορφή, αν θέλετε να στοχεύσετε τον Internet Explorer. IE δεν θα χρησιμοποιήσετε οποιαδήποτε άλλη μορφή. ΕΟΤ για μας θα μπορούσε να θεωρηθεί «Lite», δεδομένου ότι δεν είναι συμπιεσμένο ούτε περιορίζεται σε τομέα.
4. SVG - Αυτό είναι ένα XML μορφή που υποστηρίζεται από ορισμένα προγράμματα περιήγησης όπως το iPhone.
5. WOFF - Αυτό το cross-browser, web-μόνο τη μορφή των γραμματοσειρών είναι ελαφρύ (γραμματοσειρά δεδομένα είναι συμπιεσμένα zip) και μπορούν να καταρτίζονται είτε με TrueType ή PostScript (CFF) περιγράφει. Είναι αυτή τη στιγμή υποστηρίζεται από τον Firefox 3.6 +.

Χρησιμοποιώντας @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular"?
 src: url ("CalligraphyFLF.eot»)?
 src: τοπική αυτοδιοίκηση («CalligraphyFLF»), οι τοπικές («CalligraphyFLF»), url («CalligraphyFLF.woff») μορφή («WOFF»), url («CalligraphyFLF.ttf») μορφή («TrueType»), url ("CalligraphyFLF . svg # CalligraphyFLF ») μορφή (SVG)?
 }
 @ Font-face {
   font-family: "γραμματοσειρά σας"?
   src: url ("γραμματοσειρές / font_filename.eot")?
   src: τοπική αυτοδιοίκηση («Εναλλακτική ονομασία"), τοπική ("Alternatename"),
     url ("γραμματοσειρές / font_filename.woff") μορφή ("WOFF"),
     url ("γραμματοσειρές / font_filename.otf") μορφή ("OpenType"),
     url ("γραμματοσειρές / font_filename.svg # font_filename") μορφή ("SVG")?
   }
 H2 {font-family: "γραμματοσειρά σας", στη Γεωργία, serif?} 

Όπως μπορείτε να δείτε από το παραπάνω παράδειγμα, να περιλαμβάνουν την επιλεγμένη γραμματοσειρά γραμματοσειράς, πρέπει να συνδεθούν με ένα σύνολο fonttypes για την ίδια γραμματοσειρά. Ως εκ τούτου, οι άνθρωποι αναφέρονται σε αυτό ως «κιτ γραμματοσειράς".
Υπάρχουν διαθέσιμα πακέτα γραμματοσειρών που ρητά επιτρέπει τη σύνδεση με την ιδιότητα CSS @ font-face δυνάμει της Άδειας Χρήσης Τελικού Χρήστη (EULA).

Χρήσιμες Πηγές WebFont:

• Γραμματοσειρές για ενσωμάτωση @ font-face σελίδα στο wiki http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Αυτός είναι ένας διάσημος σχεδιαστής γραμματοσειρών που έχει κάνει εκατοντάδες ενδιαφέρουσες γραμματοσειρές TrueType ελεύθερα διαθέσιμα για χρήση στο web. Γραμματοσειρές του είναι κομψό, διακοσμητικά, και παιχνιδιάρικο.
• Dieter Steffmann είναι μια άλλη μεγάλη σχεδιαστής γραμματοσειρών. Έχει, επίσης, έχει κάνει πολλές όμορφες γραμματοσειρές που είναι διαθέσιμες για οποιονδήποτε να το χρησιμοποιήσει.
• Κατάστημα Γραμματοσειρά : προσφέρει γραμματοσειρές που έχουν σχεδιαστεί ειδικά για χρήση ιστοσελίδων. Περισσότερα από 30 από τις πιο επιτυχημένες οικογένειες FontFont είναι τώρα διαθέσιμο ως FontFonts Web. FontShop έχει επίσης ένα λεπτομερές εγχειρίδιο WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Σκίουρος Γραμματοσειρά : Βιτρίνες όλες τις γραμματοσειρές που προσφέρει σκίουρος γραμματοσειράς για χρήση με ενσωμάτωση @ font-face CSS. Σκίουρος γραμματοσειράς προσφέρει μια εντυπωσιακή ποσότητα του τύπου, καθιστά νεκρός απλό να ξεχωρίσω μία, και επιδέξια προσφέρει "πακέτα" - η γραμματοσειρά της επιλογής σας, σε διάφορες μορφές, συσκευασμένα με επίδειξη HTML και CSS που χρησιμοποιεί πολύ ρεύμα @ font-face σύνταξη . Προσφέρουν επίσης έναν τρόπο για να φτιάξετε το δικό @ font-face κιτ σας . Εάν η γραμματοσειρά που θέλετε να χρησιμοποιήσετε έχει αδειοδοτηθεί κατάλληλα (αυτοί που έρχονται με τον υπολογιστή σας δεν είναι απαραίτητα καλά), η γεννήτρια παράγει ΕΟΤ, SVG, και hey! WOFF αρχεία.

Με περιορισμένες δεξιότητες σετ μου με εργαλεία όπως το Photoshop και Illustrator, μπορώ να ομολογήσω με ειλικρίνεια ότι είμαι καλύτερος από ό, τι προγραμματιστής Είμαι ένας σχεδιαστής. Αλλά το ιστορικό μου με πυρήνα (διακομιστή) με την ανάπτυξη Java / PHP / COBOL, υπήρξε μια πολύ θετική επίδραση στην ανάπτυξη των δεξιοτήτων UI μου. Αυτό που εννοώ είναι, ενώ η δημιουργία των σχεδίων μου, δηλαδή κάθε φορά που κάνω το σχεδιασμό, σκέφτομαι πως ο σχεδιασμός μπορεί να μετατραπεί σε καλύτερη HTML-CSS και κάνοντας το HTML-CSS, δίνω μια σκέψη για το backend τεχνολογία και να λογικά ότι ότι η HTML που μπορεί να εφαρμοστεί εύκολα σε XSL βρόχους ή αποσπάσματα PHP κλπ.

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

Τότε, ήρθα σε αυτό το μήνυμα σήμερα ... σχεδιαστές ιστοσελίδων που δεν μπορούν κωδικό ... Δόξα σοι ο Θεός! Είμαι απλά ένας από τους πολλούς που αισθάνονται το ίδιο ... Το παραπάνω artitle είναι λίγο πολύ ασθμαίνων .. αλλά αξίζει να το διαβάσει, κάθε λέξη του.

Ευχαριστώ τον Jay Elliot Αποθέματα ... νιώθω ανακουφισμένος!

Εδώ είναι μερικά αποσπάσματα από το άρθρο Elliots .

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

Ειλικρινά, είμαι σοκαρισμένος ότι το 2010 είμαι ακόμα έρχονται σε «σχεδιαστές ιστοσελίδων» που δεν μπορούν να κωδικοποιήσουν τα δικά τους σχέδια. Καμία δικαιολογία.

... Θα έχουν πάει λίγο πιο συγκεκριμένος στο tweet μου. Μιλούσα για τους σχεδιαστές που δεν έχουν καν την πιο βασική HTML και CSS δεξιότητες για να μετατρέψει μια επίπεδη σχεδίαση σε πραγματικό χώρο. Δεν ανθρώπους που σκόπιμα επιλέγουν να μην κωδικό? Αυτοί που δεν μπορούν. Και είμαι επίσης αναφέρεται μόνο στον κώδικα front-end εδώ? Φυσικά είναι γελοίο να πιστεύουν ότι οι σχεδιαστές θα πρέπει επίσης να είναι εκπληκτικό back-end προγραμματιστές ...

Παίρνουμε «web» σχέδια έστειλε στο Illustrator, 300dpi, αδύνατο να κώδικα, δεν υπάρχει συνοχή / χρηστικότητα.
~ Η Amy Mahon

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

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

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

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

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

HTML5 είναι ακόμα ένα σχέδιο. Όπως έχω γράψει, οι εργασίες για την HTML 5, η οποία άρχισε το 2004, εξακολουθεί να δίνεται σχήμα με μια κοινή προσπάθεια μεταξύ του W3C για την HTML WG και την WHATWG . Η λέξη είναι ότι η επόμενη γενιά θα έχει HTML βελτιώσεις και χαρακτηριστικά, τα οποία θα νέα δομή και τη σημασιολογία, τη μορφή των ελέγχων, APIs, πολυμέσα κ.λπ. ετικέτες.

Με απλά αγγλικά ... τι θα σημαίνει για μας προγραμματιστές UI ...

• Επιπλέον θα υπάρχει κάποια διαρθρωτικά δηλαδή ετικέτες. <article>, <section>, <header>, <aside>, και <nav>, η οποία θα αντικαταστήσει την πλειοψηφία των <div> s που χρησιμοποιείται σε μια ιστοσελίδα, κάνοντας τις σελίδες σας λίγο πιο σημασιολογικό, αλλά το πιο σημαντικό, πιο εύκολο για να διαβάσετε.
  Hey! Φανταστείτε την προσπάθεια που αποθηκεύονται στο συμπέρασμα ότι ένας λείπει κοντά tag div.
  π.χ.

  <body>
   <header> ... </ κεφαλίδα>
   <nav> ... </ nav>
   <article>
     <section>
       ...
     </ Τμήμα>
   </ Άρθρο>
   <aside> ... </ μέρος>
   <footer> ... </ υποσέλιδο>
 </ Body> 

Αντί της

  <body>
   <div id="header"> ... </ p>
   <div id="nav"> ... </ p>
   <div class="article">
     <div class="section">
       ...
     </ Span>
   </ Span>
   <div id="aside"> ... </ p>
   <div id="footer"> ... </ p>
 </ Body> 

• Με την έλευση του ήχου και βίντεο όπως το YouTube, τη χρήση των ενσωματωμένων πολυμέσων στην ιστοσελίδα έχει increaded από φορές. Λαμβάνοντας αυτό υπόψη, Τώρα το σχέδιο είναι να προσθέσετε εγγενή υποστήριξη για την ενσωμάτωση βίντεο και ήχου στο ίδιο το πρόγραμμα περιήγησης, ως εκ τούτου, επιτρέπει στους χρήστες να παίξουν, παύση, διακοπή, αναζητούν, και να ρυθμίσετε την ένταση χρησιμοποιώντας την ενσωματωμένη DOM API για σενάρια για τον έλεγχο της αναπαραγωγής.

π.χ.

  <video poster="poster.jpg">
     <Πηγή src = "video.3gp" τύπος = "video/3gpp"
     μέσων = "χειρός">
         <source src="video.mp4" type="video/mp4">
 </ Βίντεο>
 <audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </ Audio> 

• Καλύτερη-καθορισμένη σημασιακή ρόλους για τα υπάρχοντα στοιχεία, π.χ. για. <strong> και <em> μπορεί τώρα να έχουν πραγματικά διαφορετικές έννοιες δηλαδή που θα συμπεριφέρονται διαφορετικά.

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

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

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

Δήλωση Πρόβλημα:
I και έτσι μπορεί να πολλές από τις άλλες σοβαρές web developers να έχουν παρατηρήσει περισσότερα από ένα πολλές φορές, ότι όταν υπάρχει ένθετο επιπλέει στη διάταξη, με υπερίπτανται ορισμένες συνδέσεις (ετικέτες άγκυρα), το δοχείο που περιέχει φαίνεται να μετατοπίσει μερικά εικονοστοιχεία προς τα δεξιά . Έχω προσπαθήσει να το google λύσεις για το θέμα αυτό, αλλά έχουν βρει σχεδόν καμία λογική απάντηση στο γιατί και όταν συμβαίνει (που μπορεί να βοηθήσει να αποτρέψει αυτό το ζήτημα από το να συμβεί), ως εκ τούτου, δεν έχω βρει μια σαφή λύση στο πρόβλημα, είτε ...

Πιθανή Λύση:
Από την εμπειρία, έχω δει το 90% τοις εκατό των φορές, δηλαδή, ότι το θέμα αυτό καθορίζεται με την προσθήκη ενός ακινήτου ζουμ στον ορισμό του CSS της στη λανθασμένη συμπεριφορά δοχείο ...

 # {Somediv
       ζουμ: 1?
 }

και πάλι οι λόγοι είναι ασαφείς ... δοκιμάστε αυτό ...
Ορισμένα στοιχεία στην Ιρλανδία έχουν ένα "hasLayout" περιουσία, η οποία είναι "αλήθεια" από προεπιλογή. Πολλές συμπεριφορές οπτικής CSS? Για παράδειγμα, ένα άλφα φίλτρο λειτουργεί μόνο σε ένα στοιχείο που hasLayout. και το {Zoom: 1} φαίνεται να δίνει τα στοιχεία του ακινήτου στόχο hasLayout .... Χρήσιμες; Δεν σκέφτομαι έτσι ...

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

• Η δήλωση τύπου εγγράφου πρέπει να είναι παρόντα κατά την έναρξη ενός εγγράφου που χρησιμοποιεί την HTML σύνταξη. Μπορεί να χρησιμοποιηθεί προαιρετικά στο πλαίσιο του σύνταξη XHTML, αλλά δεν απαιτείται. Το έγγραφο XHTML δεν χρειάζεται να περιλαμβάνει το DOCTYPE επειδή XHTML έγγραφα που παραδίδονται χρησιμοποιώντας σωστά ένα XML τύπο MIME και υποβάλλονται σε επεξεργασία, όπως XML από τα προγράμματα περιήγησης, τα πάντα καθίστανται σε καμία λειτουργία παραξενιές.

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

Οφέλη από τη χρήση HTML

• Προς τα πίσω συμβατό με τις υπάρχουσες μηχανές αναζήτησης
• Συγγραφείς είναι ήδη εξοικειωμένοι με τη σύνταξη
• Η επιεικής και να συγχωρεί σύνταξη σημαίνει ότι δεν θα υπάρξει χρήστη εχθρικό " Κίτρινο οθόνη του θανάτου ", εάν ένα λάθος γλιστρήσει κατά λάθος μέσω
• Βολικό σύνταξη στενογραφία, π.χ. συγγραφείς να παραλείψετε μερικές ετικέτες και τις τιμές παραμέτρου

Οφέλη από τη χρήση XHTML

• Αυστηρή σύνταξη XML ενθαρρύνει τους συγγραφείς να γράφουν καλά σχηματισμένα σήμανσης, το οποίο ορισμένοι συγγραφείς μπορούν να βρουν ευκολότερα να διατηρήσουν
• Ενσωματώνει άμεσα με άλλες λεξιλογίων XML, όπως το SVG και MathML
• Επιτρέπει τη χρήση της XML Επεξεργασίας, τα οποία ορισμένοι συγγραφείς χρησιμοποιούν ως μέρος της επεξεργασίας τους και / ή διαδικασίες έκδοσης