Ajouter à la DIV feuille de style existante CSS
Contemporain des normes de conception web se sont éloignés de la création de mises en page en utilisant les balises <TABLE>. La balise <DIV> beaucoup plus souple et utile est le chemin à parcourir. Voici quelques bonnes pratiques de base que vous pouvez utiliser immédiatement sur votre site.
DIV et Conquer
La meilleure façon de penser à un DIV est comme une boîte.
Il s'agit d'un conteneur de l'information, rien de plus.
La grande chose, c'est que c'est une boîte qui peut contenir n'importe quoi, et peut changer la façon dont le contenu à l'intérieur il ressemble.
Il est utilisé pour "niveau bloc" contenu (par exemple: de gros morceaux de texte, ou des groupes d'images, ou des ensembles de boutons de navigation), de sorte que vous pouvez définir les règles sur la façon dont ce contenu est présenté.
Il ya aussi une balise qui est le petit frère de la DIV, appelé SPAN, qui est utilisé pour changer l'apparence du contenu en ligne.
Alors que c'est utile, SPAN a rien sur les nombreuses utilisations différentes d'un DIV bien conçu.
Comment DIV avec style (feuilles)
Si vous ouvrez une feuille de style, les chances sont que vous trouverez plusieurs classes conçues pour fonctionner avec DIV sur la page. Il existe plusieurs types différents, mais quatre des plus communs sont en-tête, de contenu, la barre latérale, et pied de page. Les noms de ces DIV vous donner une bonne idée de leur but. Les éléments suivants sont quelques exemples de la façon dont ils peuvent être utilisés dans une structure existante CSS.
Peut-être que vous voulez mettre en place la section HEADER. Tout d'abord, mettre en place une classe d'en-tête qui ne peut être utilisé avec DIV. Ensuite, commencer à façonner les propriétés du texte, les bordures et arrière-plans que vous êtes l'espoir d'utiliser:
DIV.header
{
Font-weight: audacieux;
Font-size: large;
Padding-bottom: 5px;
Text-transform: none;
Border-left: # 990033 3px solides;
Border-right: # 990033 3px solides;
COLOR: # CCFFFF;
Padding-top: 5px;
Border-top: # 990033 3px tiret;
Border-bottom: 3px # 990033 tiret;
Font-style: normal;
FONT-FAMILY: Verdana, Arial;
Background-color: # cc3300;
TEXT-ALIGN: right;
Font-variant: small caps;
Text-decoration: none
}
Cela va créer une section de la page avec un fond mauve clair, foncé bordures rouges (en pointillés sur le haut et le bas), et la lumière lettrage gris dans une small-caps San-serif. Normalement, ce code serait mis sur un document feuille de style principale ("yourDoc.css») qui seraient liées à la page Web en utilisant le code suivant dans la section HTML HEAD:
<link rel="stylesheet" type="text/css" href="yourDoc.css" />
Évidemment, ce n'est un nom, par exemple, et vous auriez à faire en sorte que le chemin de votre fichier CSS est correct. La vraie puissance de CSS, cependant, c'est que si vous décidez, après avoir créé des centaines de pages avec cette tête, que vous préférez avoir le lettrage rouge sur un fond gris dans une police personnalisée , il vous suffit de modifier le code dans celui-ci CSS feuille et elle imprégner votre site.
Une fois que vous jouez avec les différents types de propriétés pour divers éléments dans un DIV, vous pouvez complètement la forme et de remodeler votre site entier simplement de la feuille de CSS lui-même. Le meilleur de tous, il peut y avoir au sein de DIV DIV, niché dans la mesure où vous le souhaitez, et chaque «conteneur» peut avoir ses propres propriétés ainsi que les propriétés de la plus grande DIV. Au sein d'une DIV.body, par exemple, vous pourriez décider que l'ensemble du texte doit être aligné à gauche. Cependant, vous pouvez aussi créer des petits et des DIV.redText DIV.whiteText que le simple fait de changer les couleurs des paragraphes plus tard, tout en gardant tous bien alignés sur la gauche.
La propriété float étrange et merveilleux
Une autre qualité très importante de DIV de nidification dans une feuille de style est l'idée de "flotter".
Cela vous permet de connaître exactement la position, où sur une page un DIV apparaît.
La propriété FLOAT permet de déterminer où un contenu SPAN ou DIV sera en relation avec les grands conteneurs.
Si vous vouliez avoir deux colonnes à l'intérieur du corps principal, l'un des "sidebar" et l'un des «contenus», vous auriez mis en place deux classes: # sidebar et # contenu.
Vous pourriez le style du texte, fond, et les frontières tout comme vous l'avez fait avec l'exemple ci-dessus HEADER, mais il faudrait aussi ajouter dans un autre bien: float: left.
L'ajout de cette propriété pousse d'abord la barre latérale sur le côté gauche de la grand récipient, puis la zone de contenu à droite à côté d'elle, créant une structure plus souple que les tables avec tous les avantages d'une mise en page propre.
Si vous vouliez avoir une autre DIV sous les sections flottantes (comme un DIV bas de page), il serait nécessaire d'insérer un FLOAT: propriété clairs dans les DIV en dessous, de sorte que la «boîte» ne serait pas hériter de la FLOAT: les biens laissés. L'opposé d'un «flottant» est un DIV avec la propriété position fixé à «absolue». Dans ce cas, vous pouvez déterminer la position de la boîte justement sur ​​la base des coordonnées des pixels ou des valeurs en pourcentage d'une fenêtre du navigateur .
Maîtriser la DIV
Ceci est un aperçu très élémentaire de la façon dont un DIV peut être utilisé sur votre site. La pleine puissance de la DIV nécessite beaucoup plus de pages et des concepts. Vous pouvez apprendre par vous-même sur des sites comme DevArticles , DesignPlace et Juixe . D'autres exemples des possibilités étonnantes sont mises en place chaque jour dans le CSS Zen Garden , ou vous pouvez essayer votre propre code dans le bac à sable bureau CSS . Prenez le temps de faire la DIV une base utile et flexible pour la conception de votre propre site web et vous ne le regretterez pas.
Rubriques connexes
