[Jouer de la musique] 

DOUG LLOYD: Prenons donc un de plus vidéo pour parler une langue de plus. Cette fois, nous allons parler de CSS. Donc, CSS, qui est court pour Cascading Style Sheets, est un autre langage que nous utilisons lors de la construction des sites Web. Pensez-y comme ça. Si HTML est ce que nous utilisons pour organiser la contenu que nous voulons mettre sur notre page, CSS est l'outil que nous utilisons généralement pour personnaliser nos sites Web regardent, et comment l'expérience utilisateur vraiment est, en interaction avec notre site Web. 

Similaire à HTML, CSS est pas un langage de programmation. Il n'a pas la logique. Il n'a pas les variables. Il n'a pas de genre de ce que écouler choses liées que c ne. Il est un langage de style. Et sa syntaxe est assez simple, et décrit simplement comment les éléments de notre page ont certaine HTML éléments doivent être modifiés. À cette fin, si vous avez pas encore regardé notre vidéo sur HTML, ou ne sont pas familiers avec HTML généralement, vous peut vouloir jeter un oeil à ce que d'abord, parce que cette discussion sur CSS va dépendre une certaine connaissance du langage HTML. 

Alors, voici un très simple, feuille de style CSS. Même si vous avez jamais programmé avec CSS avant, Je suis sûr que vous pouvez comprendre exactement ce que cette feuille de style fait. Qu'est ce que ça fait? Eh bien, appliquée sur le corps de notre web la page, tout entre les balises du corps sur notre HTML, et il définit la couleur de fond de cette page en bleu. Eh bien, il est une feuille de style très simple. Il est en fait très humaine un langage adapté, CSS. Donc même si vous avez jamais utilisé auparavant, vous avez probablement pu le deviner ce que cela fait. En fait, si nous avons chargé une page, où cette feuille de style a été incorporé en quelque sorte, la couleur de notre page d'arrière-plan serait être bleu, le blanc et non standard. 

Alors, comment pouvons-nous construire des feuilles de style? Eh bien d'abord, nous devons identifier un sélecteur. Dans le dernier exemple, qui était sélecteur corps. Ensuite, nous avons un processus ouvert accolade, et nous sommes va commencer à définir la feuille de style pour que sélecteur. Entre les accolades, nous avoir juste une liste de paires clé-valeur. La paire de valeur précédente était couleur de fond de point-virgule bleu, mais nous pourrions faire de plus en plus de ces derniers. Vous pourriez avoir de multiples choses application à cette balise, que le corps de sélecteur. Chacun d'eux est séparé par un virgule, et nous appelons chacun d'eux une déclaration, une déclaration de CSS. Quand nous aurons fini avec tout le style de nous vouloir appliquer à cette étiquette particulière, nous avons juste un bouclés fermeture accolade pour mettre fin à la feuille de style, et nous avons terminé de définir la feuille de style pour cette sélection particulière. 

Quelles sont certaines des propriétés CSS communes? Eh bien, peut-être que vous voulez mettre une frontière autour de quelque chose. Donc vous pouvez dire, frontière, ce serait votre clé, puis vos valeurs seraient, ce style, la couleur, et la largeur vous voulez qu'il soit. Ainsi, le style pourrait être un solide ligne, une ligne en pointillés, une ligne en pointillés, une ligne de crête, ce qui serait la ligne ondulée. Peut-être que vous voulez l'avoir être bleu ou noir ou vert. Peut-être que vous voulez qu'il soit 1 ou 2 ou 10 pixels de large. Vous pouvez spécifier toutes ces choses. Peut-être que vous voulez définir l'arrière-plan couleur de votre page d'une manière particulière. Nous avons déjà vu que, le réglage de la fond du corps pour être bleu. 

Ensuite, vous pouvez utiliser un mot clé, CSS a donc certaines couleurs qui sont construits en elle, bleu, vert, noir, une des couleurs très simples que nous connaissons. Mais vous pouvez aussi spécifier quelle hexadécimal de la couleur que vous souhaitez. Rappelons que les couleurs peuvent être identifiés par un ensemble de trois nombres hexadécimaux de 0 à 255, et b rg, la composante rouge, verte et bleue. Et si nous pouvons spécifier quelle couleur que nous voulons par, au lieu d'utiliser le bleu ou le vert ou noir, utilisant livre et puis six chiffres hex, et cela nous donnerait la couleur à six chiffres. Voilà donc la couleur de fond. 

