Zusammenfassung des CSS+Div-Layouts unter XHTML Super-Empfehlung_Erfahrungsaustausch

Mit dem Aufkommen von xml (Extensible Markup Language) verfügen strukturierte Dokumente und Daten über ein universelles und anpassungsfähiges Format, das nicht nur im Web, sondern überall angewendet werden kann. Standards werden als möglich bezeichnet.
XHTML ist die Abkürzung für The Extensible HyperText Markup Language. Auf Basis von HTML4.0 wird es um XML-Regeln erweitert, um XHTML zu erhalten. Es implementiert den Übergang von HTML zu XML.
CSS ist die Abkürzung für Cascading Style Sheets. Die Kombination aus reinem CSS-Layout und strukturiertem XHTML kann Designern dabei helfen, Erscheinungsbild und Struktur zu trennen und so den Zugriff und die Pflege der Website zu erleichtern. 1) Fügen Sie der Seite den richtigen DOCTYPE hinzu
DOCTYPE ist die Abkürzung für Dokumenttyp. Wird hauptsächlich verwendet, um anzugeben, welche Version von XHTML oder HTML Sie verwenden. Der Browser interpretiert den Seitencode gemäß der durch Ihren DOCTYPE definierten DTD (Document Type Definition).
XHTML1.0 bietet drei DOCTYPE-Optionen:
(1) Übergangsweise – sehr häufig verwendet.

(2) Streng (Streng)

(3) Frameset (Frameset)
2) Legen Sie einen Namespace (Namespace) fest
Fügen Sie den folgenden Code hinzu direkt nach der DOCTYPE-Deklaration:

Ein Namespace ist eine detaillierte DTD, die Elementtypen und Attributnamen sammelt. Mit der Namespace-Deklaration können Sie Ihren Namespace über einen Online-Adresszeiger identifizieren. Geben Sie einfach wie gewohnt den Code ein.

3) Deklarieren Sie Ihre Kodierungssprache
Damit alle XHTML-Dokumente von Browsern korrekt interpretiert werden und die Tag-Validierung bestehen, müssen sie die von ihnen verwendete Kodierungssprache angeben. Der Code lautet wie folgt:

Die hier deklarierte Codierungssprache ist vereinfachtes Chinesisch GB2312. Wenn Sie Inhalte in traditionellem Chinesisch erstellen müssen, können Sie sie als BIG5 definieren.
4) Schreiben Sie alle Tags in Kleinbuchstaben
XML unterscheidet zwischen Groß- und Kleinschreibung, also unterscheidet XHTML auch zwischen Groß- und Kleinschreibung. Alle XHTML-Element- und Attributnamen müssen in Kleinbuchstaben geschrieben sein. Andernfalls wird Ihr Dokument bei der W3C-Validierung als ungültig betrachtet. Beispielsweise ist der folgende Code falsch:

5) Alt-Attribut zu Bildern hinzufügen
Alt-Attribut zu allen Bildern hinzufügen. Das Alt-Attribut gibt an, dass Ersatztext angezeigt wird, wenn das Bild nicht angezeigt werden kann. Dies ist für normale Benutzer entbehrlich, für Nur-Text-Browser und Benutzer, die Bildschirmleseprogramme verwenden, jedoch von entscheidender Bedeutung. Erst wenn das Alt-Attribut hinzugefügt wird, besteht der Code die W3C-Korrektheitsprüfung. Beachten Sie, dass wir sinnvolle Alt-Attribute hinzufügen müssen. Das Schreiben wie folgt ist bedeutungslos:

Korrektes Schreiben:


6) Fügen Sie alle Attributwerte hinzu. Anführungszeichen
In HTML müssen Sie Attributwerte nicht in Anführungszeichen setzen, aber in XHTML müssen sie in Anführungszeichen gesetzt werden. Attribute müssen ebenfalls durch Leerzeichen getrennt werden.
Beispiel: Das ist auch falsch

7) Alle Tags schließen
In XHTML muss jedes offene Tag geschlossen werden. Leere Tags sollten ebenfalls geschlossen werden, indem am Ende des Tags ein Schrägstrich „/“ verwendet wird, um sich selbst zu schließen. Zum Beispiel:

8) Kleines Favoritensymbol
Zum Beispiel: Erstellen Sie zunächst ein 16x16-Symbol, nennen Sie es favicon.ico und platzieren Sie es im Stammverzeichnis. Betten Sie dann den folgenden Code in den Kopfbereich ein:

