Ajouter DIV à la feuille de style CSS existante

beaucoup plus flexible et utile est la voie à suivre. Voici quelques bonnes pratiques de base que vous pouvez utiliser immédiatement sur votre site.

DIV et conquérir

La meilleure façon de penser à un DIV est comme une boîte. C’est un conteneur d’informations, rien de plus. La grande chose à ce sujet est que c’est une boîte qui peut contenir n’importe quoi et peut changer l’apparence du contenu à l’intérieur. Il est utilisé pour le contenu de « niveau bloc » (par exemple: de gros morceaux de texte, ou des groupes d’images ou des ensembles de boutons de navigation) afin que vous puissiez définir les règles de présentation de ce contenu. Il existe également une balise qui est le petit frère de la DIV, appelée SPAN, qui est utilisée pour modifier l’apparence du contenu en ligne. Bien que cela soit utile, SPAN n’a rien sur les nombreuses utilisations différentes d’un DIV bien conçu.

Comment DIV avec style (Sheets)

Si vous ouvrez une feuille de style, il y a de fortes chances que vous trouviez plusieurs classes conçues pour fonctionner avec les DIV sur la page. Il existe plusieurs types différents, mais quatre des plus courants sont l’en-tête, le contenu, la barre latérale et le pied de page. Les noms de ces DIV vous donnent une bonne idée de leur objectif. Voici quelques exemples de la manière dont ils peuvent être utilisés dans une structure CSS existante.

Vous souhaitez peut-être configurer la section HEADER. Tout d’abord, configurez une classe de HEADER qui ne peut être utilisée qu’avec les DIV. Ensuite, commencez à façonner les propriétés du texte, des bordures et des arrière-plans que vous espérez utiliser:

DIV.header{FONT-WEIGHT: boldest;FONT-SIZE: large;PADDING-BOTTOM: 5px;TEXT-TRANSFORM: none;BORDER-LEFT: #990033 3px solid;BORDER-RIGHT: #990033 3px solid;COLOR: #CCFFFF;PADDING-TOP: 5px;BORDER-TOP: #990033 3px dash;BORDER-BOTTOM: #990033 3px dash;FONT-STYLE: normal;FONT-FAMILY: Verdana, Arial;BACKGROUND-COLOR: #cc3300;TEXT-ALIGN: right;FONT-VARIANT: small caps;TEXT-DECORATION: none}

Cela créera une section de la page avec un fond mauve clair, des bordures rouge foncé (avec des lignes pointillées en haut et en bas) et un lettrage gris clair dans une police san-serif en petites majuscules. Normalement, ce code serait placé sur un document de feuille de style principal (« https://web-design.lovetoknow.com/web-coding/yourDoc.css ») qui serait lié à la page Web en utilisant le code suivant dans le HTML Section HEAD:

<link rel="stylesheet" type="text/css" href="https://web-design.lovetoknow.com/web-coding/yourDoc.css" />

Évidemment, il s’agit d’un exemple de nom et vous devrez vous assurer que le chemin d’accès à votre fichier CSS était correct. Le vrai pouvoir du CSS, cependant, est que si vous décidez, après avoir créé des centaines de pages avec cet en-tête, que vous préférez avoir un lettrage rouge sur un fond gris dans une police personnalisée, il vous suffit de changer le code dans celui-ci. Feuille CSS et il imprégnera tout votre site.

Une fois que vous avez joué avec les différents types de propriétés pour divers éléments dans un DIV, vous pouvez complètement façonner et remodeler tout votre site simplement à partir de la feuille CSS elle-même. Mieux encore, il peut y avoir des DIV dans des DIV, imbriqués autant que vous le souhaitez, et chaque « conteneur » peut avoir ses propres propriétés ainsi que les propriétés du DIV plus grand. Dans un DIV.body, par exemple, vous pouvez décider que tout le texte doit être aligné à gauche. Cependant, vous pouvez également créer des DIV.redText et DIV.whiteText plus petits qui modifient simplement les couleurs des paragraphes suivants, tout en les gardant tous parfaitement alignés sur la gauche.

La propriété étrange et merveilleuse FLOAT

Une autre qualité très importante de l’imbrication des DIV dans une feuille de style est l’idée de « float ». Cela vous permet de positionner exactement où sur une page un DIV apparaît. La propriété FLOAT permet de déterminer l’emplacement d’un contenu SPAN ou DIV par rapport au conteneur plus grand. Si vous vouliez avoir deux colonnes à l’intérieur du corps principal, une « sidebar » et une « content », vous mettriez en place deux classes: #sidebar et #content. Vous pouvez styliser le texte, l’arrière-plan et les bordures comme vous l’avez fait avec l’exemple HEADER ci-dessus, mais vous ajouteriez également une propriété supplémentaire: FLOAT: LEFT. L’ajout de cette propriété pousse d’abord la barre latérale vers le côté gauche du plus grand conteneur, puis la zone de contenu juste à côté, créant une structure plus flexible que les tableaux avec tous les avantages d’une mise en page propre.

Si vous vouliez avoir un autre DIV sous les sections flottantes (comme un pied de page DIV), il serait nécessaire d’insérer une propriété FLOAT: CLEAR dans le DIV en dessous, de sorte que la « boîte » n’hérite pas de la propriété FLOAT: left. Le contraire d’un DIV « flottant » est celui dont la propriété POSITION est définie sur « absolue ». Dans ce cas, vous pouvez déterminer la position de la boîte avec précision en fonction des coordonnées de pixel ou des valeurs en pourcentage d’une fenêtre de navigateur.

Maîtriser la DIV

Ceci est un aperçu très basique de la façon dont un DIV peut être utilisé sur votre site. La pleine puissance du DIV nécessite beaucoup plus de pages et de concepts. Vous pouvez apprendre par vous-même sur des sites Web tels que DevArticles, DesignPlace et Juixe. Plus d’exemples des possibilités étonnantes sont mis en place chaque jour dans le CSS Zen Garden, ou vous pouvez essayer votre propre code dans le bac à sable CSS Desk. Prenez le temps de faire du DIV une base utile et flexible pour votre propre conception Web et vous ne le regretterez pas.

Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !