Comment utiliser flotteur à des formes de style pour HTML5 et CSS3 programmation

category Ordinateurs et logiciels / Programmation / Html

Beaucoup de problèmes de mise en page semblent exiger tables. Certains l'utilisation intelligente de la CSS3 flotteur peut aider éléments avec plusieurs colonnes sans la surcharge de tables. Formes provoquent un mal de tête notamment en raison d'une forme implique souvent des étiquettes dans une colonne gauche suivie contribution éléments dans la colonne de droite.

Vous seriez probablement être tentés de mettre une telle forme dans un tableau. Ajout de balises de table permet le HTML beaucoup plus complexe et est pas nécessaire. Il est beaucoup mieux d'utiliser les CSS pour gérer la mise en page.

Vous pouvez flotter éléments pour créer des formes attrayantes sans nécessiter tables.

Comme la conception de la page devient plus complexe, il est plus logique de penser à l'HTML et le CSS séparément. Le code HTML sera vous donner une idée de l'intention générale de la page, et de la CSS peut être modifiée séparément. L'utilisation de CSS externe est une extension naturelle de cette philosophie. Commencez par regarder floatForm.html et se concentrer sur la structure HTML avant de se soucier de style:

image0.jpg
floatForm.html



Pendant que vous regardez sur ce code, notez plusieurs choses intéressantes sur la façon dont la page est conçue:

  • Le CSS est externe. CSS est définie dans un document externe. Cela rend plus facile de changer le style et vous aide à se concentrer sur le document HTML dans l'isolement.

  • Le code HTML est minime. Le code est très propre. Il comprend un formulaire avec un. Le contient des étiquettes, des éléments, et un.

  • Il n'y a pas une table. Il n'y a pas besoin d'ajouter une table comme un schéma d'organisation artificielle. Une table ne serait pas ajouter à la clarté de la page. Les éléments de formulaire se fournissent assez de structure pour permettre à tout le formatage dont vous avez besoin.

  • Les étiquettes sont une partie de la conception. Vous pouvez utiliser le étiquette élément tout au long de la forme, vous donnant un élément qui peut être de style comme vous le souhaitez.

  • Tout est sélectionnable. Vous souhaitez appliquer un style CSS pour les étiquettes, l'autre pour contribution éléments, et un troisième style à la bouton. Vous pouvez configurer le code HTML de sorte que vous pouvez utiliser les sélecteurs CSS sans nécessiter de id ou classe attributs.

  • Il y a un bouton. Vous pouvez utiliser un bouton au lieu de l'élément exprès. De cette façon, vous pouvez appliquer un style à tous les bouton éléments et un style différent à l'élément.

Concevoir une page comme celle-ci sorte de sa structure interne fournit tous les sélecteurs dont vous avez besoin est merveilleux. Cela permet de maintenir la page très propre et facile à lire. Pourtant, ne pas avoir peur d'ajouter des classes ou des identifiants si vous en avez besoin.

Il est souvent une bonne idée de regarder votre page avec HTML droite avant de commencer à déconner avec CSS.

image1.jpg

Si vous avez une page avec des styles et vous voulez voir à quoi il ressemblera sans les règles de style, utilisez Chrome outils de développement ou Firebug. Vous pouvez désactiver temporairement certaines ou toutes les règles de style CSS pour voir le contenu par défaut dessous. Cela peut parfois être extrêmement pratique.

Articles Similaires

A propos Auteur
Comment faire flotter un paragraphe pour HTML5 et CSS3 programmation Comment faire flotter un paragraphe pour HTML5 et CSS3 programmation

Paragraphes et autres éléments de niveau bloc ont un comportement par défaut bien défini dans CSS3. Ils prennent toute la largeur de la page, et l'élément suivant apparaît ci-dessous. Lorsque vous appliquez l'élément à un paragraphe, le…

Comment organiser le texte de html5 Comment organiser le texte de html5