Nous avons aussi l'avant-plan la couleur, qui est habituellement va être le texte de votre page. Et vous pourriez faire de même avec le mot clé et ou six chiffres hex. Ainsi, vous pouvez spécifier quelle couleur que vous voulez pour le texte de votre page contre un particulier couleur de fond, au-dessus. Vous pouvez également modifier et traiter avec la police, et le texte de façon est rendue sur la page. 

Ainsi, vous pouvez changer votre taille de la police. Vous pouvez utiliser des mots clés, comme supplémentaire, Très petite, ou xx petite ou moyenne, large, et ainsi de suite. Vous pouvez utiliser des points fixes, 10 points, 12 points, et ainsi de suite. Vous pouvez utiliser des pourcentages, 80%, 20%, où 100% est la police par défaut taille, qui est habituellement va être quelque chose comme 11 ou 12 points. Ou vous pouvez même baser off la plus récente de la taille de la police. Si vous venez d'écrire quelque chose et vous savez ce que vous voulez est pour qu'il soit plus petit, mais vous ne savez pas quelle taille vous exactement veux que ce soit, ainsi, vous pouvez juste dire, la taille de police plus petite. Et elle fondera hors de la, juste au-dessus, il est la taille. Et vous pouvez obtenir plus ou moins grande. Donc, il ya beaucoup de différents façons de spécifier la taille de police. 

Vous pouvez également spécifier ce que famille de police que vous voulez. Si vous avez un particulier nom, il ya une façon CSS-- on ne va pas en parler ici-- pour définir une police très spécifique et l'intégrer dans votre page. Vous pouvez également utiliser des noms génériques. Il ya beaucoup de polices de sécurité Web qui sont pré-définis dans CSS. Et si vous êtes un utilisateur de Microsoft Bureau dans les 20 dernières années, vous êtes probablement familier avec beaucoup de ces polices de sécurité Web déjà, Times New Roman, Arial, Courier New, la Géorgie, Tahoma, Verdana, et ainsi de suite. Ceux sont tous considérés web des polices de sécurité. Et en fait, une partie de la raison pour laquelle ils sont venus pour être devait être utilisé pour faire web-- chaque page l'accès à ce défaut avait mis des polices avec différents empattements, et tout cela trucs police nous ne serons pas entrer dans, mais ceux-ci sont habituellement accessible dans votre CSS, même si vous ne le faites pas Sinon définir les polices. Enfin, vous pouvez aligner votre texte, au lieu d'être, par défaut, aligné vers la gauche, vous pourriez aligner à droite, ou vous pourriez aligner centré, ou justifié de sorte qu'il a frappé deux marges. Donc, ceux qui sont toutes les options que vous pouvez utiliser de changer ce que votre texte ressemble, et comment il est affiché sur votre page. 

Vos sélecteurs ne le font pas doivent être des balises uniquement. Nous avons déjà vu une balise body sélecteur, et sélecteur de balises ne regarde juste comme ça. Vous nommez une étiquette, et puis vous définir une feuille de style pour ce tag. Mais vous pouvez aussi faire quelque chose appelé un sélecteur d'ID. Un sélecteur d'identité semble assez similaire. Mais remarque, que maintenant je ne suis pas à l'aide une balise HTML, je suis en utilisant, dans ce cas, #unique, ou hash unique. Si vous vous souvenez de notre vidéo sur le langage HTML, nous avons parlé sur la façon dont les étiquettes peuvent avoir des attributs. 

Et un attribut qui applique à peu près toutes les balises HTML, mais nous ne parlions pas à ce sujet, est ce qu'on appelle une étiquette d'identification. Donc, ce serait notamment CSS appliquer qu'aux tag HTML qui a Une pièce d'identité très spécifique, que vous avez nommé. Donc, si vous avez quelque part dans votre code, quelque part dans votre fichier HTML, une balise et vous spécifier comme un attribut de cette balise, ID est égal unique, cette notamment la feuille de style ici ne se appliquera entre cette balise avec l'ID d'unique. 

Vous pouvez aussi faire quelque chose appelé un sélecteur de classe. Donc, en plus d'avoir ID attributs, vous pouvez aussi ajouter un attribut class pour les balises HTML. Et lorsque vous utilisez un attribut de classe, elle peut être appliquée à plusieurs variables. Donc, si vous avez plusieurs choses qui sont similaires, peut-être que vous voulez dire, tag ouverte blah, blah, blah, bla, classe équivaut étudiants. Et puis ce particulier stylesheet appliquerait à chaque balise dont la classe est étudiants. Dans ce cas, nous aurions mis la couleur de fond jaune, et nous aimerions définir l'opacité, qui est une étiquette que nous ne parlions pas, mais juste traite de façon transparente quelque chose est, à 70%, dans ce cas. 

