>> [Musiikki soi]
ALLISON Buchholtz-AU: Niin me pohjimmiltaan juuri menossa
antaa sinulle pilaantunut CSS, koska me tiedämme,
että se ei kata kaikki kohdat.
Ja me todella haluamme varmistaa, että olet kaverit on tämä työkalu käytettävissänne,
koska sillä on kyky tehdä sivustot näyttävät paljon kauniimpi.
>> Ja jos olet rakentaa verkkosivuilla, sitten todennäköisesti haluat tehdä sen melko.
Tarkoitan, sinun ei tarvitse, mutta Haluan ehdottaa sitä. [Nauraa]
Jos haluat, että käyttäjät käyttää sitä, saatat haluavat tehdä siitä hieman [kuultavissa].
Joten aiomme yrittää antaa sinulle juuri joitakin perustyökalut ja ymmärrystä,
niin, että kun menet ulos ja olet tutkimiseen asioita CSS,
se ei ole täydellinen siansaksaa, kuten CSS joskus olla.
>> TOMAS Reimers: Joo.
Allison sanoi sen melko hyvin.
Joten kai ensimmäinen asia me kannattaa aloittaa mikä on CSS?
Joten CSS on mahtava.
CSS--
>> ALLISON Buchholtz-AU: Se nimi meidän seminaari.
>> TOMAS Reimers: Joo.
On todella tärkeää, että ymmärrät, että siihen mennessä.
Jos vain ottaa pois yksi juttu, se että CSS jos mahtava.
Kaksi on CSS tulee sanoista Cascading Style Sheets.
Joten sen ydin, CSS on tyylitiedosto, joka tarkoittaa
sen avulla voit tyyli sivun.
Ja sitten, mitä se tarkoittaa, se on tapa lisätä tyylin verkkosivustoja.
Joten tyyli, tarkoitamme kaikkea että ei ole structural--
joten asiat kuten värit, tausta kuvia, rajoja, kuten, täyte,
marginaalit.
Puhutaan mitä kaikki tämä tarkoittaa vähän.
>> Joten olemme juuri mennyt eteenpäin ja avasi molemmat näistä ylös gedit.
Joten tämä on index.html.
Ja tämä on main.css.
Joten main.css ole mitään.
ALLISON Buchholtz-AU: Ei tyyli toistaiseksi.
TOMAS Reimers: Ei mitään.
Ja kuten näet, se on todella ruma sivusto.
ALLISON Buchholtz-AU: Se on vain tavallinen.
TOMAS Reimers: Joo.
Joo, se ei ole ruma, se on vain minimalistinen.
Ja sitten täällä meillä index.html.
Ja niin nopea kertaus HTML, Allison,
haluat vain puhua sivu?
>> ALLISON Buchholtz-AU: Joo.
Joten tietenkin, meillä on HTML tag, joka vain nimiä HTML-tiedosto.
Meillä otsikon täällä, CSS Ihanuutta, which-- jos menet takaisin.
Missä se on?
>> TOMAS Reimers: Oh.
Joo, voit nähdä.
ALLISON Buchholtz-AU: Ja huomaa otsikko
on tämän välilehden otsikon asti täällä.
Ja sitten "Hello, world!" on tekstissä, että meillä on vain
näytetään Webissä sivu, joka is-- palata.
Back.
Joka on vain kehomme here-- pelkkää tekstiä.
Lisäksi yksi asia huomaa, jos tarkastellaan täällä,
Tomas kytketty näitä kaksi meidän liukumäki.
Niin kauan kuin sinulla on kaikki kolme näistä, olet hieno.
Ne voivat olla missä tahansa järjestyksessä he haluavat.
Mikä tärkeintä on vain, että sinulla on kukin näistä kolmesta.
>> TOMAS Reimers: Cool.
Lisää doc tyyppi?
ALLISON Buchholtz-AU: Joo.
TOMAS Reimers: Joo.
Cool.
ALLISON Buchholtz-AU: Ilmeisesti, minun mikrofoneihin eivät pidä minusta.
TOMAS Reimers: Oh, anna meille sec vain kun taas Allison katkaisee hänen mikrofoni.
Niin joo.
Joten meillä on pääsivulla.
Se on tavallaan unstyled.
Meillä ei ole paljon.
Meidän on vain periaatteessa tekstiä.
Meillä tyylitiedosto.
Meillä on otsikko.
Joten vain paljain luut komponentit tehdä verkkosivuilla.
>> Joten sieltä, katsotaanpa puhua siitä, mitä CSS on
ja miltä se näyttää ja kaikki tämä.
Joten that--
ALLISON Buchholtz-AU: Takaisin dioja.
TOMAS Reimers: Takaisin dioja.
Ja Allison voi ottaa.
>> ALLISON Buchholtz-AU: Woo.
OK.
Joten teidän CSS-tiedosto, olet menossa on
paljon näitä asioita kutsutaan valitsimia.
Se tulee olemaan vain perusteella oman CSS-tiedosto.
Se vain tulee olemaan paljon ja paljon näitä.
Joten valitsin.
Tämä on vain yleinen anatomia.
Aiomme käydä läpi esimerkkejä, koska jos te koskaan
katseli minun kohta, tunnen kuten asiat abstrakti
ei oikeastaan ​​mitään järkeä.
Se auttaa aina nähdä esimerkkejä.
>> Joten meillä on joitakin valitsin.
Se tulee olemaan noin tunniste mitä haluamme käytettävän tyylin.
Ja sitten meillä voi olla mitään säännöt ja arvot.
Joten valitsimet että saatat nähdä ehkä jotain elin,
tai kohta P, tai otsikko, tai mitä tahansa,
mitä haluat HTML tageja olla.
>> Joten tässä tapauksessa, meillä on ruumis.
Ja meillä on joitakin sääntö, johon tämä vastaa
mitä tyyliisi koskee.
Joten tässä tapauksessa, meillä on taustaväri ja fontin painon.
Joten tämä on muuttumassa tausta mitään
sisällä mitään body meidän HTML-tiedoston.
Ja se tulee antaa se tämä vaaleansininen arvoa.
>> Joten se tulee tehdä tausta vaaleansininen.
Ja sitten jotain sisällä elin on menossa on kirjasimen painoa rohkea.
Joten se on vain menossa rohkea kaikessa tekstin.
Ja tämä on vain yksi valitsin.
Mutta sinulla voisi olla hyvin monet näistä.
Ja me aiomme näyttää myöhemmin, vähän enemmän siitä, miten
että työt ja lisää esimerkkejä siellä.
Mitä haluat lisätä?
>> TOMAS Reimers: Ei.
Allison sai sen.
Olemme juuri menossa leikata Esimerkiksi täällä meidän esimerkki päällä.
Joten todella ottaa tämän.
Se on täydellinen.
Joten olen juuri menossa kopioida ja liittää että suoraan meidän main.css tiedosto.
Ja aion tallentaa sen.
Ja sitten me ajaa se.
Joten Sivuhuomautuksena, yksi kaikkein turhauttavaa asioita
on jos et tallenna tiedosto, ja Sitten te, kuten, lataa sivu,
ja kuten, miksi ei ole muutos tapahtuu?
Se tapahtuu.
Joten tässä näimme, että teimme verkkosivuilla vaaleansininen tausta
ja jotkut lihavoidut tekstit.
>> Haluan mainita myös, jos kaverit on kysyttävää mitään
teemme, ota vapaa pysähtyä ja kysy meiltä.
Olemme täysin valmiita kenttään kysymyksiin.
>> ALLISON Buchholtz-AU: On selvää, CSS, kaikki perustuu itse.
Joten jos yksi asia ei järkeä nyt, me
eivät halua, että räme sinua myöhemmin.
>> TOMAS Reimers: Joten eräänlainen leikellä tämän.
Joten haluat aloittaa valitsimen täällä?
>> ALLISON Buchholtz-AU: Joo.
Kuten sanoin aiemmin, body on vain meidän valitsin täällä.
Joten jos me palata meidän index-- ah.
>> TOMAS Reimers: Mikä minä juuri kiinni.
Anna minulle toinen.
Joten File, Open, index.html.
ALLISON Buchholtz-AU: Cool.
Joten jos huomaat täällä, me nämä kehon tageja, eikö?
Joten valitsin juuri vastaa tunnisteet, että me puhumme.
Joten kehon täällä.
Joten mitä me sanomme, everything-- voimme mennä takaisin?
Voisinpa vain kuten koskettamalla näyttöä.
Se olisi niin paljon siistimpi.
>> Joten mitään kyseisten body-tunnisteiden, jotka näimme
oli aivan, kuin, tekstiä, ja kehoa
viittaa, kuten tausta.
Jos haluat joskus Muuta tausta,
että tulee olemaan vuonna body.
Juuri on näitä sääntöjä sovelletaan niihin.
>> Joten jos me mennä index.html and-- todella,
meillä voi olla jotain kehon ulkopuolella?
Jos meillä olisi, kuten ylä- tai jotain, se ei koske tätä.
Mutta mitään sisällä Näiden body tagit on menossa
vaikuttaa tämä elin valitsin että olemme tehneet.
Joten jos olit kirjoittaa jotain muuta there--
>> TOMAS Reimers: Katsotaanpa selväksi.
Joten jos meillä oli div-- niin se vain toinen tag voit.
Aion sulkea.
Tai tehkäämme tähän kohtaan.
Joten p tarkoittaa kohta.
Ja tuossa kohdassa.
Ja sitten sanon, "Tämä on tekstiä."
Cool.
Ja sitten tein tätä sääntöä sovelletaan kohta sijasta rungon.
Näet, miten se koskee vain vastaperustetun kohdassa, oikeus,
ei koko asia.
Onko järkeä?
>> ALLISON Buchholtz-AU: Tämä kaikki on siis elin,
mutta nyt meidän valitsin juuri vastaa kohtaan.
Joten meidän on vain rohkea ja sininen Tämän erityisen kohdan,
koska tämä on ainoa asia, että on suljettu p tag.
>> TOMAS Reimers: Onko järkeä lajitella miten asiat kapseloida muita asioita?
ALLISON Buchholtz-AU: Lisäksi vain sanoa, kuten, yksi parhaista tavoista
todella totutella CSS on vain tehdä asioita, kuten tämä,
vain kokeilla sitä.
Se on hyvin yksinkertainen kirjoittaa jotain ulos, osui Päivitä, ja katso mitä tapahtuu.
Ja kuten useimmat CS, Kokeilemalla voi usein
johtaa paljon parempi intuitiivinen käsitys.
Jopa enemmän kuin meille vain, kuten, juttelemassa.
>> TOMAS Reimers: Ehdottomasti 100% samaa mieltä asiasta.
Joten jos me palata tähän, aloitamme dissecting mitä nämä kaksi tekevät.
Joten meillä on kaksi säännöt tästä.
Joten ensimmäinen on taustaväri.
Ja näet, että olemme asettaa se sama arvo, vaaleansininen.
>> Joten CSS, CSS on eräänlainen hyvin löysä, miten
et saa määritellä väri.
Joten voit määritellä niitä nimeltä.
Voit myös tehdä jotain "punainen."
Ja sitten jos menemme takaisin tähän, näet, että tausta on punainen.
Voit myös saada really-- mielestäni sinun voi saada melko luova tämän,
voi sinua?
>> ALLISON Buchholtz-AU: I mielestäni voit käyttää hex.
Etkö?
>> TOMAS Reimers: Joo.
Joten voit käyttää hex.
Mutta olen ajatellut nimi viisas.
Eivät ole siellä?
ALLISON Buchholtz-AU: Voit tehdä melkoisesti.
Melkeinpä kuten useimmat värit että voi name-- kuten, mielestäni lohi on yksi.
>> TOMAS Reimers: Aiomme yrittää lohta.
ALLISON Buchholtz-AU: I ajattelevat chartreuse on siellä.
TOMAS Reimers: Joo.
Katso?
Joten voit saada melko luova.
>> ALLISON Buchholtz-AU: You voisi saada melko luova.
Kuten, jos voit ajatella värin nimi, se on luultavasti siellä.
Jos todella haluat hieno yksityiskohtaisesti, voit mennä hex.
>> TOMAS Reimers: Joo.
Niin heksadesimaaliluvuksi.
Jos te muistaa tämä takaisin vanhasta PSET, Image Recover,
te joutunut käsittelemään Näiden hex arvoja.
Ja tavallaan kertaus, mitä se on, HEX on kolme tallennetut arvot sen.
Joten se kahden ryhmissä välein.
Ensimmäiset kaksi edustavat punaista arvoa.
Toinen edustaa vihreä arvo.
Ja viimeinen on sininen?
>> Joten FF sattuu edustamaan heksadesimaalisen 255.
Joten sinulla on 255 punainen, 255 vihreä ja 0 sininen.
Ja arvot vaihtelevat välillä 0 ja 255.
>> Yleisö: Oikea.
Joten pohjimmiltaan, voisimme etsiä Internetistä tahansa väri haluamme,
ja tunnistaa todella hyvämaineisten värikirjo combo,
ja sitten voisimme laittaa sen?
ALLISON Buchholtz-AU: Aivan.
Joten sinulla on aika paljon täydellinen valvonta yli värit haluat sisällä CSS.
Olemmeko menossa puhua taustakuvia myöhemmin?
Vai haluammeko tehdä näin?
>> TOMAS Reimers: Joo.
Ehdottomasti.
Joten ensimmäinen, vain osoittaa, että punainen ja vihreä on keltainen.
Ja jos tarvitset apua löytää tämän, sinun
Voiko Google jotain kuten "värivalikoimasta."
ALLISON Buchholtz-AU: Voi, se on niin hyvä.
Rakastan värivalikoimasta.
>> TOMAS Reimers: colorpicker.com on hyvä esimerkki.
Ja täällä, huomaat, että sinulla on koko Photoshop-kuin värivalikoimasta.
>> ALLISON Buchholtz-AU: Mm-hm.
Myös hienoja asioita olet voi tuottaa värimalleja
niin että sinulla ei ole, kuten, risteävät värejä.
TOMAS Reimers: Ja sitten tässä hex arvo täällä.
Voit siis aina löytää online pohjimmiltaan paikkoja saada hex arvo.
Se ei tavallaan että aivan kuten me katso maailman värit numeroina.
Se on enemmän, että me mennä verkossa ja selvittää, mikä väri haluamme,
ja sitten ottaa numeron alas.
Koska se on vain helppoa tapa viitata asioita CS.
>> ALLISON Buchholtz-AU: Ja sitten on also--
Unohdan tarkka nimi sivuston.
Mutta on varmasti, minä ajatella, jotain Adobelta
joka luo värimalleja sinulle, joka on todella siistiä, koska olet
definitely-- se joskus vaikea selvittää,
oh, jos haluan käyttää tätä väriä, mikä voisi olla hyvä yksi
käyttää muualla sivustoni, kuten, tee se mukava ja yhtenäinen.
>> TOMAS Reimers: Allison puhuu yksi Adobe nimeltään Kuler, luulen.
Se K-U-L-E-R.
ALLISON Buchholtz-AU: Luulen niin.
Olen melko varma, että yksi.
>> TOMAS Reimers: Oma suosikki on aina ollut Värikaavio Designer.
>> ALLISON Buchholtz-AU: Ooh.
>> TOMAS Reimers: Mikä on now--
>> ALLISON Buchholtz-AU: Ah, tämä on kaunis.
>> TOMAS Reimers: Ja te voi periaatteessa sanoa, kuten,
Haluan kolme väriä vierekkäin.
Ja sitten tehdään jotain mukavaa.
Ja sitten saat esimerkiksi mitä se voisi näyttää.
Ja sitten, kun viet hiiren tahansa heille, se antaa sinulle hex arvo.
>> Aivan kuten hyvä tapa aloittaa ajatellut värimaailma
tai mitä värejä verkkosivuilla voisi mennä hyvin yhteen.
Koska se voi olla yllättävän ei niin helppo poimia kuin luulet.
Ja sitten toinen cool juttu Olen aina löytänyt tästä sivustosta
on jos osut Esimerkkejä, se tulee näyttää, mitä esimerkiksi verkkosivuilla
voisi näyttää käyttäen että värimaailman.
Anyway.
>> Takaisin todellinen CSS.
ALLISON Buchholtz-AU: Mutta ilmeisesti, me tietävät nämä viittaukset voivat olla hyödyllisiä.
TOMAS Reimers: Ei, ne varmasti voi olla apua.
Joten toinen sääntö, Allison?
>> ALLISON Buchholtz-AU: Joo.
Toinen sääntö on vain vastaa meidän fontin.
Joten fontti paino on vain eräänlainen of-- niin paino olisi
olla, jos haluat vain, kuten, normaali tai, kuten, ohuempi fontit,
tai tässä tapauksessa, kuten, rohkea.
Unohdan.
Mikä, jos halusi it-- on olemassa ohuempi kuin, kuten, normaali?
TOMAS Reimers: En oikeastaan tietää jos on ohuempi.
ALLISON Buchholtz-AU: unohdan.
Joten font paino me tyypillisesti vain käyttää lihavoitu.
Jos haluat saada todella osaksi se, me aiomme näyttää.
W3Schools on kaikki eri mitä voi tehdä fontteja.
Mutta pohjimmiltaan, jos joskus haluat muuttaa mitään fontti,
se tulee aina olemaan, kuten, font-jotain.
Joten se tulee olemaan kuin, font-family, jos olet yrittää muuttaa todellinen tyyppi.
Se tulee olemaan font-style, jos haluavat tehdä kuten kursiivia,
tai kursiivilla, tai vaikka mitä.
Tai jopa fontin värin, jos halusimme muuttaa.
>> TOMAS Reimers: Jep.
Voit siis muuttaa.
Ja tavallaan vain kertaus nyt, niin voit
nähdä, että meillä on valitsin tänne.
Meillä on näitä aaltosulkeita.
Ja sitten meillä on säännöt rajaamaa puolipisteellä.
Onko järkeä?
Joo?
Cool.
Joten jos se on good--
>> ALLISON Buchholtz-AU: Back.
TOMAS Reimers: Jutellaan nimenomaan millaisen valitsimet meillä.
"Syy juuri nyt olet tavallaan juuri osoittanut tageja.
Mutta te voisi nähdä uskottavana.
Että sinulla on kaksi kohtaa sivulla ja olet
haluavat pystyä tyyli yksi mutta ei muita,
et vain halua rajoittaa itse täytyy käyttää erilaisia ​​todellisia HTML
Tunnisteet antaa heille eri tyylejä.
>> Joten meillä on kolme perus tyyppisiä valitsimet.
ALLISON Buchholtz-AU: Joo.
Joten meillä on tunniste, joka on mitä olemme puhuneet juuri nyt.
Niin, että on ikään kuin kehon tai p.
Ja sitten meillä on luokka, joka on kun me määrittelemme sen meidän CSS-tiedosto,
se on aina menossa piste riippumatta Haluatko nimi luokan olevan.
Ja tämä voi hakea useita asioita.
>> Että sinulla on viisi kohdat ja kaksi niistä kolme
täytyy tyylistä sama, voisitte hakea luokan sitä.
Ja tämä on juuri sitä mitä me tehdä se.
Annamme teille esimerkin jos tämä todella näkyy.
Mutta jos sinulla on ollut ehkä jonkin verran tag p, kun se, voisitte kirjoittaa,
luokka on yhtä riippumatta luokat haluat soveltaa sitä.
Joten mitä luokkavalitsimien että haluamme soveltaa tähän nimenomaiseen kohtaan,
voisimme vain kirjoittaa näin.
Tietenkin, mielestäni esimerkki tekee paljon konkreettista.
>> Toinen meillä on id, jota merkitään
kanssa hash, tai punnan, tai hashtag.
TOMAS Reimers: risuaidalla.
ALLISON Buchholtz-AU: risuaidalla.
Se toimii myös.
Ja tämä pitäisi oikeastaan ​​olla ainutlaatuinen.
Niitä olisi sovellettava ainoastaan yksi asia sivulla.
Joten onko se erityinen kohta, tai jonkin kohteen luettelosta, tai mitä tahansa,
Tämän pitäisi olla ainutlaatuinen.
Ja samalla tavalla, että me vain sanoa, kuten class = "Class1 class2"
tämä voi vain olla id mitä meillä on.
TOMAS Reimers: Joo.
Joten varmasti puhua noin esimerkkeinä.
Ja olen juuri menossa sukeltamaan suoraan takaisin koodia.
Joten katsomaan HTML.
Ja niin me nyt yksi kohta.
Tämä on tekstiä.
Olen juuri menossa muuttaa sitä. "Tämä on teksti 1."
Ja sitten me aiomme on "Tämä on teksti 2."
>> ALLISON Buchholtz-AU: toinen.
TOMAS Reimers: Jep.
Joten meillä on nyt "Tämä on teksti 2," oikea?
Ja me nähdä, että jos me ladata sivu, mitä me aiomme löytää
on aiomme find--
ALLISON Buchholtz-AU: Ooh.
TOMAS Reimers: Joo.
Aiomme löytää "Tämä on teksti 1, "ja" Tämä on teksti 2. "
>> ALLISON Buchholtz-AU: Ja out kaunis keltainen väri.
>> TOMAS Reimers: Ja näet että valitsin juuri nyt,
joka koskee p: n, tai kohdat, vaikuttaa molemmat,
koska molemmat täyttävät edellyttäen, että he molemmat p tag.
Se tekee yhteensä järkeä.
Joten kysymys on, hyvin, mitä jos halusimme vain saada yksi?
Joten ihan Allison sanoi, meillä on kaksi muuta tapaa tehdä sitä.
Aion aloittaa id.
>> ALLISON Buchholtz-AU: Aloitetaan id.
>> TOMAS Reimers: Ja molemmat näistä ovat määritteitä.
Joten määritteitä olemassa HTML.
Ja mitä ne ovat on jotain, että lisäät
sisällä tag joka on erillään tunnisteen nimi.
Voit siis olla useita määritteitä.
Joo?
>> ALLISON Buchholtz-AU: Olin juuri menossa sanoa, teidän esimerkki PSET 7,
jos joku teistä yrittää yhdenmukaistaa asioita keskus,
olet saattanut käyttää "Text align = center."
Ja olet huomannut se luultavasti olisi keskitetty
tekstin tai navigointipalkin.
Niin, että vain myös määrite että saatat olla perehtynyt.
TOMAS Reimers: Ei nippu ominaisuuksia, jotka näet.
Joo.
Kuten hyvä viittaus PSET 7.
Meillä on id.
Voit myös luokka, asioita, kuten tämä.
Yksi tunniste voi olla monia ominaisuuksia.
Joten alkaen id, Teeskennelläänpä me haluavat id of-- En tiedä.
Me kutsumme sitä erityistä, koska tämä, olemme
aio tehdä rohkeita, ja korostaa, ja mitä tahansa.
ALLISON Buchholtz-AU: On olemaan Super erityistä.
TOMAS Reimers: Eli tämä yksi, meillä on id erityistä.
Joten tapa valita, että sitten on vuonna main.css sijaan on p tag,
teet #special, OK?
Ja joka valitsee juttu id erityistä.
Onko tämä järkevää kaikille?
Yleisö: Joo.
TOMAS Reimers: Cool.
Joten nyt jos menemme takaisin, me see-- oho.
Joo.
Näemme, että se vain valitsee yksi id erityistä.
Joo?
Kuulostaa viileä.
Kyllä.
>> Yleisö: Voiko jotain on Yhdistän sekä luokan ja id?
>> TOMAS Reimers: Kyllä.
Yleisö: OK.
Ja mitä sitten tapahtuu, jos sitten antaa se joitakin sääntöjä CSS että konflikti?
TOMAS Reimers: Ehdottomasti.
Olemme ehdottomasti menossa puhua siitä.
Joten mitä olit saada klo, voit myös olla luokissa.
Joten teeskennellä jouduin kolme kohtaa ja minä
halusi tyyli ensin kaksi, mutta ei kolmannen.
No, ensimmäinen ajatus voi olla, no, minä voisi vain antaa toinen id.
Mutta et voi, koska id, aivan kuten Allison sanoi,
on oltava yksilöllinen.
>> Joten sen sijaan id, mitä voi käyttää, on voit käyttää luokkaa.
Ja class-- mitä se sallii voit tehdä on periaatteessa sanoa,
Tämä kuuluu osana ryhmää.
Tässä tapauksessa ryhmämme kutsutaan Special.
Ja mitä me aiomme tehdä niin on aiomme say-- sijaan punta,
aiomme käyttää piste.
OK?
Ja huomaa, että punnan ja piste olemassa vain sisällä CSS-tiedosto,
ei sisällä HTML.
ALLISON Buchholtz-AU: Kyllä.
Tärkeä ero.
>> TOMAS Reimers: Minulla on oli niin paljon taistelua,
koska laitoin hash HTML ja Sitten vain tuntui tyhmä pitkään.
Katso, miten se valitsee molemmat ne joilla tämän luokan?
Cool.
>> Nyt asiat voivat olla useita luokkia.
Sanotaan Halusin tehdä ensin kaksi on taustalla keltainen
ja toinen kaksi on fontin väri sininen.
OK.
En todellakaan tiedä, miksi olin halua tehdä sitä, mutta voin.
>> ALLISON Buchholtz-AU: ei ehkä suositellaan sitä oman sivuston.
Mutta meidän kannalta, se tulee tehdä.
>> TOMAS Reimers: Se ei ole hyvä värimaailma.
ALLISON Buchholtz-AU: No, keltainen ja sininen ovat minun lukion värejä.
En tiedä, vaikka.
TOMAS Reimers: Allison korkea koulussa oli suuri värimaailma.
[Naurua]
Niin mitä voimme kutsua tätä on kutsukaamme this-- joten meillä on erityinen
ja meillä on kaunis.
Ehdotan, tämä, käytät paljon kuvaavia nimiä.
ALLISON Buchholtz-AU: Joo, olisin kutsuvat tätä, kuten, keltainen tai sininen.
>> TOMAS Reimers: Emme ole todella tekee todellinen verkkosivuilla,
minkä vuoksi emme tee sitä.
Mutta jos todella oli todellinen verkkosivuilla, sinun
saattaa olla, kuten, artikkeli otsikko, artikkelin sisältöä, ensimmäinen sana,
tuollaista, jotka mahdollistavat voit olla paljon kuvaavampi.
Nämä ovat todella aivan kuten muuttujat.
Ne olisi nimettävä siten, jossa voit, like-- joo, sinänsä.
Perfect.
>> Joten taustaväri.
Ja sitten me aiomme say-- niin tapa vaihtaa väriä on vain "väri."
Ja me aiomme tehdä sininen.
Se on siistiä.
Joten nyt meillä on kaksi ensimmäistä on erityisiä.
Seuraava yksi menee on "class = kaunis."
ALLISON Buchholtz-AU: Ja Tulet haluavat lisätä "melko" keskelle yksi.
TOMAS Reimers: Jep.
Ja sitten keskimmäinen, lisätä "melko" mitä tapahtuu
on sinun täytyy vain tilaa.
Joten luokan attribuutti on tilaa eroteltu luettelo
Kaikkien luokkien jotka koskevat kyseistä tunnistetta.
OK?
Se ei ole kuin tämä yksi kuuluu jonkinlainen erityinen luokan nimeltä
"Erityinen, avaruus, aika."
Se kuuluu kaksi classes-- erityinen ja kaunis.
Kyllä?
Cool.
>> Ja sitten jos katsomme mitä tapahtuu, olemme
näkemään, että ensimmäinen on keltainen tausta, musta teksti.
Toinen one--
>> ALLISON Buchholtz-AU: --has rohkea keltainen tausta sininen teksti.
Ja viimeinen vain on sininen teksti, josta sille.
>> TOMAS Reimers: Cool?
Miten valitsimet toimivat?
Mahtavaa.
>> ALLISON Buchholtz-AU: Haluammeko puhua konfliktista nyt sitten?
>> TOMAS Reimers: Niin joo.
Ehdottomasti.
Joten mitä tapahtuu, jos on ristiriita, eikö?
Teeskennelläänpä ensimmäinen asettaa jotain like--
ALLISON Buchholtz-AU: Ehkä tämä muuttaa taustan?
TOMAS Reimers: Joo.
Joten aiomme tehdä "melko" vaihtaa taustakuvan lohta.
ALLISON Buchholtz-AU: Olet vain kanssa kaikki suuri värit tänään, Tomas.
TOMAS Reimers: Joo.
Koska sain selville voin käyttää lohi todellisena väri.
Joten me vain aio tehdä sitä.
Olen myös sitä mieltä, Sunset on todellinen väri.
Yleisö: Sunset on todellinen väri?
ALLISON Buchholtz-AU: Kokeillaan sitä.
TOMAS Reimers: Kun tämä demo vain koska jos se sotkee,
En halua debuggaamista.
Joten me tiedämme lohi on todellinen väri.
Joten kaikki arvauksia mitä tulee tapahtumaan?
>> ALLISON Buchholtz-AU: Jokainen idea?
>> Yleisö: [äänetön].
>> TOMAS Reimers: Joo.
Joten sinulla on juuri oikea.
Periaatteessa se vie Viimeinen sääntö, että se annettiin.
>> ALLISON Buchholtz-AU: Eli tämä on jossa CSS tulee voimaan.
>> TOMAS Reimers: Muista siis, kuinka me oli, että CSS?
Joten, että me tavallaan tarkoittaa että meillä on joukko sääntöjä
joita sovelletaan päällekkäin muiden, ja ne voivat myös ohittaa toisensa.
>> ALLISON Buchholtz-AU: Niin riippumatta n alareunassa
ohittaa mitä on huipulla.
Voisit olla sääntöjä, täysin tyhjäksi jotain etukäteen.
Se myös, miksi haluat olla varovainen, kun olet muotoilu,
joten et ole luoda sääntöjä, olet vain täysin pakottavista.
>> TOMAS Reimers: Tai ehkä haluat ylikirjoittaa sääntöjä.
>> ALLISON Buchholtz-AU: Tai ehkä tehdä.
Kyllä.
>> TOMAS Reimers: Kuvittele on luokka, joka koskee useimpia asioita,
mutta sanokaamme haluat muuttaa taustaväri punaiseksi ja kirjasin
paino rohkea useimmille asioita, mutta yksi,
haluat vain taustaväri olla punainen, mutta haluat kaikki muut
ominaisuudet, voit tehdä jotain kuten "font-weight = normaali,"
joka sitten kumoa että rohkea muutos.
Joo?
Jälleen paras tapa, luulen Allison sanoi, on vain harjoitella.
>> ALLISON Buchholtz-AU: Kokeilut.
>> TOMAS Reimers: Harjoittele, harjoittele, Käytännössä ja kokeilu.
Tiedän paljon ihmisiä, jotka ajattelevat CSS on vain paljon arvaus-ja-check
lopussa päivä, jossa jos haluat tehdä something-- kuten,
sinulla karkea idea, mutta silti luultavasti
kokeilla sitä varmistaa Tiedätkö miltä se näyttää.
>> Yleisö: Kun olet soveltamalla luokat, useampi kuin yksi
saman kohdan tai jakso, tekee sen
mitä järjestyksessä voit kirjoita ne lainausmerkit?
>> TOMAS Reimers: Ei, ei ollenkaan.
>> ALLISON Buchholtz-AU: Ratkaisevaa on järjestystä CSS tyylitiedosto.
Yleisö: Voisitteko toistaa kysymyksen?
TOMAS Reimers: Oh.
ALLISON Buchholtz-AU: Within luokka, kun annat luokat
jotain HTML, ei sillä väliä missä järjestyksessä he ovat?
Sillä ei ole väliä järjestyksessä.
Ratkaisevaa on järjestys luokkavalitsimien omassa CSS,
sisällä tyylisivuusi.
>> TOMAS Reimers: Ääni hyvä?
>> ALLISON Buchholtz-AU: Lovely.
>> TOMAS Reimers: Ja sitten aiomme jatkaa to--
ALLISON Buchholtz-AU: Mitä meillä on seuraavaksi?
Unohdan.
Voi, meillä vain on esimerkkejä.
Mutta olemme tavallaan tehneet näitä.
Olemme tehneet esimerkkejä lennossa.
>> TOMAS Reimers: Saamme yhdistää valitsimet pian.
>> ALLISON Buchholtz-AU: Oh, saamme yhdistää valitsimia.
TOMAS Reimers: Joten jotkut esimerkkejä on meillä
# Dog-- punta tai hashtag, tai risuaidalla, tai mitä tahansa
haluat soittaa that-- teräviä.
>> ALLISON Buchholtz-AU: Sharp koira.
>> TOMAS Reimers: Sitten on .pets.
Jotain on id koira, on vain yksi koira sivulla.
Jotain on id kissa, on vain yksi kissa.
Tähän voi olla monia lemmikkejä sivulla.
Siksi annoimme, että luokat.
Sinulla on esimerkki s.
Ja sitten niin yksi viimeinen esimerkki, joka
on jotain emme ole puhuneet, on, mitä tapahtuu, kun yhdistää ne.
Niin p.pets.
>> Joten, että mennään takaisin koodi ja esitellä another-- joo.
Joten takaisin tänne.
>> ALLISON Buchholtz-AU: I tuntuu että tämä on really--
kuten juuri katsellut esimerkkejä on todella tapa oppia tämän.
Niin, että mitä me teemme.
>> TOMAS Reimers: Joten teeskennellä vain haluat valita tekstiä 2, eikö?
Joten emme todellakaan voi tehdä sen id.
No, voisimme tehdä, että id, mutta se ei ole id.
Voisin lisätä yhden, mutta Teeskennelläänpä että en halua lisätä yhden
tai se on jo jotain muuta.
En voi tehdä sitä, että.
Tag ei ​​todellakaan ole ainutlaatuinen, eikö?
Ja kumpikaan ei luokassa.
Mutta voit yhdistää nämä asiat.
Sanotaan halusimme tehdä jotain joka koskee vain asioita, jotka
on luokka erityinen ja jolla on luokka kaunis.
>> Joten mitä voit tehdä on main.css, voit sanoa, katsotaanpa ensin poistaa tämän.
Voit yhdistää nämä.
Joten voit tehdä .special.
Ei tilaa.
Vain .special.pretty.
Tämä tarkoittaa sitä jotain joka on sekä erityinen ja kaunis.
Onko järkeä?
Ja jos mennään täällä, mitä aiot nähdä
tämä sääntö koskee vain toinen, jossa on molemmat näistä.
Ja voit tehdä sen paljon asioita.
Voit say-- katsotaanpa teeskennellä Halusin vain
tehdä asioita, jotka ovat luokassa melko ja jotka ovat myös kohta tag.
Niin p.pretty.
Teeskennelläänpä että jouduin jotain ihan tag elin.
OK?
Voin ajaa tämän ja minä voi nähdä, että se on vain
menossa soveltaa asioita, jotka ovat kohdat luokan kanssa kaunis.
Ja voit yhdistää nämä, pohjimmiltaan, niin monta kuin haluat.
Joten voit vain laittaa ne yhteen.
Onko järkeä?
ALLISON Buchholtz-AU: Niin tällainen on enemmän hyötyä
kun Tomas sanoi aikaisemmin, ehkä sinulla on hyvin monimutkainen verkkosivuilla,
ja sinulla on jo paljon Näiden sääntöjen kirjoitettu,
ja sinun tarvitsee vain yhdistää kaksi ennen.
Kuten kirjoittamisen sijaan koko uusi valitsin ja muuttaa sitä siellä,
voit vain yhdistää ne, jos se osuu päällekkäin.
>> TOMAS Reimers: Tai sitten saattaa löytää out-- joskus
siellä on yksi luokka, joka tekee fontin väri kuten sininen,
ja on toinen luokka, joka tekee tausta sininen.
Ja että vain ei toimi.
Joten voit kirjoittaa erikoistapaus, jossa, like-- mutta jos se on sekä, mitä olet
aikoo tehdä, on aiot tekevät tästä yhden tämän varjossa sininen
ja tämä tämä toinen sävy sininen.
Oikea?
>> ALLISON Buchholtz-AU: Hyvä tuollaiset poikkeuksia.
TOMAS Reimers: Niin ajatella ongelmia
joita saattaa syntyä, kun yhdistää ne.
Cool.
Joten takaisin meidän esitys.
ALLISON Buchholtz-AU: Olemme melkein perillä.
TOMAS Reimers: Ja on pysähtynyt yhdistää.
ALLISON Buchholtz-AU: Voi ei.
ALLISON Buchholtz-AU: CS at toimisto, internet menee alas.
Voi, ironia.
>> TOMAS Reimers: Niin Onneksi voimme esittää ilman internet, luulisin,
koska meillä on kaikki diat täällä.
Joten puhutaanpa suhde tageja.
ALLISON Buchholtz-AU: Oikea.
Joten vain sellainen menossa pois mitä Tomas sanoi,
tämä on vain yksi tapa tehdä se.
Joten meillä on joitakin vanhempi valitsin lapsen valitsin.
Joten tässä esimerkissä täällä, meillä on joitakin runko luokan navbar, luokka-painiketta.
Ah.
>> TOMAS Reimers: Anteeksi.
>> ALLISON Buchholtz-AU: Ja pohjimmiltaan, mitä tämä tarkoittaa
on valita kaikki lapset, kuten kaikki tämänkaltaisissa valitsimet,
tämän vanhemman valitsin.
Ja ne ovat ainoat se koskaan aio soveltaa.
En tiedä, jos olet on parempi tapa of--
TOMAS Reimers: So I arvata tapa ajatella
tästä on muistettava ennen miten me tavallaan kuin laittaa ne yhteen.
Ja niin se tarkoittaa yhden elementin joka vastaa näitä kaikkia.
Mitä tämä sanoo ei, minä haluavat sinun sovittaa kaiken
sisällä some-- Haluan löydät valitsin.
Ja sitten sisällä että haluan voit sovittaa uusia asioita.
Oikea?
Niin CSS, se kaikki tavallaan pysty vastaamaan näitä kohteita.
Ja voit yrittää sovittaa erät muita kohteita.
>> Joten itse tehdä esimerkiksi ja uskomme, että saat selventää.
Joten teeskennellä meillä on erityinen, erityistä melko riippumatta.
Ja sitten meillä on linkki, OK?
Muista siis, on linkki.
Se ei mene minnekään.
Ja me aiomme antaa sen luokan linkin, luulisin.
Annetaan sen class-- antaa minulle idea.
ALLISON Buchholtz-AU: Cool.
TOMAS Reimers: Coo-- katsotaanpa mennä sen luokan aika.
Miksi ei?
>> ALLISON Buchholtz-AU: OK.
TOMAS Reimers: Niin nyt melko asioita
aiomme tehdä tausta sininen, taustaväri lohen.
Tämä on järkevää.
Ja jos teemme this--
>> ALLISON Buchholtz-AU: Haluatko lisätä tekstiä
niin hyperlinkki todella näkyy?
TOMAS Reimers: Että olisi hyvä soittaa.
ALLISON Buchholtz-AU: "Syy oikeus Nyt me vain gonna get mitään.
TOMAS Reimers: Eli tämä on linkki.
"Tämä on linkki."
Niin, ja tämä on menossa olla toinen linkki.
Annetaan sen luokan "cool".
Olet oikeassa.
Cool.
Joten nyt aiomme tarttua tähän.
Aiomme heittää yhden.
Meillä on yksi erityistä tag, ja me myös
menossa on yksi melko tag.
Ja juuri nyt, mitä aiomme do on aiomme tehdä cool--
Mitä me haluamme sen tehdä?
ALLISON Buchholtz-AU: Voimmeko tehdä sen suurempana?
TOMAS Reimers: Annetaan sen rajan.
ALLISON Buchholtz-AU: Voisimme raja.
TOMAS Reimers: Joo.
Joten aiomme tehdä jotain kuten, raja is-- ja olemme
aikovat selittää kaikki toinen.
Saat now--
>> ALLISON Buchholtz-AU: Voit laatikkomallista.
TOMAS Reimers: Mutta nyt olemme juuri menossa antaa se raja.
Joten mitä se tarkoittaa on olet näkemään nämä linkit.
Ja te tulette näkemään, että heillä on Näiden, kuten, ruma mustat reunat, jotka
on viileä.
>> ALLISON Buchholtz-AU: Sivustomme on niin kaunis.
>> TOMAS Reimers: Joo.
Sivustomme on mahtava.
Joten nämä kaksi ovat linkkejä, ja ne näkyvät.
Nyt teeskennellä I vain halusi tehdä tämän
jos se ei sisällä jotain joka oli taustalla lohen.
Muista siis, että tämä on tausta lohta,
koska se on luokan aika.
>> Mutta haluamme sanoa, että vain jäähtyy jotka ovat luokassa erityistä, ei luokassa
kaunis, pitäisi olla, että raja.
No, mitä voit tehdä, on sinun voi sanoa, .special, tila, .cool.
Ja mitä se tekee, kun luulet siitä, on se pohjimmiltaan sanomalla,
OK, löytää minulle kaiken joka vastaa erityistä.
Sitten näissä tageja, löytää minulle kaiken, on siistiä.
ALLISON Buchholtz-AU: Niin toinen tapa että voisi olla hyvä miettiä tätä,
tuo sen takaisin C, on aivan kuten ajatus soveltamisalaa.
Joten kun sinulla on valitsin, kuten ne
että olemme työskennelleet ennen tätä, koko web-sivun, kaikki HTML
on omassa soveltamisalaan, eikö?
Mutta kun meillä on nämä vanhempi-lapsi-suhteessa,
se on kuin jos olet supistaen jossa etsit tiettyyn paikkaan,
ikään kuin, kuten, etsimme sisällä tietyn toiminnon sijaan
meidän koko tiedoston.
Yleisö: Niin, että mielessä, olisi se on väliä, jos meillä olisi changed--
ALLISON Buchholtz-AU: Tilauksen?
Yleisö: --The luokan CSS ja .cool, tilaa, .special?
ALLISON Buchholtz-AU: Kyllä, koska silloin se
sanoisi, soveltamisala sen kaiken, on viileä,
ja sitten katsoa, ​​mitä has-- Tarkoitan, kuten tässä tapauksessa,
En usko, että se olisi muuttanut sitä.
>> TOMAS Reimers: Jos olisimme sanoi mitä?
Anteeksi.
>> ALLISON Buchholtz-AU: Jos me soveltamisala sen jäähtyä ja sitten
etsiä asioita erityistä, se olisi sama, todella.
>> TOMAS Reimers: Joten se ei olisi.
>> ALLISON Buchholtz-AU: Se ei?
Oh, oh hyvin.
Olen väärässä.
>> TOMAS Reimers: Eli syy se different-- yhteinen mistake--
on, että juuri nyt vain linkki on viileä, eikö?
Oletan kysymykseni te on, mitä tällä sivulla on sovitettava .cool?
On kaksi tagit täällä, eikö?
Kumpi on tämä ja tämä.
Molemmat vastaavat viileä.
Mikään muu ei.
Joten jos sanoit, .cool, avaruus, .special, mitä aiot sanoa,
näissä tunnisteet, mikä on erityinen?
ALLISON Buchholtz-AU: Hm.
Sitähän it-- oikeassa.
Koska se on kuin vain jotain täällä.
>> TOMAS Reimers: Niin se valitsee mitään.
>> ALLISON Buchholtz-AU: katsoo kanssa erityinen, olemme näissä tagit täällä.
>> TOMAS Reimers: Nämä ja nämä.
Yleisö: OK.
Joten ne tageja eteenpäin slash?
>> TOMAS Reimers: Kyllä.
Onko järkeä?
Miten se on pohjimmiltaan yrittää kapea.
ALLISON Buchholtz-AU: Joo.
Luulen, että se luultavasti Helpoin tapa ajatella sitä.
>> TOMAS Reimers: Eli löysimme tämän, ja löysimme tämän molemmat Hyväksytty erityistä.
Ja sitten pyydämme kuluessa nämä kaverit, mikä on siistiä?
Ja tässä yksi, tämä viileä.
Tässä yksi, ei mitään siistiä.
Joten tämä on vain tunniste, joka pysyy.
>> ALLISON Buchholtz-AU: katsoo viileä on vain näissä tageja siellä.
TOMAS Reimers: Aivan.
Ja mitä erityistä näissä?
Ei mitään.
Nyt, mitä aion sanoa on jos ei ollut tilaa,
kysyt mikä on siistiä ja special-- tai mikä on melko ja erikoista, eikö?
Jos sanot .special.pretty, se sama kuin .pretty.special.
>> Koska mitä poistamalla tila on kysyy on, kun sanot .special,
kysyt, OK, mitkä ovat erityisiä?
Ja sitten niitä, jotka ne ovat myös kauniita,
joka on sama, kieliopillisesti, tarkoittavan sitä, mikä on melko,
ja sitten niitä, mitä myös erityistä?
Oikea?
Se ero mitä sisällä, mikä on.
Yleisö: OK.
TOMAS Reimers: Joo.
Mahtavaa.
Niin, että mielessä then--
>> ALLISON Buchholtz-AU: Mielestäni meidän viimeinen asia on (fancy brittikorostuksellaan)
laatikko malli.
>> TOMAS Reimers: box-- [naureskelee] Rakastan Allison sanoo.
Joten laatikkomallista asia.
>> ALLISON Buchholtz-AU: Täytyy vain laatikko, otan laatikko malli.
TOMAS Reimers: Joten puhua siitä.
Joten nyt olemme käyttäneet paljon aikaa puhumalla valitsimia.
Tähän mennessä te olette varmaan, kuten, päälliköiden selectors-- tiedätte,
miten tarkalleen valita sisältöä haluat manipuloida ruudulla.
>> Joten nyt kysymys on, miten tarkalleen voit manipuloida sitä?
Joten kai alkeellisinta tapa ajatella, että
on hyvin, mitä on osa CSS?
Olemme viettäneet paljon aikaa puhumme, mitä on tunniste,
tai mikä on yksinkertaisin edustus tag?
>> Hyvä tapa ajatella eli mikä muoto on lohi?
Mikä muoto on, kuten, lohi-värillinen tausta?
>> Yleisö: Se suorakulmio.
>> TOMAS Reimers: Se suorakulmio, eikö?
>> ALLISON Buchholtz-AU: Eikö temppu kysymys.
[Naurua]
>> TOMAS Reimers: Ei yrittää huijata te näin myöhään.
Joten meillä on tämä suorakulmio.
Ja tag on p, eikö?
Niin, että antaa meille hyvän uskovansa, että kohta
on edustettuina suorakaiteen ainakin mielessä selain, joka
se on.
>> ALLISON Buchholtz-AU: Tarkoitan, selaimet ovat tyypillisesti suorakulmainen,
joten on järkevää.
>> TOMAS Reimers: Ideana on että kaikki tunnisteita CSS
ovat edustettuina suorakulmio.
Ja jokainen suorakulmion on neljä osat mukaan CSS, OK?
Sinulla on todellinen sisältö.
Siellä tekstin piilee.
>> ALLISON Buchholtz-AU: Ehkä teidän kuva.
>> TOMAS Reimers: Joo.
Sinulla on pehmuste, joka on vain jonkinlaista valkoista tilaa.
Sitten on raja.
Ja sitten on marginaali, joka on valkoinen tila ulkopuolella että.
Niin että ei ole mitään järkeä kenellekään, joten olemme
aio puhua, että toinen.
Joten täällä, mitä me aiomme tehdä on aiomme luoda jonkinlaista divs, OK?
Anteeksi kun I--
>> ALLISON Buchholtz-AU: minusta tuntuu meidän pitäisi laittaa söpö kuva.
>> TOMAS Reimers: Olemme ehdottomasti pitäisi.
>> ALLISON Buchholtz-AU: Tunnen kaikki
voisivat hyötyä söpö kuva, on kaikki.
>> TOMAS Reimers: Voimmeko kaikki hyötyvät a--
>> Yleisö: Joo, varmasti.
TOMAS Reimers: OK, viileä.
Joten meidän pitäisi laittaa söpö kuva jonnekin.
ALLISON Buchholtz-AU: Tunnen söpö pupu voi olla hyödyllistä juuri nyt.
TOMAS Reimers: Toki.
ALLISON Buchholtz-AU: loppuviikolla.
Onko jotain adorab--
>> TOMAS Reimers: Miten bout kissanpentu?
>> ALLISON Buchholtz-AU: Kissanpentu toimii myös.
>> TOMAS Reimers: Cool, koska siellä sivusto, joka.
Sitä kutsutaan PlaceKitten.
ALLISON Buchholtz-AU: Se on hienoa.
TOMAS Reimers: Kyllä.
ALLISON Buchholtz-AU: Vain, kuten, paikanvaraajan kuvia sivustosi.
TOMAS Reimers: Mm-hm.
Mukana on myös PlacePuppy.
Ja siellä PlaceBacon.
>> ALLISON Buchholtz-AU: PlaceBacon?
Oikeasti?
>> TOMAS Reimers: Voi, emme on internetyhteys täällä.
>> ALLISON Buchholtz-AU: [voihkina]
Traaginen.
TOMAS Reimers: Muussa tapauksessa, Haluan näyttää sinulle kaverit
miten laittaa kuvia sivustosi.
Aiomme yrittää saada tämän työskentelevät ennen meidän täytyy mennä.
Mutta nyt, olemme vain aio puhua väreissä sitten.
Haluamme laittaa kuvia kittens--
>> ALLISON Buchholtz-AU: Teimme.
>> TOMAS Reimers: --The internetin alas hetkellä kovin.
Joten meillä on kaksi divs, ja olemme annan heille kaksi ids.
Aiomme kutsua sitä "Ensimmäinen" ja "toinen."
Joten id = "ensin."
Ja me aiomme antaa heille kaksi väriä.
Miten siis valita jotain joiden id "ensimmäinen"?
ALLISON Buchholtz-AU: Dot tai hash?
Yleisö: Sharp.
TOMAS Reimers: Sharp, täydellinen.
Sharp, hash, mitä we--
>> ALLISON Buchholtz-AU: Paljon asioita kutsua sitä.
>> TOMAS Reimers: OK.
Aiomme laskeutua hashtag, ja sitähän me aiomme mennä.
OK?
>> ALLISON Buchholtz-AU: Hashtag.
>> TOMAS Reimers: Niin hashtag ensimmäinen.
>> ALLISON Buchholtz-AU: Niin Voit piipittää seminar--
hashtag CSS, hashtag viileä.
TOMAS Reimers: Hashtag Awesomeness.
ALLISON Buchholtz-AU: Hashtag Awesomeness, kyllä.
TOMAS Reimers: OK.
Joten meillä on "ensimmäinen" ja "toinen."
Joten ensimmäinen, aiomme olla taustavärin punaiseksi.
ALLISON Buchholtz-AU: Tuota, kaksoispiste.
TOMAS Reimers: Jep.
ALLISON Buchholtz-AU: Olen teidän spot-nappula.
TOMAS Reimers: Allison sai minut.
Tausta-väri blue--
>> TOMAS Reimers: Purple!
>> TOMAS Reimers: Purple.
ALLISON Buchholtz-AU: Kyllä.
Purple minun lempiväri, ja me emme ole käyttäneet sitä vielä.
>> TOMAS Reimers: Violet.
ALLISON Buchholtz-AU: Violet.
Se toimii.
>> TOMAS Reimers: Olemme siis menossa on kaksi divs.
He aikovat olla täysin tyhjä.
Meidän pitäisi varmaan olla jotain tekstiä.
Joten "ensimmäinen" tulee olemaan "Hello."
Ja "toinen" on say--
>> ALLISON Buchholtz-AU: Goodbye.
>> Yleisö: - "WORLD."
Hei, näkemiin.
ALLISON Buchholtz-AU: Olen nähnyt ne konsertti toinen viikko.
TOMAS Reimers: Beatles?
ALLISON Buchholtz-AU: For reals.
Ne eivät ole niin suuri.
En pidä siitä.
>> TOMAS Reimers: Meillä on "Hei" ja "näkemiin."
Ja taas, CSS on aivan mahtava, koska se tunnustaa meidän värejä.
Ei tarvitse edes huolehtia, että ne ovat olemassa.
He tekevät.
>> ALLISON Buchholtz-AU: Ne ovat olemassa.
>> TOMAS Reimers: Niin CSS mielestäni on 255 sanaa puhua väri.
Jos voit ajatella väri ulkopuolella ne 255, kuten, aion olla vaikuttunut.
ALLISON Buchholtz-AU: Joo.
Mielestäni te voi olla vain tulla heti.
>> TOMAS Reimers: Joten tässä, näet meillä on kaksi laatikkoa
aivan päällekkäin, eikö?
Hei ja näkemiin.
>> ALLISON Buchholtz-AU: Ei ole tilaa väliin.
He vain smooshed aivan päällekkäin.
>> TOMAS Reimers: Joten ensimmäinen asia Kai meidän pitäisi puhua
on katsotaanpa myös say-- joo.
Joten CSS edustaa niitä tavallaan laatikoita.
Ja laatikot, ne ovat sisältöä.
Ja sisältö nyt on eräänlainen HELLO tai GOODBYE ja se on siinä.
OK?
>> Joten yksi ensimmäisistä asioista sinun voi tehdä, on voit lisätä täyte.
Täyte kertoo kuinka paljon tilaa se pitäisi jättää kummallakin puolella.
Joten sanokaamme haluan sanoa 10 pikseliä kummallakin puolella.
Ja minä leikellä että toinen.
ALLISON Buchholtz-AU: Kaikki nämä asiat täällä
tulevat olemaan pääosin pikseliä muulle seminaarin.
Sinä näet, että se on Joissakin tilaa ympärilleen, eikö?
Mitä et näe tässä siellä tämä näkymätön tavallaan pehmuste
kummallakin puolella, jossa sanotaan, kuten, OK, sinulla on laatikko content--
>> ALLISON Buchholtz-AU: Haluatko vain vetää ylös tarkastaa elementti?
>> TOMAS Reimers: Joo, se on hyvä idea.
ALLISON Buchholtz-AU: Olen myös löytää että tarkastaa elementti on hyvä tapa
selvittää, jos jotain menee väärä, jotain odottamatonta tapahtuu,
tarkastuksen tunnisteet ja nähdä, mitä se on kuin korvataan on hyödyllistä.
>> TOMAS Reimers: Joten en ole varma jos te voi nähdä tätä väriä.
Voitko?
Näet tämän täyte on eräänlainen reuna.
Ja sitten näet todellinen sisältöä sininen, eikö?
Niin, että hyvin perusteet laatikon mallin.
Sinulla on sisältöä.
Sitten on täyte.
>> Yleisö: Miksi et vain käytä laatikon sisällä the--
>> ALLISON Buchholtz-AU: Oikea.
Koska se on vain valitsemalla elementti juuri nyt.
>> TOMAS Reimers: Jep.
Muita asioita.
Joten puhutaanpa että padding komennon toista.
Niin CSS, mittaukset täytyy olla yksikkö.
Joten ensin on määrä.
Joten tässä tapauksessa, olemme sanoneet 10.
Ja sitten seuraava olemme sanoneet on pikseliä, px.
Muut niistä saatat olla olemassa asioita, kuten senttimetriä, tuumaa.
Voit tehdä asioita, kuten, mikä on 10 tuumaa?
Ja se tulee olemaan naurettava.
>> ALLISON Buchholtz-AU: Voi pojat.
>> Yleisö: Vau.
>> Tomas ALLISON: Joo.
TOMAS Reimers: Niin, että kaikki täyte.
Aion palata pikseliä.
>> ALLISON Buchholtz-AU: Pikselit yleensä, kuten, standardi.
Kun katsot paljon sivustoja, ne useimmiten toimivat pikseliä.
TOMAS Reimers: Niin aiot nähdä joko pixels-- toisilla näet
on em, joka on yksi em on sama korkeus fontin
joka käytät tällä hetkellä.
>> ALLISON Buchholtz-AU: Mm.
TOMAS Reimers: Se on hyvä tapa sanoa, kuten, haluan niin paljon tilaa kuin minun font
on ottaen.
ALLISON Buchholtz-AU: Ei tiennyt, että.
Voit oppia jotain uutta joka päivä.
TOMAS Reimers: On paljon mittauksia CS.
Ehdotan etsiä niitä.
Kaikille tapauksissa luulen pikseliä pitäisi riittää.
Ja ne ovat myös mitä aiot nähdä
useimmissa esimerkeissä tehdään verkossa.
Joten me jättää se pikseliä.
>> Voit myös, minun pitäisi say-- niin padding sarjaa kaikki pehmustus.
Voit myös tehdä jotain "Padding-top" vain set--
ALLISON Buchholtz-AU: Ehkä me saamme "hei" takaisin.
TOMAS Reimers: --to vain asettaa täyte päälle ja mitään muuta.
Joten neljä komennot ovat padding-top, padding-bottom, padding-left,
ja padding-right.
>> ALLISON Buchholtz-AU: Aivan kuten odottaisi laatikko.
>> TOMAS Reimers: Joo.
Mikään liian hullu siellä.
Onko järkeä?
Niin, että on täyte.
Aion asettaa kaikki pehmusteita takaisin 10.
Ja sitten aion siirtyä rajan.
>> Joten mikä raja on on raja on outo komento.
Se kestää tavallaan kolme asiaa kerralla.
Joten ensimmäinen on kuinka iso olet haluavat sen olevan niin mittaus.
Jälleen olen vain käyttämällä pikseliä.
Ja viimeinen asia, pitäisi lisätä mittaukset
on yksi asia, joka ei tarvitse yksikkö on 0.
Se on oikeastaan ​​väärä antaa 0 yksikköä,
koska 0 on 0 poikki tuumaa, pikseliä, senttimetriä riippumatta.
Se kaikki vain tarkoittaa 0, eikö?
Joten ensin annat sen mittauksen.
>> Sitten annat sen tyylillä.
Joten aion sanoa "kiinteä".
Ja me puhumme, mitä se tarkoittaa.
Ja sitten lopuksi, annat sen väri.
Joten aion sanoa "musta".
Ja nämä kaikki ovat asioita olet nyt ennen nähnyt, paitsi tyyliä,
mutta me puhumme siitä.
Joten te nähneet mittauksia, ja olet nähnyt värejä.
Ja mitä tapahtuu, on saamme tämän kiva musta reunus ympärille, eikö?
Näittekö miten teimme sen?
>> Yleisö: Joo.
>> TOMAS Reimers: Cool.
Joten mikä se on?
Joten ensinnäkin, se on yksi pikseli.
Se itsestään selvää tarpeeksi, eikö?
Like, se on yksi pikseli paksu.
Tai se olisi yksi pikseli, mutta olen zoomataan, joten se on hieman enemmän
kuin.
>> ALLISON Buchholtz-AU: Ja meillä on tämä naurettava päätöslauselma TV.
>> TOMAS Reimers: Joo.
Voit tehdä sen suurempia, pienempi, mitä tahansa.
Joten tässä kahden pikselin rajan.
Näet sen kaksi kertaa niin paksu.
Seuraava asia mitä sinun on väri.
Se ei ole kiinnostavaa.
En aio puhua siitä, todella.
>> ALLISON Buchholtz-AU: Mutta tyyli saattaa olla vain pieni mielenkiintoinen.
>> TOMAS Reimers: Joo.
Joten tyyli, on olemassa muutamia niistä että näen käytetään yleisesti.
Ensin yksi vankka, seuraava n pisteviiva, ja viimeinen n romutti.
Ja tässä on täynnä.
Huomaat, että he nippu pisteitä, eikö?
Hyvä tapa tavallaan saada mukava rajan menossa, viivoille ovat myös melko suosittuja.
>> ALLISON Buchholtz-AU: Ja sitten tietysti, olen
varma, että on paljon muita tyylejä, että voit saada.
Ja meillä on suuri joukko lopussa linkkejä sinulle kaverit
eräänlainen lukaista ja katso lisää viileä CSS.
>> TOMAS Reimers: Ja sitten viimeinen asia, olemme
aio puhua laatikko mallit todella nopeasti.
Niin, ja sitten raja, aivan kuten pehmuste,
sinulla on myös asioita, kuten raja-vasen, raja-oikeus, border-top,
border-bottom, joiden avulla voit saada tietyllä rajalla.
Joten tässä on vain raja lähti määritelty.
Onko se järkevää?
>> ALLISON Buchholtz-AU: Se on viileä tapa korostaa asioita tai lisätä
linjat eri elementtien välillä.
TOMAS Reimers: Ehdottomasti.
Niin, että rajamme.
Ja viimeinen marginaali.
Marginaali on kuin pehmuste paitsi se ei ole within--
ALLISON Buchholtz-AU: On ei ympärille elementti
mutta todellisuudessa ympäri koko laatikko että me olemme nähneet.
>> TOMAS Reimers: Joo.
Allison sanoi sen täydellisesti.
Se ei ole, kuten, sisällä elementti, se on ympäri koko ruutuun.
Tämä tarkoittaa muun muassa tausta eivät koske sitä.
Ja se pohjimmiltaan sanoo, kuten, en halua mitään
Tässä paljon tilaa minulle.
Joten kuten täällä meillä marginaali 10 pikseliä.
Joten ei mitään 10 pikseliä tulisi viereeni.
Sellainen sen tilaa, mutta sellaista ei.
Niin, että hyvin perusteet laatikon mallin.
Onko järkeä?
Cool, cool.
ALLISON Buchholtz-AU: Mahtavaa.
Joten nyt mielestäni juuri on meidän viileä resurssit
että otamme teidät kautta hyvin nopeasti.
Ja me actually-- hyvin, meillä on internet vielä?
>> TOMAS Reimers: Katsotaanpa nähdä, jos voin avata up--
haluan vain nähdä, jos olen voi saada internet nopeasti
kun taas Allison puhuu mitään Allison haluaa puhua.
ALLISON Buchholtz-AU: Joten basically-- En
tiedä mitä muuta voin sanoa tässä vaiheessa.
Mutta nämä ovat joitakin todella hyvät resurssit.
Nämä ovat niitä, jotka Tomas ja olen käyttänyt
ja että me todella käytetään prep tähän.
W3Schools on yksi että olet kaverit olisi nähnyt ennen.
Suosittelemme sitä paljon asioita CSS.
Tiedän suosittelen sitä Minun kohta koko ajan.
>> Yksi suuria asioita on, että se voit sellainen sotku CSS
ja nähdä muutokset välittömästi tämän,
kuten, kaksinkertainen ikkuna nähdäksesi se on.
Joten sinun ei tarvitse huolehtia perustamalla oman Web-sivun,
tai perustamalla vhost omassa paikallinen laite ja paikallinen isäntä,
ja saada kaikki jutut työskentely.
Se on upotettu oikea sivulla.
>> Ja se on näitä pieniä oppitunteja, että voit
läpi oppia lisää valitsimet,
tai oppia manipuloida fontti, tai tausta, tai kuvan.
Ja olet nämä hetkellinen tuloksia, että olet
ei tarvitse tehdä mitään muut prep työtä.
Joten Rakastan W3Schools.
Se on upea.
Toimiiko se?
>> TOMAS Reimers: Joo.
Ei, se ei ole.
Haluatko minun kokeilla ja käynnistä tietokone?
Vai haluammeko to--
>> ALLISON Buchholtz-AU: Tarkoitan, No, tämä on myös verkossa.
Kaikki diat on verkossa.
Joten minä vain Suosittelen tekemään näitä.
>> Tämä on suuri kuin vain kuten lunttilappua.
Se on vain kaikki perus komentoja, että sinulla on.
On hienoa, kun olet ensin aloittamassa sivustosi.
Koska ehkä et haluavat päästä kaikki
real pikkuseikoista suunnittelu-raskasta tavaraa.
Sinun tarvitsee vain alustaa sitä tavalla tuollainen järkevää ja tahtoa
tehdä toistaiseksi.
Ja jos todella haluat päästä sitä, tiedän
tämä on, kuten yksi Tomas suosikki viittauksia.
Käytimme sitä prep, ja se on upea.
Se Kehittäjän Mozilla.
>> TOMAS Reimers: Niin Mozilla ovat ihmisiä, jotka tekevät Firefoxin.
Ja se on vain omaa kehittäjä viite, joka on mielestäni mahtava.
Ja se on ihana kalavarojen luettelo.
Joten me have--
>> ALLISON Buchholtz-AU: Ja sitten viimeinen sävel on
kun yrität suunnitella sivustosi,
innoitusta asioita ovat mielestäsi kaunis.
Tarkistus elementti, tarkastuksen lähdekoodi
voidaan super hyödyllinen yrittää selvittää
miten tyyli oma verkkosivusto.
>> Usein minusta tuntuu paras tavalla, paitsi kokeilu,
on vain katsoa asioita, jotka ovat melko.
Minusta se on todella vaikea vain eräänlainen suunnitella asioita omalla,
varsinkin alussa.
Joten katso sivustot että nautit katsot.
Selvittää, mitä tekee ne teihin.
Ja sitten rohkeasti yrittää jäljitellä sitä.
>> TOMAS Reimers: Oikea.
Jopa kuten sivustot näin, voit nähdä
löytyy varmasti div yläreunassa.
Ja sitten on toinen div sisällä täällä, joka on CSS Awesomeness.
Ja sitten on joukko linkkejä täällä.
Jos todella vain tarkastaa elementtejä, voit lajitella ja
alkaa nähdä mitä tehdä sivustot näyttää, ja miten voin
uudestaan, että jos halusin.
Onko järkeä?
Joten meillä on vain kolme minuuttia jäljellä.
Joten kysymyksiä?
Jokainen heistä?
Kyllä.
>> Yleisö: For väri suorakulmio, miten sinä
have-- jos et halua sitä menee koko sivun, voisi
olet tehnyt sen mennä poikki vain puoli sivua tai vain teksti?
>> TOMAS Reimers: Joo, ehdottomasti.
Joten anna minun nähdä todella.
Minulla on kaksi ideoita.
Joten ensinnäkin, sinun voidaan käyttää myös prosentteja.
>> Yleisö: Oikeasti?
>> ALLISON Buchholtz-AU: Niin jotain etsiä on suhteellinen paikannus.
Se on jotain, että me ei ole aikaa päästä,
mutta se on jotain Olen ehdottomasti Suosittelen teitä tsekata.
>> TOMAS Reimers: Niin prosentteja.
Ja miten selvisimme vain 50% leveydestä?
ALLISON Buchholtz-AU: Jos oikeastaan ​​tiedä määrä pikseleitä,
voit olla tarkempia niin.
Voit viulu noin kanssa.
Mutta 50%.
Jos me muuttaa myös selaimen, se tekisi pienempiä.
>> TOMAS Reimers: No, se on pohjimmiltaan 50% nyt, luulen.
Se on 50%, ja sitten marginaali on lisätty, että.
CSS on paljon koukero.
Joten nyt tämä on 50% sivun leveydestä.
Mutta muista, että sinulla on 10 pikseliä otettu pois kummaltakin puolelta.
Joten jos olit liikkua että vastaan vasemmassa reunassa selaimen,
niin se näyttää 50%.
Jälleen kuten sanoin, CSS voi olla paljon arvaus-ja-check.
Kuten, luulet jotain on menossa käyttäytyä tavalla,
mutta se käyttäytyy täysin eri tavalla.
>> ALLISON Buchholtz-AU: Ja te vain saada älykkäämpiä,
ja olet vain saada paremmin intuitio siitä, kun liikkuvat.
>> TOMAS Reimers: Ja pahenee ja huonommin.
Joten se on oikeastaan ​​vain rotu.
>> ALLISON Buchholtz-AU: Se on super rohkaisevaa.
Haluamme heidän pitävän CSS.
>> TOMAS Reimers: CSS on mahtava.
Muista, että.
Muut kysymykset?
>> ALLISON Buchholtz-AU: yksi asia.
Entä muuta?
Cool.
>> TOMAS Reimers: Mahtavaa.
>> ALLISON Buchholtz-AU: No, jos kaverit on kysyttävää myöhemmin,
olemme aina käytettävissä niin kuin aina.
Luultavasti nähdä meistä lopullista hankkeiden
ja varmasti on hackathon.
>> TOMAS Reimers: Ehdottomasti.
Ja messuilla.
>> ALLISON Buchholtz-AU: Ja messuilla.
Oh.
>> TOMAS Reimers: Odotan näkemästä kaikki awesome--
>> ALLISON Buchholtz-AU: Näemme kaikki mahtava verkkosivustoja
että on kaunis.
TOMAS Reimers: Voit aina nähdä, kuten, sivustot
joka oli niinku hyvä CSS ja sitten kuten ne, jotka eivät yritä tehdä CSS.
ALLISON Buchholtz-AU: Myös toinen asia, yksi asia tutkia
on Bootstrapping.
Joten Bootstrap on suuri.
>> TOMAS Reimers: Google että jos sinä--
>> ALLISON Buchholtz-AU: Google sitä.
Se on upea.
Tulet rakastamaan sitä.
Ja nyt, että sinulla on perustiedot CSS,
se tekee paljon enemmän järkeä.
Mahtavaa.
Kiitos, kaverit.
>> TOMAS Reimers: Kiitos paljon.