[Powered by Google Translate] [CSS] [Joseph Ong - Université Harvard] [C'est CS50. - CS50.TV] 

Aujourd'hui, nous allons parler de CSS ou Cascading Style Sheets. 

Alors qu'est-ce exactement que CSS? Eh bien, nous allons briser le terme CSS décompose en 2 parties: Cascading Style Sheets et. Cascade est un peu plus complexe, et c'est quelque chose que nous allons aborder dans une autre vidéo. Mais pour commencer, les feuilles de style très beaucoup d'allusions à ce que CSS fait. Il ajoute styles au code HTML d'une page Web, changer la façon dont la page Web ressemble esthétiquement. Cela signifie tout de la police du texte à la place du contenu de la page d'autres frais comme faisant les angles d'une boîte arrondie ou en ajoutant des ombres de texte. Vous pouvez même faire des choses folles comme font les choses animées sur l'écran. 

Alors, comment pouvons-nous utiliser CSS avec HTML? Prenez ce site pauvres prospectifs je viens d'écrire. Si Rob était de regarder ce site en ce moment, il serait probablement dire quelque chose comme, "Wow! Mon initiation a l'air terrible. Joseph, vous êtes un concepteur terrible." «Utilisation de la police Times de défaut? Helvetica est tellement mieux." 

Alors, que peut-être la façon la plus simple d'appliquer le style Rob veut? Les lots de façon la plus évidente de personnes initialement écrit CSS était de mettre ce que nous appelons des déclarations de style droite dans l'élément lui-même en utilisant l'attribut HTML style. Une déclaration de style consiste simplement à la propriété CSS de l'élément HTML que nous voulons changer suivie d'un deux-points suivi par la nouvelle valeur de la propriété et un point-virgule à la fin. Par exemple, disons que Rob veut une bordure noire autour de son introduction. Nous avons d'abord mis l'attribut style sur la div de Rob ici puis à l'intérieur des guillemets mettre une déclaration CSS: "Border: 1px noir solide;" Le 1 pixel se réfère à la largeur de la bordure, le solide se réfère au style de la frontière, et la couleur à la fin détermine la couleur de la frontière est. 

Si nous voulons multiples styles sur un élément, écrire ces déclarations à la suite. Par exemple, si Rob veut que son texte d'en-tête en Helvetica avec un fond bleu et plus d'espace autour du texte, on peut le faire: style = "font-family: Helvetica; background-color: blue; padding: 5px;" Le dernier point-virgule est optionnel, mais les gens en général garder en pour souci de cohérence. 

Nous sauverons expliquer certaines des propriétés CSS froides et plus complexe pour une autre séquence. Si vous avez quelque chose en tête, juste googler l'effet que vous souhaitez suivie par CSS vous donnera probablement des résultats assez bons. Le truc cool, c'est que CSS est assez large, si les chances sont s'il ya quelque chose que vous voulez faire - dans des limites raisonnables - CSS peut probablement le faire. Nous appelons ce genre de style style inline. Le style de l'élément est bien, en ligne avec la balise de début. 

Pour les gens qui aiment vraiment être organisé, vous pouvez commencer à obtenir un peu irrité à quel désordre tout cela ressemble. Imaginez si vous aviez à faire pour chaque élément de la page, Plus maintenant votre HTML et CSS sont tous mélangés et encombrés. Brut, non? Pour résoudre ce problème, les gens commencèrent à attraper finalement à séparer leur balisage HTML de leur style CSS en utilisant ce qu'on appelle les sélecteurs CSS. Sélecteurs CSS sont utilisés pour choisir les éléments à laquelle les déclarations sont appliquées. Un sélecteur combiné avec une liste de déclarations CSS est souvent considéré comme une règle CSS. Ces règles seraient mis entre les balises de style HTML s'ouvrent et se ferment, souvent dans la tête du document. 

C'est beaucoup plus facile de voir un exemple, Commençons donc par la création d'une règle CSS simple. Tout d'abord, il faut mettre les balises de style dans la section head de notre HTML. Ensuite, le sélecteur. Nous allons commencer en utilisant l'un des sélecteurs simples, le symbole dièse, qui sélectionne un élément HTML par son attribut ID. Dans ce cas, nous allons sélectionner le div que représente l'introduction de Rob en tapant le symbole dièse suivi par l'ID de la div, rob. Maintenant, les déclarations. Nous ajoutons des accolades s'ouvrent et se ferment et MAJ nos déclarations antérieures alignées sur la div de Rob à l'intérieur de ces accolades, rafraîchir, et, cool, intro Rob a toujours une bordure noire autour de lui moins la laideur de ligne en désordre. 

Maintenant, si nous voulions sélectionner l'intérieur de h1 de l'intro de Rob? Vous pourriez penser, "Mettons une pièce d'identité sur elle et puis déplacer nos styles antérieurs." Cela fonctionne, mais CSS a d'autres façons de vous permettre de sélectionner les éléments en utilisant ce que nous appelons combinators à mélanger sélecteurs simples. Par exemple, un caractère espace peut être utilisé comme un combinateur pour spécifier toutes les instances de 1 sélecteur qui vivent à l'intérieur d'un autre sélecteur. Cela semble beaucoup plus compliquée qu'elle ne l'est réellement. Voici un exemple. Nous allons taper # voler, ajoutez un espace, et le suivre avec un h1, un autre sélecteur simple appelé un sélecteur de balises qui sélectionne les types d'éléments comme divs ou des paragraphes. L'espace combine nos 2 sélecteurs simples, l'application de toutes les déclarations CSS et les accolades à balises h1 qui vivent à l'intérieur de l'élément avec id = "rob". Juste pour vous convaincre que cela fonctionne, je vais changer la couleur de police de blanc, de rafraîchissement, et, regardez, tête de Rob est maintenant blanc. 

Tout ce travail tend à montrer que l'utilisation de règles au lieu de styles inline nous pouvons obtenir le code beaucoup plus propre. En fait, si ce bloc de style commence à devenir un peu plus grand, Je ne peux même tirer de ces styles sortir dans un fichier différent. 

Pour comprendre ce nouveau fichier CSS dans ce document, je vais utiliser la balise de lien de HTML. Ici, je dis ce que je suis liaison dans une feuille de style externe, l'attribut rel, et en spécifiant le chemin d'accès au fichier avec mon attribut href. Maintenant, ma balise HTML et CSS sont organisées bien dans les fichiers complètement séparés, qui est presque toujours la manière dont les concepteurs préfèrent travailler avec HTML et CSS. 

Dans le cas où vous vous demandez, les sélecteurs simples comprennent sélecteurs d'ID et sélecteurs de balises comme celles que nous venons de voir ainsi que des sélecteurs de classe pour la sélection des éléments avec une certaine classe, sélecteurs d'attribut pour sélectionner des éléments par d'autres attributs tels que type = "radio" pour les entrées de boutons radio, et pseudoselectors comme planer et se concentrer pour spécifier le style quand interactions aiment souris sur un élément se produire. 

Les combinators espaces communs comprennent pour tous les enfants et des virgules pour distinguer les sélecteurs. D'autres que vous pouvez rencontrer sont sur la flèche pour les enfants directs uniquement, le tilde pour tous les frères et sœurs qui se produisent après l'élément, et le signe plus pour le 1 frère qui vient immédiatement après l'élément. 

En combinant ces sélecteurs et combinateurs, Vous pouvez élargir la gamme de style que vous pouvez réaliser sur une page Web donnée et écrire un fichier CSS de manière plus efficace. Avec seulement quelques lignes de CSS que vous voyez me taper ici, Je peux rapidement faire quelque chose comme cela ressemble à quelque chose comme ça. 

Je suis Joseph, et c'est CS50. 

[CS50.TV] 

Euh, où dois-je commencer? Permettez-moi de le faire sans - [rires] D'accord. Ajouter un - Permettez-moi de changer ce libellé. Ooh. Désolé.