Au-delà de leur division obligatoire dans tête et corps sections, texte dans le corps d'un document HTML peuvent être organisés dans un certain nombre de façons.Têtes de documentsÀ l'intérieur de section, vous pouvez (et probablement…

Comment remplacer styles CSS3 Comment remplacer styles CSS3

Avec des styles CSS3 héritées vient la possibilité de remplacer une règle de style hérité. Par exemple, jetez un oeil sur le code ci-dessous pour avoir une idée de ce que cela pourrait signifier:overRide.htmlCette div a seulement le style du…

Comment sélectionner des segments particuliers pour HTML5 et CSS3 programmation Comment sélectionner des segments particuliers pour HTML5 et CSS3 programmation

Parfois, vous pouvez sélectionner uniquement des segments particuliers sur votre page web HTML5 et CSS3. Jetez un oeil à la façon dont vous devriez vous référer à quelqu'un qui n'a pas apprécié vos prouesses de développement web.Définir…

Comment utiliser les styles locaux pour HTML5 et CSS3 programmation Comment utiliser les styles locaux pour HTML5 et CSS3 programmation

Un style peut être défini directement dans le corps HTML5. Voici un exemple de ce type de code. Un style local est aussi parfois appelé un niveau élément style, car il modifie une instance particulière d'un élément de la…

Comment utiliser l'attribut clair pour contrôler la mise en page pour HTML5 et CSS3 programmation Comment utiliser l'attribut clair pour contrôler la mise en page pour HTML5 et CSS3 programmation

Il devrait y avoir un moyen de faire le bon de travail de forme, indépendamment de la largeur du conteneur. CSSS3 fournit exactement comme un mécanisme qui est facile à travailler avec la conception de vos pages HTML5.La clair attribut est…

Le document HTML5 organisation revisité Le document HTML5 organisation revisité

Le cadre d'un simple document HTML se compose d'une tête et le corps. La tête fournit des informations sur le document sur le navigateur (et parfois aussi pour le serveur Web), et le corps contient du contenu qui apparaît dans la fenêtre du…

Comment ajouter html vers une page avec jQuery Comment ajouter html vers une page avec jQuery

jQuery peut être utilisé pour ajouter du code HTML à une page. Vous pouvez ajouter toutes sortes de HTML, des images, à peu près tout, et changer complètement la présentation de la page en utilisant jQuery. Cela est pas vraiment une bonne…

Éléments HTML de base Éléments HTML de base

HyperText Markup Language (HTML) est le langage de l'âme, où éléments dicter la forme et le style de votre contenu. Éléments HTML composent le codage téléchargé que vous voyez quand vous allez à une page Web dans votre navigateur Web…

Comment feuilles de style en cascade améliorer html Comment feuilles de style en cascade améliorer html

CSS (Cascading Style Sheets) était une technologie recommandée par le World Wide Web Consortium (W3C) en 1996. Un moyen facile de comprendre le but de CSS est de le considérer comme un ajout à HTML qui permet de simplifier et d'améliorer la…

Comment créer un tableau simple sur votre page web Comment créer un tableau simple sur votre page web

Tables vous permettent d'organiser des informations sur votre page Web et lui donner un look organisée que vos visiteurs trouveront utile. Lorsqu'il est utilisé comme prévu, les tables sont rangées et de colonnes. Pour chaque endroit où une…

Placer css dans votre conception de sites Web Placer css dans votre conception de sites Web

Vous pouvez utiliser les feuilles de style en cascade (CSS) dans vos pages Web de trois façons: externe, interne, et en ligne. Que vous utilisez dépend de comment vous voulez que votre conception de travailler.CSS externeExterne est la meilleure…

Mise en place en html css Mise en place en html css

CSS est un langage de feuille de style utilisée pour définir l'apparence et le formatage d'un document écrit dans un langage de balisage - souvent HTML. UN style en ce sens, est un ensemble de formatage de texte des instructions, telles que la…

Comment créer un site web avec HTML5 Comment créer un site web avec HTML5

Concepteurs de sites Web utilisent souvent des termes comme Architecting, bâtiment, et construction quand ils parlent de la création de pages Web, car il ya beaucoup de similitudes entre la construction d'une maison et la conception d'un site web…

» » » » Comment utiliser flotteur à des formes de style pour HTML5 et CSS3 programmation