>> [REPRODUCCIÓ DE MÚSICA]
ALLISON Buchholtz-AU: Així bàsicament estem només va
per donar-li un resum de CSS, perquè sabem
que no estava cobert en totes les seccions.
I que realment volem per assegurar-se que vostè nois tenen aquesta eina a la seva disposició,
perquè té la capacitat de fer els seus llocs web es veuen molt més bonica.
>> I si vostè està construint un lloc web, a continuació, és probable que desitgi fer-ho bonic.
Vull dir, vostè no ha de, però et suggereixo que. [Rialles]
Si voleu que els usuaris l'utilitzen, és possible que volen que sigui una mica [inaudible].
Així que anem a tractar de donar-li només algunes eines bàsiques i la comprensió,
de manera que quan vostè surt i ja està la investigació de les coses sobre CSS,
no és completa galimaties, com CSS vegades ser.
>> TOMAS Reimers: Sí.
Allison va dir que prou bé.
Així que suposo que el primer que hem ha de començar amb és el que és CSS?
Així CSS és impressionant.
CSS--
>> ALLISON Buchholtz-AU: Això és el nom del nostre seminari.
>> TOMAS Reimers: Sí.
És molt important que entén que per llavors.
Si només treus 1 cosa, és que si CSS impressionant.
Dos és CSS significa Cascading Style Sheets.
Així que en el seu nucli, CSS és un full d'estil, és a dir,
que li permet donar estil a una pàgina web.
I llavors el que això significa, és un manera d'afegir estil als seus llocs web.
Així per l'estil, ens referim a tot això no structural--
així que coses com colors, fons imatges, vores, com, farcit,
marges.
Anem a parlar del que tot el que significa en una mica.
>> Així que hem anat per davant i només obert tant dels alçats en gedit.
Així que això és index.html.
I això és main.css.
Així main.css no té res.
ALLISON Buchholtz-AU: No hi ha un estil fins ara.
TOMAS Reimers: Cap.
I com veuràs, és un lloc molt lleig.
ALLISON Buchholtz-AU: És simplement.
TOMAS Reimers: Sí.
Sí, no és lleig, és només minimalista.
I llavors aquí tenim index.html.
I així, per a un ràpid recapitulació d'HTML, Allison,
només vol parlar de la pàgina?
>> ALLISON Buchholtz-AU: Sí.
Així que, òbviament, tenim la nostra HTML etiqueta, que acaba de noms de fitxers HTML.
Tenim la nostra capçalera aquí, amb CSS Awesomeness, de les quals: si tornes.
On és això?
>> TOMAS Reimers: Oh.
Sí, es pot veure.
ALLISON Buchholtz-AU: I noti la capçalera
és aquesta capçalera pestanya fins aquí.
I després: "Hola, món!" és el text que acabem de
es presenten a la web pàgina, que aquests: tornar.
Enrere.
Que no és més en el nostre cos aquí-- el text sense format.
A més, una cosa és compte, si ens fixem aquí,
Tomas va canviar fins a aquests 2 de la nostra diapositiva.
Així que, mentre vostè té tot tres d'ells, estàs bé.
Poden estar en qualsevol ordre que vulguin.
El més important és que que té cadascuna d'aquestes tres coses.
>> TOMAS Reimers: Cool.
Afegir un tipus doc?
ALLISON Buchholtz-AU: Sí.
TOMAS Reimers: Sí.
Fresc.
ALLISON Buchholtz-AU: Pel que sembla, meus micròfons no m'agrada.
TOMAS Reimers: Oh, doneu-nos un segon just mentre Allison canvia al seu micròfon.
Així que si.
Així que tenim a la nostra pàgina principal.
És una espècie de sense estil.
No tenim molt.
Només tenim bàsicament text.
Tenim el full d'estils.
Tenim el títol.
Així que només nua desossada components fan un lloc web.
>> Així que a partir d'aquí, anem a parlar del que és CSS
i el que sembla i tot això.
Així que per que--
ALLISON Buchholtz-AU: Tornar a les diapositives.
TOMAS Reimers: Tornar a les diapositives.
I Allison pot prendre el relleu.
>> ALLISON Buchholtz-AU: Woo.
D'acord.
Així que en el seu arxiu CSS, vostè va a tenir
moltes d'aquestes coses diu selectors.
Això només serà el base del seu arxiu CSS.
És només serà munts i munts d'elles.
Així selecció.
Això és només l'anatomia general.
Anem a anar a través de exemples, perquè si mai nois
vist el meu secció, em sento que les coses en abstracte
realment no té sentit.
Sempre ajuda a veure els exemples.
>> Així que tenim una mica de selecció.
Això serà algun identificador de el que volem l'estil per aplicar a.
I després podem tenir qualsevol conjunt de normes i valors.
Així selectors que es poden veure podria ser alguna cosa així com el cos,
o paràgraf amb P, o de capçalera, o el que sigui,
el que vol que les etiquetes HTML que siguin.
>> Així que en aquest cas, tenim cos.
I tenim alguna regla, que això correspon
al que el seu estil s'aplica a.
Així que en aquest cas, tenim color de fons i el pes del text.
Així que això canviarà el fons de res
dins de qualsevol etiqueta del cos del nostre arxiu HTML.
I es va a donar que aquest valor de color blau clar.
>> Així que va a fer que el fons blau clar.
I després res al cos és tindrà un pes negreta.
Així que només va a negreta tot el nostre text.
I això és només un selector.
Però vostè podria tenir molts d'aquests.
I com anem a mostrar més tard, una mica més en com
que les obres i més exemples allà.
Qualsevol cosa que vulguis afegir?
>> TOMAS Reimers: No.
Allison va aconseguir.
Només anem a tallar fins a un exemple aquí al nostre lloc exemple.
Així que aprofitarem aquesta realitat.
És perfecte.
Així que només vaig a copiar i enganxar que la dreta al nostre arxiu main.css.
I jo vaig a guardar-lo.
I després anem a executar-lo.
Així nota banda, una de les la majoria de les coses frustrants
és si vostè no guarda un arxiu, i a continuació, vostè, com, torna a carregar la pàgina,
i igual que, per què no és el canvi succeeixi?
Succeeix.
Així que aquí vam veure que vam fer la nostra pàgina web un fons blau clar
i una mica de text en negreta.
>> També he de dir, si nois tenen preguntes sobre qualsevol cosa
que estem fent, sentim si us plau lliure per aturar-nos i preguntar-nos.
Estem completament disposats per contestar preguntes.
>> ALLISON Buchholtz-AU: Òbviament, amb CSS, tot basa en si mateix.
Així que si una cosa no tenir sentit ara,
no vull que a empantanegar més tard.
>> TOMAS Reimers: Així que anem a tipus de disseccionar això.
Llavors, vols començar amb el selector d'aquí?
>> ALLISON Buchholtz-AU: Sí.
Com deia abans, el cos és només el nostre selector d'aquí.
Així que si ens remuntem a la nostra ah index--.
>> TOMAS Reimers: Què jo només vaig tancar.
Dóna'm un segon.
Així File, Open, index.html.
ALLISON Buchholtz-AU: Cool.
Així que si vostè nota aquí, tenir aquestes etiquetes del cos, no?
Així que el selector només correspon a les etiquetes que els que estem parlant.
Així el cos aquí.
Així que el que estem dient és tot-- podem tornar?
Tant de bo pogués només com tocar la pantalla.
Seria molt més fresc.
>> Així que qualsevol cosa dins dels etiquetes del cos, que vam veure
era només, com el text, i el cos en general
es refereix a, com, el fons.
Si alguna vegada vols canviar el fons,
que serà en un cos de l'etiqueta.
Només té aquestes regles s'apliquen a ells.
>> Així que si haguéssim d'anar a index.html i- en realitat,
podem tenir alguna cosa fora del cos?
Si tinguéssim, com, un peu de pàgina o alguna cosa, no s'aplicaria a aquest.
Però qualsevol cosa dins aquestes etiquetes del cos va
a ser afectats per aquest òrgan selector que hem fet.
Així que si anés a escriure una mica més allà--
>> TOMAS Reimers: Anem a gestionar això.
Així que si teníem un div-- així que això és només una altra etiqueta que pot tenir.
Vaig a tancar-la.
O farem d'aquest un paràgraf.
Així p significa paràgraf.
I dins d'aquest paràgraf.
I llavors jo dic: "Aquest és el text."
Fresc.
I llavors vaig fer aquesta regla s'aplica a un paràgraf en lloc del cos.
Veuràs com s'aplica només a el paràgraf recentment format, dreta,
No tot l'assumpte.
Té això sentit?
>> ALLISON Buchholtz-AU: Així que això és tot el cos,
però ara el nostre selector només correspon al paràgraf.
Així que només tenim negreta i blau d'aquest paràgraf específic,
perquè aquesta és l'única cosa que està tancat dins de l'etiqueta p.
>> TOMAS Reimers: Té sentit espècie de com les coses encapsular altres coses?
ALLISON Buchholtz-AU: A més, només dir, com una de les millors maneres
per aconseguir realment còmode amb CSS és simplement fer les coses d'aquesta manera,
només provar-ho.
És molt senzill d'escriure alguna cosa fora, va colpejar Actualitzar, i veure què passa.
I com amb la majoria de CS, experimentació pot sovint
conduir a una millor comprensió intuïtiva.
Fins i tot més que nosaltres simplement, com, parlant amb vostè.
>> TOMAS Reimers: Absolutament 100% d'acord en aquest punt.
Així que si ens remuntem a això, anem a començar dissecció exactament el que aquests dos ho fan.
Així que tenim dues normes sobre això.
Així que la primera d'elles és el color de fons.
I veus que hem establert que igual a un valor, de color blau clar.
>> Així que en CSS, CSS és una espècie de molt solt sobre com
se't permet definir el color.
Així es pot definir pel seu nom.
També pot fer alguna cosa com "vermell".
I després, si ens remuntem a això, veuràs que el fons és de color vermell.
També pot obtenir realmente-- crec que pot ser bastant creatiu amb això,
¿No és així?
>> ALLISON Buchholtz-AU: I pensa que pot utilitzar hexagonal.
No pots?
>> TOMAS Reimers: Sí.
Així que vostè pot utilitzar hexagonal.
Però estic pensant nom-savi.
No hi ha?
ALLISON Buchholtz-AU: Vostè pot fer uns quants.
Més o menys com la majoria dels colors que vostè pot nom-- com, crec que el salmó és un.
>> TOMAS Reimers: Estem salmó intent va.
ALLISON Buchholtz-AU: I crec chartreuse hi és.
TOMAS Reimers: Sí.
Veus?
Pel que pot ser bastant creatiu.
>> ALLISON Buchholtz-AU: Vostè podria ser bastant creatiu.
Igual que, si es pot pensar en el nom del color, és probable que sigui allà.
Si realment vols fina detall, es pot anar hexagonal.
>> TOMAS Reimers: Sí.
Així hexadecimal.
Si vostès recordin això de nou del seu antic PSET, Imatge Recover,
vostès havien de bregar amb aquests valors hex.
I mena de recapitular el que és, hex té tres valors emmagatzemats en ella.
Així que és en grups de dos increments.
Les dues primeres representen el valor de vermell.
El segon representa el valor verd.
I l'últim és blau?
>> Així succeeix FF per representar 1 hexadecimal 255.
Així que tens 255 vermell, 255 verd, i 0 per al blau.
I els valors oscil·len entre 0 i 255.
>> AUDIÈNCIA: Correcte.
Així que, essencialment, podríem buscar l'Internet per a qualsevol color que volem,
i identificar la realitat-coneguda de color combo espectre,
i llavors podríem posar en?
ALLISON Buchholtz-AU: Exactament.
Així que tens més o menys complet control sobre els colors que vulguis dins de CSS.
Anem a parlar de imatges de fons més endavant?
O volem fer això?
>> TOMAS Reimers: Sí.
Absolutament.
Així que primer, només per demostrar que vermell i verd és de color groc.
I si necessites una mica ajuda per trobar això,
pot buscar a Google alguna cosa com "selector de color."
ALLISON Buchholtz-AU: Oh, és tan bo.
M'encanta Selector de color.
>> TOMAS Reimers: colorpicker.com és un bon exemple.
I aquí, podràs veure que tens un selector de color de Photoshop-com completa.
>> ALLISON Buchholtz-AU: Mm-hm.
A més, les coses interessants és que pot generar esquemes de color
de manera que vostè no té, com, xocant colors.
TOMAS Reimers: I llavors aquí hi ha el valor hexadecimal fins aquí.
Així que sempre es pot trobar en línia, bàsicament, llocs per obtenir el valor hexadecimal de.
No és una espècie que s'acaba, com, ens veure els colors del món en nombre.
És més que anem en línia i trobem quin color volem,
i després prendre el nombre.
Perquè és només un molt fàcil manera de Referència coses a CS.
>> ALLISON Buchholtz-AU: I després hi també--
No recordo el nom exacte del lloc.
Però no hi ha dubte, jo pensar, una mica d'Adobe
que genera esquemes de color per a vostè, que és realment genial, perquè
definitely-- de vegades difícil d'entendre,
oh, si vull usar aquest color, el que podria ser un altre útil
utilitzar en un altre lloc en el meu lloc per, com, que sigui agradable i cohesionada.
>> TOMAS Reimers: Allison està parlant de un per Adobe Kuler flama, crec.
És K-O-L-E-R.
ALLISON Buchholtz-UA: Crec que si.
Estic bastant segur que és l'un.
>> TOMAS Reimers: El meu favorit té sempre ha estat Esquema de color Designer.
>> ALLISON Buchholtz-AU: Ooh.
>> TOMAS Reimers: Quin és ara--
>> ALLISON Buchholtz-AU: Ah, això és bonic.
>> TOMAS Reimers: I Bàsicament es pot dir, com,
Vull tres colors un al costat de l'altre.
I després farem alguna cosa agradable.
I llavors es pot obtenir un exemple del que podria semblar.
I després quan passem el ratolí sobre qualsevol ells, se li dóna el valor hexadecimal.
>> Així que igual que una bona manera de començar pensar en esquemes de color
o quins colors en una pàgina web podria anar bé junts.
A causa de que pot ser sorprenentment no tan fàcil d'aprendre com vostè pensa.
I després l'altra cosa fresca Sempre he trobat sobre aquest lloc
és si es colpeja exemples, que va a mostrar el que un lloc web d'exemple
podria semblar que l'ús de combinació de colors.
De totes maneres.
>> Tornar a la CSS real.
ALLISON Buchholtz-AU: Però òbviament, conèixer aquestes referències poden ser útils.
TOMAS Reimers: No, sens dubte pot ser útil.
Així que la segona regla, Allison?
>> ALLISON Buchholtz-AU: Sí.
La segona regla és només corresponent a la nostra font.
Així que el pes del text és només una mica de-- el que el pes ho faria
estar si vols simplement, com, normal o, igual que, les fonts més primes,
o en aquest cas, igual que, en negreta.
Em oblit.
Què és el si volia it-- hi és un més prim que tot just, com, normal?
TOMAS Reimers: Jo en realitat no saber si hi ha un més prim.
ALLISON Buchholtz-AU: m'oblidi.
Així el pes de la font que normalment només ha d'utilitzar per negreta.
Si vostè vol aconseguir realment en ella, anem a mostrar.
W3Schools té tots els diferents coses que vostè pot fer per les fonts.
Però, bàsicament, si mai vols canviar res de la font,
que sempre serà, com, la font i tants.
Així serà com, font-family si estàs tractant de canviar el tipus real.
Serà d'estil de font si vostè volen que sigui com cursiva,
o cursiva, o el que sigui.
O fins i tot de font-color, si volíem canviar això.
>> TOMAS Reimers: Així és.
Així que vostè pot canviar això.
I espècie de només per recapitular ara, perquè puguis
veiem que tenim el selector cap amunt aquí.
Tenim aquestes claus.
I després tenim regles delimitat per punt i coma.
Té això sentit?
Sí?
Fresc.
Així que si això és good--
>> ALLISON Buchholtz-AU: Tornar.
TOMAS Reimers: Parlem específicament sobre quin tipus de selectors que tenim.
Perquè ara que hem espècie de només mostra les etiquetes.
Però vostès podrien veure plausible.
Diguem que tens dos paràgrafs en una pàgina i que
vull ser capaç d'estil un però no l'altre,
no només vol de limitar a haver d'utilitzar diferents HTML real
etiquetes per donar-los diferents estils.
>> Així que tenim tres bàsic tipus de selectors.
ALLISON Buchholtz-AU: Sí.
Així que tenim l'etiqueta, que és el que hem estat parlant en aquest moment.
Així que això és alguna cosa així com el seu cos o p.
I després tenim la classe, que és quan el definim en el nostre arxiu CSS,
que sempre serà punt, el que sigui desitja que el nom de la classe que sigui.
I això es pot aplicar a diverses coses.
>> Diguem que vostè té cinc paràgrafs i dos dels tres
necessitar ser el mateix estil, que s'aplicaria una classe a la mateixa.
I això és només la forma en què ho fem.
Nosaltres li donarem un exemple de on aquesta realitat mostra a dalt.
Però si ha de potser alguns d'etiquetes p, després d'ell, vostè escriuria,
classe és igual independentment de les classes que desitja aplicar a la mateixa.
Així que el que els selectors de classe que volem aplicar al present apartat específic,
poguéssim escriure així.
Per descomptat, crec que un exemple farà que sigui molt més concreta.
>> L'altre tenim és id, que denotem
amb un hash, o lliures, o hashtag.
TOMAS Reimers: octothorpe.
ALLISON Buchholtz-AU: octothorpe.
Això funciona, també.
I aquest ha de ser realment única.
Ells només s'han d'aplicar a una cosa a la seva pàgina.
Així que si això és un paràgraf específic, o algun element d'una llista, o el que sigui,
això ha de ser únic.
I de la mateixa manera que acabem de dir, com, class = "Classe2 class1"
això només pot ser Identificació del que tenim.
TOMAS Reimers: Sí.
Així que anem a parlar definitivament sobre exemples aquí.
I jo només vaig a bussejar cap enrere en el codi.
Així que donem una ullada a la nostra HTML.
I pel que en aquest moment tenim un paràgraf.
Aquest és el text.
Jo només vaig a modificar ella. "Aquest és un text 1."
I després anem a tenir una "Això és text 2."
>> ALLISON Buchholtz-AU: Segona un.
TOMAS Reimers: Així és.
Així que ara tenim "Aquest és el text 2", oi?
I anem a veure que si recarreguem la pàgina, el que trobarem
és que anem a find--
ALLISON Buchholtz-AU: Ooh.
TOMAS Reimers: Sí.
Anem a trobar una "Això és text 1 "i" Aquest és un text 2. "
>> ALLISON Buchholtz-AU: I color groc fora encantador.
>> TOMAS Reimers: I veuràs que el nostre selector en aquest moment,
que s'aplica a p de, o paràgrafs, afecta a tots dos,
perquè tots dos es troben amb el condició que els dos són una etiqueta pàg.
Això té sentit total.
Així que la pregunta és, bé, el que si volíem només aconseguir un?
Així exactament com Allison estava dient, tenim dues maneres de fer-ho.
Vaig a començar amb id.
>> ALLISON Buchholtz-AU: Anem a començar amb id.
>> TOMAS Reimers: I tots dos d'aquests són atributs.
Així que hi atributs en HTML.
I el que són és cosa que s'agrega
dins de l'etiqueta que és separar del nom de l'etiqueta.
Així que vostè pot tenir diversos atributs.
Sí?
>> ALLISON Buchholtz-AU: Estava a punt dir, del seu exemple de PSET 7,
si algun de vostès tracten d'alinear coses per al centre,
que podria haver utilitzat "Text align = center."
I t'has adonat que probablement hauria d'haver centrat
el seu text oa la barra de navegació.
Així que això és just també un atribut que podria estar familiaritzat.
TOMAS Reimers: Hi ha un munt d'atributs que ja ho veuràs.
Sí.
Com a bona referència per PSET juliol.
Tenim Identificació.
Vostè també pot tenir classe, coses com aquesta.
Una sola etiqueta pot tenir molts atributs.
Així que a partir de la identificació, anem a suposar que vull tenir un id de-- No sé.
L'anomenarem especial, perquè aquest, estem
farà negreta, i subratllat i el que sigui.
ALLISON Buchholtz-AU: És Serà molt especial.
TOMAS Reimers: Així que aquesta un, tenim Identificació especial.
Així que la forma per seleccionar que és, llavors, en main.css, en lloc de tenir una etiqueta p,
fas #special, OK?
I això selecciona el cosa amb id especial.
Té això sentit per a tothom?
AUDIÈNCIA: Sí.
TOMAS Reimers: Cool.
Així que ara si ens remuntem, anem a veure-- crits.
Sí.
Veurem que només selecciona l'un amb id especial.
Sí?
Sona genial.
Sí.
>> AUDIÈNCIA: Pot alguna cosa tenir un atribuir tant de classe i un id?
>> TOMAS Reimers: Sí.
AUDIÈNCIA: OK.
I llavors, què passa si després des que algunes regles CSS en aquest conflicte?
TOMAS Reimers: Per descomptat.
Definitivament anem per parlar d'això.
Així exactament el que estaven fent a, també pot tenir classes.
Així que anem a pretendre que tenia tres paràgrafs i jo
volia donar-li estil al primer dos, però no la tercera.
Bé, la seva primera idea pot ser, bé, només podia donar el segon un id.
Però no es pot, perquè un id, exactament igual que Allison estava dient,
ha de ser únic.
>> Així que en lloc d'un id, el que pot utilitzar és vostè pot utilitzar una classe.
I una class-- el que permet que facis és bàsicament dir,
això pertany com a part d'un grup.
En aquest cas, el nostre grup es diu especial.
I què farem a continuació és anem a dir-- en lloc de lliures,
utilitzarem punts.
D'acord?
I noti que la lliura i el punt només existeixen a l'arxiu CSS,
no dins de l'HTML.
ALLISON Buchholtz-AU: Sí.
Distinció important.
>> TOMAS Reimers: Tinc tenia tanta lluita,
perquè vaig posar el hash en l'HTML i llavors només em vaig sentir estúpida per un llarg temps.
Vegi com es selecciona als dos els que tenen aquesta classe?
Fresc.
>> Ara, les coses poden tenir diverses classes.
Diguem que jo volia fer la primera 2 tenen un fons de color groc
i el segon dos tenen un color de font de color blau.
D'acord.
Jo realment no sé per què jo havia vull fer això, però no puc.
>> ALLISON Buchholtz-AU: No podria recomanat per al seu lloc web.
Però per als nostres propòsits, que va a fer.
>> TOMAS Reimers: No és una bona combinació de colors.
ALLISON Buchholtz-AU: Bé, groc i blau són els meus colors de l'escola secundària.
No sé, però.
TOMAS Reimers: Allison d'alta escola tenia una gran combinació de colors.
[Rialles]
Així que el que podem anomenar a això és Cridem a esto-- així que tenim especial
i tenim Pretty.
Suggereixo, per això, s'utilitza noms molt més descriptius.
ALLISON Buchholtz-AU: Sí, ho faria cridar a això, com, groc o blau.
>> TOMAS Reimers: No som realment fer un lloc web de béns,
és per això que no estem fent això.
Però si realment tenia un lloc web real,
podria tenir, com, capçalera de l'article, el contingut de l'article, la primera paraula,
coses així, que permeten que siguis molt més descriptiu.
Aquests són realment com a variables.
Ells han de ser nomenats d'una manera on vostè pot, com-- sí, com a tal.
Perfecte.
>> Així color de fons.
I després anem a dir-- pel que el manera de canviar el color és només "color".
I farem que sigui blau.
Això és genial.
Així que ara tenim la dos primers tenen especial.
Següent un va a tenir "class = bonica."
ALLISON Buchholtz-AU: I llavors vostè desitjar afegir "bastant" a la del mig.
TOMAS Reimers: Així és.
I després a la del mig, afegir "bonic", el que passa
és només tens un espai.
Així que l'atribut de classe és una llista separada per espais
de totes les classes que s'apliquen a aquesta etiqueta.
D'acord?
No és com aquest pertany algun tipus de classe especial anomenada
"Especial, espai, bastant."
Pertany a dos classes-- especial i bonica.
Sí?
Fresc.
>> I després, si ens fixem en el que passi, estem
veurem que primer té fons groc, text negre.
Segon un--
>> ALLISON Buchholtz-AU: --Has negreta fons groc amb el text blau.
I el nostre últim només té la text blau que hem assignat a la mateixa.
>> TOMAS Reimers: Cool?
Com funcionen els selectors?
Impressionant.
>> ALLISON Buchholtz-AU: Volem parlar sobre el conflicte ara, doncs?
>> TOMAS Reimers: Així que si.
Absolutament.
Llavors, què passa si vostè tenir un conflicte, no?
Anem a suposar la primera estableix una mica com--
ALLISON Buchholtz-AU: Potser aquest canvia el fons?
TOMAS Reimers: Sí.
Així que farem "bonica" canviar el fons a salmó.
ALLISON Buchholtz-AU: Estàs a amb tots els grans colors d'avui, Tomas.
TOMAS Reimers: Sí.
Perquè em vaig assabentar del que pugui utilitzar el salmó com un color real.
Així que només farem això.
També crec que la posta de sol és un color real.
AUDIÈNCIA: Posta del sol és un color real?
ALLISON Buchholtz-AU: Anem a intentar-ho.
TOMAS Reimers: Després d'aquesta demostració només perquè en cas que fiqui la pota,
Jo no vull ser la depuració.
Així que sabem que el salmó és un color real.
Pel que qualsevol conjectures sobre el que passarà?
>> ALLISON Buchholtz-AU: Alguna idea?
>> AUDIÈNCIA: [inaudible].
>> TOMAS Reimers: Sí.
Així que el tens tota la raó.
Bàsicament, es necessita la última regla que se li va donar.
>> ALLISON Buchholtz-AU: Així que això és on en cascada entri en vigor.
>> TOMAS Reimers: Així que recordi com havia de fulls d'estil en cascada?
Així que per això, ens referim tipus de que tenim un munt de regles
que s'apliquen a la part superior de l'altra, i també poden anul·lar entre si.
>> ALLISON Buchholtz-AU: Així el d'en la part inferior
anul·larà tot el que està en la part superior.
Vostè podria tenir regles que completament negar una mica per endavant.
Per això també vols ser compte quan estàs estil,
pel que no crearà regles que estàs completament imperioses.
>> TOMAS Reimers: O potser vostè no desitja sobreescriure regles.
>> ALLISON Buchholtz-AU: O potser vostè ho fa.
Sí.
>> TOMAS Reimers: Imagina que tens un classe que s'aplica a la majoria de les coses,
però diguem que vostè vol canviar la color de fons a vermell i el tipus de lletra
pes en negreta per a la majoria coses, però per la meva part,
només desitja que el color de fons a ser de color vermell, però que desitja dels altres
propietats, que podrien fer alguna cosa com "font-weight = normal"
que després desfer aquest canvi audaç.
Sí?
Una vegada més, la millor manera, crec que Allison va dir que, és només la pràctica.
>> ALLISON Buchholtz-AU: Experimentació.
>> TOMAS Reimers: Pràctica, pràctica, pràctica, i l'experiment.
Conec un munt de gent que pensa CSS és només un munt de conjectures i verificació
al final del dia, on si que vols fer alguna cosa-- com,
vostè té una idea aproximada, però vostè encara necessita probablement
provar per assegurar- vostè sap el que sembla.
>> AUDIÈNCIA: Quan vostè està demanant classes, més d'una
al mateix paràgraf o de la secció, oi
importa quin ordre es pot Escrigui a les cotitzacions?
>> TOMAS Reimers: No, no en absolut.
>> ALLISON Buchholtz-AU: El que importa és l'ordre dins del full d'estils CSS.
AUDIÈNCIA: Podria repetir la pregunta?
TOMAS Reimers: Oh.
ALLISON Buchholtz-AU: Dins classe, quan s'està fent classes
a alguna cosa en l'HTML, fa Importa quin ordre estan en?
No importa l'ordre.
El que importa és l'ordre de la selectors de classe dins de la seva CSS,
dins del seu full d'estils.
>> TOMAS Reimers: Sona bé?
>> ALLISON Buchholtz-AU: Lovely.
>> TOMAS Reimers: I llavors continuarem A--
ALLISON Buchholtz-AU: Què tenim ara?
Em oblit.
Oh, només tenim exemples.
Però hem tipus de fet aquests.
Hem fet exemples sobre la marxa.
>> TOMAS Reimers: Arribem a combinar els selectors aviat.
>> ALLISON Buchholtz-AU: Oh, aconseguim combinar selectors.
TOMAS Reimers: Així que alguns exemples és que tenim
# Lliura dog-- o hashtag, o octothorpe, o el que sigui
qual voleu trucar que-- agut.
>> ALLISON Buchholtz-AU: Gos de Sharp.
>> TOMAS Reimers: Llavors vostè té .pets.
Alguna cosa té un id de gos, només hi ha un gos a la pàgina.
Alguna cosa té un id de gat, només hi ha un gat.
Hi pot haver molts animals domèstics a la pàgina.
És per això que hem atès que les classes.
Vostè té un exemple de p.
I llavors el que un dels últim exemple, que
és una cosa que no hem parlat, és el que passa quan es combinen.
Així p.pets.
>> Així que per això, anem a tornar a la codi i introduir another-- si.
Així que de tornada aquí.
>> ALLISON Buchholtz-AU: I sentir que això és realmente--
com mirant a través d'exemples és realment la manera d'aprendre això.
Així que això és el que estem fent.
>> TOMAS Reimers: Així que anem a pretendre que només voleu seleccionar text 2, oi?
Així que definitivament no pot fer això amb un id.
Bé, podríem fer això amb un id, però no té un id.
Podria afegir-ne un, però anem a suposar que jo no vull afegir-ne un
o que ja té una mica més.
Jo no puc fer això amb això.
La variable no és definitivament únic, no?
I tampoc ho és la classe.
Però vostè pot combinar aquestes coses.
Diguem que volíem fer alguna cosa que només s'aplica a les coses que
tenir la classe especial i que tenen la classe bonica.
>> Així que el que pot fer és a main.css, es pot dir, primer anem a eliminar això.
Pot combinar aquests.
Així que vostè pot fer .Special.
No hi ha espai.
Només .special.pretty.
El que això significa és una cosa que és tant especial i bonica.
Té això sentit?
I si anem aquí, el que vas a veure
és aquesta regla només s'aplica a la segon, que té tant d'ells.
I vostè pot fer això per un munt de coses.
Pot dir-- anem pretenc jo només volia
per fer coses que tenen la classe bastant i que són també una etiqueta de paràgraf.
Així p.pretty.
Anem a pretendre que jo tenia una cosa bonica en el cos de l'etiqueta.
D'acord?
Puc executar aquest i jo pot veure que és només
va a aplicar a les coses que són paràgrafs amb la classe bastant.
I pot combinar aquests, bàsicament, com totes les que vulguis.
Així que vostè pot posar-los junts.
Té això sentit?
ALLISON Buchholtz-AU: Així aquest tipus de és més útil
quan, Tomas estava dient abans, potser vostè té un lloc web molt complicat,
i ja té molt d'aquestes normes escrites,
i només ha de combinar dues de davant.
Igual que en lloc d'escriure en el seu conjunt nou selector i canviar allà,
vostè pot combinar ells on se superposen.
>> TOMAS Reimers: O podrien trobar fora-- vegades
hi ha una classe que fa que el color de la font, com el blau,
i hi ha una altra classe que fa que el blau de fons.
I això simplement no funcionarà.
Així s'escriu un cas especial, on, com-- però si té dos, el que estàs
farem és que anem a fer d'aquest un aquest to de blau
i aquesta aquest altre to de blau.
Dret?
>> ALLISON Buchholtz-AU: Bé per a aquest tipus d'excepcions.
TOMAS Reimers: Així que per pensar en problemes
que poden sorgir quan es combinen.
Fresc.
Així que de tornada a la nostra presentació.
ALLISON Buchholtz-AU: Ja gairebé hem arribat.
TOMAS Reimers: I ha deixat de connexió.
ALLISON Buchholtz-AU: Oh, no.
ALLISON Buchholtz-AU: CS en l'oficina, internet es cau.
Oh, la ironia.
>> TOMAS Reimers: Així que, afortunadament, podem present sense internet, suposo,
perquè tenim totes les diapositives aquí.
Així que anem a parlar de la relació de les etiquetes.
ALLISON Buchholtz-AU: Correcte.
Així que només una mica d'anar fora del que va dir Tomàs,
això és només una altra manera de fer-ho.
Així que tenim alguns dels pares selector amb un selector de nen.
Així que en aquest exemple aquí, tenim alguns cos amb una barra de navegació de classe, de botons.
Ah.
>> TOMAS Reimers: Oh, ho sento.
>> ALLISON Buchholtz-AU: I Bàsicament, el que això significa
és seleccionar tots els nens, igual que tots aquests tipus de selectors,
dins d'aquest selector de matriu.
I aquests són els únics el que mai va a aplicar.
No sé si vostè tenir una millor manera de--
TOMAS Reimers: Així que endevinar la forma de pensar
d'això és recordar abans com quin tipus d'ells com armem.
I llavors això vol dir que un dels elements que coincideix amb tots ells.
El que això vol dir és, jo desitja fer coincidir tot
dins some-- Vull a trobar un selector.
I després dins d'això, vull es pot adaptar amb coses noves.
Dret?
Així que en CSS, tot es tracta d'una mena de ser capaç d'igualar aquests articles.
I vostè pot tractar d'igualar elements dins d'altres articles.
>> Així que anem a fer realitat un exemple, i creiem que va a aclarir.
Així que anem a pretendre que tenim especial, especial bonica, el que sigui.
I després tenim un vincle, d'acord?
Així que recorda, a és un enllaç.
No va a anar enlloc.
I anem a donar-li l'enllaç de classe, suposo.
Anem a donar-li la class-- donar-me una idea.
ALLISON Buchholtz-AU: Cool.
TOMAS Reimers: COO- anem anar per la classe bonica.
Per què no?
>> ALLISON Buchholtz-AU: OK.
TOMAS Reimers: Així coses ara boniques
faran el fons blau, color de fons de salmó.
Això té sentit.
I si ho fem esto--
>> ALLISON Buchholtz-AU: Vols afegir text
per la qual cosa l'hipervincle en realitat apareix?
TOMAS Reimers: Això seria una bona decisió.
ALLISON Buchholtz-AU: Perquè dreta ara només aconseguirem res.
TOMAS Reimers: Així que això és un enllaç.
"Aquest és un enllaç."
Ah, i això va ser un altre enllaç.
Anem a donar-li la classe "cool".
Tens raó.
Fresc.
Així que ara anem a prendre això.
Anem a llançar un.
Tenim un al etiqueta especial, i també
tindran un a la bonica etiqueta.
I ara el que anem a fer és que farem cool--
Què volem que faci?
ALLISON Buchholtz-AU: Podem fer-lo més gran?
TOMAS Reimers: Anem a donar-li una frontera.
ALLISON Buchholtz-AU: Podríem frontera.
TOMAS Reimers: Sí.
Així que anem a fer alguna cosa com, és-- frontera i estem
va a explicar tot això en un segon.
Per ara--
>> ALLISON Buchholtz-AU: Per al model de caixa.
TOMAS Reimers: Però per ara, estem només va a donar-li una frontera.
Així que el que això significa és que ets veuran aquests enllaços.
I veuràs que tenen aquests, com, vores negres lletjos, que
és fresc.
>> ALLISON Buchholtz-AU: El nostre lloc web és tan bonica.
>> TOMAS Reimers: Sí.
El nostre lloc web és impressionant.
Així que aquests dos són enllaços, i ells apareixen.
Ara anem a pretendre que només volia fer això
si no fos dins d'alguna cosa que tenia un fons de salmó.
Així que recordi que aquest té un fons de salmó,
perquè és de classe bastant.
>> Però volem dir que només es refreda que són a classe especial, no a classe
bastant, ha de tenir aquesta frontera.
Bé, el que pot fer vostè és pot dir, .Special, espai, .cool.
I el que està fent, quan es pensa al respecte, és que està dient bàsicament,
Bé, em trobarà tot que coincideix especial.
Després, dins d'aquestes etiquetes, trobar mi tot això està bé.
ALLISON Buchholtz-AU: Així que d'una altra manera que podria ser bo per pensar en això,
portar de tornada a C, és igual que la idea del seu abast.
Així que quan vostè té alguna selector, com els que es
que hem estat treballant per abans d'això, la seva pàgina web completa, tots els de la seva HTML
està dins del seu abast, no?
Però quan tenim aquests les relacions entre pares i fills,
és com si vostè està estrenyiment on el que busca és un lloc específic,
com si, igual que, estem buscant dins una funció específica en comptes
de tot el nostre arxiu.
AUDIÈNCIA: Així que amb això en ment, ho faria que hagués importat si tinguéssim transformats,
ALLISON Buchholtz-AU: L'ordre?
AUDIÈNCIA: --la classe en CSS a .cool, espai, .Special?
ALLISON Buchholtz-AU: Sí, perquè llavors això
diria, abast a tot el que té fresc,
i després mirar el has-- Vull dir, com, en aquest cas,
Jo no crec que hagués canviat.
>> TOMAS Reimers: Si ens havia dit què?
Ho sento.
>> ALLISON Buchholtz-AU: Si abast que es refredi i després
buscar coses d'especial, seria el mateix, en realitat.
>> TOMAS Reimers: Així que no seria.
>> ALLISON Buchholtz-AU: No ho faria?
Oh, oh bé.
Estic equivocat.
>> TOMAS Reimers: Així que la raó és diferent-- mistake-- comú
és que en aquest moment només l'enllaç té fred, oi?
Crec que la meva pregunta per a vostès és, el que en aquesta pàgina es correspon amb .cool?
Hi ha dues etiquetes aquí, oi?
Quin és aquest i aquest.
Tots dos coincideixen fresc.
Només ho fa.
Així que si vostè ha dit, .cool, espai, .Special, El que vas a dir és,
dins d'aquestes etiquetes, què té d'especial?
ALLISON Buchholtz-AU: Hm.
Això és el que it-- dreta.
Perquè és com alguna cosa aquí.
>> TOMAS Reimers: Així que selecciona res.
>> ALLISON Buchholtz-AU: Mentre que amb especial, estem dins d'aquestes etiquetes aquí.
>> TOMAS Reimers: Aquells i aquelles.
AUDIÈNCIA: OK.
Així que aquestes etiquetes de la barra diagonal?
>> TOMAS Reimers: Sí.
Té això sentit?
Com és, bàsicament, tractant de reduir el seu abast.
ALLISON Buchholtz-AU: Sí.
Crec que això és probablement la manera més fàcil de pensar-hi.
>> TOMAS Reimers: Així que ens va semblar, i trobem aquest tant va igualar especial.
I llavors el que estem demanant, dins aquests nois, el que és genial?
I dins d'aquesta, fresc d'aquest.
Dins d'aquest, res està bé.
Així que aquesta és l'única etiqueta que queda.
>> ALLISON Buchholtz-AU: Considerant fresc és només dins d'aquestes etiquetes a allà.
TOMAS Reimers: Exactament.
I el que és especial dins d'aquests?
Res.
Ara, què vaig a dir és si no hi havia espai,
vostè està demanant el que és fresc i especial-- o el que és bonic i especial, oi?
Si dius .special.pretty, això és el mateix que .pretty.special.
>> Perquè el que l'eliminació de l'espai és demanant és, quan vostè diu .Special,
vostè està demanant, OK, quines són especials?
I després, pels quals estimats també són bastant,
que és el mateix, gramaticalment, com preguntar, quin és bonica,
i després d'ells, el que també és especial?
Dret?
És la diferència de el que hi ha dins del que és.
AUDIÈNCIA: OK.
TOMAS Reimers: Sí.
Impressionant.
Així que amb això en ment llavors--
>> ALLISON Buchholtz-UA: Crec que el nostre últim cosa és (en Fantasia BRITISH ACCENT)
el model de caixa.
>> TOMAS Reimers: El box-- [Chuckles] M'encanta la forma Allison diu això.
Així que la cosa model de caixa.
>> ALLISON Buchholtz-AU: Només tenen una caixa, seré el seu model de caixa.
TOMAS Reimers: Així que anem a parlar d'això.
Així que ara que hem passat molt temps parlant de selectors.
Per ara, vostès són probablement, com, mestres de selectors-- saps,
com seleccionar exactament el contingut que que desitja manipular a la pantalla.
>> Així que ara la pregunta és, com exactament es pot manipular?
Així que suposo que el més bàsic manera de pensar en això
és, bé, què és exactament és un element de CSS?
Hem passat molt de temps parlant, el que és una etiqueta,
o el que és el més bàsic representació d'una etiqueta?
>> Una bona manera de pensar és a dir, quina forma és el salmó?
Quina forma té, com, el salmó de color de fons?
>> AUDIÈNCIA: És un rectangle.
>> TOMAS Reimers: És un rectangle, oi?
>> ALLISON Buchholtz-AU: No era una pregunta capciosa.
[Rialles]
>> TOMAS Reimers: No intentar per enganyar a vostès aquesta tarda.
Així que tenim aquest rectangle.
I l'etiqueta és una p, oi?
Així ens dóna bona creença que el paràgraf
es representa com un rectangle, en menys en la ment del navegador, que
que és.
>> ALLISON Buchholtz-AU: Vull dir, navegadors són típicament rectangular,
així que té sentit.
>> TOMAS Reimers: La idea és que totes les etiquetes dins de CSS
es representen com un rectangle.
I cada rectangle té quatre parts d'acord al CSS, OK?
Vostè té el contingut real.
Aquí és on es troba el text.
>> ALLISON Buchholtz-AU: Potser la seva imatge.
>> TOMAS Reimers: Sí.
Vostè ha farcit, que és només una espècie d'espai en blanc.
Llavors vostè té una vora.
I llavors vostè té marge, que és l'espai en blanc fora d'això.
Així que no té sentit a qualsevol persona, pel que estem
anem a parlar d'això per un segon.
Així que aquí, el que farem Som nosaltres els anem a crear alguns divs, OK?
Disculpame mentre jo--
>> ALLISON Buchholtz-AU: Em sento com hem de posar una foto bonica en.
>> TOMAS Reimers: Definitivament hauria.
>> ALLISON Buchholtz-AU: Sento que tot el món
podrien beneficiar d'una bonica foto, és tot.
>> TOMAS Reimers: Podem tots es beneficien de A--
>> AUDIÈNCIA: Sí, és clar.
TOMAS Reimers: OK, fresc.
Així que hem de posar un bonic imatge en algun lloc.
ALLISON Buchholtz-AU: Em sento com un conillet valent podria ser útil en aquest moment.
TOMAS Reimers: Segur.
ALLISON Buchholtz-AU: Fi de la setmana.
Si té alguna cosa adorab--
>> TOMAS Reimers: Com combat un gatet?
>> ALLISON Buchholtz-AU: Un gatet funciona, també.
>> TOMAS Reimers: Cool, perquè hi ha un lloc per això.
Es diu PlaceKitten.
ALLISON Buchholtz-AU: Això és genial.
TOMAS Reimers: Sí.
ALLISON Buchholtz-AU: Només per, com, imatges de marcador de posició al seu lloc web.
TOMAS Reimers: Mm-hm.
També hi ha PlacePuppy.
I hi ha PlaceBacon.
>> ALLISON Buchholtz-AU: PlaceBacon?
¿De debò?
>> TOMAS Reimers: Oh, no ho fem tenir accés a internet.
>> ALLISON Buchholtz-AU: [gemecs]
Tràgica.
TOMAS Reimers: Altrament, Jo t'havia de mostrar nois
com posar imatges al seu lloc web.
Anem a tractar d'aconseguir aquest treballar abans que hàgim d'anar.
Però per ara, només estem va a parlar en colors llavors.
Volem posar fotos de kittens--
>> ALLISON Buchholtz-AU: Ho vam fer.
>> TOMAS Reimers: --el d'internet baix de moment ser.
Així que tenim dos divs, i estem els va a donar dos identificadors.
Anem a dir- "Primera" i "segona".
Així que id = "primer".
I anem a donar-los dos colors.
Llavors, com seleccionem alguna cosa amb un id de "primer"?
ALLISON Buchholtz-AU: Dot o haixix?
AUDIÈNCIA: Agut.
TOMAS Reimers: Sharp, perfecte.
Sharp, haixix, el nosaltres--
>> ALLISON Buchholtz-AU: Hi ha moltes coses que diuen.
>> TOMAS Reimers: OK.
Anem a resoldre el hashtag, i això és el que anirem amb.
D'acord?
>> ALLISON Buchholtz-AU: Hashtag.
>> TOMAS Reimers: Així hashtag del primer.
>> ALLISON Buchholtz-AU: Així pots tuitejar la seminar--
CSS hashtag, hashtag fresc.
TOMAS Reimers: Hashtag Awesomeness.
ALLISON Buchholtz-AU: Hashtag Awesomeness, si.
TOMAS Reimers: OK.
Així que tenim "primera" i "segona".
Així que primer, tindrem un color de fons de color vermell.
ALLISON Buchholtz-AU: Uh, còlon.
TOMAS Reimers: Així és.
ALLISON Buchholtz-AU: Seré el teu punt ortogràfic.
TOMAS Reimers: Allison em té.
Antecedents color de blue--
>> TOMAS Reimers: porpra!
>> TOMAS Reimers: Porpra.
ALLISON Buchholtz-AU: Sí.
El meu color favorit de porpra, i no hem utilitzat encara.
>> TOMAS Reimers: Violeta.
ALLISON Buchholtz-AU: Violeta.
Això funciona.
>> TOMAS Reimers: Així que estem va a tenir dos divs.
Ells van a estar totalment buit.
Probablement hauríem de tenir una mica de text.
Així que "primer" serà "HOLA".
I la "segona" es dir--
>> ALLISON Buchholtz-AU: Adéu.
>> AUDIÈNCIA: - "MÓN".
Hola, adéu.
ALLISON Buchholtz-AU: Vaig veure en concert l'altra setmana.
TOMAS Reimers: The Beatles?
ALLISON Buchholtz-AU: Per reals.
No són tan grans.
No m'agrada.
>> TOMAS Reimers: Disposem "Hola" i "adéu".
I de nou, CSS és simplement impressionant, perquè reconeix els nostres colors.
No necessita ni tan sols es preocupen que ells existeixen.
Ho fan.
>> ALLISON Buchholtz-AU: Ells existeixen.
>> TOMAS Reimers: Així CSS crec que té 255 paraules per parlar de color.
Si vostè pot pensar en un color exterior els 255, igual que, m'haurà impressionat.
ALLISON Buchholtz-AU: Sí.
Crec que vostès poden tenir acaba d'arribar just després.
>> TOMAS Reimers: Així que aquí, vostè veurà que tenim dues caixes
just a sobre d'un a l'altre, no?
Hola i adéu.
>> ALLISON Buchholtz-AU: No hi ha espai en el medi.
Només estan smooshed dret a la part superior de l'altra.
>> TOMAS Reimers: Així que el primer Jo crec que hauríem de parlar
és també anem a dir--, si.
Així CSS els representa com una mena de caixes.
I com caixes, que tenen contingut.
I el contingut ara és una espècie de el HOLA o l'adéu i això és tot.
D'acord?
>> Així que una de les primeres coses que que puc fer és que vostè pot afegir farcit.
Farciment diu quant espai hauria de deixar a cada costat.
Així que diguem que vull dir 10 píxels a cada costat.
I vaig a disseccionar que en un segon.
ALLISON Buchholtz-AU: Totes aquestes coses aquí
seran majoritàriament en píxels per a la resta del seminari.
Vas a veure que té una mica d'espai al seu voltant, oi?
Així que el que no es veu aquí és que hi ha aquest tipus invisible de farciment
en cada costat, el que diu, com, Bé, vostè té el seu quadre de content--
>> ALLISON Buchholtz-AU: Vostè desitja simplement tiri cap amunt l'element inspeccionar?
>> TOMAS Reimers: Sí, això és una bona idea.
ALLISON Buchholtz-AU: A més, em sembla que l'element d'inspeccionar és una bona manera
esbrinar si alguna cosa està passant malament, alguna cosa inesperada passa,
inspeccionar les etiquetes i veure què és com sobreescriu és útil.
>> TOMAS Reimers: Així que no estic segur si vostès poden veure aquest color.
Es pot?
Veurà aquest farciment sobre el tipus de vora.
I llavors es veu la real contingut en blau, oi?
Així que aquesta és la mateixa conceptes bàsics del model de caixa.
Vostè té contingut.
Llavors vostè té farciment.
>> AUDIÈNCIA: Per què no simplement utilitzar el quadre interior ell--
>> ALLISON Buchholtz-AU: Correcte.
A causa de que heu seleccionat l'element en aquest moment.
>> TOMAS Reimers: Així és.
Altres coses.
Així que anem a parlar d'això comandament farcit per un segon.
Així que en CSS, mesuraments necessita tenir una unitat.
Així que primer vostè té la quantitat.
Així que en aquest cas, ho hem dit 10.
I després la següent Ho hem dit és el píxel, píxels.
Uns altres que pugui tenir són coses com centímetres, polzades.
Vostè pot fer coses com: el que és de 10 polzades?
I serà ridícul.
>> ALLISON Buchholtz-AU: Oh, noi.
>> AUDIÈNCIA: Whoa.
>> TOMAS I ALLISON: Sí.
TOMAS Reimers: Perquè tot el farciment.
Vaig a tornar a píxels.
>> ALLISON Buchholtz-AU: Píxels tendeixen a ser, igual que, la norma.
Quan ens fixem en un munt de llocs web, que majoritàriament treballen en píxels.
TOMAS Reimers: Així que anem a veure ja sigui pixels-- els altres els que es veuen
és EM, que és una empresa és igual a l'alçada de la font
que vostè està utilitzant actualment.
>> ALLISON Buchholtz-AU: Mm.
TOMAS Reimers: És una bona manera de dir, com, jo ​​vull tant espai com la meva font
és prendre.
ALLISON Buchholtz-AU: No sabia això.
S'aprèn alguna cosa nova cada dia.
TOMAS Reimers: Hi ha una gran quantitat de mesuraments en CS.
Li suggereixo que busqui cap amunt.
Per a tots els seus casos, crec que píxels han de ser suficients.
I són també el que vas a veure
en la majoria dels exemples es fa en línia.
Així que ho deixarem en píxels.
>> També pot, jo hauríem dir-- així establirà el farciment de tots els farcits.
També pot fer alguna cosa com "Padding-top" que només definido--
ALLISON Buchholtz-AU: Potser ens posarem nostre "HOLA" de nou.
TOMAS Reimers: --to acaba d'establir la encoixinat a la part superior i res més.
Així que els quatre ordres són padding-top, padding-bottom, left-padding,
i padding-dreta.
>> ALLISON Buchholtz-AU: Igual que es pot esperar d'una caixa.
>> TOMAS Reimers: Sí.
Res massa boig allà.
Té això sentit?
Així que aquest és el farciment.
Jo vaig a posar tot els farcits de nou a 10.
I després em vaig a passar a la frontera.
>> Llavors, quina és la frontera és frontera és una ordre estranya.
Porta una espècie de tres coses alhora.
Així que el primer és el gran que vull que sigui com un mesurament.
Una vegada més, només estic fent servir píxels.
I l'últim que d'agregar als mesuraments
és l'única cosa que no necessita una unitat és 0.
En realitat és incorrecte per donar una unitat 0,
perquè 0 és 0 polzades a través de, píxels, centímetres, el que sigui.
Tot Només vol dir 0, oi?
Així que primer li dones el mesurament.
>> Llavors vostè li dóna l'estil.
Així que vaig a dir "sòlid".
I anem a parlar del que això significa.
I després, finalment, que li donen un color.
Així que vaig a dir "negre".
I aquestes són totes coses que hem ara vist abans, excepte per l'estil,
però ja parlarem d'això.
Així que vostès han vist els mesuraments, i has vist els colors.
I el que passa és que aconseguim aquest bonic vora negra al voltant d'ell, oi?
Vostès veuen com ho vam fer?
>> AUDIÈNCIA: Sí.
>> TOMAS Reimers: Cool.
Llavors, què és això?
Així que primer de tot, és un píxel.
Això és evident per si mateix prou, no?
Igual, que és un píxel de gruix.
O seria un píxel, però estic el zoom, així que és una mica més
que això.
>> ALLISON Buchholtz-AU: I tenim aquesta resolució TV ridícul.
>> TOMAS Reimers: Sí.
Pot fer-ho més gran, més petit, el que sigui.
Així que aquí hi ha una frontera de dos píxels.
Veuràs que és el doble de gruix.
El següent que tens és el color.
Això no és interessant.
No vaig a parlar sobre això, de veritat.
>> ALLISON Buchholtz-AU: Però l'estil pot resultar una mica interessant.
>> TOMAS Reimers: Sí.
Així estil, hi ha pocs que veig d'ús comú.
Sòlids, del proper Primer d'un punts i traços del passat d'un.
I aquí està esquitxada.
Veuràs que són un munt de punts, no?
Una bona manera d'aconseguir una espècie de frontera agradable va, guions són també molt populars.
>> ALLISON Buchholtz-AU: I després, per descomptat, estic
Segur que hi ha un munt altra estils que vostè pot aconseguir.
I tenim un gran conjunt de enllaços al final per a vostès
al tipus de llegir detingudament i mirar CSS més fresc.
>> TOMAS Reimers: I llavors l'última cosa, estem
anem a parlar de la models de caixes molt ràpid.
Ah, i després frontera, exactament com farciment,
vostè també té coses com border-left, border-right, border-top,
border-bottom, que li permetrà per arribar a una frontera específica.
Així que aquí és només la frontera definida esquerra.
Això té sentit?
>> ALLISON Buchholtz-AU: És un lloc fresc manera d'emfatitzar les coses o afegir
línies entre els diferents elements.
TOMAS Reimers: Per descomptat.
Així que aquesta és la nostra frontera.
I el marge de l'última d'un.
Com farcit de Marge Excepte que no és within--
ALLISON Buchholtz-AU: És no al voltant del seu element
però en realitat al voltant de tota la quadre que hem estat veient.
>> TOMAS Reimers: Sí.
Allison va dir que la perfecció.
No és, com, dins del seu element, que és al voltant de la caixa sencera.
Això vol dir coses com fons no s'apliquen a ell.
I, bàsicament, diu, com, jo ​​no vull res
en aquest espai per a mi.
Així com tenim aquí un marge de 10 píxels.
Així que res d'aquí a 10 píxels ha d'estar al meu costat.
Això és una cosa de la seva espai, però com que no.
Així que aquesta és la mateixa conceptes bàsics del model de caixa.
Té això sentit?
Fresc, fresc.
ALLISON Buchholtz-AU: Awesome.
Així que ara crec que només Comptem amb recursos frescos
que et portarem nois a través de molt ràpidament.
I anem a actually-- bé, tenim internet encara?
>> TOMAS Reimers: Anem a veure si puc obrir up--
m'ho dius a mi veure si puc pot aconseguir Internet ràpidament
mentre Allison parla de qualsevol cosa Allison vol parlar.
ALLISON Buchholtz-AU: Així basically-- no ho faig
sé què més puc dir en aquest moment.
Però aquestes són algunes molt bons recursos.
Aquests són els que Preses i he fet servir
i que en realitat utilitzat per preparar per això.
W3Schools és un que nois haurien d'haver vist abans.
El recomanem per a una moltes coses amb CSS.
Sé el recomano a la meva secció tot el temps.
>> Una de les grans coses és que que permet a classe d'embolic amb CSS
i veure els canvis instantàniament en aquest,
com, doble finestra de vista que té.
Així que vostè no s'ha de preocupar de la creació de la seva pròpia pàgina web,
o la creació d'amfitrió virtual en el seu aparell local i host local,
i aconseguir totes aquestes coses de treball.
Està incrustat just dins de la pàgina.
>> I té aquests petits lliçons que pugui
passar per aprendre més sobre selectors,
o aprendre sobre la manipulació de la seva font, o un fons o una imatge.
I vostè té aquests resultats instantanis que
no han de fer cap un altre treball de preparació per.
Així que m'encanta W3Schools.
És fabulós.
Està funcionant?
>> TOMAS Reimers: Sí.
No, no ho és.
Vols que jo tracti i reinicieu l'ordinador?
O volem A--
>> ALLISON Buchholtz-AU: Vull dir, bo, això també estarà en línia.
Totes les diapositives estaran en línia.
Així que només recomano encaridament fer això.
>> Això és gran com s'acaba com un full de trucs.
És només tot el bàsic comandes que vostè té.
És genial quan estàs primer partint del seu lloc web.
Perquè potser no ho fa vull entrar en tots
el veritable cor de la qüestió disseny pesat coses.
Només ha de formatar d'una manera quin tipus de té sentit i la voluntat
fer de moment.
I si realment vols per entrar-hi, ho sé
és a dir, com, un Referències favorites de Tomas.
Estàvem usant a preparació, i és fabulós.
És el desenvolupador de Mozilla.
>> TOMAS Reimers: Així Mozilla són les persones que fan Firefox.
I és només el seu propi desenvolupador referència, que crec que és impressionant.
I té una meravellosa llista de recursos.
Així que tener--
>> ALLISON Buchholtz-AU: I després l'última nota és
quan vostè està tractant de el disseny del seu lloc web,
inspirar-se en coses que vostè pensa que són bastant.
Inspecció de l'element, inspeccionar el codi font
pot ser molt útil per intentar esbrinar
com l'estil del seu propi lloc web.
>> Sovint, em sento com el millor manera, a més de l'experimentació,
és només per mirar coses que són bastant.
Em sembla que és molt difícil només tipus de dissenyar coses pel seu compte,
sobretot al principi.
Si us plau, revisi llocs web que gaudeixi veient.
Esbrinar el que fa atractius per a vostè.
I llavors no dubti en intentar reproduir això.
>> TOMAS Reimers: Correcte.
Fins i tot com llocs web d'aquesta manera, es pot veure
definitivament hi ha un div a la part superior.
I després tens un altre div dins aquí, que és Awesomeness CSS.
I llavors vostè té un munt d'enllaços aquí.
Si realment inspeccionar elements, es poden ordenar de
començar a veure el que fan llocs web veurà així, i com puc
esbarjo que si volia.
Té això sentit?
Així que només disposem de tres minuts per al final.
Així preguntes?
Qualsevol d'ells?
Sí.
>> AUDIÈNCIA: Per al color rectangle, com
tener-- si no ho vol va a través de tota la pàgina, podria
vostè ho ha fet anar a l'altre costat només la meitat de la pàgina o només el text?
>> TOMAS Reimers: Sí, absolutament.
Així que anem a veure en realitat.
Tinc dues idees.
Així que en primer lloc, vostè també pot utilitzar percentatges.
>> AUDIÈNCIA: De debò?
>> ALLISON Buchholtz-AU: Així que alguna cosa per buscar és el posicionament relatiu.
És una cosa que ens no tenen temps per entrar,
però és una cosa que definitivament Recomano que vostès li un cop d'ull.
>> TOMAS Reimers: El per cent menys.
I veure com ho vam fer 50% de l'amplada?
ALLISON Buchholtz-AU: Si realment conèixer el nombre de píxels,
pot ser més precisa d'aquesta manera.
Vostè pot veure al voltant d'ell.
Però el 50%.
Si haguéssim de canviar la mida del nostre navegador, seria fer-lo més petit.
>> TOMAS Reimers: Bé, és bàsicament al 50% en aquest moment, crec.
És 50%, i llavors el marge s'ha afegit als això.
CSS té moltes peculiaritats.
Així que ara mateix es tracta de 50% de l'amplada de la pàgina.
Però recordi que vostè té 10 píxels trets de cada costat.
Així que si anés a demanar que contra la vora esquerra del navegador,
a continuació, es veuria com un 50%.
Un cop més, com he dit, CSS pot ser un munt de conjectures i comprovació.
Igual, vostè pensa que alguna cosa és es comportarà d'una manera,
però es comporta d'una manera totalment diferent.
>> ALLISON Buchholtz-AU: I que acaba d'obtenir més intel·ligent,
i que acaba d'obtenir una millor la intuïció que a mesura que avança.
>> TOMAS Reimers: I posa pitjor i pitjor.
Així que és realment només una carrera.
>> ALLISON Buchholtz-AU: Això és molt encoratjador.
Volem que els agrada CSS.
>> TOMAS Reimers: CSS és impressionant.
Recordeu que.
Altres preguntes?
>> ALLISON Buchholtz-AU: L'única cosa.
Una mica més?
Fresc.
>> TOMAS Reimers: Awesome.
>> ALLISON Buchholtz-AU: Bé, si vostè nois tenen alguna pregunta més endavant,
estem sempre disponibles com de costum.
Probablement veurem alguns ens de per a projectes fi de carrera
i sens dubte en el hackathon.
>> TOMAS Reimers: Per descomptat.
I a la fira.
>> ALLISON Buchholtz-AU: I a la fira.
Oh.
>> TOMAS Reimers: Esperem amb interès veure tota la seva awesome--
>> ALLISON Buchholtz-AU: Veurem tots els seus llocs web impressionants
que serà bonic.
TOMAS Reimers: Sempre es pot veure, com, els llocs web
que tenia, com, bé CSS i després com els que no tracti de fer-ho CSS.
ALLISON Buchholtz-AU: També, un altre cosa, una cosa més que mirar
és Bootstrapping.
Així Bootstrap és gran.
>> TOMAS Reimers: Google que si usted--
>> ALLISON Buchholtz-AU: Google ell.
És fabulós.
Et va encantar.
I ara que té un coneixement bàsic de CSS,
que farà molt més sentit.
Impressionant.
Gràcies, nois.
>> TOMAS Reimers: Moltes gràcies.