>> [GIOCO MUSIC]
ALLISON Buchholtz-AU: So Siamo fondamentalmente solo andando
per darvi una carrellata di CSS, perché sappiamo
che non era coperto in tutte le sezioni.
E vogliamo davvero fare in modo che si ragazzi hanno questo strumento a vostra disposizione,
perché ha la capacità di rendere i vostri siti web appaiono molto più bella.
>> E se si sta costruendo un sito web, allora probabilmente vuole fare abbastanza.
Voglio dire, non è necessario, ma io suggerirei di esso. [Ride]
Se si desidera che gli utenti lo utilizzano, si potrebbe vuole fare un po 'di [incomprensibile].
Quindi stiamo andando a cercare di dare solo alcuni strumenti di base e la comprensione,
in modo che quando si va fuori e tu sei ricerca cose su CSS,
non è completa senza senso, come CSS a volte di essere.
>> TOMAS REIMERS: Sì.
Allison ha detto abbastanza bene.
Quindi credo che la prima cosa che dovrebbe iniziare con è che cosa sono i CSS?
Così CSS è impressionante.
CSS--
>> ALLISON Buchholtz-AU: Questo è il nome del nostro seminario.
>> TOMAS REIMERS: Sì.
E 'davvero importante che si capisce che per allora.
Se si prende solo una via cosa, è che i CSS, se impressionante.
Due è CSS sta per Cascading Style Sheets.
Quindi al suo interno, CSS è un foglio di stile, che significa
permette per lo stile di una pagina web.
E poi che cosa significa, è un modo per aggiungere stile al tuo sito web.
Così, lo stile, si intende tutto che non è structural--
quindi le cose come i colori, sfondo immagini, confini, come, imbottitura,
margini.
Parleremo di ciò che tutto ciò significa in un po '.
>> Così abbiamo appena andato avanti e aperto sia di quelli in gedit.
Quindi questo è index.html.
E questo è main.css.
Così main.css non ha nulla.
ALLISON Buchholtz-AU: No stile finora.
TOMAS REIMERS: Nessuno.
E come vedrete, è un sito davvero brutto.
ALLISON Buchholtz-AU: E 'semplicemente.
TOMAS REIMERS: Sì.
Sì, non è brutto, è solo minimalista.
E poi qui abbiamo index.html.
E così per un breve recap di HTML, Allison,
si vuole parlare solo di pagina?
>> ALLISON Buchholtz-AU: Sì.
Così, ovviamente, abbiamo il nostro HTML tag, che solo i nomi di file HTML.
Noi abbiamo la nostra intestazione qui, con i CSS Awesomeness, which-- se si va indietro.
Dov'è?
>> TOMAS REIMERS: Oh.
Sì, si può vedere.
ALLISON Buchholtz-AU: E notare l'intestazione
è questa intestazione scheda fino qui.
E poi "Ciao, mondo!" è il testo che abbiamo appena
visualizzazione sul web pagina, che è-- tornare indietro.
Indietro.
Che è solo nel nostro corpo qui-- il testo normale.
Inoltre, una cosa da notare, se si guarda qui,
Tomas commutato up questi due dalla nostra presentazione.
Quindi, fintanto che avete tutti tre di questi, che stai bene.
Essi possono essere in qualsiasi ordine che vogliono.
Che cosa è più importante è proprio questo avete ciascuna di queste tre cose.
>> TOMAS REIMERS: Cool.
Aggiungere un tipo doc?
ALLISON Buchholtz-AU: Sì.
TOMAS REIMERS: Sì.
Freddo.
ALLISON Buchholtz-AU: A quanto pare, i miei microfoni non piace a me.
TOMAS REIMERS: Oh, ci danno un secondo solo mentre Allison passa fuori il suo microfono.
Quindi sì.
Così abbiamo la nostra pagina principale.
È un po 'senza stile.
Non abbiamo molto.
Non ci resta che fondamentalmente testo.
Abbiamo il foglio di stile.
Abbiamo il titolo.
Quindi, solo bare-disossate componenti rendono un sito web.
>> Quindi da lì, andiamo parlare di ciò che è CSS
e quello che sembra e tutto il resto.
Così per che--
ALLISON Buchholtz-AU: Torna alle diapositive.
TOMAS REIMERS: Torna alle diapositive.
E Allison può prendere il sopravvento.
>> ALLISON Buchholtz-AU: Woo.
OK.
Quindi nel tuo file CSS, si sta andando ad avere
un sacco di queste cose chiamate selettori.
Questo sarà solo il base del file CSS.
E 'solo sarà un sacco di questi.
Così selettore.
Questo è solo l'anatomia generale.
Stiamo per passare attraverso esempi, perché se voi ragazzi mai
guardato mia sezione, mi sento come le cose in astratto
in realtà non ha senso.
Aiuta sempre vedere gli esempi.
>> Così abbiamo un po 'di selezione.
Che sta per essere qualche identificatore quello che vogliamo lo stile da applicare.
E allora possiamo avere qualsiasi set di regole e valori.
Così selettori che si potrebbe vedere potrebbe essere qualcosa di simile a corpo,
o paragrafo con P, o intestazione, o qualsiasi altra cosa,
quello che vuoi i tuoi tag HTML per essere.
>> Quindi, in questo caso, abbiamo corpo.
E abbiamo qualche regola, che corrisponde
a che cosa il vostro stile applicato.
Quindi, in questo caso, abbiamo colore di sfondo e del carattere.
Quindi questo sta per cambiare sfondo del nulla
all'interno di qualsiasi tag body del nostro file HTML.
E sta andando a dare è questo valore azzurro.
>> Così sta andando a fare il sfondo azzurro.
E poi qualsiasi cosa all'interno del corpo è andando ad avere un peso grassetto.
Quindi è solo andando a audace tutto il nostro testo.
E questo è solo un selettore.
Ma si potrebbe avere molto molti di questi.
E come stiamo per dimostrare più tardi, un po 'di più sul modo in cui
che funziona e altri esempi lì.
Tutto quello che vuoi aggiungere?
>> TOMAS REIMERS: No.
Allison ottenuto.
Stiamo solo andando a tagliare di un esempio qui sul nostro sito esempio.
Quindi cerchiamo di prendere effettivamente questo.
E 'perfetto.
Così sto solo andando a copiare e incollare tale diritto nel nostro file main.css.
E ho intenzione di salvarlo.
E poi ci eseguirlo.
Nota Così lato, uno dei la maggior parte delle cose frustranti
è che se non si salva un file, e allora, come, ricaricare la pagina,
e come, perché non è il cambiamento accadendo?
Succede.
Così qui abbiamo visto che abbiamo fatto il nostro sito web uno sfondo azzurro
e qualche testo in grassetto.
>> Vorrei anche ricordare, se si ragazzi hanno domande su qualsiasi cosa
stiamo facendo, non esitate liberi di fermarci e chiederci.
Siamo totalmente disposti per rispondere alle domande.
>> ALLISON Buchholtz-AU: Ovviamente, con CSS, tutto si basa su se stessa.
Quindi, se una cosa non lo fa senso ora, abbiamo
non vogliono che a Bog giù più tardi.
>> TOMAS REIMERS: Quindi cerchiamo di tipo di sezionare questo.
Quindi vuoi avviare con il selettore qui?
>> ALLISON Buchholtz-AU: Sì.
Come dicevo prima, il corpo è solo il nostro selezionatore qui.
Quindi, se torniamo al nostro ah index--.
>> TOMAS REIMERS: che ho appena chiuso.
Dammi un secondo.
Così File, Open, index.html.
ALLISON Buchholtz-AU: Cool.
Quindi, se si nota qui, avere questi tag body, giusto?
Così il selettore corrisponde solo a i tag che stiamo parlando.
Così il corpo proprio qui.
Quindi quello che stiamo dicendo è everything-- possiamo tornare indietro?
Vorrei poter solo come toccare lo schermo.
Sarebbe molto più fresco.
>> Quindi qualsiasi cosa tra quelle tag body, che abbiamo visto
era proprio, come, il testo, e il corpo in generale
si riferisce a, come, lo sfondo.
Se vi capitasse di voler cambiare lo sfondo,
che sta per essere in un tag body.
Appena ha queste regole applicate a loro.
>> Quindi, se dovessimo andare a index.html e- realtà,
possiamo avere qualcosa al di fuori del corpo?
Se avessimo, come, un piè di pagina o qualcosa, non si applica a questo.
Ma qualsiasi cosa all'interno questi tag corpo sta
di essere colpiti da questo organismo selettore che abbiamo fatto.
Quindi, se si digita qualcos'altro there--
>> TOMAS REIMERS: Facciamo comprendere il rischio.
Quindi, se abbiamo avuto un div-- così che è solo un altro tag si può avere.
Io vado per chiuderla.
O facciamo questo un paragrafo.
Così p sta per paragrafo.
E all'interno di tale paragrafo.
E allora io dico, "Questo è il testo."
Freddo.
E poi ho fatto questa regola si applica a un paragrafo invece del corpo.
Vedrai come si applica solo alle il punto di recente formazione, a destra,
non il tutto.
Questo fa senso?
>> ALLISON Buchholtz-AU: Quindi questo è tutto il corpo,
ma ora il nostro selezionatore solo corrisponde al paragrafo.
Quindi non ci resta che audace e blu per questo specifico paragrafo,
perché questa è l'unica cosa che è racchiuso all'interno del tag p.
>> TOMAS REIMERS: Ha senso genere di come le cose incapsulare altre cose?
ALLISON Buchholtz-AU: Inoltre, basta a dire, come, uno dei modi migliori
per ottenere davvero confortevole con i CSS è di fare proprio le cose in questo modo,
basta provare.
E 'molto semplice da digitare qualcosa out, ha colpito Refresh, e vedere cosa succede.
E come con la maggior parte CS, sperimentazione può spesso
portare ad una migliore comprensione intuitiva.
Ancor più che noi semplicemente, come, parlare con te.
>> TOMAS REIMERS: Assolutamente 100% d'accordo su questo punto.
Quindi, se torniamo a questo, cominciamo dissezione esattamente ciò che questi due fanno.
Quindi abbiamo due regole in questo.
Quindi il primo è il colore di sfondo.
E si vede che abbiamo impostiamo pari ad un valore, azzurro.
>> Così in CSS, CSS è sorta di molto sciolto su come
si è permesso di definire il colore.
Così li può definire in base al nome.
Si può anche fare qualcosa di simile a "rosso".
E poi se andiamo di nuovo a questo, vedrai che lo sfondo è rosso.
È inoltre possibile ottenere really-- te credo può ottenere abbastanza creativo con questo,
non si può?
>> ALLISON Buchholtz-AU: I pensa di poter utilizzare esadecimale.
No?
>> TOMAS REIMERS: Sì.
Quindi è possibile utilizzare esadecimale.
Ma sto pensando nome-saggio.
Non sono lì?
ALLISON Buchholtz-AU: Si può fare un bel po '.
Più o meno come la maggior parte i colori che si può nome-- come, credo che il salmone è uno.
>> TOMAS REIMERS: Noi stiamo andando provare il salmone.
ALLISON Buchholtz-AU: I pensare chartreuse è in là.
TOMAS REIMERS: Sì.
Vedi?
Così si può ottenere abbastanza creativo.
>> ALLISON Buchholtz-AU: Lei potrebbe diventare piuttosto creativo.
Come, se si può pensare di nome del colore, probabilmente in là.
Se si vuole veramente bene dettaglio, si può andare hex.
>> TOMAS REIMERS: Sì.
Così esadecimale.
Se voi ragazzi ricordo questo ritorno dal vecchio PSET, Immagine Recover,
voi ragazzi avevano a che fare con questi valori esadecimali.
E una sorta di ricapitolare ciò che è, esagono ha tre valori memorizzati in esso.
Quindi è in gruppi di due incrementi.
I primi due rappresentano il valore rossa.
Il secondo rappresenta il valore verde.
E l'ultima è blu?
>> Così FF succede a rappresentare un esadecimale 255.
In modo da avere 255 rosso, 255 verde e 0 per il blu.
E i valori compresi tra 0 e 255.
>> AUDIENCE: Giusto.
Quindi, in sostanza, si potrebbe cercare Internet per tutto il colore che vogliamo,
e identificare la realtà conosciuta combo spettro dei colori,
e allora potremmo mettere in?
ALLISON Buchholtz-AU: Esattamente.
In modo da avere più o meno il controllo completo sopra i colori che volete all'interno di CSS.
Stiamo andando a parlare immagini di sfondo più tardi?
O vogliamo farlo?
>> TOMAS REIMERS: Sì.
Assolutamente.
Quindi, prima, solo per dimostrare che rosso e verde è giallo.
E se avete bisogno di un po ' aiuto per trovare questo,
può Google qualcosa come "selettore colore."
ALLISON Buchholtz-AU: Oh, è così buono.
Amo Color Picker.
>> TOMAS REIMERS: colorpicker.com è un buon esempio.
E qui, vedrete che avete un selettore di colori di Photoshop come pieno.
>> ALLISON Buchholtz-AU: Mm-hm.
Inoltre, le cose interessanti sono voi può generare combinazioni di colori
in modo che non avete, come, scontrandosi colori.
TOMAS REIMERS: E poi ecco il valore esadecimale qui.
Così si può sempre trovare on-line in fondo luoghi per ottenere il valore esadecimale.
Non è una sorta di che, proprio, come, noi vedere i colori del mondo in numero.
E 'più che andiamo in linea e scopriamo che colore che vogliamo,
e poi prendere il numero verso il basso.
Perché è solo una davvero facile modo per fare riferimento le cose in CS.
>> ALLISON Buchholtz-AU: E poi c'è also--
Non ricordo il nome esatto del sito.
Ma c'è sicuramente, ho pensare, qualcosa da Adobe
che genera combinazioni di colori per voi, che è davvero cool, perché si
definitely-- a volte difficile da capire,
oh, se voglio usare questo colore, quello che potrebbe essere un altro utile
utilizzare altrove sul mio sito, come, rendono piacevole e coeso.
>> TOMAS REIMERS: Allison di parlare uno per Adobe Kuler chiamato, credo.
E 'K-U-L-E-R.
ALLISON Buchholtz-AU: Penso di sì.
Sono abbastanza sicuro che è quello.
>> TOMAS REIMERS: Il mio preferito è sempre Color Scheme Designer.
>> ALLISON Buchholtz-AU: Ooh.
>> TOMAS REIMERS: Quale è now--
>> ALLISON Buchholtz-AU: Ah, questo è bello.
>> TOMAS REIMERS: E voi può sostanzialmente dire, come,
Voglio tre colori accanto all'altro.
E poi facciamo qualcosa di bello.
E allora si può ottenere un esempio di quello che potrebbe sembrare.
E poi se si passa su qualsiasi loro, ti dà il valore esadecimale.
>> Così come un buon modo per iniziare pensando di combinazioni di colori
o che colori in un sito web potrebbe andare bene insieme.
Perché questo può essere sorprendentemente non facile da prendere come si pensa.
E poi l'altra cosa interessante Ho sempre trovato su questo sito
è se si colpisce esempi, sarà mostrare ciò che un sito esempio
potrebbe apparire come l'utilizzo di quella combinazione di colori.
Comunque.
>> Torna alla CSS reale.
ALLISON Buchholtz-AU: Ma, ovviamente, abbiamo Conosco questi riferimenti potrebbero essere utili.
TOMAS REIMERS: No, sicuramente può essere utile.
Quindi la seconda regola, Allison?
>> ALLISON Buchholtz-AU: Sì.
La seconda regola è solo corrispondente al nostro carattere.
Così il peso del carattere è solo gentile di-- modo che il peso sarebbe
essere se si desidera solo, come, normale o, come, i caratteri più sottili,
o in questo caso, come, audace.
Ho dimenticato.
Qual è il se si voleva it-- è lì uno più sottile di un semplice, come normale?
TOMAS REIMERS: Io in realtà non sapere se c'è uno più sottile.
ALLISON Buchholtz-AU: non ricordo.
Così il peso del carattere abbiamo in genere basta usare per il grassetto.
Se si vuole ottenere davvero in esso, andiamo a mostrarvi.
W3Schools ha tutte le diverse cose che si possono fare per i font.
Ma in fondo, se volete mai cambiare nulla di font,
sta andando sempre essere, come, font-qualcosa.
Così sarà come, font-family se siete cercando di cambiare il tipo effettivo.
Sarà font-style se vogliono farlo come corsivo,
o corsivo, o roba del genere.
O anche font-color, se abbiamo deciso di cambiare la situazione.
>> TOMAS REIMERS: Yup.
Così si può cambiare la situazione.
E una sorta di proprio per recap ora, in modo da poter
vedere che abbiamo il selettore qui.
Abbiamo questi parentesi graffe.
E poi abbiamo delle regole delimitato da punti e virgola.
Questo fa senso?
Sì?
Freddo.
Quindi, se questo è buono--
>> ALLISON Buchholtz-AU: Back.
TOMAS REIMERS: Parliamo specificamente su che tipo di selettori che abbiamo.
Perche 'in questo momento che abbiamo sorta di appena mostrato tags.
Ma voi ragazzi poteste vedere plausibile.
Diciamo che sono due punti su una pagina e si
vogliono essere in grado di stile uno ma non l'altro,
non si vuole solo limitarsi di dover utilizzare diversi HTML reale
tag per dare loro diversi stili.
>> Quindi abbiamo tre di base tipi di selettori.
ALLISON Buchholtz-AU: Sì.
Così abbiamo tag, che è ciò che abbiamo parlato in questo momento.
Ecco, questo è un po 'come il vostro corpo o p.
E poi abbiamo una classe, che è quando lo definiamo nel nostro file CSS,
sta andando sempre essere dot, a prescindere si desidera che il nome della classe per essere.
E questo può essere applicato a più cose.
>> Dire che hai cinque paragrafi e due dei tre
devono essere in stile stesso, si dovrebbe applicare una classe ad esso.
E questo è solo il modo in cui lo facciamo.
Vi daremo un esempio di dove questo in realtà si presenta.
Ma se si ha forse qualche tag p, dopo che, si dovrebbe scrivere,
classe uguale qualunque classi si vuole applicare ad esso.
Quindi, qualunque selettori di classe che vogliamo di applicare al presente paragrafo specifico,
potremmo scrivere come questo.
Certo, penso che un esempio renderà molto più concreto.
>> L'altro abbiamo è id, che indicheremo
con un hash, o cancelletto, o hashtag.
TOMAS REIMERS: cancelletto.
ALLISON Buchholtz-AU: cancelletto.
Che funziona, anche.
E questo dovrebbe essere davvero unico.
Essi dovrebbero applicarsi solo alle una cosa sulla tua pagina.
Quindi, se questo è un paragrafo specifico, o qualche elemento in una lista, o qualsiasi altra cosa,
questo dovrebbe essere unico.
E nello stesso modo che solo dire, come, class = "Class1 class2,"
questo può essere solo id di ciò che abbiamo.
TOMAS REIMERS: Sì.
Quindi cerchiamo di parlare sicuramente su esempi qui.
E sto solo andando a tuffarsi subito indietro nel codice.
Quindi diamo un'occhiata al nostro HTML.
E così abbiamo adesso abbiamo un paragrafo.
Questo è il testo.
Sto solo andando a modificare esso. "Questo è un testo 1."
E poi andremo a avere un "Questo è il testo 2."
>> ALLISON Buchholtz-AU: secondo.
TOMAS REIMERS: Yup.
Così ora abbiamo "Questo è il testo 2," giusto?
E stiamo andando a vedere che se ricarichiamo Nella pagina, quello che stiamo andando a trovare
è che stiamo andando find--
ALLISON Buchholtz-AU: Ooh.
TOMAS REIMERS: Sì.
Andiamo a trovare un "Questo è text 1 "e" Questo è il testo 2. "
>> ALLISON Buchholtz-AU: E colore giallo fuori incantevole.
>> TOMAS REIMERS: E vedrai che il nostro selector in questo momento,
che si applica a p di, o punti, colpisce entrambi,
perché entrambi incontrano il condizione che sono entrambi un tag p.
Questo ha un senso totale.
Quindi la domanda è, beh, cosa se volessimo ottenere solo uno?
Quindi, esattamente come Allison stava dicendo, abbiamo altri due modi per farlo.
Ho intenzione di iniziare con id.
>> ALLISON Buchholtz-AU: Cominciamo con id.
>> TOMAS REIMERS: Ed entrambi di questi sono attributi.
Quindi esistono attributi in HTML.
E quello che sono è qualcosa che si aggiunge
all'interno del tag, che è separato dal nome del tag.
Così si può avere più attributi.
Sì?
>> ALLISON Buchholtz-AU: Stavo per dire, dal vostro esempio da PSET 7,
se qualcuno di voi cercare di allineare cose per il centro,
si potrebbe avere usato "Text align = center."
E avete notato probabilmente avrebbe centrato
il testo o la vostra barra di navigazione.
Ecco, questo è solo anche un attributo che si potrebbe avere familiarità con.
TOMAS REIMERS: C'è un mucchio di attributi che vedrete.
Sì.
Come buon riferimento per PSET 7.
Abbiamo id.
Si può anche avere classe, cose come questa.
Un singolo tag può avere molti attributi.
Quindi partendo da id, facciamo finta che vogliono avere un id di-- Non lo so.
Chiameremo speciale, perché questo, siamo
andando a fare in grassetto, e sottolineare, e quant'altro.
ALLISON Buchholtz-AU: E ' Sara 'super-speciale.
TOMAS REIMERS: Quindi questo uno, abbiamo id speciale.
Quindi il modo per selezionare che, poi, è in main.css, piuttosto che avere un tag p,
fate #special, OK?
E che seleziona il cosa con id speciale.
Questo senso a tutti?
PUBBLICO: Sì.
TOMAS REIMERS: Cool.
Così ora se andiamo indietro, ci see-- whoops.
Sì.
Vedremo che solo seleziona quello con id speciale.
Sì?
Suoni fresco.
Sì.
>> AUDIENCE: Può qualcosa avere un attribuire sia di classe e un id?
>> TOMAS REIMERS: Sì.
AUDIENCE: OK.
E poi che cosa succede se poi dare che alcune regole di CSS che il conflitto?
TOMAS REIMERS: Assolutamente.
Stiamo sicuramente andando per parlare di questo.
Quindi esattamente che cosa stavate ottenendo a, si può anche avere classi.
Quindi cerchiamo di far finta che avevo tre paragrafi e I
voluto per lo stile al primo due ma non il terzo.
Beh, la prima idea potrebbe essere, beh, io potrebbe solo dare il secondo un id.
Ma non si può, perché un id, esattamente come Allison stava dicendo,
deve essere univoco.
>> Così, invece di un id, quello che si possibile utilizzare è possibile utilizzare una classe.
E un class-- quello che permette di fare è fondamentalmente dire,
questo appartiene come parte di un gruppo.
In questo caso, il nostro gruppo è chiamato Special.
E quello che andremo a fare, allora è stiamo andando a say-- piuttosto che libbra,
stiamo andando a utilizzare dot.
OK?
E notare che la sterlina e dot esistere solo all'interno del file CSS,
non all'interno del codice HTML.
ALLISON Buchholtz-AU: Sì.
Distinzione importante.
>> TOMAS REIMERS: Ho avuto così tanto lottare,
perché ho messo l'hash del HTML e poi appena sentito stupido per un lungo periodo.
Vedi come seleziona entrambi quelli con quella classe?
Freddo.
>> Ora, le cose possono avere più classi.
Diciamo che ho voluto fare il primo due hanno uno sfondo giallo
e la seconda due hanno un colore del carattere di blu.
OK.
Io in realtà non so perché mi piacerebbe volerlo fare, ma posso.
>> ALLISON Buchholtz-AU: potrebbe non raccomandato per il tuo sito.
Ma per i nostri scopi, lo farà.
>> TOMAS REIMERS: Non è una buona combinazione di colori.
ALLISON Buchholtz-AU: Beh, giallo e blu sono i miei colori delle scuole superiori.
Non lo so, però.
TOMAS REIMERS: Allison alta scuola aveva un sistema di grande colore.
[Risate]
Allora quello che possiamo chiamare questo è Chiamiamo questo-- quindi abbiamo Special
e abbiamo abbastanza.
Suggerisco, per questo, si utilizza nomi più descrittivi.
ALLISON Buchholtz-AU: Sì, lo farei chiamare questo, come, giallo o blu.
>> TOMAS REIMERS: Non siamo davvero facendo un vero e proprio sito web,
che è il motivo per cui non stiamo facendo.
Ma se effettivamente ha avuto un vero e proprio sito web, voi
potrebbe avere, come, intestazione articolo, contenuto dell'articolo, prima parola,
cose del genere, che permettono di essere molto più descrittivo.
Questi sono in realtà solo come variabili.
Essi devono essere denominati in modo in cui è possibile, like-- sì, in quanto tale.
Perfetto.
>> Così il colore di sfondo.
E poi andremo a say-- così il modo per cambiare colore è solo "colore".
E stiamo andando a renderlo blu.
Questo è figo.
Così ora abbiamo il primi due hanno di speciale.
Il prossimo sta andando a hanno "class = abbastanza."
ALLISON Buchholtz-AU: e poi ti voglio aggiungere "abbastanza" per quello centrale.
TOMAS REIMERS: Yup.
E poi quello centrale, aggiungere "pretty", cosa succede
è basta avere uno spazio.
Così l'attributo class è un elenco separato da spazi
di tutte le classi che si applicano a quel tag.
OK?
Non è come questo appartiene una sorta di classe speciale chiamata
"Speciale, spazio, piuttosto."
Appartiene a due classes-- speciale e carina.
Sì?
Freddo.
>> E poi se guardiamo a ciò che accade, siamo
andando a vedere che prima ha sfondo giallo, testo nero.
Secondo tra--
>> ALLISON Buchholtz-AU: --has bold sfondo giallo con testo blu.
E il nostro ultimo ha solo il testo blu che abbiamo assegnato ad esso.
>> TOMAS REIMERS: Cool?
Come funzionano selettori?
Impressionante.
>> ALLISON Buchholtz-AU: Vogliamo parlare del conflitto ora allora?
>> TOMAS REIMERS: Quindi sì.
Assolutamente.
Che cosa succede se si avere un conflitto, giusto?
Facciamo finta il primo imposta qualcosa like--
ALLISON Buchholtz-AU: forse questo cambia lo sfondo?
TOMAS REIMERS: Sì.
Quindi stiamo andando a fare "bella" cambiare lo sfondo al salmone.
ALLISON Buchholtz-AU: Sei solo con tutti i grandi colori di oggi, Tomas.
TOMAS REIMERS: Sì.
Perché ho scoperto che posso utilizzare salmone come colore reale.
Quindi stiamo solo andando a farlo.
Penso anche Sunset è un colore reale.
AUDIENCE: Sunset è un colore vero e proprio?
ALLISON Buchholtz-AU: proviamo.
TOMAS REIMERS: Dopo questa demo proprio perché nel caso in cui scombina,
Io non voglio essere il debug.
Così sappiamo salmone è un colore reale.
Quindi, qualsiasi ipotesi su che cosa succederà?
>> ALLISON Buchholtz-AU: Qualche idea?
>> AUDIENCE: [incomprensibile].
>> TOMAS REIMERS: Sì.
Così avete ottenuto esattamente giusto.
In sostanza, ci vuole il ultima regola che è stato dato.
>> ALLISON Buchholtz-AU: Quindi questo è dove cascata entrata in vigore.
>> TOMAS REIMERS: Quindi ricorda come aveva che fogli di stile CSS?
Quindi da questo, abbiamo tipo di intendiamo che abbiamo un po 'di regole
che applicano uno sopra l'altro, e possono anche ignorare l'altro.
>> ALLISON Buchholtz-AU: So qualunque sia di in basso
sovrascriverà tutto quello che è in alto.
Si potrebbe avere regole che completamente negare qualcosa in anticipo.
Questo è anche il motivo per cui si vuole essere attento quando sei styling,
in modo da non sta creando regole che sei solo completamente imperative.
>> TOMAS REIMERS: O forse vogliono sovrascrivere regole.
>> ALLISON Buchholtz-AU: O forse si fa.
Sì.
>> TOMAS REIMERS: Fingere di avere un Classe che si applica alla maggior parte delle cose,
ma diciamo che si desidera cambiare la colore di sfondo al rosso e il tipo di carattere
peso in grassetto per la maggior parte cose, ma per una,
si vuole solo il colore di sfondo ad essere rosso, ma si desidera che tutti gli altri
proprietà, si potrebbe fare qualcosa come "font-weight = normale,"
che sarebbe poi annullare quel cambiamento in grassetto.
Sì?
Anche in questo caso, il modo migliore, penso Allison ha detto, è solo pratica.
>> ALLISON Buchholtz-AU: Sperimentazione.
>> TOMAS REIMERS: Pratica, pratica, pratica, e sperimentare.
Conosco un sacco di persone che pensano CSS è solo un sacco di indovinare-e-check
alla fine della giornata, dove se si vuole fare something-- come,
hai una vaga idea, ma è ancora probabilmente bisogno
provarlo per assicurarsi si sa che cosa assomiglia.
>> AUDIENCE: Quando si sta applicando classi, più
allo stesso paragrafo o sezione, lo fa
importa in che ordine si può digitarli nelle citazioni?
>> TOMAS REIMERS: No, per niente.
>> ALLISON Buchholtz-AU: ciò che conta è l'ordine entro il vostro foglio di stile CSS.
AUDIENCE: Può ripetere la domanda?
TOMAS REIMERS: Oh.
ALLISON Buchholtz-AU: Entro classe, quando si sta dando lezioni
a qualcosa nel codice HTML, fa importa quale ordine sono in?
Non importa l'ordine.
Ciò che conta è l'ordine del selettori di classe all'interno del vostro CSS,
all'interno del vostro foglio di stile.
>> TOMAS REIMERS: buon suono?
>> ALLISON Buchholtz-AU: Lovely.
>> TOMAS REIMERS: E poi abbiamo intenzione di continuare a a--
ALLISON Buchholtz-AU: Che cosa abbiamo adesso?
Ho dimenticato.
Oh, non ci resta che esempi.
Ma noi abbiamo genere di fatto quelli.
Abbiamo fatto esempi al volo.
>> TOMAS REIMERS: Arriviamo a combinare i selettori presto.
>> ALLISON Buchholtz-AU: Oh, si arriva a unire selettori.
TOMAS REIMERS: Così alcuni esempi è che abbiamo
# Pound dog--, o hashtag, o cancelletto, o qualsiasi altra cosa
si desidera chiamare che-- tagliente.
>> ALLISON Buchholtz-AU: Sharp cane.
>> TOMAS REIMERS: Allora avete .pets.
Qualcosa ha un id di cane, c'è solo un cane sulla pagina.
Qualcosa ha un id di gatto, c'è solo un gatto.
Ci possono essere molti animali nella pagina.
Ecco perché abbiamo dato che le classi.
Avete un esempio di p.
E poi così uno dei ultimo esempio, che
è qualcosa che non abbiamo parlato, è quello che succede quando si combinano.
Così p.pets.
>> Quindi, per questo, torniamo al Codice e di introdurre another-- sì.
Quindi, di nuovo qui.
>> ALLISON Buchholtz-AU: I sentire come questo è really--
come solo guardando attraverso esempi è davvero il modo per imparare questo.
Ecco, questo è quello che stiamo facendo.
>> TOMAS REIMERS: Quindi facciamo finta che vogliono solo selezionare il testo 2, giusto?
Così abbiamo sicuramente non possiamo farlo con un id.
Beh, potremmo farlo con un id, ma non ha un id.
Potrei aggiungere uno, ma facciamo finta che non ho voglia di aggiungere un
o ha già qualcos'altro.
Io non posso farlo con questo.
Il tag non è decisamente unico, giusto?
E non è la classe.
Ma è possibile combinare queste cose.
Diciamo che abbiamo voluto fare qualcosa che si applica solo alle cose che
hanno la classe speciale e che hanno la classe piuttosto.
>> Che cosa si può fare è in main.css, si può dire, si deve prima eliminare questo.
È possibile combinare questi.
Così si può fare .Special.
Nessuno spazio.
Solo .special.pretty.
Ciò significa qualcosa che è speciale e carina.
Questo fa senso?
E se andiamo qui, cosa si sta andando a vedere
è questa regola si applica solo alla secondo, che ha sia di quelli.
E si può fare per un sacco di cose.
Puoi say-- facciamo finta Volevo solo
per fare le cose che hanno la classe piuttosto e che sono anche un tag di paragrafo.
Così p.pretty.
Facciamo finta che ho avuto qualcosa di abbastanza sul corpo tag.
OK?
Posso correre questo e io può vedere che è solo
andando ad applicarsi a cose che sono paragrafi con la classe piuttosto.
E è possibile combinare questi, fondamentalmente, come molti come si desidera.
Così si può semplicemente mettere insieme.
Questo fa senso?
ALLISON Buchholtz-AU: So questo tipo di è più utile
quando, Tomas diceva in precedenza, forse avete un sito web molto complicato,
e avete già un sacco di queste regole scritte,
e avete solo bisogno di combinare due da prima.
Come invece di scrivere un intero nuovo selettore e cambiando lì,
si può solo unire loro dove si sovrappone.
>> TOMAS REIMERS: O potrebbe trovare fuori-- volte
c'è una classe che rende il colore del carattere come il blu,
e c'è un'altra classe che rende lo sfondo blu.
E che proprio non funziona.
Così si scrive un caso speciale, dove, like-- ma se ha entrambi, quello che stai
intenzione di fare è che si sta andando a rendere questo questa tonalità di blu
e questo quest'altro tonalità di blu.
Giusto?
>> ALLISON Buchholtz-AU: Buono per quei tipi di eccezioni.
TOMAS REIMERS: Quindi, per pensare ai problemi
che potrebbero sorgere quando si combinano.
Freddo.
Ma torniamo alla nostra presentazione.
ALLISON Buchholtz-AU: Ci siamo quasi.
TOMAS REIMERS: E ha smesso di collegamento.
ALLISON Buchholtz-AU: Oh, no.
ALLISON Buchholtz-AU: CS a l'ufficio, internet va giù.
Oh, l'ironia.
>> TOMAS REIMERS: Così fortunatamente, possiamo presenta senza internet, immagino,
perché abbiamo tutte le diapositive qui.
Quindi cerchiamo di parlare del rapporto di tag.
ALLISON Buchholtz-AU: Giusto.
Quindi, solo tipo di corso fuori di quello che ha detto Tomas,
questo è solo un altro modo per farlo.
Così abbiamo alcuni genitori del selettore con un selettore bambino.
Quindi, in questo esempio qui, abbiamo qualche corpo con una barra di navigazione di classe, dei pulsanti.
Ah.
>> TOMAS REIMERS: Oh, mi dispiace.
>> ALLISON Buchholtz-AU: E in fondo, che cosa significa
è selezionare tutti i bambini, come tutti questi tipi di selettori,
all'interno di questo selettore principale.
E questi sono gli unici è mai andare da applicare.
Non so se si avere un modo migliore di--
TOMAS REIMERS: Così ho indovinare il modo di pensare
questo è ricordare prima come abbiamo una sorta di loro come messo insieme.
E poi che significa un elemento che corrisponde a tutti questi.
Ciò sta dicendo è, io desidera di abbinare tutto
all'interno some-- Voglio a trovare un selettore.
E poi all'interno di quella, voglio di abbinare le cose nuove.
Giusto?
Così in CSS, è tutta una questione di genere essere in grado di abbinare questi elementi.
E si può cercare di far corrispondere elementi all'interno di altri oggetti.
>> Quindi cerchiamo di fare in realtà un esempio, e pensiamo che sarà chiarire.
Quindi cerchiamo di far finta che abbiamo speciale, davvero speciale, a prescindere.
E poi abbiamo un collegamento, OK?
Quindi ricordate, a è un collegamento.
Non è intenzione di andare da nessuna parte.
E stiamo per dare il legame di classe, credo.
Diamogli il Mi class-- dare un'idea.
ALLISON Buchholtz-AU: Cool.
TOMAS REIMERS: Coo-- facciamo andare da la classe abbastanza.
Perché no?
>> ALLISON Buchholtz-AU: OK.
TOMAS REIMERS: So le cose in questo momento belle
stanno per rendere lo sfondo blu, colore di sfondo di salmone.
Questo ha un senso.
E se lo facciamo questo--
>> ALLISON Buchholtz-AU: Vuoi aggiungere testo
così il collegamento ipertestuale in realtà si presenta?
TOMAS REIMERS: Che sarebbe una buona chiamata.
ALLISON Buchholtz-AU: Perche 'giusto ora stiamo solo andando ottenere nulla.
TOMAS REIMERS: Quindi questo è un collegamento.
"Si tratta di un collegamento."
Oh, e questo sta andando per essere un altro collegamento.
Diamogli la classe "cool".
Hai ragione.
Freddo.
Così adesso stiamo andando a prendere questo.
Stiamo per lanciare uno.
Abbiamo uno nel tag speciale, e abbiamo anche
stanno per avere uno nel grazioso tag.
E proprio ora che cosa stiamo andando a fare è che stiamo andando a fare cool--
cosa vogliamo fare?
ALLISON Buchholtz-AU: Possiamo rendere più grande?
TOMAS REIMERS: Diamo un confine.
ALLISON Buchholtz-AU: Potremmo confine.
TOMAS REIMERS: Sì.
Quindi stiamo andando a fare qualcosa come, è-- confine e siamo
andando a spiegare tutto questo in un secondo.
Per ora--
>> ALLISON Buchholtz-AU: Per il modello di dialogo.
TOMAS REIMERS: Ma per ora, siamo solo andando a dare un bordo.
Quindi ciò significa che sei andare a vedere questi collegamenti.
E si sta andando a vedere che hanno questi, come, brutti bordi neri, che
è cool.
>> ALLISON Buchholtz-AU: Il nostro sito è così bella.
>> TOMAS REIMERS: Sì.
Il nostro sito è impressionante.
Quindi questi due sono i collegamenti, e appaiono.
Ora facciamo finta I solo voluto fare questo
se non fosse dentro qualcosa che aveva un fondo di salmone.
Quindi ricorda che questo ha uno sfondo di salmone,
perché è di classe carina.
>> Ma vogliamo dire che raffredda solo che sono in classe speciale, non in classe
piuttosto, dovrebbe avere quel confine.
Beh, cosa si può fare si è può dire, .Special, spazio, .cool.
E ciò che sta facendo, quando si pensa a questo proposito, è che è fondamentalmente dicendo,
OK, mi trovare tutto che corrisponde speciale.
Poi all'interno di questi tag, trovare me tutto quello che è cool.
ALLISON Buchholtz-AU: Quindi un altro modo che potrebbe essere buona per pensare a questo,
riportandolo a C, è proprio come l'idea del campo di applicazione.
Quindi, quando si ha un po ' selettore, come quelle
che abbiamo lavorato per prima di questo, l'intera pagina web, tutto il codice HTML
è all'interno della vostra portata, giusto?
Ma quando abbiamo questi relazioni padre-figlio,
è come se si sta restringendo, dove siete alla ricerca di un luogo specifico,
come se, come, stiamo cercando all'interno una funzione specifica invece
di tutto il nostro file.
AUDIENCE: Quindi, con questo in mente, sarebbe essa ha importava se avevamo changed--
ALLISON Buchholtz-AU: L'ordine?
AUDIENCE: --La classe CSS a .cool, spazio, .Special?
ALLISON Buchholtz-AU: Sì, perché poi che
direi, portata a tutto ciò che ha freddo,
e poi guardare a ciò has-- Voglio dire, come, in questo caso,
Non credo che sarebbe cambiato.
>> TOMAS REIMERS: Se avesse detto che cosa?
Scusi.
>> ALLISON Buchholtz-AU: Se noi portata raffreddare e poi
cercare le cose di speciale, sarebbe lo stesso, in realtà.
>> TOMAS REIMERS: Quindi non sarebbe.
>> ALLISON Buchholtz-AU: Non sarebbe?
Oh, oh, va bene.
Mi sbaglio.
>> TOMAS REIMERS: Quindi la ragione è different-- mistake-- comune
è che in questo momento solo il collegamento ha freddo, giusto?
Credo che la mia domanda a voi ragazzi è, ciò in questa pagina non sia coperto da .cool?
Ci sono due tag qui, giusto?
Che è questo e questo.
Entrambi corrispondono fresco.
Nient'altro fa.
Quindi, se lei ha detto, .cool, spazio, .Special, cosa hai intenzione di dire è,
all'interno di questi tag, che cosa c'è di speciale?
ALLISON Buchholtz-AU: Hm.
Questo è ciò che it-- giusto.
Perché è come se solo qualcosa qui.
>> TOMAS REIMERS: Quindi seleziona nulla.
>> ALLISON Buchholtz-AU: considerando che, con speciale, siamo all'interno di questi tag qui.
>> TOMAS REIMERS: Quelli e quelle.
AUDIENCE: OK.
Così questi tag dal slash?
>> TOMAS REIMERS: Sì.
Questo fa senso?
Come è fondamentalmente cercando di restringere la portata.
ALLISON Buchholtz-AU: Sì.
Penso che sia probabilmente il modo più semplice per pensarci.
>> TOMAS REIMERS: Così abbiamo trovato questo, e abbiamo trovato questo sia abbinato speciale.
E poi stiamo chiedendo, entro questi ragazzi, che cosa è cool?
E all'interno di questo, di questo fresco.
All'interno di questo, non c'è niente di fresco.
Quindi questo è l'unico tag che rimane.
>> ALLISON Buchholtz-AU: Mentre fresco è proprio all'interno di questi tag a lì.
TOMAS REIMERS: Esattamente.
E che cosa c'è di speciale tra quelle?
Niente.
Ora, quello che posso dire è se non c'era spazio,
si sta chiedendo che cosa è cool e special-- o ciò che è bello e speciale, giusto?
Se dici .special.pretty, che è lo stesso .pretty.special.
>> Perché ciò eliminando lo spazio è chiedendo è, quando si dice .Special,
stai chiedendo, OK, quali sono speciali?
E poi di quelli che quelli sono anche piuttosto,
che è lo stesso, grammaticalmente, come richiesto, ciò che è bello,
e poi di quelli, ciò che è anche speciale?
Giusto?
E 'la differenza di ciò che è all'interno di quello che è.
AUDIENCE: OK.
TOMAS REIMERS: Sì.
Impressionante.
Quindi, con questo in mente then--
>> ALLISON Buchholtz-AU: Penso che il nostro ultimo cosa è (IN OPERATO BRITISH ACCENT)
il box model.
>> TOMAS REIMERS: Il box-- [Ride] Amo il modo in Allison dice.
Così il box model cosa.
>> ALLISON Buchholtz-AU: Basta una scatola, sarò il vostro modello di dialogo.
TOMAS REIMERS: Allora parliamo di questo.
Così adesso abbiamo speso un sacco di tempo a parlare di selettori.
Ormai, voi ragazzi siete probabilmente, come, maestri di selectors-- sapete,
come selezionare esattamente il contenuto che si vuole manipolare sul vostro schermo.
>> Così ora la domanda è: come esattamente si può manipolare?
Quindi credo che la più elementare modo di pensare che
è, beh, che cosa esattamente è un elemento in CSS?
Abbiamo speso un sacco di tempo parlando, che cosa è un tag,
o quello che è il più fondamentale rappresentazione di un tag?
>> Un buon modo di pensare che è, ciò che forma è il salmone?
Che forma ha, come, il color salmone sfondo?
>> AUDIENCE: E 'un rettangolo.
>> TOMAS REIMERS: E 'un rettangolo, giusto?
>> ALLISON Buchholtz-AU: Non era una domanda trabocchetto.
[Risate]
>> TOMAS REIMERS: Non cercando per ingannare voi ragazzi questo ritardo.
Quindi abbiamo questo rettangolo.
E il tag è una p, giusto?
In modo che ci dà una buona convinzione che il paragrafo
è rappresentato come un rettangolo, almeno nella mente del browser, che
esso è.
>> ALLISON Buchholtz-AU: voglio dire, i browser sono in genere di forma rettangolare,
quindi ha senso.
>> TOMAS REIMERS: L'idea è che tutti i tag all'interno di CSS
sono rappresentati come un rettangolo.
E ogni rettangolo ha quattro le parti in base al CSS, OK?
Avete il contenuto effettivo.
Ecco dove il testo si trova.
>> ALLISON Buchholtz-AU: Forse la tua foto.
>> TOMAS REIMERS: Sì.
Hai imbottitura, che è solo una sorta di spazio bianco.
Allora avete un bordo.
E poi ci sono margini, che è spazio bianco al di fuori di questo.
In modo che non ha senso a nessuno, così siamo
andando a parlare di questo per un secondo.
Così proprio qui, che cosa stiamo andando a fare è che stiamo andando a creare qualche div, OK?
Mi scusi mentre I--
>> ALLISON Buchholtz-AU: mi sento come dovremmo mettere una foto carina in.
>> TOMAS REIMERS: Abbiamo sicuramente dovrebbe.
>> ALLISON Buchholtz-AU: Mi sento come tutti
potrebbe beneficiare di un carino foto, è tutto.
>> TOMAS REIMERS: possiamo tutto il beneficio da a--
>> PUBBLICO: Sì, certo.
TOMAS REIMERS: OK, fresco.
Quindi dovremmo mettere un simpatico picture in qualche parte.
ALLISON Buchholtz-AU: mi sento come un simpatico coniglietto potrebbe essere utile in questo momento.
TOMAS REIMERS: Certo.
ALLISON Buchholtz-AU: fine della settimana.
Avere qualcosa adorab--
>> TOMAS REIMERS: come incontro un gattino?
>> ALLISON Buchholtz-AU: Un gattino funziona, anche.
>> TOMAS REIMERS: Cool, perché c'è un sito per questo.
Si chiama PlaceKitten.
ALLISON Buchholtz-AU: E 'fantastico.
TOMAS REIMERS: Sì.
ALLISON Buchholtz-AU: Solo per, come, immagini segnaposto nel tuo sito web.
TOMAS REIMERS: Mm-hm.
C'è anche PlacePuppy.
E c'è PlaceBacon.
>> ALLISON Buchholtz-AU: PlaceBacon?
Davvero?
>> TOMAS REIMERS: Oh, non lo facciamo avere una connessione internet.
>> ALLISON Buchholtz-AU: [geme]
Tragico.
TOMAS REIMERS: In caso contrario, Vorrei mostrarvi ragazzi
come mettere le immagini nel tuo sito web.
Stiamo andando a cercare di ottenere questo lavorando prima dobbiamo andare.
Ma per ora, siamo solo andando a parlare con colori allora.
Vogliamo mettere le immagini di kittens--
>> ALLISON Buchholtz-AU: abbiamo fatto.
>> TOMAS REIMERS: di --il internet giù per il momento essere.
Quindi abbiamo due div, e siamo andando a dare loro due ids.
Stiamo per chiamare "Prima" e "seconda".
Così id = "prima".
E stiamo andando a dare loro due colori.
Quindi, come possiamo selezioniamo qualcosa con un id di "prima"?
ALLISON Buchholtz-AU: Dot o hash?
AUDIENCE: Sharp.
TOMAS REIMERS: Sharp, perfetto.
Sharp, hash, a prescindere we--
>> ALLISON Buchholtz-AU: Ci sono un sacco di cose da chiamano.
>> TOMAS REIMERS: OK.
Stiamo andando a stabilirsi su hashtag, e questo è quello che stiamo per andare con.
OK?
>> ALLISON Buchholtz-AU: hashtag.
>> TOMAS REIMERS: Così hashtag di prima.
>> ALLISON Buchholtz-AU: So è possibile tweet il seminar--
hashtag CSS, hashtag fresco.
TOMAS REIMERS: hashtag Awesomeness.
ALLISON Buchholtz-AU: Hashtag Awesomeness, sì.
TOMAS REIMERS: OK.
Così abbiamo "prima" e "seconda".
Quindi, prima, stiamo andando ad avere un colore di sfondo rosso.
ALLISON Buchholtz-AU: Uh, colon.
TOMAS REIMERS: Yup.
ALLISON Buchholtz-AU: Sarò il vostro punto-checker.
TOMAS REIMERS: Allison mi ha fatto.
Background-color di blue--
>> TOMAS REIMERS: Viola!
>> TOMAS REIMERS: Viola.
ALLISON Buchholtz-AU: Sì.
Il mio colore preferito di Viola, e non abbiamo ancora usato.
>> TOMAS REIMERS: Violet.
ALLISON Buchholtz-AU: Violet.
Che funziona.
>> TOMAS REIMERS: Quindi siamo andando ad avere due div.
Stanno andando essere completamente vuoto.
Probabilmente dovremmo avere del testo.
Quindi, "prima" sta per essere "CIAO".
E la "seconda" si say--
>> ALLISON Buchholtz-AU: Addio.
>> AUDIENCE: - "WORLD".
Ciao, arrivederci.
ALLISON Buchholtz-AU: ho visto li in concerto l'altra settimana.
TOMAS REIMERS: i Beatles?
ALLISON Buchholtz-AU: per reali.
Non sono un gran che.
Non mi piace.
>> TOMAS REIMERS: Abbiamo "CIAO" e "arrivederci".
E ancora, CSS è semplicemente incredibile, perché riconosce i nostri colori.
Non è necessario neanche temono che esistono.
Lo fanno.
>> ALLISON Buchholtz-AU: Loro esistono.
>> TOMAS REIMERS: Così CSS credo abbia 255 parole per parlare di colore.
Se si può pensare a un colore fuori chi 255, come, mi sarà impressionato.
ALLISON Buchholtz-AU: Sì.
Penso che voi ragazzi possono avere appena arrivato in subito dopo.
>> TOMAS REIMERS: Ecco, vedrete abbiamo due scatole
proprio sopra l'altro, giusto?
CIAO e ADDIO.
>> ALLISON Buchholtz-AU: Non c'è spazio in mezzo.
Stanno solo smooshed proprio sopra l'altro.
>> TOMAS REIMERS: Quindi la prima cosa Credo che dovremmo parlare di
è diamo say-- anche sì.
Così CSS li rappresenta come una sorta di scatole.
E come scatole, che hanno contenuto.
E il contenuto in questo momento è una sorta di il CIAO o l'arrivederci e il gioco è fatto.
OK?
>> Così una delle prime cose che si può fare è che si può aggiungere imbottitura.
Imbottitura dice quanto spazio esso dovrebbe lasciare su ogni lato.
Quindi diciamo che voglio dire 10 pixel per ogni lato.
E io sezionare che in un secondo.
ALLISON Buchholtz-AU: Tutte queste cose qui
stanno per essere per lo più in pixel per il resto del seminario.
Stai andando a vedere che ha po 'di spazio intorno ad esso, giusto?
Allora, cosa che non si vede qui è c'è questo tipo di imbottitura invisibile
su ciascun lato, che dice, come, OK, avete la vostra casella di content--
>> ALLISON Buchholtz-AU: Volete per tirare appena il elemento ispezionare?
>> TOMAS REIMERS: Sì, questa è una buona idea.
ALLISON Buchholtz-AU: Inoltre, trovo che l'elemento ispezionare è un buon modo
per capire se c'è qualcosa che non va sbagliato, succede qualcosa di inaspettato,
ispezionare i tag e vedere cosa è come sovrascritto è utile.
>> TOMAS REIMERS: Quindi io non sono sicuro se voi potete vedere questo colore.
Puoi?
Vedrete questa imbottitura sul tipo di bordo.
E poi si vede l'attuale contenuti in blu, giusto?
Ecco, questo è il molto basi del box model.
Avete contenuti.
Allora avete imbottitura.
>> AUDIENCE: Perché non basta utilizzare la casella all'interno the--
>> ALLISON Buchholtz-AU: Giusto.
Perché è proprio la selezione l'elemento in questo momento.
>> TOMAS REIMERS: Yup.
Altre cose.
Quindi parliamo di che Comando imbottitura per un secondo.
Quindi, in CSS, misure necessario avere un'unità.
Quindi, prima di avere la quantità.
Quindi, in questo caso, abbiamo detto 10.
E poi quella successiva Abbiamo detto è pixel, px.
Altri quelli che potreste avere sono cose come centimetri, centimetri.
È possibile fare cose come, ciò che è di 10 pollici?
E che sta per essere ridicolo.
>> ALLISON Buchholtz-AU: Oh, boy.
>> AUDIENCE: Whoa.
>> Tomas e ALLISON: Sì.
TOMAS REIMERS: Quindi questo è tutto imbottitura.
Ho intenzione di tornare a pixel.
>> ALLISON Buchholtz-AU: Pixel tendono ad essere, come, lo standard.
Quando si guarda un sacco di siti web, la maggior parte essi lavorano in pixel.
TOMAS REIMERS: Così si sta andando a vedere o pixels-- gli altri quelli che vedete
è em, che è uno em è pari all'altezza del carattere
che si sta utilizzando.
>> ALLISON Buchholtz-AU: Mm.
TOMAS REIMERS: E 'un buon modo per dire, come, io voglio tutto lo spazio come il mio carattere
sta prendendo.
ALLISON Buchholtz-AU: non sapevo che.
Si impara qualcosa di nuovo ogni giorno.
TOMAS REIMERS: Ci sono un molte misure in CS.
Vi suggerisco di guardare in su.
Per tutti i vostri casi, credo pixel dovrebbero essere sufficienti.
E sono anche quello che si sta andando a vedere
nella maggior parte dei esempi fatto in linea.
Così lasceremo a pixel.
>> È anche possibile, dovrei say-- così imbottitura Imposta tutti gli imbottiture.
È anche possibile fare qualcosa di simile "Padding-top" a solo set--
ALLISON Buchholtz-AU: forse avremo il nostro "CIAO" indietro.
TOMAS REIMERS: --to basta impostare il imbottitura sulla parte superiore e nient'altro.
Così i quattro comandi sono padding-top, padding-bottom, padding-left,
e padding-right.
>> ALLISON Buchholtz-AU: Proprio come ci si aspetterebbe da una scatola.
>> TOMAS REIMERS: Sì.
Niente di troppo pazzo lì.
Questo fa senso?
In modo che sia imbottitura.
Ho intenzione di impostare tutto le imbottiture torna alla 10.
E poi ho intenzione di passare al confine.
>> Allora, qual è confine è border è un comando strano.
Ci vuole una sorta di tre cose in una volta.
Così il primo è quanto grande voglio che sia come una misura.
Ancora una volta, sto usando solo i pixel.
E l'ultima cosa che dovrebbe aggiungere alle misure
è l'unica cosa che non ha bisogno di una unità è 0.
In realtà è errato per dare 0 un'unità,
perché 0 è 0 attraverso pollici, pixel, centimetri, qualunque.
Tutto Significa solo 0, giusto?
Quindi, prima si dà la misura.
>> Poi si dà lo stile.
Quindi ho intenzione di dire "solido".
E parleremo di ciò che significa.
E poi, infine, si dà un colore.
Quindi ho intenzione di dire "nero".
E queste sono tutte cose che abbiamo Ora visto prima, eccetto stile,
ma parleremo di questo.
Quindi voi ragazzi avete visto misurazioni, e avete visto i colori.
E quello che succede è che otteniamo questo bello bordo nero intorno ad esso, giusto?
Ragazzi vedere come abbiamo fatto?
>> PUBBLICO: Sì.
>> TOMAS REIMERS: Cool.
Così che cosa si tratta?
Quindi, prima di tutto, è un pixel.
Questo è evidente a sufficienza, giusto?
Come, è denso di un pixel.
O sarebbe un pixel, ma sono zoom in, quindi è un po 'di più
di quello.
>> ALLISON Buchholtz-AU: E abbiamo presente risoluzione ridicola TV.
>> TOMAS REIMERS: Sì.
Si può rendere più grande, più piccolo, qualunque cosa.
Quindi, ecco un bordo a due pixel.
Vedrete che è due volte più spessa.
La prossima cosa che hai è il colore.
Non è interessante.
Non ho intenzione di parlare a tale proposito, davvero.
>> ALLISON Buchholtz-AU: Ma lo stile potrebbe essere solo un po 'interessante.
>> TOMAS REIMERS: Sì.
Quindi stile, ci sono pochi quelli che vedo usato comunemente.
Prima di uno solido, successiva di punteggiato, e l'ultimo di quella tratteggiata.
E qui è costellata.
Vedrai che sono un mucchio di punti, giusto?
Un buon modo per una sorta di ottenere un bel confine andare, trattini sono anche piuttosto popolari.
>> ALLISON Buchholtz-AU: E poi, naturalmente, io sono
sicuro che ci sono molti altri stili che si possono ottenere.
E abbiamo una grande serie di link alla fine per voi ragazzi
al tipo di esaminare e guardare più fresco CSS.
>> TOMAS REIMERS: E poi l'ultima cosa, siamo
andando a parlare del modelli contenitore reale veloce.
Oh, e poi di confine, esattamente come imbottitura,
hai anche cose come border-left, border-right, border-top,
border-bottom, che permettono per arrivare a un bordo specifico.
Così qui è solo il bordo sinistro-definito.
Fa questo ha un senso?
>> ALLISON Buchholtz-AU: E 'un freddo modo per sottolineare le cose o aggiungere
linee tra i diversi elementi.
TOMAS REIMERS: Assolutamente.
Ecco, questo è il nostro confine.
E il margine dell'ultimo uno.
Padding come di Margin tranne che non è within--
ALLISON Buchholtz-AU: E ' non intorno vostro elemento
ma in realtà intorno all'intero scatola che che abbiamo visto.
>> TOMAS REIMERS: Sì.
Allison ha detto perfettamente.
Non è, come, all'interno della vostra elemento, è in giro per l'intera scatola.
Ciò significa che le cose come sfondo non si applicano ad esso.
E dice in sostanza, come, non voglio niente
in questo spazio per me.
Così come qui abbiamo un margine di 10 pixel.
Quindi nulla entro 10 pixel dovrebbe essere accanto a me.
Questo è il genere della sua spazio ma tipo di no.
Ecco, questo è il molto basi del box model.
Questo fa senso?
Freddo, freddo.
ALLISON Buchholtz-AU: Awesome.
Così ora penso che abbiamo appena le nostre risorse fresche
che prenderemo ragazzi attraverso molto rapidamente.
E noi actually-- bene, Non abbiamo ancora internet?
>> TOMAS Reimers: LET'S vedere se posso aprire up--
fammi vedere se ho può ottenere internet rapidamente
mentre Allison parla di qualsiasi cosa Allison vuole parlare.
ALLISON Buchholtz-AU: Quindi basically-- non mi
so che altro posso dire a questo punto.
Ma questi sono solo alcuni davvero buone risorse.
Questi sono quelli che Tomas e ho usato
e che in realtà utilizzati per preparare per questo.
W3Schools è uno che si ragazzi avrebbero dovuto visto prima.
Lo consigliamo per una sacco di cose con i CSS.
So che consiglio a mia sezione per tutto il tempo.
>> Una delle grandi cose è che Consente di genere di pasticciare con i CSS
e vedere i cambiamenti istantaneamente in questo,
come, vedere doppio finestra che ha.
Quindi non dovete preoccuparvi di impostare la propria pagina web,
o la creazione di vhost in appliance locale e host locale,
e ottenere tutta quella roba di lavoro.
Si è incorporato proprio all'interno della pagina.
>> E ha questi piccoli lezioni che è possibile
passare per imparare di più su selettori,
o conoscere manipolare il vostro font, o un fondo, o un'immagine.
E voi avete questi risultati istantanei che si
non hanno a che fare qualsiasi altri lavori di preparazione per.
Così mi piace W3Schools.
E 'favoloso.
Sta funzionando?
>> TOMAS REIMERS: Sì.
No, non lo è.
Vuoi che provi e riavviare il computer?
O vogliamo a--
>> ALLISON Buchholtz-AU: voglio dire, bene, questo sarà anche on-line.
Tutte le diapositive saranno on-line.
Così ho solo consiglio vivamente di fare questi.
>> Questo è grande come solo come un foglietto.
E 'solo tutta la base comandi che avete.
E 'bello quando si è in primo luogo partendo tuo sito web.
Perché forse non lo fai vuole entrare in tutte le
il vero Nitty Gritty Design-heavy stuff.
Hai solo bisogno di formattare in modo quel tipo di senso e volontà
fare per il momento.
E se si vuole veramente per entrare in esso, lo so
questo è, come, uno dei Riferimenti preferiti di Tomas.
Stavamo usando per preparazione, ed è favoloso.
E 'il Sviluppatore da Mozilla.
>> TOMAS REIMERS: So Mozilla sono le persone che fanno Firefox.
Ed è proprio il loro sviluppo riferimento, che credo sia fantastico.
Ed ha una meravigliosa elenco di risorse.
Così abbiamo have--
>> ALLISON Buchholtz-AU: E poi l'ultima nota è
quando si sta cercando di progettare il vostro sito web,
trarre ispirazione da cose che si pensa siano abbastanza.
Ispezione del elemento, ispezionando il codice sorgente
può essere super disponibile per cercare di capire
come per lo stile il proprio sito web.
>> Spesso, mi sento come il migliore modo, oltre sperimentazione,
è solo da guardare cose che sono abbastanza.
Trovo davvero difficile solo tipo di progettare le cose da soli,
soprattutto all'inizio.
Quindi, per favore guardare siti web che ti piace guardare.
Capire che cosa fa loro appello a voi.
E quindi sentitevi liberi di cercare di replicare questo.
>> TOMAS REIMERS: Giusto.
Anche come siti web in questo modo, è possibile vedere
c'è sicuramente un div in alto.
E poi avete un altro div all'interno qui, che è CSS Awesomeness.
E poi hai un sacco di link qui.
Se davvero solo ispezionare elementi, è possibile ordinare di
iniziare a vedere che cosa fare siti web simile, e come posso
ricreare che se volevo.
Questo fa senso?
Così abbiamo solo tre minuti dalla.
Così domande?
Qualcuno di loro?
Sì.
>> AUDIENCE: Per il colore rettangolo, come faresti
have-- se non si desidera attraversando l'intera pagina, potrebbe
avete fatto andare tutto solo metà della pagina o solo il testo?
>> TOMAS REIMERS: Sì, assolutamente.
Quindi fammi vedere realmente.
Ho due idee.
Quindi, prima di tutto, può anche utilizzare percentuali.
>> AUDIENCE: Davvero?
>> ALLISON Buchholtz-AU: So qualcosa per cercare è posizionamento relativo.
E 'qualcosa che abbiamo non hanno il tempo di entrare in,
ma è qualcosa che sicuramente consigliamo di ragazzi di verificare.
>> TOMAS REIMERS: percentuali così.
E vedere come abbiamo fatto solo il 50% della larghezza?
ALLISON Buchholtz-AU: Se in realtà conoscere il numero di pixel,
si può essere più precisi in questo modo.
Si può giocherellare con esso.
Ma il 50%.
Se dovessimo ridimensionare il nostro browser, renderebbe più piccolo.
>> TOMAS REIMERS: Beh, è fondamentalmente il 50% in questo momento, penso.
E '50%, e quindi il margine è stato aggiunto a questo.
CSS ha un sacco di stranezze.
Così adesso è 50% della larghezza della pagina.
Ma ricordate che avete 10 pixel tolti da ogni lato.
Quindi, se si dovesse muovere quella contro il bordo sinistro del browser,
allora sarebbe simile al 50%.
Ancora una volta, come ho detto, CSS può essere un sacco di indovinare-e-check.
Come, pensi che qualcosa sia andando a comportarsi in un modo,
ma comporta un modo completamente diverso.
>> ALLISON Buchholtz-AU: E basta avere più intelligente,
e basta avere una migliore l'intuizione per come si muovono lungo.
>> TOMAS REIMERS: E diventa sempre peggio.
Quindi è davvero solo una gara.
>> ALLISON Buchholtz-AU: Questo è eccellente incoraggiante.
Vogliamo che come CSS.
>> TOMAS REIMERS: CSS è impressionante.
Ricordate che.
Altre domande?
>> ALLISON Buchholtz-AU: L'unica cosa.
Qualunque altra cosa?
Freddo.
>> TOMAS REIMERS: Awesome.
>> ALLISON Buchholtz-AU: Beh, se si ragazzi hanno tutte le domande più tardi,
siamo sempre disponibili come al solito.
Probabilmente vedrete alcuni di noi per progetti finali
e sicuramente al hackathon.
>> TOMAS REIMERS: Assolutamente.
E in fiera.
>> ALLISON Buchholtz-AU: E in fiera.
Oh.
>> TOMAS REIMERS: Vediamo l'ora di vedere tutti i tuoi awesome--
>> ALLISON Buchholtz-AU: Vedremo tutti i vostri siti web impressionante
che sarà bello.
TOMAS REIMERS: Si può sempre vedere, come i siti web
che aveva, come, buona CSS e quindi come quelli che non cercano di fare i CSS.
ALLISON Buchholtz-AU: Inoltre, un altro cosa, una cosa da guardare in
è bootstrap.
Così Bootstrap è grande.
>> TOMAS REIMERS: Google che se you--
>> ALLISON Buchholtz-AU: Google esso.
E 'favoloso.
Ti piacerà.
Ed ora che avete un conoscenza di base di CSS,
si farà molto più senso.
Impressionante.
Grazie, ragazzi.
>> TOMAS REIMERS: Grazie mille.