'>

la mise en page (CSS) dans la meme page de structure (HTML)

 Ce ne serait pas génial si vous pouviez donner à vos pages la présentation qu'ils méritent?
Bien sûr, mais comment?

Pour donner votre disposition de site Web utilisent Cascading Style Sheets (CSS). Dans cette leçon, vous obtiendrez une brève introduction à CSS. Mais plus tard, vous pourrez tout apprendre sur CSS à partir de zéro dans notre tutoriel CSS . Alors s'il vous plaît examiner cette leçon seulement comme un apéritif.

CSS est la meilleure moitié de HTML. Et dans le codage, il n'y a pas égalité de statut: HTML s'occupe de la substance rugueuse (la structure), tandis que CSS donne une belle touche (aménagement).

Comme le montre la leçon 7 , CSS peut être ajouté à l'attribut de style. Par exemple, vous pouvez définir le type de police et la taille d'un paragraphe:

Exemple 1:

    <p style="font-size:20px;" >This is typed in size 20px</p> <p style="font-family:courier;" >This is typed in Courier</p> <p style="font-size:20px; font-family:courier;" >This is typed in Courier size 20px</p>

Ressemblera à ceci dans le navigateur:

Cela est tapé en taille 20px

Ceci est tapé dans Courrier

Cela est tapé en taille 20px Courier

Dans l'exemple ci-dessus, nous utilisons le style attribut pour spécifier le type de police à utiliser (avec la commande font-family ) et la taille de la police (avec la commande font-size ). Remarquez comment dans le dernier paragraphe nous mettons à la fois le type de police et la taille par un point virgule sépare.
Il semble que beaucoup de travail?

Une des fonctions intelligentes de CSS est la possibilité de gérer votre disposition au centre. Au lieu d'utiliser le style l'attribut dans chaque balise, vous pouvez dire au navigateur une fois comment il doit disposition tout le texte sur la page:

Exemple 2:

    <html> <head> <title>My first CSS page</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial;} h2 {font-size: 15px; font-family: courier;} p {font-size: 8px; font-family: "times new roman";} </style> </head> <body> <h1>My first CSS page</h1> <h2>Welcome to my first CSS page</h2> <p>Here you can see how CSS works </p> </body> </html>
    <html> <head> <title>My first CSS page</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial;} h2 {font-size: 15px; font-family: courier;} p {font-size: 8px; font-family: "times new roman";} </style> </head> <body> <h1>My first CSS page</h1> <h2>Welcome to my first CSS page</h2> <p>Here you can see how CSS works </p> </body> </html>

    Afficher un exemple

Dans l'exemple ci-dessus CSS a été inséré dans la section de la tête et s'applique donc à toute la page. Pour ce faire, il suffit d'utiliser la balise <style type="text/css"> qui indique au navigateur que vous tapez CSS.

Dans l'exemple tous les titres sur la page seront en Arial dans 30px de taille. Tous les sous-titres seront en taille Courier 15. Et tout le texte en paragraphes normales seront en Times New Roman taille 8.

Une autre option consiste à taper le CSS dans un document séparé. Grâce à un document CSS séparé, vous pouvez gérer la présentation de plusieurs pages à la fois. Assez intelligent si vous voulez changer le type de police ou la taille d'un grand site avec des centaines ou des milliers de pages. Nous n'allons pas entrer dans les détails, mais vous pouvez l'apprendre plus tard dans notre tutoriel CSS.
Que puis-je faire avec CSS?

CSS peut être utilisé pour beaucoup plus que de spécifier les types de polices et de tailles. Par exemple, vous pouvez ajouter des couleurs et origines. Voici quelques exemples pour vous d'expérimenter avec:

    <p style="color:green;" >Green text</p> <h1 style="background-color: blue;" >Heading on blue background</h1> <body style="background-image: url('http://www.html.net/logo.png');" >
    <p style="color:green;" >Green text</p> <h1 style="background-color: blue;" >Heading on blue background</h1> <body style="background-image: url('http://www.html.net/logo.png');" >

Essayez d'insérer les exemples de certaines de vos pages - à la fois comme indiqué ci-dessus et aussi comme CSS inséré dans la section de la tête.
Est-CSS rien mais les couleurs et les polices de caractères?

Outre l'ajout de mise en page tels que les couleurs, les polices de caractères, etc, CSS peut également être utilisé pour contrôler la mise en page et la présentation (marges, flotteur, alignement, largeur, hauteur, etc.) En régulant les différents éléments avec CSS, vous êtes en mesure de mise en page de vos pages avec élégance et précision.

Exemple 3:

    <p style="padding:25px;border:1px solid red;" >I love CSS</p>
    <p style="padding:25px;border:1px solid red;" >I love CSS</p>

Ressemblera à ceci dans le navigateur:

J'adore CSS

Avec la propriété float un élément peut flotter vers la droite ou vers la gauche. L'exemple suivant illustre le principe:

Exemple 4:

    <img src="bill.jpg" alt="Bill Gates" style= "float:left;" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...</p>
    <img src="bill.jpg" alt="Bill Gates" style= "float:left;" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...</p>

Ressemblera à ceci dans le navigateur:
Bill Gates

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy NIBH euismod tincidunt ut laoreet dolore magna Aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat ...

Dans l'exemple, un élément (l'image) flotte à la gauche et l'autre élément (le texte) remplit le trou.

Avec la propriété position , vous pouvez placer un élément exactement où vous le souhaitez dans votre page:

Exemple 5:

     <img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
  

    Afficher un exemple

Dans l'exemple de l'image est placée à 50 pixels à partir du bas et 10 pixels de la droite dans le navigateur. Mais vous pouvez le placer exactement où vous le souhaitez. Give it a try. Assez facile et assez cool, hein?
Cool, bien sûr. Mais facile?

Vous n'apprenez pas CSS en 10 minutes. Et comme mentionné ci-dessus, cette leçon est destiné uniquement comme une brève introduction. Plus tard, vous pourrez en apprendre beaucoup plus dans notre tutoriel CSS .

Pour le moment, se concentrer sur HTML, et de passer à la leçon suivante où vous apprendrez comment obtenir votre site Web sur l'Internet pour que le monde entier peut voir cela!
Publié par Drupal Study