Il ya deux options pour feuilles de style d'écriture. Vous pouvez les écrire directement dans votre code HTML en plaçant les feuilles de style entre les deux balises de style. Et ces balises de style vont à l'intérieur du les balises head de votre page web. La manière peut-être plus préféré faire il est d'écrire un fichier .css séparée, puis le relier à votre document en utilisant les balises de liens. Les balises de liens, encore une fois, sont différent de liens hypertextes, si vous vous souvenez de notre vidéo un fichier HTML. Et les balises de liens sont comment nous tirez dans des fichiers séparés. Il en quelque sorte comme l'équivalent de #include pour la programmation web. 

Donc, nous allons jeter un oeil à table.html. Si vous vous souvenez de notre HTML vidéo, je montrais un exemple d'un très simple multiplication table qui avait l'air assez laid, et peut-être il ya un moyen de faire mieux avec CSS, pour faire croire effectivement plus comme une multiplication table, ou quelque chose qui est non seulement collé ensemble avec pas de division réelle entre les lignes et les colonnes. Donc, nous allons la tête sur CS50 IDE, et de prendre un coup d'oeil comment CSS peut, en quelque sorte, tordre ce que nous avons commencé avec avant, et faire quelque chose de beaucoup mieux. 

Donc, nous sommes dans CS50 IDE maintenant, et si familier, nous arrêtons dans ce Table cette page HTML. Table.html essentiellement définit simplement le contenu d'un multiple-- il était censé être une table quatre par quatre de multiplication. Il est assez simple. Et nous pensons qu'il serait regarder assez bien organisé. Mais en fait, quand nous Aperçu cette page, nous voyons qu'il est un peu laid, non? Clairement, nous avons des lignes et des colonnes ici. Il une sorte de séparation. Mais il est pas une séparation significative. Nous ne sommes pas réellement obtenir trop d'informations ici. Et il n'y a pas de séparation entre les lignes et les colonnes en termes des règles horizontales ou verticales. Nous pourrions probablement faire de cette mieux regarder un peu. Essayons donc. Donc, je vais fermer cet onglet vous ici. Et je vais fermer mon table.html, et je ai une autre version ici appelé table2.HTML. Nous allons ouvrir que jusqu'à. Le corps de la page est plus ou moins la même chose, mais je l'ai changé peu en haut. Et je vais défiler vers le haut ici. Remarquez que cette fois, je suis en utilisant les balises de style embarqués. Je l'ai ouvert une balise de style, et je suis maintenant la définition d'une feuille de style CSS juste à l'intérieur de celui-ci. Je dois une feuille de style qui dit, table. Voilà mon sélecteur de balises. Je ne suis pas en utilisant point ou hachage, que je ferais si je était en utilisant une carte d'identité ou un sélecteur de classe. Je ai un sélecteur de balises tableau ici--. Ce style va appliquer à chaque balise de table. Apparemment, je veux mettre un un pixel de large, bordure bleue solide, à l'intérieur de ma table. Qui sonne comme il serait probablement aider à la situation, non? Nous allons avoir les choses semblent beaucoup mieux. Donc, cela est bien beau. Stylistiquement, je viens embarqué ma feuille de style ici. Il est certainement un façon acceptable de faire. Voyons voir à quoi cela ressemble. Donc, je vais revenir ici-bas, et Je vais un aperçu de mon table2.HTML. Eh bien, ce ne est pas tout à fait ce que je voulais, mais il est exactement ce que nous avons demandé. Nous avons dit que ce style est va appliquer à notre table. Notre table a maintenant un seul pixel large, solide bordure bleue. Nous ne sommes pas réellement obtenir les cellules du tableau. Nous sortons tout juste à la table. Donc CSS travaillé. Il a appliqué une feuille de style à notre table. Mais n'a pas tout faire ce que nous voulions qu'il fasse. Comment pouvons-nous faire ce que nous voulons qu'il fasse? 

