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

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

Alors qu'est-ce que CSS? Eh bien, nous allons briser le terme CSS bas en 2 parties: Cascading Style Sheets et. La filiation est un peu plus complexe, et c'est quelque chose que nous aborderons dans une autre vidéo. Mais pour commencer, des feuilles de style astuces très bien à ce que CSS fait. Il ajoute styles pour le 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 mise en place du contenu de la page à d'autres choses intéressantes comme faisant les coins arrondis d'une boîte ou d'une ombre de texte. Vous pouvez même faire des choses folles comme faire les choses animées sur l'écran. 

Alors, comment pouvons-nous utiliser les CSS avec HTML? Prenez ce site piètre allure je viens d'écrire. Si Rob étaient à 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 par défaut Times? Helvetica est tellement mieux." 

Alors, que peut-être le moyen le plus simple d'appliquer le style Rob veut? Les lots façon la plus évidente de personnes initialement écrit CSS était de mettre ce que nous appelons droit déclarations de style dans l'élément lui-même en utilisant l'attribut HTML style. Une déclaration de style consiste simplement des biens de l'élément HTML CSS nous voulons changer suivi 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 div Rob ici puis à l'intérieur des guillemets mettre une déclaration CSS: "Border: 1px noir solide;" Le pixel 1 se réfère à la largeur de la bordure, le solide se réfère à la section de la frontière, et la couleur à la fin détermine la couleur de la bordure est. 

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

Nous allons sauver expliquer certaines des propriétés CSS plus fraîches et plus complexe pour une autre séquence. Si vous avez quelque chose en tête, juste googler l'effet que vous voulez suivie par CSS vous donnera probablement des résultats assez bons. Le truc cool, c'est que le 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 de style inline. Le style de l'élément est, ainsi, en ligne avec la balise de début. 

Pour les gens qui aiment vraiment être organisé, vous pourriez commencer à avoir un peu irrité à ce désordre comment tous les regards. Imaginez si vous aviez à le faire pour chaque élément de la page, plus maintenant votre code HTML et CSS sont tous mélangés et encombré. Brut, non? Pour résoudre ce problème, les gens finissent par attraper commencé à séparer leur balisage HTML de leur style CSS à l'aide de 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 désigné comme une règle CSS. Ces règles seraient mis entre ouverture et de fermeture des balises de style HTML, souvent dans l'entête du document. 

Il est beaucoup plus facile de voir un exemple, nous allons donc commencer par créer 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 par utiliser l'un des plus simples sélecteurs, le symbole dièse, qui sélectionne un élément HTML par son attribut ID. Dans ce cas, nous allons choisir la div qui représente l'introduction de Rob en tapant le signe dièse suivi de l'ID de la div, rob. Maintenant les déclarations. Nous ajoutons des accolades ouvrantes et fermantes et changer nos précédentes déclarations en ligne sur div Rob l'intérieur de ces accolades, de rafraîchissement, et, cool, intro Rob a toujours une bordure noire autour de lui, moins la laideur en ligne malpropre. 

Maintenant, si nous voulions sélectionner l'intérieur h1 de l'intro de Rob? Vous pourriez penser, "Mettons un ID sur elle et puis déplacer nos styles antérieurs." Cela fonctionne, mais CSS a d'autres moyens de vous permettre de sélectionner des éléments en utilisant ce que nous appelons des combinateurs de mélanger sélecteurs simples. Par exemple, un caractère d'espacement peut être utilisé comme un combinateur pour spécifier tous les cas 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 en réalité. Voici un exemple. Nous allons taper # voler, ajoutez un espace, et de le suivre avec une h1, un autre sélecteur simple appelé sélecteur de balises qui sélectionne les types d'éléments comme divs ou des paragraphes. L'espace combinant nos 2 sélecteurs simples, l'application de toutes les déclarations CSS et les accolades aux 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 à blanc, de rafraîchissement, et, voyez, 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 grande, Je ne peux même pas tirer sur ces styles dans un fichier différent. 

Pour inclure ce nouveau fichier CSS dans ce document, je vais utiliser la balise lien HTML. Ici, je suis en train de dire que je suis de 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és bien dans les fichiers complètement séparées, qui est presque toujours la manière dont les concepteurs préfèrent travailler avec HTML et CSS. 

Dans le cas où vous vous poseriez la question, les sélecteurs simples comprennent sélecteurs d'ID sélecteurs tag et comme celles que nous venons de voir sélecteurs de classe ainsi que pour sélectionner 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 le vol stationnaire et se concentrer pour spécifier le style lorsqu'il interactions aimez positionnant la souris sur un élément se produire. 

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

En combinant ces sélecteurs et des combinateurs, vous pouvez élargir la gamme de style que vous pouvez réaliser sur une page Web donnée et d'écriture CSS plus efficacement. Avec seulement quelques lignes de CSS vous me voyez Écris ici, Je peux rapidement faire quelque chose comme ceci 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 cette formulation. Ooh. Désolé.