>> [Jouer de la musique]
ALLISON BUCHHOLTZ-UA: Donc, nous sommes fondamentalement juste aller
pour vous donner un aperçu de CSS, parce que nous savons
qu'il ne était pas couvert dans toutes les sections.
Et nous voulons vraiment vous assurer que vous les gars ont cet outil à votre disposition,
car il a la capacité de faire vos sites Web ressemblent beaucoup plus joli.
>> Et si vous construisez un site web, vous voulez probablement faire joli.
Je veux dire, vous ne avez pas à, mais je vous suggère de lui. [Rires]
Si vous souhaitez que les utilisateurs de l'utiliser, vous pourriez vouloir faire un peu [inaudible].
Donc, nous allons essayer de vous donner quelques outils de base et la compréhension,
de sorte que lorsque vous sortez et vous êtes la recherche de choses sur CSS,
ce ne est pas remplir charabia, comme CSS parfois être.
>> TOMAS REIMERS: Ouais.
Allison dit assez bien.
Donc je suppose que la première chose que nous devrait commencer par CSS est ce qui est?
Donc CSS est impressionnant.
CSS--
>> ALLISON BUCHHOLTZ-UA: Ce est le nom de notre séminaire.
>> TOMAS REIMERS: Ouais.
Il est vraiment important que vous comprenez que d'ici là.
Si vous ne enlevez une chose, ce est que le CSS si génial.
Deux, ce est CSS signifie Cascading Style Sheets.
Donc, à la base, CSS est une feuille de style, ce qui signifie
il vous permet de coiffer une page Web.
Et puis ce que cela signifie, ce est un façon d'ajouter du style à vos sites Web.
Donc, par le style, nous entendons tout ce ne est pas structural--
donc les choses comme les couleurs, fond images, les frontières, comme, le rembourrage,
marges.
Nous allons parler de ce tout ce qui signifie un peu.
>> Nous avons donc pris les devants et juste ouvert à la fois de ceux dans gedit.
Donc, ce est index.HTML.
Et ce est main.css.
Donc main.css n'a rien.
ALLISON BUCHHOLTZ-AU: Aucun style jusqu'ici.
TOMAS REIMERS: Aucun.
Et comme vous le verrez, ce est un site vraiment laid.
ALLISON BUCHHOLTZ-UA: Ce est tout simplement.
TOMAS REIMERS: Ouais.
Ouais, ce est pas laid, ce est juste minimaliste.
Et puis nous avons ici index.html.
Et donc pour un rapide récapitulation de HTML, Allison,
vous voulez juste parler de la page?
>> ALLISON BUCHHOLTZ-UA: Ouais.
Alors, évidemment, nous avons notre HTML tag, qui vient de fichier HTML de noms.
Nous avons notre tête ici, avec CSS Awesomeness, desquelles: si vous revenez.
Où est-ce?
>> TOMAS REIMERS: Oh.
Oui, vous pouvez le voir.
ALLISON BUCHHOLTZ-UA: Et remarquez l'en-tête
est cet onglet tête juste ici.
Et puis "Bonjour tout le monde!" est le texte que nous venons
afficher sur le Web Cette page, qui est: revenir.
Retour.
Qui est juste dans notre corps ici-- du texte brut.
En outre, une chose à remarquerez, si vous regardez ici,
Tomas mis en place ces deux de notre diaporama.
Donc, tant que vous avez tous trois d'entre eux, vous êtes très bien.
Ils peuvent être dans l'ordre qu'ils veulent.
Qu'est-ce qui est le plus important, ce est juste que vous avez chacune de ces trois choses.
>> TOMAS REIMERS: Cool.
Ajouter un type de doc?
ALLISON BUCHHOLTZ-UA: Ouais.
TOMAS REIMERS: Ouais.
Cool.
ALLISON BUCHHOLTZ-UA: Apparemment, mes micros ne me aiment pas.
TOMAS REIMERS: Oh, donnez-nous une seconde seulement tandis Allison passe sur son micro.
Donc oui.
Donc, nous avons notre page principale.
Ce est un peu sans style.
Nous ne avons pas beaucoup.
Nous avons juste fondamentalement texte.
Nous avons la feuille de style.
Nous avons le titre.
Il suffit donc de nue-désossées composants font un site Web.
>> Donc à partir de là, nous allons parler de ce que CSS est
et à quoi il ressemble et tout cela.
Donc, pour that--
ALLISON BUCHHOLTZ-UA: Retour aux diapositives.
TOMAS REIMERS: Retour aux diapositives.
Et Allison peut prendre le relais.
>> ALLISON BUCHHOLTZ-UA: Woo.
D'ACCORD.
Donc, dans votre fichier CSS, vous allez avoir
beaucoup de ces choses appelées sélecteurs.
Ce sera juste le base de votre fichier CSS.
Il va juste être beaucoup, beaucoup de ceux-ci.
Donc sélecteur.
Ce est juste l'anatomie générale.
Nous allons passer par exemples, parce que si vous les gars jamais
regardé ma section, je me sens comme des choses dans l'abstrait
ne vraiment pas de sens.
Il est toujours utile de voir les exemples.
>> Donc, nous avons une certaine sélection.
Cela va être une identifiant pour ce que nous voulons que le style à appliquer.
Et alors nous pouvons avoir toute un ensemble de règles et de valeurs.
Donc sélecteurs que vous pourriez voir pourrait être quelque chose comme corps,
ou du paragraphe avec P, ou en-tête, ou que ce soit,
tout ce que vous voulez que vos balises HTML soient.
>> Donc dans ce cas, nous avons corps.
Et nous avons une règle, ce qui correspond
à ce que votre style se applique à.
Donc dans ce cas, nous avons couleur de fond et le poids police.
Donc cela va changer l'arrière-plan de tout
dans ne importe quelle balise body de notre fichier HTML.
Et ça va donner il cette valeur bleu clair.
>> Donc, il va faire la fond bleu clair.
Et puis quelque chose dans le corps est va avoir un poids de gras.
Donc, il va juste gras tout notre texte.
Et ce est juste un sélecteur.
Mais vous pourriez avoir un très grand nombre d'entre eux.
Et comme nous allons montrer plus tard, un peu plus sur la façon dont
que les travaux et plus d'exemples là-bas.
Tout ce que vous souhaitez ajouter?
>> TOMAS REIMERS: Non
Allison a obtenu.
Nous allons juste pour couper un par exemple ici sur notre exemple le site.
Donc, nous allons effectivement prendre cette.
Il est excellent.
Donc je vais juste copier et coller ce droit dans notre fichier main.css.
Et je vais l'enregistrer.
Et puis nous allons l'exécuter.
Ainsi, la note côté, l'un des la plupart des choses frustrantes
est si vous ne enregistrez un fichier, et alors vous, comme, rechargez la page,
et, comme, pourquoi ne est pas le changement se passe?
Il arrive.
Donc ici nous avons vu que nous avons fait notre site un fond bleu clair
et certains gras texte.
>> Je dois aussi mentionner, si vous les gars ont des questions sur quoi que ce soit
nous faisons, pensons se il vous plaît hésitez pas à nous arrêter et nous demander.
Nous sommes complètement prêts pour répondre aux questions.
>> ALLISON BUCHHOLTZ-UA: Évidemment, avec CSS, tout se appuie sur lui-même.
Donc, si une chose ne est pas sens maintenant, nous
ne veulent pas que vous enliser plus tard.
>> TOMAS REIMERS: Donc, nous allons type de disséquer cela.
Alors voulez-vous commencer avec le sélecteur ici?
>> ALLISON BUCHHOLTZ-UA: Ouais.
Comme je le disais avant, le corps est seulement notre sélection ici.
Donc, si nous revenons plus à notre ah index--.
>> TOMAS REIMERS: Ce que je fermais.
Donnez-moi une seconde.
Donc Fichier, Ouvrir, index.html.
ALLISON BUCHHOLTZ-UA: Cool.
Donc, si vous remarquez ici, nous avoir ces balises body, non?
Ainsi, le sélecteur correspond simplement les balises que nous parlons.
Donc corps ici.
Donc, ce que nous disons, ce est everything-- pouvons-nous revenir en arrière?
Je aimerais pouvoir simplement comme toucher l'écran.
Ce serait tellement plus frais.
>> Donc, tout l'intérieur de ceux balises body, que nous avons vu
était juste, comme, le texte, et le corps en général
se réfère à, comme, l'arrière-plan.
Si jamais vous voulez changer le fond,
que ça va être dans une balise body.
Juste a ces règles qui leur sont appliquées.
>> Donc, si nous devions aller à index.html et-- en fait,
pouvons-nous avoir quelque chose à l'extérieur du corps?
Si nous avions, comme un pied de page ou quelque chose, il ne se appliquerait pas à cela.
Mais quoi que ce soit au sein de ces balises corps va
d'être affectés par ce corps sélection que nous avons fait.
Donc, si vous tapez autre chose there--
>> TOMAS REIMERS: Roulons cette maison.
Donc, si nous avions un div-- sorte que ce est juste une autre balise que vous pouvez avoir.
Je vais fermer.
Ou disons font un paragraphe.
Donc p signifie paragraphe.
Et dans ce paragraphe.
Et puis je dis: «Ce est un texte."
Cool.
Et puis je ai fait cette règle se applique à un paragraphe à la place du corps.
Vous verrez comment il se applique uniquement aux paragraphe nouvellement formé, à droite,
pas le tout.
Est-ce logique?
>> ALLISON BUCHHOLTZ-UA: Donc, ce est tout le corps,
mais maintenant notre sélection juste correspond au paragraphe.
Donc nous avons juste gras et bleu pour ce paragraphe spécifique,
parce que ce est la seule chose qui est enfermé dans la balise p.
>> TOMAS REIMERS: Est-ce logique de tri de comment les choses encapsuler d'autres choses?
ALLISON BUCHHOLTZ-UA: Aussi, juste à-dire, comme, une des meilleures façons
pour vraiment à l'aise avec CSS est juste faire des choses comme ça,
juste essayer.
Ce est très simple de taper quelque chose out, frappé Actualiser, et de voir ce qui se passe.
Et comme avec la plupart CS, L'expérimentation peut souvent
conduire à une bien meilleure compréhension intuitive.
Plus encore que nous juste, comme, de vous parler.
>> TOMAS REIMERS: Absolument 100% d'accord sur ce point.
Donc, si nous revenons à cela, nous allons commencer dissection exactement ce que ces deux ne.
Nous avons donc deux règles à ce sujet.
Donc, la première est une couleur de fond.
Et vous voyez que nous avons mis en elle égale à une valeur, bleu clair.
>> Donc, en CSS, CSS est en quelque sorte de très lâche sur la façon
vous êtes autorisé à définir la couleur.
Ainsi, vous pouvez les définir par leur nom.
Vous pouvez aussi faire quelque chose comme «rouge».
Et puis si nous revenons à cela, vous verrez que le fond est rouge.
Vous pouvez également obtenir really-- Je pense que vous peut être assez créatif avec cela,
pouvez-vous pas?
>> ALLISON BUCHHOLTZ-AU: Je pensez que vous pouvez utiliser hex.
Pouvez-vous pas?
>> TOMAS REIMERS: Ouais.
Ainsi, vous pouvez utiliser hex.
Mais je pense nom sage.
Ne sont pas là?
ALLISON BUCHHOLTZ-UA: Vous pouvez faire un certain nombre.
Un peu comme la plupart des couleurs que vous peut name-- comme, je pense que le saumon est une.
>> TOMAS REIMERS: Nous sommes saumon va essayer.
ALLISON BUCHHOLTZ-AU: Je pense chartreuse est là.
TOMAS REIMERS: Ouais.
Voir?
Ainsi vous pouvez obtenir très créatif.
>> ALLISON BUCHHOLTZ-UA: Vous pourrait être assez créatif.
Comme, si vous pouvez penser de la nom de la couleur, ce est probablement là.
Si vous voulez vraiment bien détail, vous pouvez aller hex.
>> TOMAS REIMERS: Ouais.
Donc hexadécimal.
Si vous les gars me souviens de ce retour de votre ancien PSET, Image Recover,
vous avez eu à traiter avec ces valeurs hexagonaux.
Et une sorte de récapituler ce que ce est, hex a trois valeurs stockées.
Ce est donc par groupes de deux incréments.
Les deux premiers représentent la valeur de rouge.
Le second représente la valeur verte.
Et le dernier est bleu?
>> Donc FF arrive à représenter hexadécimal 255.
Donc, vous avez 255 rouge, 255 vert, et 0 pour le bleu.
Et les valeurs sont comprises entre 0 et 255.
>> AUDIENCE: Droit.
Donc, essentiellement, nous pourrions chercher l'Internet pour ne importe quelle couleur que nous voulons,
et d'identifier la réalité connue combo spectre de couleurs,
et alors nous pourrions mettre dans?
ALLISON BUCHHOLTZ-UA: Exactement.
Donc, vous avez à peu près un contrôle complet plus les couleurs que vous voulez dans CSS.
Allons-nous parler images de fond plus tard?
Ou voulons-nous faire?
>> TOMAS REIMERS: Ouais.
Absolument.
Alors d'abord, juste pour montrer que rouge et vert est jaune.
Et si vous avez besoin aider à trouver cela, vous
peut quelque chose de Google comme "color picker."
ALLISON BUCHHOLTZ-UA: Oh, ce est tellement bon.
Je adore Color Picker.
>> TOMAS REIMERS: colorpicker.com est un bon exemple.
Et ici, vous verrez que vous avez un sélecteur de couleur Photoshop-like plein.
>> ALLISON BUCHHOLTZ-UA: Mm-hm.
Aussi, les choses sont cool vous peut générer des schémas de couleurs
de sorte que vous ne avez pas, comme, affrontant couleurs.
TOMAS REIMERS: Et puis voici la valeur hex ici.
Ainsi, vous pouvez toujours trouver en ligne essentiellement endroits pour obtenir la valeur hexadécimale de.
Ce ne est pas le tri de ce juste, comme, nous voir les couleurs du monde en nombre.
Ce est plus que nous allons en ligne et de trouver quelle couleur que nous voulons,
puis prendre le numéro.
Parce que ce est juste un vraiment facile moyen de référencer les choses dans CS.
>> ALLISON BUCHHOLTZ-UA: Et puis il ya also--
Je oublie le nom exact du site.
Mais il ya certainement, je penser, quelque chose de Adobe
qui génère des couleurs pour vous, qui est vraiment cool, parce que vous
definitely-- il est parfois difficile à comprendre,
oh, si je veux utiliser cette couleur, ce pourrait être un autre utiles
à utiliser ailleurs sur mon site, comme, le rendre agréable et cohérente.
>> TOMAS REIMERS: Allison parle un par Adobe Kuler appelé, je crois.
Ce est K-U-L-E-R.
ALLISON BUCHHOLTZ-AU: Je pense que oui.
Je suis sûr que ce est la seule.
>> TOMAS REIMERS: Mon préféré a toujours été Color Scheme Designer.
>> ALLISON BUCHHOLTZ-UA: Ooh.
>> TOMAS REIMERS: Quel est maintenant--
>> ALLISON BUCHHOLTZ-UA: Ah, ce est beau.
>> TOMAS REIMERS: Et vous peut essentiellement dire, comme,
Je veux trois couleurs à côté de l'autre.
Et puis nous allons faire quelque chose de gentil.
Et puis, vous pouvez obtenir un exemple de ce que cela pourrait ressembler.
Et puis si vous survolez un des eux, il vous donne la valeur hexadécimale.
>> Ainsi, tout comme une bonne façon de commencer penser à des couleurs
ou ce que les couleurs dans un site Web pourrait aller bien ensemble.
Parce que ça peut être étonnamment pas aussi facile à prendre que vous le pensez.
Et puis l'autre chose cool Je ai toujours trouvé à propos de ce site
est si vous frappez exemples, ça va montrer ce qu'est un site d'exemple
pourrait ressembler à l'aide de ce schéma de couleurs.
Quoi qu'il en soit.
>> Retour à la CSS réelle.
ALLISON BUCHHOLTZ-UA: Mais évidemment, nous connaître ces références pourraient être utiles.
TOMAS REIMERS: Non, ils peut certainement être utile.
Donc, la deuxième règle, Allison?
>> ALLISON BUCHHOLTZ-UA: Ouais.
La deuxième règle est juste correspondant à notre police.
Donc poids police est juste genre de-- sorte que le poids serait
être si vous voulez juste, comme, normal ou, comme, les polices plus minces,
ou dans ce cas, comme, audacieux.
Je oublie.
Quel est le si vous vouliez it-- est là un diluant une que juste, comme, normal?
TOMAS REIMERS: je ne ai pas fait savoir se il ya un plus mince.
ALLISON BUCHHOLTZ-AU: Je ai oublié.
Poids afin police nous généralement il suffit d'utiliser pour le gras.
Si vous voulez vraiment entrer dans , nous allons vous montrer.
W3Schools a tous les différents choses que vous pouvez faire pour les polices.
Mais fondamentalement, si jamais vous voulez de changer quoi que ce soit à propos de la police,
il est toujours va être, comme, font-chose.
Donc, ce sera comme, font-family si vous êtes essayer de changer le type réel.
Ça va être font-style si vous vouloir faire comme cursive,
ou en italique, ou autres joyeusetés.
Ou même font-couleur, si nous voulions changer cela.
>> TOMAS REIMERS: Yup.
Ainsi, vous pouvez changer cela.
Et une sorte de juste Récapitulons maintenant et vous pouvez
voir que nous avons le sélecteur ici.
Nous avons ces accolades.
Et puis nous avons des règles délimitée par des points-virgules.
Est-ce logique?
Ouais?
Cool.
Donc, si ce est good--
>> ALLISON BUCHHOLTZ-UA: Retour.
TOMAS REIMERS: Parlons spécifiquement sur ce type de sélecteurs que nous avons.
Parce que nous avons en ce moment sorte de juste montré les tags.
Mais vous les gars pourrait voir plausible.
Disons que vous avez deux paragraphes sur une page et vous
veulent être en mesure le style une mais pas l'autre,
vous ne voulez pas seulement se limiter d'avoir à utiliser différents HTML réel
étiquettes pour leur donner des styles différents.
>> Nous avons donc trois de base types de sélecteurs.
ALLISON BUCHHOLTZ-UA: Ouais.
Nous avons donc tag, ce est ce qui nous avons parlé de ce moment.
Donc, ce est un peu comme votre corps ou p.
Et puis nous avons la classe, qui est lorsque nous définissons dans notre fichier CSS,
Il va toujours être dot, quel que soit vous voulez que le nom de votre classe soit.
Et cela peut se appliquer à plusieurs choses.
>> Disons que vous avez cinq paragraphes et deux des trois d'entre eux
besoin d'être le même style, vous appliquer une classe à elle.
Et ce est juste la façon dont nous le faisons.
Nous allons vous donner un exemple de où cette montre effectivement en place.
Mais si vous aviez peut-être certains tag p, après, vous devez écrire,
classe égale quelles que soient les classes vous voulez appliquer.
Donc, quelles que soient les sélecteurs de classe que nous voulons à appliquer à ce paragraphe spécifique,
nous pourrions écrire comme ça.
Bien sûr, je pense un exemple il sera beaucoup plus concret.
>> L'autre nous avons est id, que nous noterons
avec un hachage, ou à la livre, ou hashtag.
TOMAS REIMERS: Octothorpe.
ALLISON BUCHHOLTZ-UA: Octothorpe.
Cela fonctionne aussi.
Et celui-ci doit être vraiment unique.
Ils ne devraient se appliquer une chose sur votre page.
Donc, si ce est un paragraphe spécifique, ou un élément dans une liste, ou autre,
ce doit être unique.
Et de la même manière que nous venons dire, comme, class = "class1 class2,"
cela peut juste être id de tout ce que nous avons.
TOMAS REIMERS: Ouais.
Parlons donc définitivement sur les exemples ici.
Et je vais juste de plonger vers l'arrière dans le code.
Alors regardons notre HTML.
Et donc nous avons maintenant droit un paragraphe.
Ceci est un texte.
Je vais juste de modifier il. "Ceci est un texte 1."
Et puis nous allons avoir un "Ce est un texte 2."
>> ALLISON BUCHHOLTZ-UA: deuxième.
TOMAS REIMERS: Yup.
Donc, nous avons maintenant "Ceci est un texte 2,« droit?
Et nous allons voir que si le chargement la page, ce que nous allons trouver
ce est que nous allons find--
ALLISON BUCHHOLTZ-UA: Ooh.
TOMAS REIMERS: Ouais.
Nous allons trouver un "Ce est texte 1 »et« Ceci est un texte 2. "
>> ALLISON BUCHHOLTZ-UA: Et sur belle couleur jaune.
>> TOMAS REIMERS: Et vous verrez que notre sélection en ce moment,
qui se applique à P, ou paragraphes, affecte à la fois d'entre eux,
parce que les deux répondent à la condition que ils sont à la fois une balise p.
Cela fait sens total.
Donc la question est, eh bien, ce si nous voulions seulement obtenir une?
Donc exactement comme disait Allison, nous avons deux autres façons de le faire.
Je vais commencer par id.
>> ALLISON BUCHHOLTZ-UA: Commençons par id.
>> TOMAS REIMERS: Et les deux de ces attributs sont.
Donc attributs existent au format HTML.
Et ce qu'ils sont est quelque chose que vous ajoutez
dans la balise qui est séparer du nom de la balise.
Ainsi, vous pouvez avoir plusieurs attributs.
Ouais?
>> ALLISON BUCHHOLTZ-AU: Je allais juste à-dire, à partir de votre exemple de PSET 7,
si l'un de vous essayer d'aligner les choses vers le centre,
vous pourriez avoir utilisé «Texte align = center."
Et vous l'avez remarqué sans doute aurait centrée
votre texte ou votre barre de navigation.
Donc, ce est juste aussi un attribut que vous connaissez peut-être.
TOMAS REIMERS: Il ya un tas des attributs que vous verrez.
Ouais.
Comme une bonne référence à PSET 7.
Nous avons id.
Vous pouvez également avoir classe, des choses comme ça.
Une seule étiquette peut avoir plusieurs attributs.
Ainsi, à partir d'id, supposons que nous voulez avoir une id de-- Je ne sais pas.
Nous l'appellerons spéciale, car celui-ci, nous sommes
va mettre en gras, et souligner, et quel que soit.
ALLISON BUCHHOLTZ-UA: Ce est va être super spéciale.
TOMAS REIMERS: Donc, ce une, nous avons id spéciale.
Ainsi, la manière pour sélectionner cela, alors, est dans main.css, plutôt que d'avoir une balise p,
vous faites # spécial, OK?
Et qui sélectionne les chose avec id spéciale.
Cela fait sens pour tout le monde?
AUDIENCE: Ouais.
TOMAS REIMERS: Cool.
Alors maintenant, si nous revenons, nous allons see-- whoops.
Ouais.
Nous allons voir que ce ne sélectionne l'une avec id spéciale.
Ouais?
Sons cool.
Oui.
>> AUDIENCE: quelque chose peut avoir un attribuer à la fois classe et une id?
>> TOMAS REIMERS: Oui.
AUDIENCE: OK.
Et puis ce qui se passe si vous donnez ensuite il certaines règles CSS dans ce conflit?
TOMAS REIMERS: Absolument.
Nous allons certainement en parler.
Donc exactement ce que vous receviez au, vous pouvez aussi avoir des classes.
Donc, nous allons prétendre que je avais trois paragraphes et moi
voulu coiffer la première deux mais pas la troisième.
Eh bien, votre première idée peut être, bien, je pourrait simplement donner le second un id.
Mais vous ne pouvez pas, parce que un id, exactement comme disait Allison,
doit être unique.
>> Ainsi, au lieu d'un id, ce que vous pouvez utiliser est, vous pouvez utiliser une classe.
Et un class-- ce qu'il permet vous faire est essentiellement dire,
cela appartient dans le cadre d'un groupe.
Dans ce cas, notre groupe est appelé spécial.
Et ce que nous allons faire ensuite est nous allons say-- plutôt que la livre,
nous allons utiliser dot.
D'ACCORD?
Et remarquez que la livre et le point ne existent que dans le fichier CSS,
pas dans le code HTML.
ALLISON BUCHHOLTZ-UA: Oui.
Distinction importante.
>> TOMAS REIMERS: Je ai eu tant de luttes,
parce que je mets le hachage dans le code HTML et puis juste senti stupide pendant une longue période.
Voyez comment il sélectionne deux ceux avec cette classe?
Cool.
>> Maintenant, les choses peuvent avoir plusieurs classes.
Disons que je voulais faire le premier deux ont un fond jaune
et les deux ont une couleur de police de bleu.
D'ACCORD.
Je ne sais pas vraiment pourquoi je avais vouloir le faire, mais je peux.
>> ALLISON BUCHHOLTZ-UA: pourrait ne pas recommandé pour votre site web.
Mais pour nos fins, il va faire.
>> TOMAS REIMERS: Ce ne est pas un bon jeu de couleurs.
ALLISON BUCHHOLTZ-UA: Eh bien, jaune et le bleu sont mes couleurs de l'école secondaire.
Je ne sais pas, cependant.
TOMAS REIMERS: Allison le plus haut l'école avait une grande palette de couleurs.
[Rires]
Alors ce que nous pouvons appeler cela est Appelons this-- nous avons donc spécial
et nous avons Jolie.
Je suggère, pour cela, vous utilisez noms beaucoup plus descriptifs.
ALLISON BUCHHOLTZ-UA: Oui, je le ferais appeler ce, comme, jaune ou bleu.
>> TOMAS REIMERS: Nous ne sommes pas vraiment faire un vrai site web,
ce est pourquoi nous ne le faisons pas.
Mais si vous avez réellement eu un vrai site web, vous
pourrait avoir, comme l'article-tête, contenu de l'article, premier mot,
des choses comme ça, qui permettent que vous soyez beaucoup plus descriptive.
Ce sont vraiment comme des variables.
Ils devraient être nommés d'une manière où vous pouvez, like-- oui, en tant que telle.
Parfait.
>> Donc couleur de fond.
Et puis nous allons donc le say-- façon de changer de couleur est juste "couleur".
Et nous allons le rendre bleu.
C'est super.
Alors maintenant, nous avons la deux premiers ont spéciale.
Suivant une va avoir "class = joli."
ALLISON BUCHHOLTZ-UA: Et puis vous aurez vouloir ajouter "joli" à celui du milieu.
TOMAS REIMERS: Yup.
Et puis au milieu, d'ajouter «jolie," ce qui se passe
ce est que vous avez juste un espace.
Donc, l'attribut de classe est une liste séparée par des espaces
de toutes les classes qui se appliquent à ce tag.
D'ACCORD?
Ce ne est pas comme celui-ci appartient à une sorte de classe spéciale appelée
"Spéciale, l'espace, joli."
Il appartient à deux classes-- spéciale et jolie.
Oui?
Cool.
>> Et puis si nous regardons à ce qui se passe, nous sommes
allez voir que le premier a une fond jaune, texte noir.
Deuxième One--
>> ALLISON BUCHHOLTZ-UA: --a gras fond jaune avec le texte en bleu.
Et notre dernier a juste le texte en bleu que nous lui sont assignées.
>> TOMAS REIMERS: Cool?
Comment sélecteurs fonctionnent?
Impressionnant.
>> ALLISON BUCHHOLTZ-UA: Voulons-nous parler du conflit maintenant, alors?
>> TOMAS REIMERS: Donc oui.
Absolument.
Donc ce qui arrive si vous un conflit, non?
Imaginons le premier met en place quelque chose de like--
ALLISON BUCHHOLTZ-UA: Peut-être celui-ci change le fond?
TOMAS REIMERS: Ouais.
Donc, nous allons faire "joli" changer le fond au saumon.
ALLISON BUCHHOLTZ-UA: Vous êtes juste avec tous les grands couleurs aujourd'hui, Tomas.
TOMAS REIMERS: Ouais.
Parce que je ai découvert que je peux utiliser le saumon comme un véritable couleur.
Donc, nous ne allons pas faire cela.
Je pense aussi Sunset est une vraie couleur.
AUDIENCE: Sunset est une vraie couleur?
ALLISON BUCHHOLTZ-UA: Essayons.
TOMAS REIMERS: Après cette démo juste parce que dans le cas où il mess up,
Je ne veux pas être le débogage.
Donc, nous savons le saumon est une vraie couleur.
Ainsi, toute conjectures sur ce qui va se passer?
>> ALLISON BUCHHOLTZ-UA: Toute idée?
>> AUDIENCE: [inaudible].
>> TOMAS REIMERS: Ouais.
Donc, vous avez tout à fait raison.
Fondamentalement, il prend la dernière règle qu'il a été donné.
>> ALLISON BUCHHOLTZ-UA: Donc, ce est où cascade entre en vigueur.
>> TOMAS REIMERS: Alors rappelez-vous comment nous eu que des feuilles de style en cascade?
Ainsi, en cela, nous entendons type de que nous avons un tas de règles
qui se appliquent sur le dessus de l'autre, et ils peuvent également remplacer l'autre.
>> ALLISON BUCHHOLTZ-UA: Donc, tout est au fond
annulera tout ce qui est en haut.
Vous pourriez avoir des règles qui a complètement nier quelque chose à l'avance.
Ce est aussi pourquoi vous voulez être prudent lorsque vous êtes style,
de sorte que vous n'êtes pas la création de règles qui vous êtes juste complètement impérieuses.
>> TOMAS REIMERS: Ou peut-être vous ne veulent écraser règles.
>> ALLISON BUCHHOLTZ-UA: Ou peut-être que vous faites.
Oui.
>> TOMAS REIMERS: Imaginez que vous avez un classe qui se applique à la plupart des choses,
mais disons que vous voulez changer le couleur de fond rouge et la police
poids à gras pour la plupart choses, mais pour un,
vous voulez que la couleur de fond être rouge mais vous voulez tous les autres
propriétés, vous pourriez faire quelque chose comme "font-weight = normal,"
qui serait ensuite défaire ce changement gras.
Ouais?
Encore une fois, la meilleure façon, je pense que Allison dit, est juste la pratique.
>> ALLISON BUCHHOLTZ-UA: expérimentation.
>> TOMAS REIMERS: Pratique, pratique, pratique et expérience.
Je sais que beaucoup de personnes qui pensent CSS est juste beaucoup de conjectures et de vérification
à la fin de la journée, où si vous voulez faire quelque chose-- comme,
vous avez une idée approximative, mais vous avez encore probablement besoin
l'essayer pour se assurer vous savez à quoi il ressemble.
>> AUDIENCE: Lorsque vous postulez les classes, plus d'un
au même paragraphe ou de l'article, ne est-ce
importe quel ordre vous pouvez les taper dans les citations?
>> TOMAS REIMERS: Non, pas du tout.
>> ALLISON BUCHHOLTZ-UA: Ce qui importe est l'ordre au sein de votre feuille de style CSS.
AUDIENCE: Pourriez-vous répéter la question?
TOMAS REIMERS: Oh.
ALLISON BUCHHOLTZ-UA: Dans classe, quand vous donnant des cours
à quelque chose dans le code HTML, ne il importe quel ordre ils sont en?
Il ne importe pas l'ordre.
Ce qui importe est l'ordre du sélecteurs de classe au sein de votre CSS,
au sein de votre feuille de style.
>> TOMAS REIMERS: bon son?
>> ALLISON BUCHHOLTZ-UA: Lovely.
>> TOMAS REIMERS: Et puis nous allons continuer to--
ALLISON BUCHHOLTZ-UA: Que devons-nous ensuite?
Je oublie.
Oh, nous avons juste des exemples.
Mais nous avons fait genre de celles-ci.
Nous avons fait des exemples à la volée.
>> TOMAS REIMERS: Nous arrivons à combiner les sélecteurs bientôt.
>> ALLISON BUCHHOLTZ-UA: Oh, nous arrivons à combiner sélecteurs.
TOMAS REIMERS: Donc, certains exemples est que nous avons
# Livre dog-- ou hashtag, ou dièse, ou quoi
vous voulez appeler that-- forte.
>> ALLISON BUCHHOLTZ-UA: chien Sharp.
>> TOMAS REIMERS: Ensuite, vous avez .pets.
Quelque chose a un id de chien, il ya seulement un chien sur la page.
Quelque chose a un id de chat, il est seulement un chat.
Il peut y avoir de nombreux animaux de la page.
Ce est pourquoi nous avons donné que les classes.
Vous avez un exemple de p.
Et alors si l'un des dernier exemple, qui
est quelque chose que nous ne avons pas parlé, est ce qui arrive quand vous les combinez.
Donc p.pets.
>> Donc, pour cela, revenons à la code et introduire another-- oui.
Alors revenir ici.
>> ALLISON BUCHHOLTZ-AU: Je se sentir comme ce est really--
comme simplement en regardant à travers des exemples est vraiment la façon d'apprendre cela.
Donc, ce est ce que nous faisons.
>> TOMAS REIMERS: Donc, supposons que nous ne vouloir sélectionner du texte deux, non?
Donc, nous pouvons certainement pas le faire avec un id.
Eh bien, nous pourrions le faire avec un id, mais il ne possède pas d'id.
Je pourrais ajouter, mais Imaginons que je ne veux pas ajouter une
ou il a déjà quelque chose d'autre.
Je ne peux pas le faire avec cela.
La balise est certainement pas unique, non?
Et ne est la classe.
Mais vous pouvez combiner ces choses.
Disons que nous voulions faire quelque chose qui se applique uniquement à des choses qui
avoir la classe spéciale et qui ont la classe jolie.
>> Donc ce que vous pouvez faire est en main.css, vous pouvez dire, nous allons d'abord Supprimer cette.
Vous pouvez combiner ces.
Donc vous pouvez faire .special.
Pas d'espace.
Juste .special.pretty.
Ce que cela signifie est quelque chose qui est à la fois spéciale et jolie.
Est-ce logique?
Et si nous allons ici, ce vous allez voir
est cette règle se applique uniquement à la une seconde, qui a à la fois de ceux.
Et vous pouvez le faire pour beaucoup de choses.
Vous pouvez say-- de laisser prétends Je voulais seulement
de faire des choses qui ont la classe jolie et qui sont aussi une balise de paragraphe.
Donc p.pretty.
Imaginons que je avais quelque chose d'assez sur le corps de tag.
D'ACCORD?
Je peux courir et je peut voir que ce est seulement
va se appliquer à des choses qui sont paragraphes avec la classe jolie.
Et vous pouvez combiner ceux-ci, essentiellement, autant que vous le voulez.
Ainsi, vous pouvez simplement les mettre ensemble.
Est-ce logique?
ALLISON BUCHHOLTZ-UA: Donc, ce genre de est plus utile
quand, Tomas a dit plus tôt, peut-être vous avez un site très compliqué,
et vous avez déjà beaucoup de ces règles écrites,
et il vous suffit de combiner deux de devant.
Comme lieu d'écrire ensemble nouveau sélecteur et changer là,
il vous suffit de combiner là où il chevauche.
>> TOMAS REIMERS: Ou vous pourraient trouver out-- parfois
il ya une classe qui rend la couleur de police comme le bleu,
et il ya une autre classe qui rend le bleu de fond.
Et ce ne va pas fonctionner.
Vous écrivez donc un cas particulier, où, like-- mais si elle a à la fois, ce que vous êtes
va faire est que vous allez faire celui-ci cette nuance de bleu
et celui-ci cet autre nuance de bleu.
Droite?
>> ALLISON BUCHHOLTZ-UA: Bon pour ces types d'exceptions.
TOMAS REIMERS: Donc, pour réfléchir aux problèmes
qui pourraient survenir lorsque vous les combinez.
Cool.
Revenons donc à notre présentation.
ALLISON BUCHHOLTZ-UA: Nous y sommes presque.
TOMAS REIMERS: Et il a cessé de liaison.
ALLISON BUCHHOLTZ-UA: Oh, non.
ALLISON BUCHHOLTZ-UA: CS au le bureau, Internet tombe en panne.
Oh, l'ironie.
>> TOMAS REIMERS: Donc, heureusement, nous pouvons présenter sans l'Internet, je suppose,
parce que nous avons toutes les diapositives ici.
Donc, nous allons parler de la relation de balises.
ALLISON BUCHHOLTZ-UA: Droit.
Il suffit donc de type de passe hors de ce que dit Tomas,
ce est juste une autre façon de le faire.
Donc, nous avons un certain parent sélecteur avec un sélecteur d'enfant.
Donc, dans cet exemple ici, nous avons une certaine corps avec une barre de navigation de classe, touche de classe.
Ah.
>> TOMAS REIMERS: Oh, désolé.
>> ALLISON BUCHHOLTZ-UA: Et Fondamentalement, ce que cela signifie
est de sélectionner tous les enfants, comme toutes ces sortes de sélecteurs,
dans ce sélecteur de parent.
Et ce sont les seuls il va jamais se appliquer.
Je ne sais pas si vous avoir une meilleure façon de--
TOMAS REIMERS: Je deviner la façon de penser
à ce sujet est la façon dont rappeler avant nous aimons sorte de les mettre ensemble.
Et alors cela signifie un élément qui correspond à tout cela.
Ce que cela dit, ce est, je vous voulez faire correspondre tout
au sein some-- Je veux vous trouverez un sélecteur.
Et puis dans ce cadre, je veux de faire correspondre de nouvelles choses.
Droite?
Donc, en CSS, il se agit en quelque sorte être en mesure de correspondre à ces éléments.
Et vous pouvez essayer de faire correspondre articles dans d'autres articles.
>> Donc, nous allons effectivement faire un exemple, et nous pensons que vais préciser.
Donc, nous allons prétendre que nous avons spéciale, jolie spéciale, peu importe.
Et puis nous avons un lien, OK?
Donc ne oubliez pas, a est un lien.
Il ne va pas aller ne importe où.
Et nous allons lui donner le lien de classe, je suppose.
Donnons-lui la class-- me donner une idée.
ALLISON BUCHHOLTZ-UA: Cool.
TOMAS REIMERS: COO- nous allons aller il la classe jolie.
Pourquoi pas?
>> ALLISON BUCHHOLTZ-UA: OK.
TOMAS REIMERS: Donc, en ce moment jolies choses
vont rendre le fond bleu, couleur de fond du saumon.
Ce est logique.
Et si nous faisons this--
>> ALLISON BUCHHOLTZ-UA: Voulez-vous ajouter du texte
de sorte que le lien hypertexte montre effectivement en place?
TOMAS REIMERS: Ce serait un bon appel.
ALLISON BUCHHOLTZ-UA: «droit Cause maintenant, nous allons tout simplement ne reçoivent rien.
TOMAS REIMERS: Donc, ce est un lien.
"Ce est un lien."
Oh, et cela va être un autre lien.
Donnons-lui la classe «cool».
Vous avez raison.
Cool.
Donc maintenant nous allons saisir cette.
Nous allons jeter un.
Nous avons une dans le balise spéciale, et nous avons aussi
vont avoir une dans le joli tag.
Et maintenant ce que nous allons faire est que nous allons faire cool--
ce que nous voulons qu'il fasse?
ALLISON BUCHHOLTZ-UA: Pouvons-nous faire plus grand?
TOMAS REIMERS: Donnons une bordure.
ALLISON BUCHHOLTZ-UA: Nous pourrions frontière.
TOMAS REIMERS: Ouais.
Donc, nous allons faire quelque chose comme, est-- des frontières et nous sommes
vais vous expliquer tout cela en une seconde.
Pour l'instant--
>> ALLISON BUCHHOLTZ-UA: Pour le modèle de boîte.
TOMAS REIMERS: Mais pour l'instant, nous sommes aller juste pour lui donner une frontière.
Donc ce que cela signifie est que vous êtes aller voir ces liens.
Et vous allez voir qu'ils ont ces, comme, bordures noires laides, qui
est cool.
>> ALLISON BUCHHOLTZ-UA: Notre site web est si jolie.
>> TOMAS REIMERS: Ouais.
Notre site web est génial.
Donc, ces deux sont des liens, et ils apparaissent.
Maintenant, nous allons prétendre que je seulement voulu le faire
si ce ne était pas quelque chose de l'intérieur qui avait un fond de saumon.
Alors rappelez-vous que celui-ci a un fond de saumon,
parce que ce est de la classe jolie.
>> Mais nous voulons dire que ne refroidit qui sont en classe spéciale, pas en classe
jolie, devrait avoir cette frontière.
Eh bien, ce que vous pouvez faire est de vous peut dire, .special, l'espace, .cool.
Et ce qui est à faire, quand vous pensez à ce sujet, est-il est fondamentalement disant,
OK, me trouver tout qui correspond spéciale.
Alors dans ces balises, trouver moi tout ce qui est cool.
ALLISON BUCHHOLTZ-UA: Donc, une autre façon cela pourrait être bon de penser à ce sujet,
le ramener à C, est tout comme l'idée de la portée.
Alors, quand vous avez un peu sélecteur, comme ceux
que nous travaillons depuis avant cela, votre page Web entière, la totalité de votre HTML
est à votre portée, non?
Mais quand nous avons ces relations parent-enfant,
ce est comme si vous rétrécissant vers le bas où vous cherchez à un lieu spécifique,
comme si, comme, nous sommes à la recherche au sein de une fonction spécifique à la place
de l'ensemble de notre dossier.
AUDIENCE: Donc, avec cela à l'esprit, ne est- il avoir compté si nous avions changed--
ALLISON BUCHHOLTZ-UA: L'ordre?
AUDIENCE: --la classe en CSS à .cool, l'espace, .special?
ALLISON BUCHHOLTZ-UA: Oui, car alors que
dirait, portée à tout ce qui a cool,
puis regarder ce has-- Je veux dire, comme, dans ce cas,
Je ne pense pas que cela aurait changé.
>> TOMAS REIMERS: Si nous avait dit quoi?
Désolé.
>> ALLISON BUCHHOLTZ-UA: Si nous portée refroidir puis
chercher des choses sur spécial, il en serait de même, en fait.
>> TOMAS REIMERS: Donc, il ne serait pas.
>> ALLISON BUCHHOLTZ-UA: Il ne serait pas?
Oh, oh bien.
Je me trompe.
>> TOMAS REIMERS: Donc, la raison ce est different-- mistake-- commune
ce droit est maintenant seulement le lien a cool, non?
Je suppose que ma question est à vous les gars, ce sur cette page est compensée par .cool?
Il ya deux balises ici, non?
Ce est celui-ci et celui-ci.
Les deux correspondent cool.
Rien d'autre ne le fait.
Donc, si vous l'avez dit, .cool, l'espace, .special, ce que vous allez dire, ce est,
au sein de ces balises, ce qui est spécial?
ALLISON BUCHHOLTZ-UA: Hm.
Ce est ce que it-- droite.
Parce que ce est comme quelque chose ici.
>> TOMAS REIMERS: Donc, il sélectionne rien.
>> ALLISON BUCHHOLTZ-UA: considérant que, spéciale, nous sommes au sein de ces tags here.
>> TOMAS REIMERS: celles et ceux.
AUDIENCE: OK.
Donc ces balises de la barre oblique?
>> TOMAS REIMERS: Oui.
Est-ce logique?
Comment ce est essentiellement essayer de réduire la portée.
ALLISON BUCHHOLTZ-UA: Ouais.
Je pense que ce est probablement la meilleure façon de penser.
>> TOMAS REIMERS: Donc nous avons trouvé cela, et nous avons trouvé cette fois assorti spéciale.
Et puis nous demandons, dans ces gars-là, ce qui est cool?
Et au sein de celle-ci, la fraîcheur de celui-ci.
Dans celui-ci, rien ne est cool.
Donc, ce est le seul point qui reste.
>> ALLISON BUCHHOLTZ-UA: considérant que fraîche est seulement dans ces balises un là-bas.
TOMAS REIMERS: Exactement.
Et ce qui est spécial au sein de ceux-là?
Rien.
Maintenant, ce que je vais dire, ce est se il n'y a pas d'espace,
vous demandez ce qui est cool et special-- ou ce qui est jolie et spéciale, non?
Si vous dites .special.pretty, ce est le même que .pretty.special.
>> Parce que ce est supprimer l'espace demandons, ce est, quand vous dites .special,
vous demandez, OK, ceux qui sont spéciaux?
Et puis de ceux qui ceux sont également assez,
qui est la même, grammaticalement, comme demandé, ce est assez,
puis de ceux, ce est aussi spéciale?
Droite?
Ce est la différence de ce est au sein de ce qui est.
AUDIENCE: OK.
TOMAS REIMERS: Ouais.
Impressionnant.
Donc, avec cela à l'esprit alors--
>> ALLISON BUCHHOLTZ-AU: Je pense que notre dernière chose est (dans Fantaisie COLOMBIE ACCENT)
le modèle de boîte.
>> TOMAS REIMERS: Le box-- [RIRES] Je aime la façon Allison dit que.
Donc, la chose modèle de boîte.
>> ALLISON BUCHHOLTZ-UA: Suffit une boîte, je serai votre modèle de boîte.
TOMAS REIMERS: Donc, nous allons parler de cela.
Donc maintenant nous avons passé beaucoup de temps à parler sélecteurs.
A présent, vous les gars sont probablement, comme, maîtres de selectors-- vous le savez,
comment sélectionner exactement le contenu vous voulez manipuler sur votre écran.
>> Alors maintenant, la question est, comment exactement pouvez-vous manipuler?
Donc je suppose que le plus fondamental façon de penser à ce sujet
est, ainsi, qu'est-ce est un élément en CSS?
Nous avons passé beaucoup de temps parler, ce est une étiquette,
ou ce qui est le plus fondamental représentation d'un tag?
>> Une bonne façon de penser ce est, ce est la forme du saumon?
Quelle est la forme, comme, le couleur saumon fond?
>> PUBLIC: Ce est un rectangle.
>> TOMAS REIMERS: Ce est un rectangle, non?
>> ALLISON BUCHHOLTZ-UA: Ne était pas une question piège.
[Rires]
>> TOMAS REIMERS: Ne pas essayer de vous tromper gars cette fin.
Nous avons donc ce rectangle.
Et l'étiquette est une p, non?
Alors que nous donne bonne la croyance que le paragraphe
est représenté par un rectangle, à moins dans l'esprit du navigateur, qui
il est.
>> ALLISON BUCHHOLTZ-AU: Je veux dire, navigateurs sont typiquement rectangulaire,
il est donc logique.
>> TOMAS REIMERS: L'idée ici est que toutes les balises à l'intérieur CSS
sont représentées par un rectangle.
Et chaque rectangle a quatre pièces selon CSS, OK?
Vous avez le contenu réel.
Ce est là que le texte se trouve.
>> ALLISON BUCHHOLTZ-UA: Peut-être votre photo.
>> TOMAS REIMERS: Ouais.
Vous avez rembourrage, qui est juste une sorte d'espace blanc.
Ensuite, vous avez une frontière.
Et puis vous avez marge, ce qui est un espace blanc en dehors de cela.
Donc, cela n'a aucun sens à quiconque, donc nous sommes
va en parler pendant une seconde.
Donc, ici, ce que nous allons faire ce est que nous allons créer quelques divs, OK?
Excusez-moi tout I--
>> ALLISON BUCHHOLTZ-AU: Je me sens comme nous devrions mettre une photo mignonne dans.
>> TOMAS REIMERS: Nous avons certainement le devrait.
>> ALLISON BUCHHOLTZ-UA: Je me sens comme tout le monde
pourrait bénéficier d'une image mignonne, ce est tout.
>> TOMAS REIMERS: Pouvons-nous tous bénéficier de a--
>> AUDIENCE: Oui, bien sûr.
TOMAS REIMERS: OK, cool.
Donc, nous devrions mettre un mignon image dans quelque part.
ALLISON BUCHHOLTZ-AU: Je me sens comme un lapin mignon pourrait être utile en ce moment.
TOMAS REIMERS: Bien sûr.
ALLISON BUCHHOLTZ-UA: Fin de la semaine.
Avoir quelque chose adorab--
>> TOMAS REIMERS: Comment accès un chaton?
>> ALLISON BUCHHOLTZ-UA: Un chaton fonctionne aussi.
>> TOMAS REIMERS: Cool, parce il ya un site pour cela.
Il a appelé PlaceKitten.
ALLISON BUCHHOLTZ-UA: Ce est génial.
TOMAS REIMERS: Oui.
ALLISON BUCHHOLTZ-UA: Juste pour, comme, images d'espace réservé dans votre site web.
TOMAS REIMERS: Mm-hm.
Il ya aussi PlacePuppy.
Et il ya PlaceBacon.
>> ALLISON BUCHHOLTZ-UA: PlaceBacon?
Vraiment?
>> TOMAS REIMERS: Oh, nous ne faisons pas avoir accès à Internet ici.
>> ALLISON BUCHHOLTZ-UA: [gémissements]
Tragique.
TOMAS REIMERS: Sinon, Je voudrais vous montrer les gars
comment mettre des images dans votre site web.
Nous allons essayer d'obtenir cette travailler avant nous devons aller.
Mais pour l'instant, nous sommes juste va parler dans des couleurs alors.
Nous voulons mettre des photos de kittens--
>> ALLISON BUCHHOLTZ-UA: Nous l'avons fait.
>> TOMAS REIMERS: de --la internet bas pour le moment être.
Nous avons donc deux divs, et nous sommes allons leur donner deux identifiants.
Nous allons appeler «Premier» et «deuxième».
Donc id = «premier».
Et nous allons leur donner deux couleurs.
Alors, comment pouvons-nous choisir quelque chose avec un id de «première»?
ALLISON BUCHHOLTZ-UA: Dot ou hachage?
AUDIENCE: Sharp.
TOMAS REIMERS: Sharp, parfait.
Sharp, hachage, quelle que soit nous--
>> ALLISON BUCHHOLTZ-UA: Beaucoup de choses à l'appellent.
>> TOMAS REIMERS: OK.
Nous allons régler le hashtag, et ce est ce que nous allons aller avec.
D'ACCORD?
>> ALLISON BUCHHOLTZ-UA: hashtag.
>> TOMAS REIMERS: Donc hashtag de première.
>> ALLISON BUCHHOLTZ-UA: Donc, vous pouvez Tweet Les seminar--
hashtag CSS, hashtag cool.
TOMAS REIMERS: hashtag Awesomeness.
ALLISON BUCHHOLTZ-UA: Hashtag Awesomeness, oui.
TOMAS REIMERS: OK.
Nous avons donc «premier» et «deuxième».
Alors d'abord, nous allons avoir une couleur de fond de rouge.
ALLISON BUCHHOLTZ-UA: Euh, du côlon.
TOMAS REIMERS: Yup.
ALLISON BUCHHOLTZ-UA: Je serai votre spot-checker.
TOMAS REIMERS: Allison m'a.
Background-color de blue--
>> TOMAS REIMERS: Violet!
>> TOMAS REIMERS: Violet.
ALLISON BUCHHOLTZ-UA: Oui.
Ma couleur préférée de Violet, et nous ne avons pas encore utilisé.
>> TOMAS REIMERS: Violet.
ALLISON BUCHHOLTZ-UA: Violet.
Cela fonctionne.
>> TOMAS REIMERS: Donc, nous sommes allez avoir deux divs.
Ils vont être totalement vide.
Nous devrions probablement avoir un peu de texte.
Donc, "premier" va être "BONJOUR".
Et la «seconde» sera say--
>> ALLISON BUCHHOLTZ-UA: Au revoir.
>> PUBLIC: - «monde».
Bonjour, au revoir.
ALLISON BUCHHOLTZ-AU: Je ai vu les en concert l'autre semaine.
TOMAS REIMERS: Les Beatles?
ALLISON BUCHHOLTZ-UA: Pour reals.
Ils ne sont pas si grande.
Je ne l'aime pas.
>> TOMAS REIMERS: Nous avons "BONJOUR" et "au revoir."
Et encore, CSS est tout simplement génial, parce qu'il reconnaît nos couleurs.
Ne pas besoin de même inquiètent du fait qu'ils existent.
Ils le font.
>> ALLISON BUCHHOLTZ-UA: Ils existent.
>> TOMAS REIMERS: Donc je pense CSS a 255 mots pour parler de la couleur.
Si vous pouvez penser à une couleur en dehors 255 personnes, comme, je serai impressionné.
ALLISON BUCHHOLTZ-UA: Ouais.
Je pense que vous les gars peuvent avoir juste d'arriver juste après.
>> TOMAS REIMERS: Donc ici, vous verrez que nous avons deux boîtes
juste au-dessus de l'autre, non?
BONJOUR et au revoir.
>> ALLISON BUCHHOLTZ-UA: Il n'y a pas d'espace entre les deux.
Ils sont juste smooshed juste au-dessus de l'autre.
>> TOMAS REIMERS: Donc la première chose Je suppose que nous devrions parler
ce est qu'il faut say-- également oui.
Donc CSS les représente comme une sorte de boîtes.
Et comme les boîtes, ils ont contenu.
Et le contenu est en ce moment sorte de l'BONJOUR ou de la revoir et ce est tout.
D'ACCORD?
>> Donc l'une des premières choses que vous peut faire est que vous pouvez ajouter le remplissage.
Rembourrage dit combien d'espace il devrait laisser de chaque côté.
Alors disons que je veux dire 10 pixels de chaque côté.
Et je vais décortiquer que, dans une seconde.
ALLISON BUCHHOLTZ-UA: Toutes ces choses ici
vont être la plupart du temps en pixels pour le reste du séminaire.
Vous allez voir qu'il a un peu d'espace autour d'elle, non?
Donc, ce que vous ne voyez pas ici ce est qu'il ya ce genre invisible de rembourrage
de chaque côté, qui dit, comme, OK, vous avez votre boîte de content--
>> ALLISON BUCHHOLTZ-UA: Voulez-vous juste tirer vers le haut l'élément inspecter?
>> TOMAS REIMERS: Ouais, ce est une bonne idée.
ALLISON BUCHHOLTZ-UA: Aussi, je trouve que l'élément inspecter est une bonne façon
de comprendre si quelque chose se passe mal, quelque chose d'inattendu se produit,
inspecter les balises et de voir ce ce est comme écrasé est utile.
>> TOMAS REIMERS: Je ne suis pas sûr si vous les gars pouvez voir cette couleur.
Pouvez-vous?
Vous verrez cette rembourrage sur le type de bord.
Et puis vous voyez le réel contenu en bleu, à droite?
Donc, ce est très bases du modèle de boîte.
Vous avez du contenu.
Ensuite, vous avez rembourrage.
>> AUDIENCE: Pourquoi ne pas vous venez utiliser la boîte à l'intérieur the--
>> ALLISON BUCHHOLTZ-UA: Droit.
Parce que ce est juste la sélection l'élément en ce moment.
>> TOMAS REIMERS: Yup.
D'autres choses.
Donc, nous allons parler de ce que commande de rembourrage pour une seconde.
Donc, en CSS, des mesures besoin d'avoir une unité.
Donc, vous devez d'abord le montant.
Donc dans ce cas, nous l'avons dit 10.
Et puis la suivante Nous avons dit pixels, px.
Autres ceux que vous pourriez avoir sont des choses comme centimètres, pouces.
Vous pouvez faire des choses comme, ce qui est 10 pouces?
Et ça va être ridicule.
>> ALLISON BUCHHOLTZ-UA: Oh, mon garçon.
>> AUDIENCE: Whoa.
>> Tomas et ALLISON: Ouais.
TOMAS REIMERS: Ce est donc tout le rembourrage.
Je vais revenir à pixels.
>> ALLISON BUCHHOLTZ-UA: Pixels ont tendance à être, comme, la norme.
Quand vous regardez beaucoup de sites Web, ils travaillent surtout en pixels.
TOMAS REIMERS: Donc, vous allez voir soit pixels-- les autres ceux que vous voyez
est em, qui est l'un em est égale à la hauteur de la police
qui vous utilisez actuellement.
>> ALLISON BUCHHOLTZ-UA: Mm.
TOMAS REIMERS: Ce est une bonne façon de le dire, comme, je veux autant d'espace que ma police
est prenant.
ALLISON BUCHHOLTZ-AU: Je ne savais pas que.
Vous apprenez quelque chose de nouveau chaque jour.
TOMAS REIMERS: Il ya un beaucoup de mesures dans CS.
Je vous suggère de regarder vers le haut.
Pour tous vos cas, je pense pixels devraient être suffisantes.
Et ils sont aussi ce que vous allez voir
dans la majorité des exemples effectuée en ligne.
Donc, nous allons en rester pixels.
>> Vous pouvez aussi, je say-- devriez donc rembourrage ensembles tous les rembourrages.
Vous pouvez aussi faire quelque chose comme "Padding-top" juste set--
ALLISON BUCHHOLTZ-UA: Peut-être nous aurons notre "BONJOUR" dos.
TOMAS REIMERS: --to vient de mettre la rembourrage sur le dessus et rien d'autre.
Ainsi, les quatre commandes sont padding-top, padding-bottom, padding-left,
et padding-right.
>> ALLISON BUCHHOLTZ-UA: Tout comme vous pouvez vous attendre pour une boîte.
>> TOMAS REIMERS: Ouais.
Rien trop fou là-bas.
Est-ce logique?
Ce est donc un rembourrage.
Je vais mettre tout les rembourrages dos à 10.
Et puis je vais passer à la frontière.
>> Donc, ce est la frontière est la frontière est une commande bizarre.
Il faut en quelque sorte trois choses à la fois.
Donc, la première est la taille que vous veux que ce soit en tant que mesure.
Encore une fois, je suis seulement en utilisant pixels.
Et la dernière chose que je devrait ajouter à des mesures
est la seule chose qui n'a pas besoin d'une unité est 0.
Ce est en fait incorrecte de donner une unité 0,
car 0 est 0 travers pouces, pixels, centimètres, peu importe.
Tout signifie simplement 0, non?
Alors d'abord vous lui donnez la mesure.
>> Ensuite, vous lui donnez le style.
Donc, je vais dire "solide."
Et nous allons parler de ce que cela signifie.
Et puis enfin, vous lui donnez une couleur.
Donc, je vais dire «noir».
Et ce sont toutes les choses que nous avons maintenant vu avant, sauf pour le style,
mais nous en reparlerons.
Donc, vous avez vu les gars mesures, et vous avez vu couleurs.
Et ce qui se passe est que nous obtenons ce belle bordure noire autour de lui, non?
Les gars, vous voyez la façon dont nous l'avons fait?
>> AUDIENCE: Ouais.
>> TOMAS REIMERS: Cool.
Alors ce est quoi?
Alors tout d'abord, ce est un pixel.
Ce est assez évident, non?
Comme, ce est un pixel d'épaisseur.
Ou ce serait un pixel, mais je suis zoom avant, il est donc un peu plus
que cela.
>> ALLISON BUCHHOLTZ-UA: Et nous avons cette résolution TV ridicule.
>> TOMAS REIMERS: Ouais.
Vous pouvez le rendre plus grand, petit, peu importe.
Alors, voici une frontière de deux pixels.
Vous verrez que ce est deux fois plus épaisse.
La prochaine chose que vous avez est la couleur.
Ce ne est pas intéressant.
Je ne vais pas parler à ce sujet, vraiment.
>> ALLISON BUCHHOLTZ-UA: Mais le style peut-être juste un peu intéressant.
>> TOMAS REIMERS: Ouais.
Donc style, il ya quelques uns que je vois couramment utilisé.
Solides, ses prochaines de première en pointillés, et le pointillé de la dernière.
Et ici est parsemée.
Vous verrez qu'ils sont un tas de points, non?
Une bonne façon de sorte d'obtenir une frontière belle aller, des tirets sont également assez populaire.
>> ALLISON BUCHHOLTZ-UA: Et puis bien sûr, je suis
sûr qu'il ya beaucoup d'autres styles que vous pouvez obtenir.
Et nous avons un grand ensemble de liens à la fin pour vous les gars
au type de parcourir et regarder plus frais CSS.
>> TOMAS REIMERS: Et puis la dernière chose, nous sommes
aller à parler de la modèles de boîtes réel rapide.
Oh, et puis la frontière, exactement comme rembourrage,
vous avez aussi des choses comme border-left, border-right, border-top,
border-bottom, qui vous permettra pour obtenir à la frontière spécifique.
Alors, voici juste la frontière gauche-défini.
Est-ce que cela a du sens?
>> ALLISON BUCHHOLTZ-UA: Ce est un endroit frais façon de mettre l'accent sur les choses ou ajouter
lignes entre les différents éléments.
TOMAS REIMERS: Absolument.
Donc, ce est notre frontière.
Et la marge de la dernière.
Padding comme de marge sauf qu'il ne est pas within--
ALLISON BUCHHOLTZ-UA: Ce est pas autour de votre élément
mais en fait autour de la totalité boîte que nous avons été voir.
>> TOMAS REIMERS: Ouais.
Allison dit parfaitement.
Ce ne est pas, comme, à l'intérieur de votre élément, ce est autour de la boîte entière.
Cela signifie des choses comme fond ne se appliquent pas à elle.
Et il dit en substance, comme, je ne veux rien
dans cet espace pour moi.
Donc, comme nous avons ici une marge de 10 pixels.
Donc, rien dans les 10 pixels devrait être à côté de moi.
Ce est le genre de son l'espace, mais une sorte de pas.
Donc, ce est très bases du modèle de boîte.
Est-ce logique?
Cool, cool.
ALLISON BUCHHOLTZ-UA: Awesome.
Alors maintenant, je pense que nous avons juste avoir nos ressources fraîches
que nous vous emmènerons gars travers très rapidement.
Et nous allons bien actually--, avons-nous encore Internet?
>> TOMAS Reimers: LET'S voir si je peux ouvrir up--
permettez-moi de voir si je Internet peut obtenir rapidement
tandis Allison parle de quoi que ce soit Allison veut parler.
ALLISON BUCHHOLTZ-UA: Donc je ne ai pas basically--
sais ce que je peux dire à ce stade.
Mais ce sont certains vraiment de bonnes ressources.
Ce sont celles qui Tomas et je ai utilisé
et que nous avons effectivement utilisé en préparation pour cela.
W3Schools est celui que vous gars auraient vu avant.
Nous le recommandons pour un beaucoup de choses avec CSS.
Je sais que je le recommande à ma section tout le temps.
>> Une des grandes choses, ce est qu'il vous permet de genre de gâchis avec CSS
et voir les changements instantanément dans ce domaine,
comme, double-fenêtre voir qu'elle a.
Donc, vous ne avez pas à vous soucier de création de votre propre page Web,
ou la mise en place dans votre vhost appareil local et hôte local,
et d'obtenir tous ces trucs travail.
Il est intégré à droite dans la page.
>> Et il a ces petits leçons que vous pouvez
passer à apprendre plus sur sélecteurs,
ou en apprendre davantage sur la manipulation de votre police, ou d'un arrière-plan ou une image.
Et vous avez ces résultats instantanés que vous
ne ont pas à faire ne importe quel d'autres travaux de préparation pour.
Donc je aime W3Schools.
Ce est fabuleux.
Est-il travailler?
>> TOMAS REIMERS: Ouais.
Non, ce ne est pas.
Voulez-vous que je essaie et redémarrer mon ordinateur?
Ou voulons-nous to--
>> ALLISON BUCHHOLTZ-AU: Je veux dire, ainsi, ce sera aussi en ligne.
Tous les diapositives seront en ligne.
Donc, je viens de faire ces recommande fortement.
>> Ce est très bien comme juste comme une feuille de triche.
Ce est juste tout le base commandes que vous avez.
Ce est formidable quand vous êtes le premier à partir de votre site web.
Parce que peut-être vous ne avez pas voulez entrer dans tous les
la vraie Nitty Gritty conception lourde choses.
Vous avez juste besoin de le formater de manière ce genre de logique et de la volonté
faire pour le moment.
Et si vous voulez vraiment y entrer, je sais
ce est, comme, l'un des Références préférés de Tomas.
Nous utilisions à préparation, et ce est fabuleux.
Ce est le développeur de Mozilla.
>> TOMAS REIMERS: Donc Mozilla sont les gens qui font de Firefox.
Et ce est juste leur propre développeur référence, ce qui je pense est génial.
Et il a un merveilleux liste de ressources.
Donc, nous have--
>> ALLISON BUCHHOLTZ-UA: Et puis dernière note est
lorsque vous essayez de concevoir votre site Web,
se inspirer des choses que vous pensez que sont jolies.
Inspection de l'élément, inspecter le code source
peut être super utile pour essayer de comprendre
comment le style de votre propre site web.
>> Souvent, je me sens comme le meilleur Ainsi, en plus de l'expérimentation,
est juste à regarder choses qui sont assez.
Je trouve que ce est vraiment difficile de tout sorte de concevoir les choses sur votre propre,
surtout au début.
Alors se il vous plaît consulter les sites Web que vous aimez regarder.
Comprendre ce qui rend leur appel à vous.
Et puis ne hésitez pas à essayer de reproduire ce.
>> TOMAS REIMERS: Droit.
Même comme des sites Web comme ça, vous pouvez voir
il ya certainement un div au sommet.
Et puis vous avez un autre div sein ici, ce qui est Awesomeness CSS.
Et puis vous avez un tas de liens ici.
Si vous avez vraiment inspecter éléments, vous pouvez trier des
commencer à voir ce que font les sites Web ressembler, et comment puis-je
recrée que si je voulais.
Est-ce logique?
Donc, nous ne avons que trois minutes.
Autant de questions?
Chacun d'entre eux?
Oui.
>> AUDIENCE: Pour la couleur rectangle, comment feriez-vous
have-- si vous ne voulez pas aller sur toute la page, pourrait
vous avez fait aller dans seulement la moitié de la page ou simplement le texte?
>> TOMAS REIMERS: Oui, absolument.
Alors laissez-moi voir effectivement.
Je ai deux idées.
Alors tout d'abord, vous peut également utiliser des pourcentages.
>> AUDIENCE: Vraiment?
>> ALLISON BUCHHOLTZ-UA: Donc, quelque chose à rechercher est le positionnement relatif.
Ce est quelque chose que nous ne ont pas le temps d'entrer dans,
mais ce est quelque chose que je doute vous recommandons de vérifier les gars.
>> TOMAS REIMERS: Donc pourcentages.
Et voir comment nous l'avons fait seulement 50% de la largeur?
ALLISON BUCHHOLTZ-UA: Si vous réellement savoir le nombre de pixels,
vous pouvez être plus précis de cette façon.
Vous pouvez bricoler avec elle.
Mais 50%.
Si nous étions pour redimensionner notre navigateur, il serait plus petit.
>> TOMAS REIMERS: Eh bien, ce est essentiellement de 50% en ce moment, je pense.
Ce est 50%, et ensuite la marge a été ajouté à cela.
CSS a beaucoup de bizarreries.
Donc maintenant ce est 50% de la largeur de la page.
Mais rappelez-vous que vous avez 10 pixels retirés de chaque côté.
Donc, si vous étiez à se déplacer que contre le bord gauche du navigateur,
il ressemblerait 50%.
Encore une fois, comme je l'ai dit, CSS peut être beaucoup de conjectures et de vérification.
Comme, vous pensez que quelque chose est va se comporter d'une façon,
mais il se comporte d'une manière totalement différente.
>> ALLISON BUCHHOLTZ-UA: Et vous obtenez juste plus intelligente,
et vous obtenez juste une meilleure intuition comme vous déplacer le long.
>> TOMAS REIMERS: Et il obtient de pire en pire.
Donc, ce est vraiment juste une course.
>> ALLISON BUCHHOLTZ-UA: Ce est super encourageant.
Nous voulons qu'ils aiment CSS.
>> TOMAS REIMERS: CSS est impressionnant.
Ne oubliez pas que.
D'autres questions?
>> ALLISON BUCHHOLTZ-UA: La seule chose.
Rien d'autre?
Cool.
>> TOMAS REIMERS: Awesome.
>> ALLISON BUCHHOLTZ-UA: Eh bien, si vous les gars ont des questions plus tard,
nous sommes toujours disponibles comme d'habitude.
Vous verrez probablement une certaine nous pour des projets finaux
et certainement au hackathon.
>> TOMAS REIMERS: Absolument.
Et à la foire.
>> ALLISON BUCHHOLTZ-UA: Et à la foire.
Oh.
>> TOMAS REIMERS: Réjouissez-vous voir tous vos awesome--
>> ALLISON BUCHHOLTZ-UA: Nous verrons tous vos sites Web impressionnants
ce sera magnifique.
TOMAS REIMERS: Vous pouvez toujours voir, comme, les sites Web
qui avait, comme, bon CSS puis comme ceux qui ne ont pas essayer de faire CSS.
ALLISON BUCHHOLTZ-UA: Aussi, un autre chose, une chose à regarder dans
est bootstrap.
Donc Bootstrap est grande.
>> TOMAS REIMERS: Google que si vous--
>> ALLISON BUCHHOLTZ-UA: Google il.
Ce est fabuleux.
Vous allez adorer.
Et maintenant que vous avez un compréhension de base de CSS,
ça va faire beaucoup plus de sens.
Impressionnant.
Merci, les gars.
>> TOMAS REIMERS: Merci beaucoup.