9) Verwenden Sie CSS, um das Erscheinungsbild von Elementen zu definieren
Ein Vorteil der Verwendung des CSS-Layouts besteht darin, dass Sie die Seite stapelweise ändern können , wodurch die Dokumentstruktur von der Präsentationsschicht getrennt werden kann, um die Arbeitslast und Serverlast zu reduzieren und die Erweiterungsmöglichkeiten und Anwendungen der Site zu erhöhen.
CSS unterscheidet nicht zwischen Leerzeichen und Groß-/Kleinschreibung.
(1) Farbwert
Der Farbwert kann als RGB-Wert geschrieben werden, zum Beispiel: color: rgb(255,0,0 ) kann es auch hexadezimal geschrieben werden, genau wie die Farbe:#FF0000 im obigen Beispiel. Wenn die Hexadezimalwerte paarweise wiederholt werden, können sie mit dem gleichen Effekt abgekürzt werden. Beispiel: #FF0000 kann als #F00 geschrieben werden. Es kann jedoch nicht abgekürzt werden, wenn es sich nicht wiederholt. Beispielsweise muss #FC1A1B mit sechs Ziffern gefüllt werden.
(2) Schriftarten definieren
Webstandards empfehlen die folgende Methode zur Schriftartendefinition:
body { Schriftfamilie: „Lucida Grande“, Verdana, Lucida, Arial, Helvetica, Song Dynasty, Sans-Serif }
Schriftarten werden in der aufgeführten Reihenfolge ausgewählt. Wenn der Computer des Benutzers die Schriftart Lucida Grande enthält, wird das Dokument als Lucida Grande bezeichnet. Wenn nicht, wird sie als Verdana-Schriftart bezeichnet, wenn es keine Verdana-Schriftart gibt, wird sie als Lucida-Schriftart bezeichnet usw.
Die Lucida Grande-Schriftart ist für Mac OS X geeignet.
Die Verdana-Schriftart ist für alle Windows-Geräte geeignet Systeme;
Lucida ist für UNIX-Benutzer geeignet
„Song Ti“ ist für Benutzer mit vereinfachtem Chinesisch geeignet
Wenn keine der aufgeführten Schriftarten verfügbar ist, kann garantiert die standardmäßige serifenlose Schriftart aufgerufen werden;
(3) Gruppenauswahl
Wenn mehrere Elemente die gleichen Stilattribute haben, kann eine Anweisung zusammen aufgerufen werden und die Elemente werden durch Kommas getrennt:
p, td, li { Font-Size: 12px; }
(4) Abgeleiteter Selektor
Sie können abgeleitete Selektoren verwenden, um Stile für untergeordnete Elemente in einem Element zu definieren, zum Beispiel:
li strong { Font-Style: Italic; Font-Weight: Normal;}
ist für die untergeordneten Elemente unten. li strong definiert einen kursiven, aber nicht fetten Stil.
(5)sélecteur d'identifiant
La mise en page CSS est principalement implémentée à l'aide du calque "div", et le style du div est défini via le "sélecteur d'identifiant". Par exemple, on définit d'abord un calque
puis on le définit comme ceci dans la feuille de style :
#menubar {MARGIN : 0px;BACKGROUND : #FEFEFE;COLOR : #666;}
où "menubar" est défini par vous-même votre nom d'identification. Notez le signe "#" devant.
Le sélecteur d'identifiant prend également en charge la dérivation, par exemple :
#menubar p { text-align : right; margin-top : 10px }
Cette méthode est principalement utilisée pour définir les calques et ceux qui sont plus complexes. et ont de nombreux éléments dérivés.
(6) Sélecteur de catégorie
Utilisez un point en CSS pour indiquer la définition du sélecteur de catégorie, par exemple :
.14px {color : #f60 ;font-size:14px ;}
sur la page , utilisez la méthode class="category name" pour appeler :
Taille de police 14px
Cette méthode est relativement simple et flexible, et peut être créée et supprimée à tout moment en fonction des besoins de la page.
(7) Définir le style du lien
Quatre pseudo-classes sont utilisées en CSS pour définir le style du lien, à savoir : a:link, a:visited, a:hover et a:active, pour exemple :
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
Les déclarations ci-dessus définissent respectivement les styles de "liens, liens visités, lorsque la souris est survolée et lorsque la souris est cliquée". Notez que vous devez écrire dans l’ordre ci-dessus, sinon l’affichage pourrait être différent de ce à quoi vous vous attendiez. N'oubliez pas qu'ils sont dans l'ordre "LVHA".
(8) Utilisez des sélecteurs en combinaison pour créer des effets de design exquis
Remplacez les points noirs ennuyeux devant les listes ordinaires non ordonnées par de beaux motifs. Sitehttp://marine.happycog.com...
Utilisez d'abord les règles CSS pour indiquer la liste non ordonnée de l'inventaire des attributs de catégorie.
ul.inventory{
list-style:disc url(/images/common/lister2.gig) inside;}
Son tag d'appel :
Angelfish(67 items)
Anges/ Frogfish (35 articles)
Angelfish(5526 articles)
Angelfish(15 articles)
(9) Les abréviations sont dans le sens des aiguilles d'une montre
margin:25px 0 25px 0;
(10) Hauteur de la ligne
hauteur de ligne : 150 % indique que l'espacement des lignes est de 150 % de la normale
10) Code structuré div (division), identifiant, classe
Utilisez-les pour écrire du xhtml compact, utilisez le CSS plus judicieusement.
(1) Les balises d'identification structurées sont différentes de celles de classe :
Si votre page d'attributs contient un div avec un identifiant "content", elle ne peut pas avoir un autre div ou un autre élément portant le même nom. . En revanche, l’attribut class peut être utilisé encore et encore sur une page.
(2) Règles pour l'identifiant
Une valeur d'identifiant doit commencer par une lettre ou un trait de soulignement. Elle ne peut pas commencer par un chiffre puis suivre des lettres, des chiffres et des traits de soulignement. Espaces et tirets : les deux ne sont pas autorisés.
11) Le site Web terminé peut aller au w3c pour une correction standard
http:validator.w3.org
http://jigsaw.w3.org/css-v ...