Comment ajouter CSS XHTML

Comment ajouter CSS XHTML


Cascading feuilles de style, ou CSS, est le nom d'un langage de codage utilisé pour définir des styles pour les pages Web, mais il fait également référence à la Css externe eux-mêmes, appelés feuilles de style pour court fichiers. Trois moyens existent pour ajouter CSS pour une page Web écrite dans le code XHTML. La méthode préférée implique l'incorporation d'un fichier .css externe à l'aide d'une balise <link>. Une autre méthode met le code CSS entre l'ouverture et la fermeture des balises <style> dans l'en-tête d'un fichier HTML. La méthode la moins préférée consiste à utiliser CSS à l'intérieur des balises HTML en définissant l'attribut de style.

Instructions

Feuilles de style externes

1 Créer un nouveau fichier vierge dans votre éditeur de code, et l'enregistrer avec l'extension .css. Entrez dans ce fichier de code CSS que vous souhaitez. Voici un exemple d'un code CSS:

h1 {font-size: 24px; font-style: italic; }

Le code ci-dessus rend tout le texte dans les balises <h1> italiques et 24 pixels.

2 Trouver le <head> et </ head> dans votre fichier HTML. Entre ces balises, ajoutez le code suivant:

<Link rel = "stylesheet" type = "text / css" href = "nomdefichier.css" />

Remplacer "nomdefichier.css" avec le nom de votre fichier .css. Notez que dans XHTML, les balises qui ne disposent pas d'une correspondance balise de fermeture sont auto-clos, d'où l'ajout d'une barre oblique inverse à la fin de la balise. En XHTML, vous devez également définir l'attribut type "text / css" pour les feuilles de style CSS.

3 Ajoutez autant de feuilles de style que vous avez besoin. Parce que les cascades de code CSS, le navigateur traite la dernière feuille de style dans la liste comme le plus important. Un avertissement sur l'intégration de trop de feuilles de style externes est que chaque fois qu'un navigateur doit charger un nouveau fichier, le site de chargement ralentit. Maximiser la vitesse de votre site en gardant le nombre de feuilles de style à un minimum.

style Balises

4 Ouvrez le fichier HTML d'une page Web que vous souhaitez modifier. Trouvez la <head> et </ head> tags. Quelque part entre ces balises, ajouter ce qui suit:

<Style type = "text / css">

<! -

->

</ Style>

Notez l'utilisation de balises de commentaires entre les balises de style. Les navigateurs modernes ne probablement pas besoin de cela, mais utiliser "<! -" et "->" pour cacher le code CSS de navigateurs plus anciens.

5 Ajouter code CSS entre votre <style> et </ style> tags. Les navigateurs ne lisent pas ce code sous forme de texte à mettre sur la page, mais sous forme de code CSS pour le style de la page. Si vous définissez un style dans une feuille de style externe, puis de définir un style différent dans les balises <style>, et le navigateur trouve un conflit, le navigateur va donner la préférence à la CSS dans les balises <style>.

6 Ajouter un code supplémentaire dans le même <style> et </ style> tags. Ne pas ajouter de nouvelles. Bien que cela lui permet de ne pas rompre le site, il est considéré comme la mauvaise forme. Sloppy codage va provoquer des erreurs sur votre site.

Le style Attribut

7 Ajouter CSS pour les balises HTML en utilisant l'attribut style. Dans ce cas, ouvrez le fichier HTML de votre page Web et de trouver l'étiquette où vous souhaitez ajouter un peu de CSS. Voici un exemple:

<Div style = "float: left;">

... Certains contenus ici ...

</ Div>

Le code ci-dessus rend le contenu dans cette balise <div> float à gauche de la fenêtre du navigateur. D'autres éléments sur la page, tels que le texte et les images, se terminera autour de la droite de la <div>.

8 Ajouter un autre style à la même tag comme ceci:

<Div style = "float: left; text-align: right;">

Vous enchaînez les règles de style comme "float: left" et "text-align: right" ensemble en utilisant un point-virgule. Ceci est la même que la façon dont il est utilisé dans des feuilles externes ou entre balises <style>, mais dans ce cas vous ne pas utiliser des accolades et vous ne pouvez pas mettre chaque règle sur sa propre ligne.

9 Suppression du code CSS dans-tag chaque fois que possible. Les concepteurs testent parfois comment un style effectuerait la page en ajoutant au-tag, ou en ligne, CSS avant de passer le code à une feuille de style externe. En ligne CSS est considérée comme pauvre codage et à l'encontre du but de feuilles de style, qui sont utilisés pour contrôler le style des sites Web entiers au lieu de pages individuelles.

Conseils et avertissements

  • Gardez tout le code CSS dans un fichier externe et utiliser d'autres méthodes de CSS inclusion avec parcimonie. Après avoir terminé le développement de votre site web, condenser votre code CSS en utilisant un logiciel de format réduit que les bandes sur tous les espaces blancs pour accélérer votre site.