Eh bien, nous allons jeter un oeil à un de plus version de ce dans table3.HTML. Donc je vais juste de fermer ces onglets. Je vais revenir sur ici pour mon arborescence de fichiers, et d'ouvrir table3.HTML. Encore une fois, ça va faire joli similaire ici au début. Mais remarquez, cette fois, au lieu d'utiliser une feuille de style intégré juste là, Je vais dans un lien feuille de style en utilisant la balise link. Donc, je suis apparemment reliant dans un stylesheet appelé tables.CSS, et ce bien est égale stylesheet juste désigne: ainsi, ce qui est ce dossier par rapport à ce que Je suis doing-- est une feuille de style que je suis l'aide pour ma page. Donc, si je veux vraiment voir ce que Je fais avec le CSS ici, Je dois aller ouverte table.CSS fichier ainsi. Donc, nous allons revenir sur ici nouveau à notre arborescence de fichiers. Il ya table.CSS. Nous allons pop ouverte. Maintenant, nous voyons un peu de la CSS. Apparemment, je dois un couple des choses qui se passent ici. Je veux apparemment pour poser un cinq pixel de large, bordure rouge solide, autour de ma table. Nous savons déjà que ça va juste aller sur le périmètre. Nous avons vu que, dans table2.HTML. Avec chaque rangée, je veulent apparemment pour spécifier que la hauteur de la ligne est de 50 pixels de haut. Donc, pour chaque ligne, souvenir qui est ce que la balise tr fait, Je le fais 50 pixels de haut. 

Enfin, je dois ce commentaire. Et voilà comment nous faisons des commentaires dans CSS. Il est très similaire à saisir bloc commentaires étoiles slash syntaxe. Tout le texte que vous voulez. Il n'y a pas slash slash bien en CSS. Pour les courts commentaires en ligne, nous avons d'utiliser ce format particulier ici. On dirait que je fais un beaucoup de choses dans mes tags td. Rappelez-vous les balises td ou une table données, qui sont vraiment juste les colonnes à l'intérieur de nos lignes, et apparemment pour chaque élément de données dans ma table, je veux pour définir la couleur d'arrière-plan être noir, la couleur est blanche, la couleur est couleur de premier plan. Donc cela va être le texte de ma page. Je veux grande police, 22 signaler police, et je veux qu'il soit de la famille de la police, de la Géorgie. Donc, je ne vais pas avoir la police par défaut. Je vais préciser la Géorgie, qui est une de ces polices de sécurité Web que nous avons vu auparavant. Je veux que mon texte soit aligné central, au milieu de la boîte, Je ne veux pas qu'elle soit laissée alignés ou aligné à droite. Et je veux que ma largeur de colonne être de 50 pixels de large ainsi. Jetons un oeil à à quoi cela ressemble, et voir si cela est peut-être une amélioration. Donc, je vais aller à table3.HTML, qui rappel, comprend table.CSS comme un lien, et nous allons le prévisualiser. Cela fait beaucoup mieux, non? Ceci est effectivement commence à ressembler beaucoup plus comme une table de multiplication. Je dois cette frontière rouge autour de ma table, mais maintenant Je l'ai également précisé que chaque ligne est de 50 pixels de large, ou il est 50 pixels tall-- excuse moi-- chaque colonne est de 50 pixels de large. Les données de chaque colonne, et que les données, a un fond noir. Voilà pourquoi ceux lignes blanches sont là. Étant donné que dans l'espace entre l'ensemble de ces cellules, il est pas une frontière dans et de lui-même, il est juste Je ne fais que remplir le cellules, qui fait rend les frontières de la table, qui n'a apparemment exister tout au long, il était simplement des lignes blanches minces. Maintenant, ils sont visibles. Maintenant ils sautent hors de l'écran. Et donc cela est très simple feuille de style que je l'ai appliqué, et maintenant ma table ressemble beaucoup plus comme une table quatre par quatre de multiplication, au lieu d'un gâchis tout confus, où tout est clairement lignes et de colonnes, mais pas super bien organisé. Nous sommes vraiment juste de rayer la surface de ce que vous pouvez faire avec CSS ici. Heureusement la documentation CSS est assez simple. Vous utiliserez plusieurs de ses attributs, assez fréquemment. Ceux dont nous avons parlé plus tôt dans cette vidéo. Il ya plusieurs que vous ne sera probablement pas utiliser tous. Et cela est très bien, aussi. Mais il suffit de savoir, qu'il ya une beaucoup de documentation là-bas. Donc, même si nous ne couvrons pas tout, vous n'êtes certainement pas à gauche sur votre propre. Mais CSS est vraiment amusant à expérimenter. Et je vous encourage fortement de jouer avec vos pages Web, et voyez comment vous pouvez les faire regarder et se sentir à améliorer l'utilisateur expérience de visiter votre page. Je suis Doug Lloyd. Ceci est CS50.