>> ENCEINTE: Il s'avère que le HTML n'est pas le seul langage que vous pouvez utiliser à l'intérieur
d'une page web.
Vous pouvez utiliser quelque chose appelé CSS, ou Cascading Style Sheets, ainsi.
CSS vous permet de spécifier beaucoup plus précisément l'esthétique d'un web
page, y compris la mise en page et la taille et couleurs et les polices et beaucoup plus.
Par exemple, nous allons créer une page Web ici appelé css0 qui représente une
page d'accueil pour, par exemple, John Harvard.
>> Sur cette page, nous avons John Harvard nom sous lequel sera
un beau message pour ses visiteurs, sous qui sera un pied de page, avec
dire que certains informations de copyright.
Pour ce faire, nous allons définir trois divisions pour la page en utilisant un mot-clé
appelé div.
Ouvrir support div, John Harvard, près support div, un autre div parenthèse ouverte,
et maintenant nous allons spécifier quelque chose comme, bienvenue à ma page d'accueil!
Et nous allons fermer cette div, ainsi.
>> Et maintenant, une troisième et dernière div, le droit d'auteur.
Juste pour être de fantaisie, permettez-moi d'utiliser une page HTML entité, un symbole qui représente
un personnage que vous ne pouvait pas autrement tapez sur votre clavier.
En particulier, je vais faire esperluette, livre, 169, point-virgule.
Il s'avère que c'est le code numérique le symbole du droit d'auteur.
Puis nous allons préciser John Harvard ici, sur la partie inférieure.
Fermons la div et enregistrez le fichier.
>> Maintenant, quelle est cette balise div?
La balise div définit simplement une division de la page, qui est essentiellement un
région rectangulaire.
Donc, à ce moment-là, j'ai trois régions rectangulaires, l'une sur le dessus
de l'autre.
Donc pour l'instant, l'effet est presque aussi si j'avais trois paragraphes.
Mais nous ne verrons pas tout à fait autant un espace blanc entre eux.
>> Sauvons ce fichier, changer son autorisations, et jeter un oeil pour un
moment dans Chrome.
Chmod a + r CSS0.html.
Nous allons maintenant ouvrir Chrome et visite http://localhost.CSS0.html.
En effet, voici une page d'accueil John Harvard.
Voyons maintenant styliser un peu plus précisément en utilisant un peu de CSS.
>> Retour dans gedit, allons dans ce première balise div et ajouter un style
attribut spécifiant que je voudrais une taille de la police de, disons, 36 pixels, ou px.
Et je voudrais que le poids de cette police de caractères faire preuve d'audace plutôt que la valeur par défaut,
ce qui est normal.
Pour la deuxième division, nous allons préciser un autre attribut de style qui a un
la taille de police de 24 pixels, un peu plus petit.
Fermer citations après le point-virgule.
>> Enfin, dans cette troisième div, faisons le style est égal citation, la taille, et
disons 12 pixels cette fois.
Fermer citation après la virgule.
Remarquez alors que je semble avoir spécifié un peu de stylisation
chacun de ces trois divs utilisant, il s'avère, CSS.
En fait, la syntaxe que vous voyez dans entre ces guillemets est CSS,
CSS spécifiquement propriétés avec des valeurs.
Et pour cette première balise, où j'ai eu deux de ces propriétés, la taille de la police et
poids police, j'ai simplement séparé eux avec un point-virgule.
>> Maintenant, juste pour l'amour de style, je virgules également inclus dans
la fin de chaque ligne.
Mais ils ne sont pas strictement nécessaires, en particulier lorsque vous n'avez qu'un seul
bien défini.
Voyons maintenant enregistrer le fichier et recharger en chrome, et de voir ce
l'effet net est.
Retour en chrome ici, cliquons Recharger.
>> Maintenant, nous avons un peu plus intéressant page d'accueil pour John
Harvard, grâce à quoi la première ligne avec son nom, qui est à l'intérieur de ce
première division, est de 36 pixels de haut et aussi gras, de sorte que la deuxième ligne,
qui est dans ce deuxième division, est 24 pixels de haut, mais pas gras.
Et dans lequel la troisième ligne de ce troisième div est de 12 pixels de haut et aussi
pas gras.
Mais supposons maintenant je voudrais changer tous de ce texte sur
tel qu'il est centré.
>> Je pourrais aligner chacun de l'individu DIV comme étant centrée.
Mais plus facilement, je pourrais conclure les trois divs à l'intérieur d'un quatrième div, un
div parent, pour ainsi dire, et de préciser que cette div et l'ensemble de ses
descendants devraient être Texte aligné centre?
Jetons un coup d'oeil.
>> A l'intérieur de gedit, revenons à ma corps et ajouter un nouveau div haut avec
div style égale entre guillemets centre texte d'alignement, à proximité
citer après le point-virgule.
Et maintenant, nous allons aller de l'avant et tiret tous de ces lignes que nous avons tapé avant.
Et ci-dessous que la troisième division, nous allons fermer cette nouvelle div.
>> En d'autres termes, parce que ces trois divs originaux sont maintenant des enfants, ainsi
parle, d'une nouvelle div mère et je n'ai précisé que je voudrais aligner la
texte de ce parent div dans le centre de la page, cette propriété sera
hérité par tous les enfants.
En effet, nous allons enregistrer le fichier et jetez un oeil dans un navigateur.
Disons recharger dans Chrome.
Et là, nous avons, encore plus agréable page d'accueil pour John Harvard.