>> [Muziek]
ALLISON Buchholtz-AU: So we zijn eigenlijk gewoon gaan
om u een overzicht te geven van CSS, omdat we weten
dat het niet werd gedekt in alle secties.
En we willen ervoor zorgen dat u jongens hebben deze tool tot uw beschikking,
omdat het het vermogen om uw websites zien er veel mooier.
>> En als je het bouwen van een website, dan is wilt u waarschijnlijk om het vrij te maken.
Ik bedoel, je hoeft niet te, maar ik zou het stel. [Lacht]
Als u wilt dat gebruikers om het te gebruiken, zou je wil het een beetje [onverstaanbaar] te maken.
Dus we gaan proberen en geven je gewoon een aantal basis gereedschappen en begrip,
zodat wanneer je naar buiten en je bent het onderzoeken van dingen over CSS,
het is niet compleet wartaal, zoals CSS soms zijn.
>> TOMAS REIMERS: Ja.
Allison zei dat het vrij goed.
Dus ik denk dat het eerste wat we moet beginnen met is wat is CSS?
Dus CSS is geweldig.
CSS--
>> ALLISON Buchholtz-AU: Dat is de naam van onze seminar.
>> TOMAS REIMERS: Ja.
Het is echt belangrijk dat begrijp je dat tegen die tijd.
Als u alleen weg te nemen één ding, het is dat CSS als geweldig.
Twee is CSS staat voor Cascading Style Sheets.
Dus in de kern, CSS is een stylesheet, wat betekent
het u toestaat om een ​​webpagina te stylen.
En wat dat betekent, het is een manier om de stijl toe te voegen aan uw websites.
Dus door stijl, bedoelen we alles dat is niet structural--
dus dingen zoals kleuren, achtergrond afbeeldingen, grenzen, als, padding,
marges.
We zullen praten over wat al dat betekent in een beetje.
>> Dus we hebben net vooruit gegaan en opende deze beide in gedit.
Dus dit is index.HTML.
En dit is main.css.
Dus main.css heeft niets.
ALLISON Buchholtz-AU: Geen stijl zo ver.
TOMAS REIMERS: Geen.
En zoals u zult zien, het is een echt lelijk website.
ALLISON Buchholtz-AU: Het is gewoon.
TOMAS REIMERS: Ja.
Ja, het is niet lelijk, het is gewoon een minimalistisch.
En dan hebben we hier index.html.
En dus voor een snelle recap van HTML, Allison,
je gewoon wilt praten over de pagina?
>> ALLISON Buchholtz-AU: Ja.
Zo duidelijk, we hebben onze HTML tag, die net namen HTML-bestand.
Wij hebben onze header hier, met CSS Awesomeness, which-- als je terug te gaan.
Waar is dat?
>> TOMAS REIMERS: Oh.
Ja, dat kun je zien.
ALLISON Buchholtz-AU: En let op de header
is dit tabblad header hier naar boven.
En dan "Hello, world!" is de tekst die we hebben net
weergegeven op het web pagina, die is-- ga terug.
Terug.
Dat is gewoon in ons lichaam hier-- de platte tekst.
Ook, een ding om opmerken, als je hier kijkt,
Tomas geschakeld up van deze twee van onze glijbaan.
Dus zolang je alle drie van deze, je bent prima.
Ze kunnen worden in welke volgorde ze willen.
Wat is het belangrijkste is gewoon dat heb je elk van die drie dingen.
>> TOMAS REIMERS: Cool.
Voeg een type doc?
ALLISON Buchholtz-AU: Ja.
TOMAS REIMERS: Ja.
Cool.
ALLISON Buchholtz-AU: Blijkbaar, mijn mics niet van me.
TOMAS REIMERS: Oh, geef ons een sec net terwijl Allison schakelt haar mic.
Dus ja.
Dus hebben we onze hoofdpagina.
Het is een soort van unstyled.
We hebben niet veel.
We moeten gewoon eigenlijk tekst.
Wij hebben de stylesheet.
Wij hebben de titel.
Dus gewoon blote-uitgebeend componenten maken van een website.
>> Dus vanaf daar, laten we praten over wat CSS is
en hoe het eruit ziet en dat alles.
Dus voor dat--
ALLISON Buchholtz-AU: Terug naar de dia.
TOMAS REIMERS: Terug naar de dia's.
En Allison kan overnemen.
>> ALLISON Buchholtz-AU: Woo.
OK.
Dus in uw CSS-bestand, je gaat te hebben
veel van deze dingen genoemd selectors.
Dat zal gewoon de basis van uw CSS-bestand.
Het is gewoon gaat worden veel en veel van deze.
Dus selector.
Dit is slechts de algemene anatomie.
We gaan om te gaan door middel van voorbeelden, want als jullie nooit
keek mijn deel, ik voel als dingen in de abstracte
niet echt zinvol.
Het helpt altijd om de voorbeelden te zien.
>> Dus we hebben een aantal selector.
Dat gaat om enkele naam voor zijn wat we willen de stijl wilt toepassen.
En dan kunnen we elke hebben set van regels en waarden.
Zodat selectors dat je zou kunnen zien misschien iets als lichaam,
of paragraaf met P, of header, of wat dan ook,
wat je ook wilt dat uw HTML-tags te zijn.
>> Dus in dit geval, we hebben het lichaam.
En we hebben een aantal regels, waarbij deze overeenkomt
aan wat uw stijl van toepassing is.
Dus in dit geval, hebben we achtergrondkleur en lettertype gewicht.
Dus dit gaat veranderen de achtergrond iets
binnen een body-tag van onze HTML-bestand.
En het gaat om geven het op deze lichtblauwe waarde.
>> Dus het gaat om het maken achtergrond lichtblauw.
En dan is er iets in het lichaam is gaat om een ​​lettertype gewicht vet hebben.
Dus het zal alleen maar bold al onze tekst.
En dit is slechts één selector.
Maar je zou kunnen hebben heel veel van deze.
En als we gaan om te laten zien later, een beetje meer naar hoe
die werken en meer voorbeelden daar.
Alles wat je wilt toevoegen?
>> TOMAS REIMERS: No.
Allison kreeg het.
We gaan gewoon omhoog te snijden een Bijvoorbeeld hier op onze website bijvoorbeeld.
Dus laten we eigenlijk dit te nemen.
Het is perfect.
Dus ik ga gewoon kopiëren en plakken dat recht in onze main.css bestand.
En ik ga het redden.
En dan zullen we het uit te voeren.
Dus kanttekening, een van de meest frustrerende dingen
is als je niet beschikt over een bestand op te slaan, en dan moet je, net als, herlaad de pagina,
en als, waarom niet de verandering gebeurt?
Het gebeurt.
Dus hier zagen we dat we onze website een lichtblauwe achtergrond
en wat vetgedrukte tekst.
>> Ik moet ook vermelden, als je jongens vragen over iets hebben
we doen, neem dan gerust vrij om ons te stoppen en ons vragen.
We zijn helemaal bereid te vragen veld.
>> ALLISON Buchholtz-AU: Uiteraard, met CSS, alles bouwt voort op zichzelf.
Dus als een ding niet zinvol nu, we
wil niet dat je naar beneden later veen.
>> TOMAS REIMERS: Dus laten we dit soort ontleden.
Dus wilt u beginnen met de selector hier?
>> ALLISON Buchholtz-AU: Ja.
Zoals ik al eerder zei, het lichaam is gewoon onze selector hier.
Dus als we terug gaan naar onze index-- ah.
>> TOMAS REIMERS: Wat ik net gesloten.
Geef me een seconde.
Dus File, Open, index.html.
ALLISON Buchholtz-AU: Cool.
Dus als je hier ziet, we hebben deze body-tags, toch?
Dus de selector stemt precies overeen met de tags die we over praten.
Dus lichaam hier.
Dus wat we zeggen is everything-- kunnen we teruggaan?
Ik wou dat ik kon het gewoon zoals het scherm aanraken.
Het zou zo veel koeler zijn.
>> Dus alles binnen die body-tags, die we zagen
was gewoon, net als de tekst, en het lichaam in het algemeen
verwijst, zoals de achtergrond.
Als je ooit wilt verander de achtergrond,
dat gaat in een body-tag.
Heeft net deze regels op hen van toepassing.
>> Dus als we konden naar index.html en-- eigenlijk,
kunnen we iets hebben buiten het lichaam?
Als we hadden, net als, een voettekst of iets, zou het niet van toepassing op deze.
Maar alles binnen deze body-tags gaat
worden beïnvloed door dit lichaam selector die we hebben gemaakt.
Dus als je om te typen iets anders er--
>> TOMAS REIMERS: Laten we rijden dat huis.
Dus als we een div-- dus dat is gewoon een tag die je kunt hebben.
Ik ga om te sluiten.
Of laten we dit een paragraaf.
Dus p staat voor paragraaf.
En binnen die paragraaf.
En dan zeg ik: "Dit is de tekst."
Cool.
En toen maakte ik deze regel van toepassing op een paragraaf in plaats van het lichaam.
Je zult zien hoe het alleen geldt voor de nieuw gevormde paragraaf, rechts,
niet de hele zaak.
Heeft dat zin?
>> ALLISON Buchholtz-AU: Dus dit is allemaal lichaam,
maar nu onze selector net overeenkomt met de paragraaf.
Dus we moeten gewoon vet en blauw voor deze specifieke paragraaf,
want dit is het enige wat dat wordt omsloten door de p-tag.
>> TOMAS REIMERS: Is dat zinvol soort van hoe de dingen in te kapselen andere dingen?
ALLISON Buchholtz-AU: Ook, net zeggen, als een van de beste manieren
om echt comfortabel met CSS is om gewoon dingen te doen als dit,
probeer het gewoon uit.
Het is heel eenvoudig om iets te typen uit, raakte Refresh, en zie wat er gebeurt.
En zoals met de meeste CS, experimenten kunnen vaak
leiden tot een veel betere intuïtief begrip.
Meer nog dan wij gewoon, als, met je te praten.
>> TOMAS REIMERS: Absoluut 100% eens over dat punt.
Dus als we terug naar deze gaan, laten we beginnen ontleden precies wat deze twee doen.
Dus we hebben twee regels op dit punt.
Dus de eerste is de achtergrond kleur.
En je ziet dat we het hebt ingesteld gelijk aan een waarde, lichtblauw.
>> Dus in CSS, CSS is een soort van zeer los over hoe
jij mag kleur te definiëren.
Zodat u ze kunt definiëren op naam.
U kunt ook iets doen als "rood."
En dan, als we terug gaan naar deze, je zult zien dat de achtergrond is rood.
U kunt ook really-- Ik denk dat je kan behoorlijk creatief met dit te krijgen,
kan je niet?
>> ALLISON Buchholtz-AU: I denk dat je kan hex gebruiken.
Kan je niet?
>> TOMAS REIMERS: Ja.
Dus je kunt gebruiken hex.
Maar ik denk naam-wijs.
Zijn er niet?
ALLISON Buchholtz-AU: U kunt heel wat te doen.
Vrij veel als de meeste kleuren die je kan name-- als, ik denk dat zalm is één.
>> TOMAS REIMERS: We gaan proberen zalm.
ALLISON Buchholtz-AU: I denk Chartreuse is daar.
TOMAS REIMERS: Ja.
Zie?
Dus je kan behoorlijk creatief.
>> ALLISON Buchholtz-AU: U kon behoorlijk creatief.
Zoals, als je kunt denken aan de kleur naam, het is waarschijnlijk daar.
Als je echt wilt fijne detail, kun je gaan hex.
>> TOMAS REIMERS: Ja.
Dus hexadecimaal.
Als jullie niet vergeten deze terug van uw oude PSET, Image Recover,
jullie te maken gehad deze hex waarden.
En soort van samen te vatten wat dat is, hex drie waarden opgeslagen in het.
Dus het is in groepen van twee stappen.
De eerste twee geven de rode waarde.
De tweede vertegenwoordigt de groene waarde.
En de laatste is blauw?
>> Dus FF gebeurt te vertegenwoordigen een hexadecimaal 255.
Dus je hebt 255 rode, 255 groen, en 0 voor blauw.
En waarden liggen tussen 0 en 255.
>> Publiek: Recht.
Dus in wezen, kunnen we zoeken internet voor elke kleur die we willen,
en identificeren van de werkelijk bekende kleurenspectrum combo,
en dan kunnen we het in te zetten?
ALLISON Buchholtz-AU: Precies.
Dus je moet vrij veel volledige controle over de kleuren die u wilt binnen CSS.
Zijn we gaan praten over achtergrondafbeeldingen later?
Of willen we dat doen?
>> TOMAS REIMERS: Ja.
Absoluut.
Dus eerst, gewoon om te laten zien dat rood en groen is geel.
En als je moet wat helpen bij het vinden van deze, u
kan Google iets zoals "kleurenkiezer."
ALLISON Buchholtz-AU: Oh, het is zo goed.
Ik hou van Color Picker.
>> TOMAS REIMERS: colorpicker.com is een goed voorbeeld.
En hier, zul je zien dat je hebt een volledige Photoshop-achtige kleurenkiezer.
>> ALLISON Buchholtz-AU: Mm-hm.
Ook de leuke dingen zijn die u kan kleurenschema's te genereren
zodat u niet hoeft, als, vloekende kleuren.
TOMAS REIMERS: En dan hier is de hexadecimale waarde hier.
Dus je kunt altijd online te vinden in principe plaatsen om de hex-waarde uit te krijgen.
Het is niet sorteren van dat net, zoals we zie de kleuren van de wereld in getallen.
Het is meer dat we online gaan en vinden wat kleur die we willen,
en neem vervolgens het nummer naar beneden.
Want het is gewoon een heel eenvoudig manier om te verwijzen naar dingen in het CS.
>> ALLISON Buchholtz-AU: En dan is er nog also--
Ik vergeet de exacte naam van de site.
Maar er is zeker, ik denken, iets van Adobe
dat genereert kleurenschema's voor u, dat is echt cool, want je
definitely-- is het soms moeilijk te achterhalen,
oh, als ik wil deze kleur gebruiken, wat zou een andere nuttige één zijn
elders op mijn site, als, maken het mooi en samenhangend.
>> TOMAS REIMERS: Allison's praten over een door Adobe Kuler genaamd, denk ik.
Het is K-U-L-E-R.
ALLISON Buchholtz-AU: Ik denk het wel.
Ik ben er vrij zeker van dat is het.
>> TOMAS REIMERS: Mijn favoriet heeft altijd geweest Color Scheme Designer.
>> ALLISON Buchholtz-AU: Ooh.
>> TOMAS REIMERS: Welke is now--
>> ALLISON Buchholtz-AU: Ah, dat is mooi.
>> TOMAS REIMERS: En je kan in principe zeggen, als,
Ik wil drie kleuren naast elkaar.
En dan laten we iets leuks doen.
En dan kun je een voorbeeld te krijgen van wat dat zou kunnen uitzien.
En dan als je de muis boven een van hen, het geeft je de hexadecimale waarde.
>> Dus net als een goede manier om te beginnen denken over kleurenschema's
of welke kleuren in een website zou goed samen gaan.
Omdat verrassend kan worden niet zo makkelijk op te pakken als je denkt.
En dan de andere cool ding Ik heb altijd gevonden over deze site
is als je Voorbeelden geraakt, het zal laten zien wat een voorbeeld website
eruit zou kunnen zien met behulp van die kleurenschema.
Hoe dan ook.
>> Naar de eigenlijke CSS.
ALLISON Buchholtz-AU: Maar natuurlijk, we weet deze referenties nuttig zou kunnen zijn.
TOMAS REIMERS: Nee, ze zeker nuttig kan zijn.
Dus de tweede regel, Allison?
>> ALLISON Buchholtz-AU: Ja.
De tweede regel is gewoon gevonden volgens onze lettertype.
Dus lettertype gewicht is gewoon een soort van-- zodat het gewicht zou
als je wil gewoon, zoals, normaal of, als, dunner lettertypen,
of in dit geval, zoals, vet.
Ik vergeet.
Wat is het als je wilde het-- is er een dunnere één dan alleen, als, normaal?
TOMAS REIMERS: ik doe niet echt weten of er een dunnere één.
ALLISON Buchholtz-AU: ik vergeet.
Dus tekengewicht we doorgaans alleen te gebruiken voor vet.
Als je wilt echt in het, we gaan je laten zien.
W3Schools heeft alle verschillende dingen die je voor lettertypen kunnen doen.
Maar in principe, als je ooit wilt om iets te veranderen aan het lettertype,
het is altijd gaat worden, als, font-iets.
Dus het zal zijn als, font-family als je proberen om de werkelijke aard veranderen.
Het zal font-style als je zijn het wilt maken zoals cursief,
of cursief, of wat al niet.
Of zelfs font-kleur, als wilden we verandering in brengen.
>> TOMAS REIMERS: Yup.
Dus je kan dat veranderen.
En soort van alleen maar om recap, zodat u kunt
zien dat we de selector omhoog hier.
We hebben deze accolades.
En dan hebben we regels afgebakend door een puntkomma.
Heeft dat zin?
Yeah?
Cool.
Dus als dat is goed--
>> ALLISON Buchholtz-AU: Back.
TOMAS REIMERS: Laten we praten specifiek over wat voor soort selectors die we hebben.
Nu we hebben 'Cause soort van gewoon getoond labels.
Maar jullie konden zien het plausibel.
Stel dat je twee paragrafen op een pagina en je
willen kunnen stijl één tot de ander,
jullie willen niet alleen om jezelf te beperken moeten verschillende werkelijke HTML
tags om ze verschillende stijlen geven.
>> Dus we drie basis hebben soorten selectors.
ALLISON Buchholtz-AU: Ja.
Dus we hebben tag, dat is wat we hebben het over nu.
Dus dat is net zoiets als uw lichaam of p.
En dan hebben we klasse, die toen definiëren we het in onze CSS-bestand,
het is altijd gaat worden dot, wat dan ook u wilt dat de naam van je klas te zijn.
En dit kan toepassen op meerdere dingen.
>> Stel dat je vijf paragrafen en twee van de drie van hen
moet hetzelfde worden vormgegeven, zou je een klasse van toepassing zijn.
En dit is gewoon de manier waarop we het doen.
We sturen u een voorbeeld van geven waar dit ook daadwerkelijk opduikt.
Maar als je misschien had enkele tag p, nadat deze, zou je schrijft,
klasse is gelijk aan wat klassen u wilt toepassen.
Dus wat class selectors die we willen van toepassing op deze specifieke paragraaf,
we konden gewoon schrijven als deze.
Natuurlijk denk ik een voorbeeld zal het veel concreter te maken.
>> De andere wij is id, die we aanduiden
met een hekje, of pond, of hashtag.
TOMAS REIMERS: Octothorpe.
ALLISON Buchholtz-AU: Octothorpe.
Dat werkt ook.
En dit moet echt uniek.
Ze moet alleen gelden voor één ding op uw pagina.
Dus of dat is een specifieke paragraaf, of een item in een lijst, of wat dan ook,
Dit moet uniek zijn.
En op dezelfde manier dat we net zeggen, als, class = "class1 class2,"
dit kan gewoon id van wat we hebben.
TOMAS REIMERS: Ja.
Dus laten we zeker praten over voorbeelden hier.
En ik ga gewoon om te duiken rechte rug in de code.
Dus laten we eens kijken naar onze HTML.
En dus hebben we nu hebben één paragraaf.
Dit is tekst.
Ik ga gewoon aan te passen het. "Dit is de tekst 1."
En dan gaan we hebben een "Dit is de tekst 2."
>> ALLISON Buchholtz-AU: Tweede één.
TOMAS REIMERS: Yup.
Dus hebben we nu hebben "Dit is tekst 2," right?
En we gaan om te zien dat als we herladen de pagina, wat we gaan vinden
is we gaan find--
ALLISON Buchholtz-AU: Ooh.
TOMAS REIMERS: Ja.
We gaan op zoek naar een: "Dit is tekst 1, "en" Dit is de tekst 2. "
>> ALLISON Buchholtz-AU: En out mooie gele kleur.
>> TOMAS REIMERS: En je zult zien dat onze selector op dit moment,
die geldt voor p's, of paragrafen, heeft invloed op zowel van hen,
omdat beiden aan de voorwaarde dat ze allebei een p-tag.
Dat maakt in totaal gevoel.
Dus de vraag is, nou ja, wat als we wilden alleen maar een?
Dus precies zoals Allison zei, hebben we twee andere manieren om dat te doen.
Ik ga om te beginnen met id.
>> ALLISON Buchholtz-AU: Laten we beginnen met id.
>> TOMAS REIMERS: En beide van deze attributen.
Dus attributen bestaan ​​in HTML.
En wat ze zijn is iets dat je toevoegen
binnenin de tag die is scheiden van het naamplaatje.
Dus je kunt meerdere attributen hebben.
Yeah?
>> ALLISON Buchholtz-AU: Ik was net gaan te zeggen, uit je voorbeeld uit PSET 7,
als iemand van jullie proberen te lijnen dingen naar het centrum,
je zou hebben gebruikt "Text align = center."
En je het waarschijnlijk al gemerkt moeten gecentreerd
uw tekst of uw navigatiebalk.
Dus dat is gewoon ook een attribuut dat je misschien wel bekend mee zijn.
TOMAS REIMERS: Er is een bos van attributen die je zult zien.
Yeah.
Net als een goede verwijzing naar PSET 7.
We hebben id.
U kunt ook klasse, dit soort dingen.
Een enkele tag kan vele attributen hebben.
Dus beginnen met id, laten we doen alsof we willen een id van-- ik weet het niet hebben.
We noemen het bijzonder, omdat deze, we zijn
gaat om vet te maken, en onderstrepen, en wat dan ook.
ALLISON Buchholtz-AU: Het is komt wel super special.
TOMAS REIMERS: Dus dit één, we hebben id speciaal.
Dus de manier te selecteren dat is dus in main.css, in plaats van een p-tag,
je #special doen, OK?
En dat selecteert de ding met id speciaal.
Heeft dit zin om iedereen?
Publiek: Ja.
TOMAS REIMERS: Cool.
Dus nu als we terug gaan, we zullen see-- whoops.
Yeah.
We zullen zien dat het alleen selecteert de ene met id speciaal.
Yeah?
Klinkt cool.
Ja.
>> Publiek: Kan iets hebben een attribuut van zowel klasse en een id?
>> TOMAS REIMERS: Ja.
Publiek: OK.
En wat gebeurt er dan als je dan geven het aantal regels in CSS dat conflict?
TOMAS REIMERS: Absoluut.
We zijn zeker gaan om te praten over dat.
Dus precies wat je krijgt bij, dan kunt u ook lessen.
Dus laten we doen alsof ik had drie alinea's en ik
wilde stijl van de eerste twee, maar niet het derde.
Nou, kan je eerste idee zijn, nou ja, ik kon gewoon geven de tweede een id.
Maar je kan niet, want een id, precies zoals Allison zei,
uniek zijn.
>> Dus in plaats van een id, wat je kan gebruiken is dat je kunt een klasse te gebruiken.
En een class-- wat het mogelijk maakt je moet doen is eigenlijk te zeggen,
dit behoort als onderdeel van een groep.
In dit geval, onze fractie heet Special.
En wat gaan we dan doen is we gaan say-- plaats pond,
we gaan dot gebruiken.
OK?
En merk op dat het pond en de dot bestaan ​​alleen binnen het CSS-bestand,
niet binnen het HTML.
ALLISON Buchholtz-AU: Ja.
Belangrijk onderscheid.
>> TOMAS REIMERS: Ik heb had zoveel strijd,
omdat ik de hash in de HTML en Vervolgens voelde gewoon dom voor een lange tijd.
Zie hoe het allebei selecteert degenen met die klasse?
Cool.
>> Nu kunnen dingen meerdere klassen hebben.
Laten we zeggen dat ik wilde het eerst te maken twee hebben een achtergrond van geel
en de tweede twee hebben een lettertype kleur van blauw.
OK.
Ik weet eigenlijk niet waarom ik zou dat willen doen, maar ik kan.
>> ALLISON Buchholtz-AU: Might niet aanbevolen het voor uw website.
Maar voor onze doeleinden, zal het doen.
>> TOMAS REIMERS: Het is niet een goede kleurenschema.
ALLISON Buchholtz-AU: Nou, geel en blauw zijn mijn middelbare school kleuren.
Ik weet het niet, hoor.
TOMAS REIMERS: Allison's hoog school had een grote kleurenschema.
[Lachen]
Dus dan wat we kunnen noemen is dit Laten we noemen dit-- dus we hebben Special
en we hebben Pretty.
Ik stel voor, voor dit, je gebruikt veel meer beschrijvende namen.
ALLISON Buchholtz-AU: Ja, zou ik Dit noemen, zoals, geel of blauw.
>> TOMAS REIMERS: We zijn niet echt het maken van een echte website,
dat is waarom we dat niet doen.
Maar als je echt had een echte website, u
zou kunnen hebben, als, artikel header, inhoud van het artikel, eerste woord,
dat soort dingen, die het mogelijk maken u veel meer beschrijvend zijn.
Deze zijn echt net als variabelen.
Zij moeten worden benoemd op een manier waar je kunt, like-- ja, als zodanig.
Perfect.
>> Dus achtergrondkleur.
En dan gaan we dus de say-- manier om kleur te veranderen is gewoon "kleur."
En we gaan het blauw te maken.
Dat is cool.
Dus nu hebben we de eerste twee hebben speciale.
Volgende men gaat hebben "class = mooi."
ALLISON Buchholtz-AU: En dan zul je willen 'mooie' toe te voegen aan de middelste.
TOMAS REIMERS: Yup.
En dan het middelste, toe te voegen "vrij," wat er gebeurt
is dat je gewoon een ruimte.
Dus de class attribuut is een door spaties gescheiden lijst
alle klassen die van toepassing zijn op die tag.
OK?
Het is niet zoals deze behoort tot een soort van speciale klasse met de naam
"Bijzondere, ruimte, mooi."
Het behoort tot twee classes-- speciaal en mooi.
Ja?
Cool.
>> En dan, als we kijken naar wat er gebeurt, we zijn
gaan om te zien dat eerste heeft gele achtergrond, zwarte tekst.
Tweede een--
>> ALLISON Buchholtz-AU: --has bold gele achtergrond met blauwe tekst.
En onze laatste heeft alleen de blauwe tekst die we toegewezen.
>> TOMAS REIMERS: Cool?
Hoe selectors werken?
Geweldig.
>> ALLISON Buchholtz-AU: Willen we praten over het conflict nu dan?
>> TOMAS REIMERS: Dus ja.
Absoluut.
Dus wat gebeurt er als je een conflict hebben, toch?
Laten we doen alsof de eerste zet iets like--
ALLISON Buchholtz-AU: Misschien dit verandert de achtergrond?
TOMAS REIMERS: Ja.
Dus we gaan ervoor "vrij" veranderen de achtergrond in zalm.
ALLISON Buchholtz-AU: Je bent gewoon met alle grote kleuren vandaag, Tomas.
TOMAS REIMERS: Ja.
Omdat ik erachter kwam dat ik kan Gebruik zalm als een echte kleur.
Dus we alleen maar om dat te doen.
Ik denk ook Sunset is een echte kleur.
Publiek: Sunset is een echte kleur?
ALLISON Buchholtz-AU: Laten we proberen het.
TOMAS REIMERS: Na deze demo alleen maar omdat in het geval het messes up,
Ik wil niet te debuggen.
Dus we weten zalm is een echte kleur.
Dus elke gissingen op wat er gaat gebeuren?
>> ALLISON Buchholtz-AU: Enig idee?
>> Publiek: [onverstaanbaar].
>> TOMAS REIMERS: Ja.
Dus je hebt het precies goed.
Kortom, het neemt de laatste regel dat het werd gegeven.
>> ALLISON Buchholtz-AU: Dus dit is waar cascade in werking treedt.
>> TOMAS REIMERS: Dus niet vergeten hoe we had dat cascading style sheets?
Dus door dat we soort bedoelen dat we een heleboel regels
die passen op elkaar en ze kunnen ook overschrijven elkaar.
>> ALLISON Buchholtz-AU: So wat bij de bodem
zal overschrijven wat er ook aan de top.
Je zou kunnen regels die volledig hebben ontkennen iets vooraf.
Dat is ook de reden waarom je wilt zijn voorzichtig wanneer je styling,
zodat je niet het maken van regels die je bent gewoon helemaal dwingende.
>> TOMAS REIMERS: Of misschien heb je wil wel regels overschrijven.
>> ALLISON Buchholtz-AU: Of misschien je doet.
Ja.
>> TOMAS REIMERS: Doe alsof u een klasse die geldt voor de meeste dingen,
maar laten we zeggen dat je wilt het veranderen achtergrondkleur op rood en het lettertype
gewicht te vet voor de meeste dingen, maar één,
u alleen de achtergrondkleur rood te zijn, maar je alle andere wilt
eigenschappen, kan je iets doen zoals "font-weight = normaal,"
die zou dan ongedaan dat gedurfde verandering.
Yeah?
Nogmaals, de beste manier is, denk ik Allison zei het, is gewoon oefenen.
>> ALLISON Buchholtz-AU: Experimenteren.
>> TOMAS REIMERS: Oefenen, oefenen, praktijk en experiment.
Ik weet dat veel mensen die denken CSS is gewoon veel gok-en-check
aan het eind van de dag, waar als je wilt something-- zoals te doen,
heb je een ruw idee, maar je waarschijnlijk nog nodig
om het uit te proberen om ervoor te zorgen je weet hoe het eruit ziet.
>> Publiek: Als je solliciteert klassen, meer dan één
om dezelfde paragraaf of sectie, doet het
ongeacht in welke volgorde je kan typt u deze in de quotes?
>> TOMAS REIMERS: Nee, helemaal niet.
>> ALLISON Buchholtz-AU: Waar het om gaat is de bestelling binnen uw CSS style sheet.
Publiek: Kunt u de vraag herhalen?
TOMAS REIMERS: Oh.
ALLISON Buchholtz-AU: Binnen klasse, als je het geven van lessen
iets in de HTML, doet het uit welke volgorde ze in?
Het maakt niet uit de bestelling.
Waar het om gaat is de volgorde van de class selectors binnen uw CSS,
binnen uw style sheet.
>> TOMAS REIMERS: Sound goed?
>> ALLISON Buchholtz-AU: Lovely.
>> TOMAS REIMERS: En dan we gaan verder to--
ALLISON Buchholtz-AU: Wat hebben we nu?
Ik vergeet.
Oh, we hebben slechts voorbeelden.
Maar we hebben soort gedaan die.
We hebben voorbeelden gedaan op de vlieg.
>> TOMAS REIMERS: We krijgen combineer al snel de selectors.
>> ALLISON Buchholtz-AU: Oh, we bij selectors te combineren.
TOMAS REIMERS: Dus sommige voorbeelden is dat we hebben
# Dog-- pond, of hashtag, of octothorpe, of wat dan ook
u wilt bellen dat-- scherp.
>> ALLISON Buchholtz-AU: Sharp hond.
>> TOMAS REIMERS: Dan heb je .pets.
Iets heeft een id van de hond, er is maar een hond op de pagina.
Iets heeft een id van kat, er is maar een kat.
Er kunnen veel huisdieren op de pagina.
Daarom gaven we die klassen.
Heb je een voorbeeld van p.
En dan dus een van de laatste voorbeeld, dat
is iets wat we nog niet over gesproken, is wat er gebeurt als je ze combineert.
Dus p.pets.
>> Dus voor die, laten we gaan terug naar de code en introduceren another-- ja.
Dus hier terug.
>> ALLISON Buchholtz-AU: I het gevoel dat dit is really--
als gewoon kijken door voorbeelden is echt de manier om dit te leren.
Dus dat is wat we doen.
>> TOMAS REIMERS: Dus laten we doen alsof we alleen tekst wilt 2, rechts selecteren?
Dus we kunnen zeker niet dat doen met een id.
Nou, we kunnen dat met een te doen id, maar het hoeft niet een id.
Ik kon toevoegen één, maar laten we doen alsof dat ik niet wil één toevoegen
of het al iets anders.
Dat kan ik niet mee doen.
De tag is zeker niet uniek, toch?
En geen van beide is de klasse.
Maar je kunt deze dingen te combineren.
Laten we zeggen dat we wilden iets doen die alleen geldt voor zaken die
hebben de klasse speciaal en die hebben de klas mooi.
>> Dus wat je kunt doen is in main.css, je kunt zeggen, laten we eerst deze verwijderen.
U kunt deze combineren.
Dus je kunt .Speciale doen.
Geen ruimte.
Gewoon .special.pretty.
Wat dat betekent is iets die zowel bijzonder en mooi.
Heeft dat zin?
En als we hier gaan, wat je gaat om te zien
is deze regel geldt alleen voor de tweede, dat deze beide heeft.
En je kan dat voor een heleboel dingen.
U kunt say-- laten doen alsof ik wilde alleen
om dingen die de klasse vrij te laten doen en die ook een paragraaf tag.
Dus p.pretty.
Laten we doen alsof dat ik had iets moois op de tag lichaam.
OK?
Ik kan deze draaien en ik kan zien dat het alleen
gaat toepassen dingen die paragrafen met de klas mooi.
En u kunt deze combineren, in principe, net zoveel als je wilt.
Dus je kunt ze gewoon bij elkaar.
Heeft dat zin?
ALLISON Buchholtz-AU: So Dit soort is nuttiger
toen, Tomas werd eerder zeggen, misschien je hebt een zeer ingewikkeld website,
en je hebt al een hoop van deze regels geschreven,
en je hoeft alleen maar te combineren twee van voor.
Zoals in plaats van het schrijven van een geheel nieuwe selector en er veranderen,
je kan het gewoon combineren hen waar het overlapt.
>> TOMAS REIMERS: Of je misschien soms out--
er is een klasse die maakt lettertype kleuren zoals blauw,
en er is een andere klasse die maakt de achtergrond blauw.
En dat het gewoon niet zal werken.
Zodat u een speciaal geval te schrijven, waar, like-- maar als het heeft beide, wat je bent
ga doen is je gaat maken dit een deze schaduw van blauw
en deze die andere tint blauw.
Rechts?
>> ALLISON Buchholtz-AU: Goed voor die soorten uitzonderingen.
TOMAS REIMERS: Dus om na te denken over problemen
die kunnen ontstaan ​​als je ze combineert.
Cool.
Dus terug naar onze presentatie.
ALLISON Buchholtz-AU: We zijn er bijna.
TOMAS REIMERS: En het gestopt verbinden.
ALLISON Buchholtz-AU: Oh, nee.
ALLISON Buchholtz-AU: CS bij het kantoor, internet naar beneden gaat.
Oh, de ironie.
>> TOMAS REIMERS: Dus gelukkig, we kunnen presenteren zonder internet, denk ik,
want we hebben alle dia's hier.
Dus laten we praten over de verhouding tags.
ALLISON Buchholtz-AU: Right.
Dus gewoon een soort van gaan off van wat Tomas zei:
dit is gewoon een andere manier om het te doen.
Dus we hebben een aantal ouders selector met een kind selector.
Dus in dit voorbeeld hier, we hebben een aantal lichaam met een klasse navbar, klasse knop.
Ah.
>> TOMAS REIMERS: Oh, sorry.
>> ALLISON Buchholtz-AU: En principe, wat dit betekent
wordt alles selecteren van de kinderen, zoals al dit soort selectoren
binnen deze ouder selector.
En dat zijn de enigen het ooit gaat toepassen.
Ik weet niet of je hebben een betere manier van--
TOMAS REIMERS: Dus ik denk dat de manier van denken
over dit is onthouden voordat hoe we graag een soort van samen te stellen hen.
En dan betekent dat één element die overeenkomt met elk van deze.
Wat dit zegt is, ik wil dat je alles overeenkomen
binnen some-- Ik wil u een selector te vinden.
En vervolgens binnen dat, ik wil u om nieuwe dingen aan te passen.
Rechts?
Dus in CSS, het is allemaal over een soort van kunnen deze items passen.
En je kunt proberen te evenaren items binnen andere items.
>> Dus laten we eigenlijk doen een voorbeeld, en we denken dat zal verduidelijken.
Dus laten we doen alsof we speciale, speciale vrij, wat dan ook.
En dan hebben we een link, OK?
Dus vergeet niet, een is een link.
Het gaat niet om overal te gaan.
En we gaan om het te geven de klasse koppeling, denk ik.
Laten we het de class-- me een idee te geven.
ALLISON Buchholtz-AU: Cool.
TOMAS REIMERS: Coo-- laten gaan zij de categorie vrij.
Waarom niet?
>> ALLISON Buchholtz-AU: OK.
TOMAS REIMERS: Dus nu mooie dingen
gaan naar de achtergrond te maken blauwe, achtergrond kleur van zalm.
Dat is logisch.
En als we dit-- doen
>> ALLISON Buchholtz-AU: Wilt u tekst toevoegen
dus de hyperlink eigenlijk opduikt?
TOMAS REIMERS: Dat zou een goed gesprek te zijn.
ALLISON Buchholtz-AU: 'Cause recht Nu zijn we gewoon gonna get niets.
TOMAS REIMERS: Dus dit is een link.
"Dit is een link."
Oh, en dit gaat naar een andere link zijn.
Laten we het de klasse "cool."
Je hebt gelijk.
Cool.
Dus nu gaan we dit te grijpen.
We gaan één gooien.
Wij hebben een in de speciale tag, en we hebben ook
gaan naar een in de mooie tag hebben.
En op dit moment wat we gaan doen is gaan we cool-- maken
wat willen we er aan doen?
ALLISON Buchholtz-AU: Kunnen we het groter?
TOMAS REIMERS: Laten we geven het een grens.
ALLISON Buchholtz-AU: We konden grens.
TOMAS REIMERS: Ja.
Dus we gaan iets doen als, grens is-- en we zijn
ga dit uit te leggen alles in een seconde.
Voor nu--
>> ALLISON Buchholtz-AU: Om de doos model.
TOMAS REIMERS: Maar voor nu, we zijn gewoon gaan om het een grens.
Dus wat dat betekent is dat je gaat deze links te zien.
En je gaat om te zien dat ze hebben deze, als, lelijke zwarte randen, die
is cool.
>> ALLISON Buchholtz-AU: Onze website is zo mooi.
>> TOMAS REIMERS: Ja.
Onze website is geweldig.
Dus deze twee links, en ze verschijnen.
Laten we nu eens doen alsof ik wilde alleen maar om dit te doen
als het niet binnen iets die had een achtergrond van zalm.
Dus niet vergeten dat dit een een achtergrond van zalm,
want het is van klasse vrij.
>> Maar we willen zeggen dat alleen koelt die zijn in de klas speciale, niet in de klas
mooi, moet die grens hebben.
Nou, wat je kunt doen is je kan zeggen, .Speciale, ruimte, .cool.
En wat dat doet, als je denkt over, is het is eigenlijk te zeggen,
OK, vind ik alles die overeenkomt met speciale.
Vervolgens binnen die labels, vinden me alles dat is cool.
ALLISON Buchholtz-AU: Dus een andere manier die goed zijn om na te denken over dit zou kunnen zijn,
waardoor het terug naar C, is net als het idee van de omvang.
Dus als je wat selector, zoals die
dat we hebben gewerkt voor voordat deze, je hele webpagina, al uw HTML
is binnen uw bereik, toch?
Maar als we deze ouder-kind relaties,
het is alsof je versmalling waar u op zoek bent naar een bepaalde plaats,
als, als, we zijn op zoek binnen een specifieke functie in plaats
van onze gehele bestand.
Publiek: Dus met dat in het achterhoofd, zou het uitgemaakt hebben als we hadden changed--
ALLISON Buchholtz-AU: De volgorde?
Publiek: --de klasse in CSS naar .cool, ruimte, .Speciale?
ALLISON Buchholtz-AU: Ja, want dan is dat
zou zeggen, scope aan alles wat koel is,
en dan kijken naar wat has-- Ik bedoel, zoals in dit geval,
Ik denk niet dat het zou zijn veranderd.
>> TOMAS REIMERS: Als we hadden wat gezegd?
Sorry.
>> ALLISON Buchholtz-AU: Als we reikwijdte hem afkoelen en dan
op zoek naar dingen uit speciale, zou hetzelfde zijn, eigenlijk.
>> TOMAS REIMERS: Dus het zou niet.
>> ALLISON Buchholtz-AU: Het zou niet?
Oh, oh goed.
Ik verkeerd ben.
>> TOMAS REIMERS: Dus de reden het is different-- gemeenschappelijke mistake--
is dat op dit moment alleen de link heeft koele, toch?
Ik denk dat mijn vraag aan jullie is, wat op deze pagina wordt geëvenaard door .cool?
Er zijn twee labels hier, toch?
Dat deze en deze.
Beide passen cool.
Niets anders doet.
Dus als je zei, .cool, ruimte, .Speciale, wat je gaat zeggen is,
binnen deze tags, wat is speciaal?
ALLISON Buchholtz-AU: Hm.
Dat is wat het-- rechts.
Want het is net als gewoon iets hier.
>> TOMAS REIMERS: kiest hij dus niets.
>> ALLISON Buchholtz-AU: Overwegende dat met speciaal, we zijn binnen deze tags hier.
>> TOMAS REIMERS: Die en die.
Publiek: OK.
Dus die tags uit de slash?
>> TOMAS REIMERS: Ja.
Heeft dat zin?
Hoe het is eigenlijk proberen om reikwijdte beperken.
ALLISON Buchholtz-AU: Ja.
Ik denk dat dat waarschijnlijk de makkelijkste manier om na te denken over het.
>> TOMAS REIMERS: Dus vonden we deze, en vonden we dit zowel geëvenaard speciale.
En dan vragen we, binnen deze jongens, wat is cool?
En binnen deze, deze is cool.
Binnen deze, niets is cool.
Dus dit is het enige label dat blijft.
>> ALLISON Buchholtz-AU: Overwegende koele is slechts binnen deze een-tags daar.
TOMAS REIMERS: Precies.
En wat is er bijzonder binnen die?
Niets.
Nu, wat ik zal zeggen is als er geen ruimte,
je vraagt ​​wat is cool en speciale-- of wat is mooi en bijzonder, toch?
Als je zegt .special.pretty, dat is hetzelfde als .pretty.special.
>> Want wat het verwijderen van de ruimte is vragen wordt, wanneer je .Speciale zeggen,
je vraagt, OK, welke speciaal zijn?
En dan van die, welke degenen zijn ook vrij,
die hetzelfde, grammaticaal, als vraag- wat is mooi,
en dan van die, wat is ook bijzonder?
Rechts?
Het is het verschil van wat is binnen wat is.
Publiek: OK.
TOMAS REIMERS: Ja.
Geweldig.
Dus met dat in het achterhoofd then--
>> ALLISON Buchholtz-AU: Ik denk dat onze laatste ding is (in fancy Brits accent)
de doos model.
>> TOMAS REIMERS: De box-- [grinnikt] Ik hou van de manier Allison zegt dat.
Zodat de doos model ding.
>> ALLISON Buchholtz-AU: Net hebben een doos, ik zal uw doos model.
TOMAS REIMERS: Dus laten we praten over dat.
Dus nu hebben we veel doorgebracht tijd aan het praten over selectors.
Door nu, jullie zijn waarschijnlijk, net als, meesters van selectors-- weet je,
hoe u de inhoud precies te selecteren dat u wilt manipuleren op uw scherm.
>> Dus nu de vraag is, hoe precies kunt u het manipuleren?
Dus ik denk dat de meest elementaire manier om na te denken over dat
is, nou ja, wat precies is een element in CSS?
We hebben veel tijd besteed over praten, wat is een tag,
of wat is de meest fundamentele representatie van een tag?
>> Een goede manier om na te denken over dat wil zeggen, wat vorm is zalm?
Welke vorm is, net als de zalm-gekleurde achtergrond?
>> Publiek: Het is een rechthoek.
>> TOMAS REIMERS: Het is een rechthoek, toch?
>> ALLISON Buchholtz-AU: Was niet een strikvraag.
[Lachen]
>> TOMAS REIMERS: Niet proberen om u zo laat misleiden jongens.
Dus we hebben deze rechthoek.
En de tag is een p, toch?
Dus dat geeft ons een goed overtuiging dat de paragraaf
wordt weergegeven als een rechthoek, althans in de geest van de browser, die
het is.
>> ALLISON Buchholtz-AU: Ik bedoel, browsers zijn meestal rechthoekig,
dus het is logisch.
>> TOMAS REIMERS: Het idee is hier dat alle labels in CSS
worden weergegeven als een rechthoek.
En elke rechthoek heeft vier onderdelen volgens CSS, OK?
Je hebt de eigenlijke inhoud.
Dat is waar de tekst ligt.
>> ALLISON Buchholtz-AU: Misschien uw foto.
>> TOMAS REIMERS: Ja.
Je hebt padding, dat is gewoon een soort van witte ruimte.
Dan heb je een grens.
En dan heb je marge, die is witte ruimte buiten dat.
Dus dat heeft geen zin voor iedereen, dus we zijn
gaan praten over die voor een tweede.
Dus hier, wat we gaan doen is gaan we een aantal divs maken, OK?
Excuseer me terwijl Ik--
>> ALLISON Buchholtz-AU: Ik voel me als we moeten een schattige foto in te zetten.
>> TOMAS REIMERS: We zeker zou moeten.
>> ALLISON Buchholtz-AU: Ik voel me net als iedereen
zouden kunnen profiteren van een leuke foto, is alles.
>> TOMAS REIMERS: Kunnen we allemaal profiteren van a--
>> Publiek: Ja, zeker.
TOMAS REIMERS: OK, cool.
Dus moeten we een schattig zetten foto in ergens.
ALLISON Buchholtz-AU: Ik voel me als een schattige konijntje kan nuttig zijn op dit moment.
TOMAS REIMERS: Tuurlijk.
ALLISON Buchholtz-AU: Einde van de week.
Hebben iets adorab--
>> TOMAS REIMERS: Hoe periode een kitten?
>> ALLISON Buchholtz-AU: Een kitten werkt, ook.
>> TOMAS REIMERS: Cool, omdat er is een site voor die.
Het heet PlaceKitten.
ALLISON Buchholtz-AU: Dat is geweldig.
TOMAS REIMERS: Ja.
ALLISON Buchholtz-AU: Net voor, zoals, placeholder beelden in uw website.
TOMAS REIMERS: Mm-hm.
Er is ook PlacePuppy.
En er is PlaceBacon.
>> ALLISON Buchholtz-AU: PlaceBacon?
Echt waar?
>> TOMAS REIMERS: Oh, we doen niet hebben toegang tot internet hier.
>> ALLISON Buchholtz-AU: [kreunt]
Tragisch.
TOMAS REIMERS: Anders Ik wil je laten zien kerels
hoe om afbeeldingen in uw website te plaatsen.
We gaan proberen om dit te krijgen werken voordat we moeten gaan.
Maar voor nu, we zijn gewoon gaan in kleuren praten dan.
Wij willen foto's van kittens-- zetten
>> ALLISON Buchholtz-AU: We deden.
>> TOMAS REIMERS: --de internet's naar beneden voor het moment zijn.
Dus hebben we twee divs, en we zijn gaan ze twee ids te geven.
We gaan noemen "Eerste" en "tweede."
Dus id = "eerste."
En we gaan ze twee kleuren te geven.
Dus hoe kunnen we iets te kiezen met een id van de "eerste"?
ALLISON Buchholtz-AU: Dot of hash?
Publiek: Sharp.
TOMAS REIMERS: Sharp, perfect.
Sharp, hash, wat we--
>> ALLISON Buchholtz-AU: Veel dingen te noemen.
>> TOMAS REIMERS: OK.
We gaan om zich te vestigen op de hashtag, en dat is wat we gaan om te gaan met.
OK?
>> ALLISON Buchholtz-AU: Hashtag.
>> TOMAS REIMERS: Dus hashtag eerste.
>> ALLISON Buchholtz-AU: So u kunt tweet de seminar--
hashtag CSS, hashtag cool.
TOMAS REIMERS: Hashtag Awesomeness.
ALLISON Buchholtz-AU: Hashtag Awesomeness, ja.
TOMAS REIMERS: OK.
Dus we hebben "eerste" en "tweede."
Dus eerst, we gaan hebben een achtergrond kleur van rood.
ALLISON Buchholtz-AU: Uh, dikke darm.
TOMAS REIMERS: Yup.
ALLISON Buchholtz-AU: Ik zal uw spot-checker zijn.
TOMAS REIMERS: Allison's got me.
Background-color van blue--
>> TOMAS REIMERS: Paars!
>> TOMAS REIMERS: Paars.
ALLISON Buchholtz-AU: Ja.
Paarse mijn favoriete kleur, en we hebben het nog niet gebruikt.
>> TOMAS REIMERS: Violet.
ALLISON Buchholtz-AU: Violet.
Dat werkt.
>> TOMAS REIMERS: Dus we zijn zullen twee divs hebben.
Ze gaan helemaal leeg te zijn.
We moeten waarschijnlijk wat tekst.
Dus "eerste" gaat worden "HELLO".
En de "tweede" zal say--
>> ALLISON Buchholtz-AU: Goodbye.
>> Publiek: - "WERELD."
Hallo, tot ziens.
ALLISON Buchholtz-AU: Ik zag hen in onderling overleg de andere week.
TOMAS REIMERS: The Beatles?
ALLISON Buchholtz-AU: Voor reals.
Ze zijn niet zo geweldig.
Ik hou er niet van.
>> TOMAS REIMERS: Wij hebben "HELLO" en "tot ziens."
En nogmaals, CSS is gewoon geweldig, omdat het erkent onze kleuren.
Niet nodig om nog bang te zijn dat ze bestaan.
Zij doen.
>> ALLISON Buchholtz-AU: Ze bestaan.
>> TOMAS REIMERS: Dus CSS Ik denk dat heeft 255 woorden om te praten over de kleur.
Als je maar kunt bedenken van een kleur buiten die 255, als, zal ik onder de indruk.
ALLISON Buchholtz-AU: Ja.
Ik denk dat jullie kunnen hebben kom gewoon in direct na.
>> TOMAS REIMERS: Dus hier, je zult zien hebben we twee dozen
recht op de top van elkaar, toch?
Hallo en tot ziens.
>> ALLISON Buchholtz-AU: Er is geen ruimte tussen.
Ze zijn gewoon smooshed bovenop elkaar.
>> TOMAS REIMERS: Dus het eerste wat Ik denk dat we moeten praten over
is laten we say-- ook ja.
Dus CSS staat voor hen als een soort dozen.
En zoals dozen, ze content.
En de inhoud is op dit moment een soort van de HELLO of de GOODBYE en dat is het.
OK?
>> Dus een van de eerste dingen die je kan doen is dat je kunt padding toevoegen.
Padding zegt hoeveel ruimte het verlaten aan elke kant.
Dus laten we zeggen dat ik wil zeggen 10 pixels aan elke kant.
En ik zal ontleden, dat in een tweede.
ALLISON Buchholtz-AU: Al deze dingen hier
gaan zijn meestal in pixels voor de rest van het seminar.
Je zult zien dat het heeft wat ruimte er omheen, toch?
Dus wat je hier niet te zien is dat er deze onzichtbare soort padding
aan elke kant, die zegt, als, OK, je hebt je doos content--
>> ALLISON Buchholtz-AU: Wilt u om gewoon trek de te inspecteren element?
>> TOMAS REIMERS: Ja, dat is een goed idee.
ALLISON Buchholtz-AU: Ook vind ik dat het inspecteren element is een goede manier
om erachter te komen of er iets gaande verkeerde, iets onverwachts gebeurt,
inspecteren van de tags en zien wat het is net als overschreven is behulpzaam.
>> TOMAS REIMERS: Dus ik ben niet zeker als jullie deze kleur kunt zien.
Kunt u?
Je zult dit padding zien op het soort rand.
En dan zie je de werkelijke gehalte in het blauw, toch?
Dus dat is het zeer basisprincipes van het vak model.
Je hebt content.
Dan heb je padding.
>> Publiek: Waarom heb je niet alleen Gebruik de doos in the--
>> ALLISON Buchholtz-AU: Right.
Want het is gewoon te selecteren het element nu.
>> TOMAS REIMERS: Yup.
Andere dingen.
Dus laten we praten over dat padding opdracht voor een tweede.
Dus in CSS, metingen zou een unit.
Dus eerst moet je het bedrag.
Dus in dit geval, hebben we gezegd 10.
En dan de volgende we hebben gezegd is pixels, px.
Andere die u zou kunnen hebben zijn dingen als centimeters, inches.
Je kunt dingen doen, zoals, wat is 10 centimeter?
En het gaat belachelijk.
>> ALLISON Buchholtz-AU: Oh, jongen.
>> Publiek: Whoa.
>> TOMAS en Allison: Ja.
TOMAS REIMERS: Dus dat is alles padding.
Ik ga terug naar pixels.
>> ALLISON Buchholtz-AU: Pixels neigen te zijn, zoals de standaard.
Als je kijkt naar een heleboel websites, ze meestal werken in pixels.
TOMAS REIMERS: Dus je gaat om te zien ofwel pixels-- de anderen je zien
is em, dat is een em is gelijk aan de hoogte van het lettertype
die u momenteel gebruikt.
>> ALLISON Buchholtz-AU: Mm.
TOMAS REIMERS: Het is een goede manier om te zeggen, als, ik wil zo veel ruimte als mijn lettertype
is het nemen.
ALLISON Buchholtz-AU: Wist niet dat.
Je leert elke dag iets nieuws.
TOMAS REIMERS: Er zijn een Veel metingen in CS.
Ik stel voor dat je ze opzoeken.
Voor al uw gevallen, denk ik pixels moet voldoende zijn.
En ze zijn ook wat je gaat om te zien
In de meeste voorbeelden online gedaan.
Dus zullen we het bij laten pixels.
>> U kunt ook, ik moet dus say-- padding sets alle vullingen.
U kunt ook iets doen als "Padding-top" om gewoon set--
ALLISON Buchholtz-AU: Misschien we zullen onze "HELLO" terug te krijgen.
TOMAS REIMERS: --to stel gewoon de padding op de bovenkant en niets anders.
Dus de vier opdrachten zijn padding-top, padding-bottom, padding-links,
en padding-right.
>> ALLISON Buchholtz-AU: Net als je zou verwachten van een doos.
>> TOMAS REIMERS: Ja.
Daar niets te gek.
Heeft dat zin?
Dat is padding.
Ik ga helemaal klaar de paddings terug naar 10.
En dan ga ik om verder te gaan naar de grens.
>> Dus wat grens ligt is grens is een raar commando.
Het duurt een soort van drie dingen tegelijk.
Dus de eerste is hoe groot je wilt dat het is als een meting.
Nogmaals, ik ben alleen met behulp van pixels.
En het laatste wat ik moet toevoegen aan de metingen
is het enige dat niet een eenheid nodig is 0.
Het is eigenlijk onjuist geven 0 een eenheid,
want 0 0 is heel centimeter, pixels, centimeters, wat dan ook.
Het allemaal betekent gewoon 0, toch?
Dus eerst je het de meting.
>> Dan geef je de stijl.
Dus ik ga zeggen "vast."
En we praten over wat dat betekent.
En dan tot slot, het geeft je een kleur.
Dus ik ga zeggen "zwart."
En dit zijn allemaal dingen die we hebben nu eerder gezien, behalve voor stijl,
maar we praten over dat.
Dus jullie hebben metingen gezien, en je hebt gezien kleuren.
En wat er gebeurt is dat we dit te krijgen mooie zwarte rand er omheen, toch?
Jullie zien hoe we dat deden?
>> Publiek: Ja.
>> TOMAS REIMERS: Cool.
Dus wat is dat?
Dus in de eerste plaats, het is één pixel.
Dat is vanzelfsprekend genoeg, toch?
Zoals, het is één pixel dik.
Of het zou één pixel zijn, maar ik ben ingezoomd, dus het is een beetje meer
dan dat.
>> ALLISON Buchholtz-AU: En we hebben deze belachelijke resolutie TV.
>> TOMAS REIMERS: Ja.
Je kunt het groter maken, kleiner, wat dan ook.
Dus hier is een twee-pixel grens.
Je zult zien dat het twee keer zo dik.
Volgende wat je hebt is de kleur.
Dat is niet interessant.
Ik ben niet van plan om te praten over dat, echt.
>> ALLISON Buchholtz-AU: Maar de stijl misschien net een beetje interessant.
>> TOMAS REIMERS: Ja.
Dus stijl, zijn er weinig degenen dat ik vaak zie gebruikt.
Eerst een solide, naast iemands gestippelde, en de laatste is onderbroken.
En hier is bezaaid.
Je zult zien dat ze een bos van stippen, toch?
Een goede manier om een ​​soort krijgt een mooie border gaan, streepjes zijn ook vrij populair.
>> ALLISON Buchholtz-AU: En dan natuurlijk, ik ben
zeker dat er genoeg andere stijlen die je kunt krijgen.
En we hebben een geweldige set van links aan het einde voor jullie
naar soort inzage en kijk naar meer coole CSS.
>> TOMAS REIMERS: En dan het laatste wat, we zijn
gaan praten over de doos modellen echt snel.
Oh, en dan de grens, precies zoals het opvullen,
heb je ook dingen als -border links, border-right, border-top,
border-bottom, die u toelaten te krijgen op een bepaalde grens.
Dus hier is gewoon de grens links-gedefinieerd.
Is dat zinvol?
>> ALLISON Buchholtz-AU: Het is een coole manier om dingen te benadrukken of voeg
lijnen tussen de verschillende elementen.
TOMAS REIMERS: Absoluut.
Dus dat is onze grens.
En de laatste iemands marge.
Zoals padding marge's behalve dat het niet within--
ALLISON Buchholtz-AU: Het is niet rond uw element
maar eigenlijk rond de gehele doos die we al zien.
>> TOMAS REIMERS: Ja.
Allison zei dat het perfect.
Het is niet, zoals, in uw element, is het rond de hele doos.
Dat betekent dat zaken als achtergrond niet van toepassing zijn.
En het eigenlijk zegt, als, ik wil niets
in deze veel ruimte voor mij.
Dus als hier hebben we een marge van 10 pixels.
Dus niets binnen 10 pixels naast me zou moeten zijn.
Dat is een soort van haar ruimte, maar een soort van niet.
Dus dat is het zeer basisprincipes van het vak model.
Heeft dat zin?
Cool, cool.
ALLISON Buchholtz-AU: Awesome.
Dus nu denk ik dat we gewoon hebben onze koele middelen
dat we jullie zullen nemen door zeer snel.
En we zullen goed actually--, hebben we nog internet?
>> TOMAS REIMERS: Let's kijken of ik kan openen up--
laat me zien als ik kan internet snel
terwijl Allison praat over iets Allison wil praten.
ALLISON Buchholtz-AU: Dus basically-- ik niet
weet wat ik kan zeggen op dit moment.
Maar dit zijn enkele echt goede middelen.
Dit zijn degenen die Tomas en ik heb gebruikt
en dat we eigenlijk gebruikt prep voor.
W3Schools is er een die je jongens moeten eerder hebben gezien.
Wij raden het voor een heleboel dingen met CSS.
Ik weet dat ik beveel het aan mijn afdeling de hele tijd.
>> Een van de grote dingen is dat het kunt u soort knoeien met CSS
en zie de veranderingen direct in deze
als, dubbel-venster weer te geven die het heeft.
Dus je hoeft geen zorgen te maken over het opzetten van uw eigen webpagina,
of het opzetten van vhost in uw lokale toestel en lokale host,
en het krijgen van al die dingen werken.
Het is ingebed rechts op de pagina.
>> En het heeft deze kleine lessen die je kunt
gaan door om te leren meer over selectors,
of leren over het manipuleren van uw lettertype, of een achtergrond of een afbeelding.
En heb je deze onmiddellijke resultaten die je
hoeft niet aan een doen andere prep werk voor.
Dus ik hou W3Schools.
Het is geweldig.
Werkt het?
>> TOMAS REIMERS: Ja.
Nee, dat is het niet.
Wilt u mij om te proberen en mijn computer opnieuw opstarten?
Of willen we to--
>> ALLISON Buchholtz-AU: Ik bedoel, goed, dit zal ook online zijn.
Alle dia's zullen online zijn.
Dus ik beveel deze doen.
>> Dit is geweldig als gewoon als een spiekbriefje.
Het is gewoon alle basis commando's die je hebt.
Het is geweldig als je voor het eerst bent beginnen uw website.
Want misschien je dat niet doet willen krijgen in alle
de echte Nitty Gritty ontwerp-heavy stuff.
Je hoeft alleen maar te formatteren op een manier dat soort zinvol en wil
doen voor het moment.
En als je echt wilt om erin te komen, ik weet
Dit is, zoals een van Tomas 'favoriet gevonden.
We waren te gebruiken om prep, en het is geweldig.
Het is met de ontwikkelaar van Mozilla.
>> TOMAS REIMERS: Dus Mozilla zijn de mensen die Firefox te maken.
En het is gewoon hun eigen ontwikkelaars referentie, dat vind ik geweldig.
En het heeft een prachtige lijst van middelen.
Dus we have--
>> ALLISON Buchholtz-AU: En dan de laatste noot is
wanneer je probeert te het ontwerp van uw website,
laten zich inspireren door de dingen dat je denkt dat ze mooi.
Inspecteren van het element, inspecteren van de broncode
kan zijn super behulpzaam voor het proberen te achterhalen
hoe u uw eigen website te stylen.
>> Vaak voel ik me als de beste Zo naast experimenten,
is gewoon om naar te kijken dingen die mooi zijn.
Ik vind het echt moeilijk om gewoon soort ontwerpen dingen op je eigen,
vooral in het begin.
Dus kijk op websites dat u genieten van kijken naar.
Erachter te komen wat maakt ze een beroep op u.
En dan voel je vrij om proberen en repliceren dat.
>> TOMAS REIMERS: Right.
Zelfs zoals websites als dit, kunt u zien
er is zeker een div op de top.
En dan heb je nog een div binnen hier, dat is CSS Awesomeness.
En dan heb je een heleboel links hier aanmelden.
Als je echt alleen maar te inspecteren elementen, kunt u sorteren van
beginnen om te zien wat te doen websites eruit, en hoe kan ik
opnieuw dat als ik wilde.
Heeft dat zin?
Dus we hebben maar drie minuten over.
Dus vragen?
Een van hen?
Ja.
>> Publiek: voor de kleur rechthoek, hoe zou je
have-- als je niet wilt dat het gaan over de hele pagina, kon
je hebt gemaakt naar de overkant alleen de helft van de pagina of alleen de tekst?
>> TOMAS REIMERS: Ja, absoluut.
Dus laat me zien eigenlijk.
Ik heb twee ideeën.
Dus eerst en vooral, kan ook gebruik maken van procenten.
>> Publiek: Echt waar?
>> ALLISON Buchholtz-AU: Dus iets op te zoeken is relatieve positionering.
Het is iets dat we geen tijd om in hebben,
maar het is iets wat ik zeker raden jullie het uitchecken.
>> TOMAS REIMERS: Dus procenten.
En zie hoe we het slechts 50% van de breedte?
ALLISON Buchholtz-AU: Als u eigenlijk weten het aantal pixels,
kunt u preciezer op die manier.
U kunt knoeien met het.
Maar 50%.
Als we onze browser resize, het zou het kleiner maken.
>> TOMAS REIMERS: Nou, het is in principe 50% op dit moment, denk ik.
Het is 50%, en vervolgens de marge toegevoegd dat.
CSS heeft veel eigenaardigheden.
Dus nu is dit 50% van de paginabreedte.
Maar vergeet niet dat je 10 pixels genomen off van elke kant.
Dus als je te verplaatsen, dat tegen de linkerkant van de browser,
dan zou het eruit zien als 50%.
Nogmaals, zoals ik al zei, CSS kan zijn veel gok-en-check.
Zoals, je denkt dat iets is gaat gedragen op een manier,
maar het gedraagt ​​zich een totaal andere manier.
>> ALLISON Buchholtz-AU: En krijg je alleen maar slimmer,
en krijg je alleen maar een betere intuïtie voor het als je beweegt langs.
>> TOMAS REIMERS: En het wordt erger en erger.
Dus het is eigenlijk gewoon een race.
>> ALLISON Buchholtz-AU: Dat is super bemoedigend.
We willen dat ze graag CSS.
>> TOMAS REIMERS: CSS is geweldig.
Vergeet niet dat.
Andere vragen?
>> ALLISON Buchholtz-AU: Het één ding.
Nog iets anders?
Cool.
>> TOMAS REIMERS: Awesome.
>> ALLISON Buchholtz-AU: Nou, als je jongens vragen later,
we zijn altijd beschikbaar zoals gewoonlijk.
U zult waarschijnlijk een aantal te zien van ons voor afstudeeropdrachten
en zeker bij de hackathon.
>> TOMAS REIMERS: Absoluut.
En op de beurs.
>> ALLISON Buchholtz-AU: En op de beurs.
Oh.
>> TOMAS REIMERS: Kijk uit naar het zien van al uw awesome--
>> ALLISON Buchholtz-AU: We zullen zien al uw geweldige websites
dat mooi zal zijn.
TOMAS REIMERS: u kunt altijd te zien, net als de websites
die had, net als, goede CSS en dan als degenen die niet proberen om CSS te doen.
ALLISON Buchholtz-AU: Ook een ander ding, een ding om te kijken naar
is Bootstrapping.
Dus Bootstrap is geweldig.
>> TOMAS REIMERS: Google dat als u--
>> ALLISON Buchholtz-AU: Google het.
Het is geweldig.
U zult het geweldig vinden.
En nu dat je een basiskennis van CSS,
het zal veel meer zin te maken.
Geweldig.
Bedankt, jongens.
>> TOMAS REIMERS: Dank je wel.