>> [MUSIC JOC]
ALLISON BUCHHOLTZ-AU: Deci ne practic doar merge
pentru a vă oferi o trecere in revista CSS, pentru că știm
că nu a fost acoperit în toate secțiunile.
Și vrem cu adevărat să vă asigurați că ați baieti au acest instrument la dispoziția dumneavoastră,
deoarece are capacitatea de a face site-urile sa arate mult mai frumoasa.
>> Iar dacă sunteți construirea unui site web, atunci probabil că doriți să facă destul de.
Adică, nu trebuie să, dar aș sugera. [Râde]
Dacă doriți ca utilizatorii să-l folosească, s-ar putea doriți să-l un pic [neauzit] face.
Deci, vom încerca să vă dau doar unele instrumente de bază și înțelegerea,
astfel încât atunci când te duci afară și ești cercetarea lucruri despre CSS,
nu e finaliza păsărească, ca CSS uneori să fie.
>> TOMAS REIMERS: Da.
Allison a spus destul de bine.
Deci, cred ca primul lucru pe care ar trebui să înceapă cu este ceea ce este CSS?
Deci, CSS este minunat.
CSS--
>> ALLISON BUCHHOLTZ-AU: E Numele seminarului nostru.
>> TOMAS REIMERS: Da.
Este foarte important ca înțelegeți că de atunci.
Dacă luați doar departe unul lucru, este că, dacă CSS minunat.
Doi este CSS vine de la Cascading Style Sheets.
Deci, la miezul ei, CSS este o foaie de stil, ceea ce înseamnă
vă permite să stil o pagină web.
Și apoi ce înseamnă că, este o modalitate de a adăuga stil la site-uri web.
Deci, prin stil, ne referim tot că nu e structural--
așa lucruri cum ar fi culori, fundal imagini, frontiere, cum ar fi, umplutură,
marjele.
Vom vorbi despre ceea ce tot ceea ce înseamnă într-un pic.
>> Așa că tocmai am mers mai departe și deschis atât a celor în gedit.
Deci, aceasta este index.html.
Și acest lucru este main.css.
Deci, main.css nu are nimic.
ALLISON BUCHHOLTZ-AU: Nu stil până acum.
TOMAS REIMERS: Niciunul.
Și, după cum veți vedea, este un site cu adevărat urât.
ALLISON BUCHHOLTZ-AU: E pur și simplu.
TOMAS REIMERS: Da.
Da, nu e urât, e doar minimalist.
Și apoi aici avem index.html.
Și astfel pentru o rapidă recapitulare de HTML, Allison,
Vrei să vorbim doar despre pagina?
>> ALLISON BUCHHOLTZ-AU: Da.
Deci evident, avem HTML nostru tag-ul, care tocmai nume fișier HTML.
Avem antet aici, cu CSS Măreția, which-- dacă te duci înapoi.
Unde este aia?
>> TOMAS REIMERS: Oh.
Da, puteți vedea.
ALLISON BUCHHOLTZ-AU: Și observați antetul
este acest antet filă chiar aici.
Și apoi "Bună ziua, lume!" este textul pe care tocmai am
afișarea pe internet pagină, care este-- du-te înapoi.
Înapoi.
Care este doar în corpul nostru here-- textul simplu.
De asemenea, un lucru la observa, dacă te uiți aici,
Tomas pornit în sus acestea două din diapozitiv nostru.
Deci, atâta timp cât aveți toate trei dintre acestea, ești bine.
Ele pot fi în orice ordine doresc.
Ce este cel mai important este doar faptul că Ai fiecare dintre aceste trei lucruri.
>> TOMAS REIMERS: cool.
Adăugați un tip doc?
ALLISON BUCHHOLTZ-AU: Da.
TOMAS REIMERS: Da.
Se răcește.
ALLISON BUCHHOLTZ-AU: Aparent, microfoane mele nu mă plac.
TOMAS REIMERS: Oh, să ne dea o secundă doar în timp ce Allison trece pe microfon ei.
Deci, da.
Deci avem pagina noastră principală.
E un fel de unstyled.
Nu avem prea mult.
Avem doar practic text.
Avem foaia de stil.
Avem titlul.
Deci, doar goale, dezosată Componente face un site web.
>> Deci de acolo, hai vorbesc despre ceea ce este CSS
și ceea ce se pare ca și toate astea.
Deci, pentru that--
ALLISON BUCHHOLTZ-AU: Înapoi la diapozitivele.
TOMAS REIMERS: Înapoi la slide-uri.
Și Allison poate prelua.
>> ALLISON BUCHHOLTZ-AU: Woo.
OK.
Deci, în fișierul CSS, ai de gând să aibă
o mulțime de aceste lucruri numite selectori.
Aceasta va fi doar pe bază de fișierul CSS.
E doar de gând să fie o mulțime de aceste.
Deci, selector.
Aceasta este doar anatomie generală.
Vom trece prin exemple, pentru că dacă nu te voi
privit secțiunea meu, mă simt ca lucruri în abstract
Nu prea are sens.
Întotdeauna ajută pentru a vedea exemple.
>> Deci avem ceva de selectare.
Asta va fi ceva identificator pentru ceea ce ne dorim stilul de a aplica pentru.
Și atunci putem avea orice set de reguli și valori.
Deci, selectoare pe care le-ar putea vedea ar putea fi ceva de genul corp,
sau punctul cu P, sau antet, sau orice altceva,
ce vrei etichetele HTML pentru a fi.
>> Deci, în acest caz, avem corp.
Și avem niște reguli, care aceasta corespunde
la ce stilul tau este valabilă pentru.
Deci, în acest caz, ne-am culoarea de fundal și greutate font.
Deci, acest lucru se va schimba fondul de nimic
în orice etichetă organism de fișier nostru HTML.
Și o să dea ea această valoare albastru deschis.
>> Deci va face fundal albastru deschis.
Și apoi ceva în corp este va avea o greutate caractere îngroșate.
Deci, este doar de gând să bold tot textul nostru.
Și acesta este doar un selector.
Dar ai putea avea foarte multe dintre acestea.
Și, după cum vom arăta la mai târziu, un pic mai mult în modul în care
că lucrările și mai multe exemple acolo.
Tot ce doriți să adăugați?
>> TOMAS REIMERS: Nu.
Allison prins.
Noi doar de gând să taie unui exemplu aici pe exemplul site-ul nostru.
Așa că haideți să ia de fapt acest lucru.
E perfect.
Așa că Mă duc pentru a copia și lipi acest drept în fișierul nostru main.css.
Și am de gând să-l salveze.
Și atunci vom rula.
Nota Deci parte, una dintre cele mai cele mai multe lucruri frustrant
este dacă nu salvați un fișier, și apoi, cum ar fi, reîncărcați pagina,
și cum ar fi, de ce nu este schimbarea se întâmplă?
Se întâmplă.
Deci, aici am văzut că ne-am făcut nostru site-ul un fundal albastru deschis
și un text îngroșat.
>> Ar trebui, de asemenea, menționez, dacă baieti Aveti intrebari despre nimic
facem, vă rugăm libertatea de a ne opri și ne cer.
Suntem total dispus in campul întrebări.
>> ALLISON BUCHHOLTZ-AU: Evident, cu CSS, totul se bazează pe sine.
Deci, dacă un lucru nu face sens acum, ne-am
Nu vreau ca să te incarca mai târziu.
>> TOMAS REIMERS: Deci, haideți să fel de diseca acest lucru.
Deci, nu doriți să începeți cu selectorul de aici?
>> ALLISON BUCHHOLTZ-AU: Da.
După cum spuneam mai înainte, corpul este doar selectorul de aici.
Deci, dacă ne întoarcem pe la ah noastre index--.
>> TOMAS REIMERS: care am închis.
Dă-mi o secundă.
Deci fișier, Deschidere, index.html.
ALLISON BUCHHOLTZ-AU: cool.
Deci, dacă observați aici, ne-am au aceste etichete corp, nu?
Deci, selectorul doar corespunde Tag-urile pe care le spui.
Deci, corp chiar aici.
Deci, ceea ce spui este everything-- ne putem întoarce?
Aș vrea să pot doar ca atingeți ecranul.
Ar fi mult mai rece.
>> Deci, nimic în cele tag-uri corp, pe care le-am vazut
a fost doar, cum ar fi, textul, și corpul în general
se referă la, cum ar fi, de fond.
Dacă doriți vreodată să schimba fundalul,
care va fi într-o etichetă corp.
Doar are aceste reguli aplicate acestora.
>> Deci, dacă ar fi să mergem la index.html si-- de fapt,
putem avea ceva in afara corpului?
Dacă am avea, cum ar fi, un subsol sau ceva, nu s-ar aplica la acest lucru.
Dar nimic în aceste tag-uri organism se întâmplă
a fi afectate de acest organism selector care le-am făcut.
Deci, dacă ar fi să tastați altceva there--
>> TOMAS REIMERS: Să conduci asta acasă.
Deci, dacă am avut o div-- astfel încât este doar un alt tag poti avea.
Am de gând să-l închidă.
Sau hai să facem acest lucru un paragraf.
Deci, p reprezintă punctul.
Și în acest alineat.
Și apoi spun: "Acesta este textul."
Se răcește.
Și apoi am făcut această regulă se aplică la un paragraf în loc de organism.
Veți vedea cum se aplică numai pentru paragraful nou format, dreapta,
nu totul.
Asta face sens?
>> ALLISON BUCHHOLTZ-AU: Deci, aceasta este tot corpul,
dar acum selector nostru doar corespunde paragraf.
Deci, ne-am avea îndrăzneț și albastru pentru acest alineat specific,
pentru că acesta este singurul lucru care este închis în tag-ul p.
>> TOMAS REIMERS: Are vreun sens fel de modul în care lucrurile îngloba alte lucruri?
ALLISON BUCHHOLTZ-AU: De asemenea, doar să spun, cum ar fi, unul dintre cele mai bune moduri
pentru a obține într-adevăr confortabil cu CSS este de a face doar lucruri de genul acesta,
doar l încercați.
Este foarte simplu să tastați ceva out, lovit Refresh, și să vedem ce se întâmplă.
Și, ca și cu cele mai multe CS, experimentare poate de multe ori
duce la o mult mai bine înțelegere intuitivă.
Chiar mai mult decât ne doar, cum ar fi, să vorbesc cu tine.
>> TOMAS REIMERS: Absolut 100% de acord cu privire la acest punct.
Deci, dacă ne întoarcem la asta, să începem disecarea exact ceea ce aceste două fac.
Deci avem două reguli în acest sens.
Deci, primul este culoarea de fundal.
Și veți vedea că l-am stabilit egală cu o valoare, albastru deschis.
>> Deci, în CSS, CSS este un fel de foarte largi cu privire la modul în care
ai voie să definească culoare.
Deci, aveți posibilitatea să le defini prin nume.
Puteți face, de asemenea, ceva de genul "roșu".
Și apoi, dacă ne întoarcem la acest lucru, veți vedea că fondul este de culoare roșie.
Puteți obține, de asemenea really-- eu te gândești poate fi destul de creativ cu acest lucru,
nu poți?
>> ALLISON BUCHHOLTZ-AU: I cred că puteți folosi hex.
Nu poți?
>> TOMAS REIMERS: Da.
Astfel, puteți folosi hex.
Dar mă gândesc nume-înțelept.
Nu sunt acolo?
ALLISON BUCHHOLTZ-AU: Puteți face destul de puține.
Destul de mult ca cele mai multe culori pe care le poate name-- cum ar fi, cred că somonul este una.
>> TOMAS REIMERS: Vom încerca somon.
ALLISON BUCHHOLTZ-AU: I cred Chartreuse este acolo.
TOMAS REIMERS: Da.
Vezi?
Deci, puteți obține destul de creativ.
>> ALLISON BUCHHOLTZ-AU: Tu ar putea primi destul de creativ.
Ca, dacă vă puteți gândi Nume culoare, e probabil acolo.
Dacă doriți cu adevărat bine detaliu, poti sa te duci hex.
>> TOMAS REIMERS: Da.
Deci, hexazecimal.
În cazul în care voi aminti asta înapoi din vechiul PSET imagine Recuperare,
voi trebuit să se confrunte cu aceste valori hex.
Și un fel de recapitulare a ceea ce este că, hex are trei valori stocate în acesta.
Deci, este în grupe de câte două trepte.
Primele două reprezintă valoarea roșu.
Al doilea reprezintă valoarea verde.
Iar ultima este albastru?
>> Deci, FF se întâmplă pentru a reprezenta un hexazecimal 255.
Deci, aveți 255 rosu, 255 verde, și 0 pentru albastru.
Și valori cuprinse între 0 și 255.
>> Audiența: Corect.
Deci, în esență, am putea căuta pe internet pentru orice culoare dorim,
și de a identifica de fapt cunoscut culoare spectru combo,
iar apoi am putea pune in?
ALLISON BUCHHOLTZ-AU: Exact.
Deci, ai destul de mult control complet peste culorile pe care doriți în CSS.
Vom vorbi despre imagini de fundal mai târziu?
Sau vrem să facem asta?
>> TOMAS REIMERS: Da.
Absolut.
Deci în primul rând, doar pentru a arăta că roșu și verde este galben.
Și dacă ai nevoie de ceva ajutor pentru a găsi aceasta,
poate Google ceva cum ar fi "selectorul de culoare."
ALLISON BUCHHOLTZ-AU: Oh, e așa de bine.
Îmi place Color Picker.
>> TOMAS REIMERS: colorpicker.com este un exemplu bun.
Și aici, veți vedea că aveți un complet selector de culoare Photoshop-like.
>> ALLISON BUCHHOLTZ-AU: Mm-hm.
De asemenea, lucrurile reci esti poate genera scheme de culori
astfel încât nu aveți, cum ar fi, ciocnindu culori.
TOMAS REIMERS: Și apoi aici e valoarea hex aici sus.
Astfel, puteți găsi întotdeauna on-line, practic, locuri pentru a obține valoarea hex de la.
Nu un fel de care tocmai, cum ar fi, noi a se vedea culorile lumii în număr.
E mai mult că vom merge on-line și pentru a găsi ceea ce culoare vrem,
și apoi să ia numărul de jos.
Pentru că este doar o foarte ușor mod de a face referire lucrurile în CS.
>> ALLISON BUCHHOLTZ-AU: Și apoi există also--
Am uitat numele exact al site-ului.
Dar cu siguranță, eu cred, ceva de la Adobe
care generează scheme de culori pentru tine, care este foarte cool, pentru că
definitely-- este uneori greu să dau seama,
oh, dacă vreau să folosesc această culoare, ceea ce ar putea fi un alt util
pentru a folosi în altă parte pe site-ul meu la, cum ar fi, face frumos și de coeziune.
>> TOMAS REIMERS: lui Allison vorbesc despre unul de Adobe Kuler numit, cred.
Este K-U-L-E-R.
ALLISON BUCHHOLTZ-AU: Cred că da.
Sunt destul de sigur că este.
>> TOMAS REIMERS: Preferatul meu are fost întotdeauna schemă de culori Designer.
>> ALLISON BUCHHOLTZ-AU: Ooh.
>> TOMAS REIMERS: Care este now--
>> ALLISON BUCHHOLTZ-AU: Ah, aceasta este frumos.
>> TOMAS REIMERS: Și tu se poate spune practic, cum ar fi,
Vreau trei culori unul lângă altul.
Și apoi să facem ceva frumos.
Și apoi puteți obține un exemplu de ce care ar putea arata.
Și apoi, dacă tu hover peste oricare dintre le, vă oferă valoarea hex.
>> Deci, doar ca o modalitate buna de a începe gândesc scheme de culori
sau ce culori într-un site web s-ar putea merge bine împreună.
Pentru că poate fi surprinzător nu la fel de ușor pentru a ridica cum crezi tu.
Și apoi un alt lucru rece Am găsit întotdeauna despre acest site
este dacă te-a lovit Exemple, va arată o site web exemplu
ar putea arata ca, folosind acest sistem de culori.
Oricum.
>> Înapoi la real CSS.
ALLISON BUCHHOLTZ-AU: Dar, evident, noi știu aceste referințe ar putea fi utile.
TOMAS REIMERS: Nu, cu siguranta poate fi de ajutor.
Deci, a doua regula, Allison?
>> ALLISON BUCHHOLTZ-AU: Da.
A doua regulă este doar corespunzătoare font noastre.
Deci, greutate font este doar un fel de-- astfel încât greutatea ar fi
fi dacă doriți doar, cum ar fi, normală sau, cum ar fi, fonturi mai subțiri,
sau în acest caz, cum ar fi, bold.
Am uitat.
Care este, dacă ai vrut it-- este acolo unul mai subțire decât, cum ar fi, normal?
TOMAS REIMERS: Eu nu fac de fapt știu dacă există un singur subtire.
ALLISON BUCHHOLTZ-AU: Am uitat.
Greutate, astfel font noi de obicei utilizați pentru îndrăzneț.
Dacă doriți să obțineți într-adevăr în aceasta, vom să-ți arăt.
W3Schools are toate diferite lucruri pe care le puteți face pentru fonturi.
Dar, practic, dacă vrei vreodată pentru a schimba ceva despre font,
este întotdeauna o să fie, cum ar fi, font-ceva.
Deci, va fi ca, font-family daca esti încercarea de a schimba tipul de actuale.
Va fi de tip font, dacă vrea să-l facă ca cursiv,
sau italice, sau fleacuri.
Sau chiar font-culoare, în cazul în care am vrut să schimbe asta.
>> TOMAS REIMERS: Da.
Astfel, puteți schimba asta.
Și un fel de doar pentru a recapitulare acum, astfel încât să puteți
vedea că avem selectorul aici.
Avem aceste acolade.
Și apoi avem reguli delimitate prin punct și virgulă.
Asta face sens?
Da?
Se răcește.
Deci, dacă aceasta este good--
>> ALLISON BUCHHOLTZ-AU: Back.
TOMAS REIMERS: Să vorbim în mod specific despre ce fel de selectori avem.
Pentru că acum ne-am fel de arătat doar etichete.
Dar voi putea vedea plauzibil.
Spuneți că ați avea două paragrafe pe o pagină și tu
vrea să fie în măsură să stil unul dar nu de alta,
nu vrei doar sa te limitezi să aibă de a utiliza diferite HTML real
tag-uri pentru a le da stiluri diferite.
>> Deci avem trei extinsă tipuri de selectoare.
ALLISON BUCHHOLTZ-AU: Da.
Deci avem tag-ul, care este ceea ce am vorbit despre chiar acum.
Deci, asta e un fel de organism sau p tău.
Și apoi ne-am clasa, care este când am defini în dosarul nostru CSS,
este întotdeauna o să fie dot, indiferent de vrei numele clasei a fi.
Și acest lucru se poate aplica la mai multe lucruri.
>> Spuneți că ați avea cinci alineatele și doi dintre cei trei
trebuie să fie aranjat la fel, v-ar aplica o clasă de ea.
Și acesta este doar modul în care o facem.
Vă vom da un exemplu de în cazul în care acest lucru arată de fapt în sus.
Dar dacă ai avea poate ceva etichetă p, după ce, ar trebui să scrie,
clasă este egal indiferent de clase doriți să aplicați la ea.
Deci, indiferent de selectoare de clasă pe care ne-o dorim să se aplice prezentul alineat specific,
am putea scrie la fel ca aceasta.
Desigur, cred că un exemplu este mult mai concret va face.
>> Celălalt avem este id, pe care vom nota
cu un hash, sau lira, sau hashtag.
TOMAS REIMERS: Octothorpe.
ALLISON BUCHHOLTZ-AU: Octothorpe.
Asta functioneaza, de asemenea.
Și asta ar trebui să fie într-adevăr unic.
Acestea ar trebui să se aplice numai un singur lucru pe pagina ta.
Deci, dacă asta e un anumit paragraf, sau unele element dintr-o listă, sau orice altceva,
acest lucru ar trebui să fie unic.
Și, în același mod în care ne-am spune, cum ar fi, class = "Class1 class2,"
acest lucru poate fi doar id de orice avem.
TOMAS REIMERS: Da.
Deci, hai sa vorbim cu siguranta despre exemple aici.
Și am de gând doar să se scufunde direct înapoi în codul.
Deci, să ne uităm la HTML noastre.
Și așa am chiar acum un paragraf.
Acest lucru este text.
Mă duc să modifice ea. "Aceasta este un text 1."
Și apoi vom au o "Acesta este un text 2."
>> ALLISON BUCHHOLTZ-AU: A doua una.
TOMAS REIMERS: Da.
Deci avem acum "Acesta este un text de 2", nu?
Și vom vedea că, dacă vom reîncărca pagina, ceea ce vom găsi
este vom find--
ALLISON BUCHHOLTZ-AU: Ooh.
TOMAS REIMERS: Da.
Vom găsi o "Aceasta este text 1 "și" Acesta este textul 2. "
>> ALLISON BUCHHOLTZ-AU: Și out minunat de culoare galbenă.
>> TOMAS REIMERS: Și veți vedea că selectorul nostru chiar acum,
care se aplică la p lui, sau punctele, afectează atât de ele,
pentru că ambele se întâlnesc condiția că sunt amândoi o etichetă p.
Asta are sens totală.
Deci întrebarea este, ei bine, ce dacă am vrut să obține doar unul?
Deci, exact ca Allison spunea, avem alte două moduri de a face asta.
Am de gând să încep cu id-ul.
>> ALLISON BUCHHOLTZ-AU: Să începem cu id-ul.
>> TOMAS REIMERS: Și ambele dintre acestea sunt atribute.
Deci, există atribute in HTML.
Și ceea ce sunt este ceva care să adăugați
în interiorul tag care este separat de numele tag-ul.
Deci, puteți avea mai multe atribute.
Da?
>> ALLISON BUCHHOLTZ-AU: Am fost doar de gând să spun, din exemplul de la PSET 7,
dacă oricare dintre voi încerca să se alinieze lucrurile la centru,
s-ar putea fi folosit "Text align = center."
Și ai observat, probabil, ar fi centrat
text sau bara de navigare.
Deci, asta e doar un atribut, de asemenea, care ar putea să fie familiarizat cu.
TOMAS REIMERS: Există o grămadă de atribute pe care le veți vedea.
Da.
Ca bun de referință pentru PSET 7.
Avem id.
Puteți avea, de asemenea, clasă, lucruri de genul asta.
O singură etichetă poate avea mai multe atribute.
Deci, incepand cu id-ul, să ne prefacem doresc să aibă un id de-- Nu știu.
Vom numi specială, pentru că acesta, suntem
de gând să facă îndrăzneț, și subliniază, și orice.
ALLISON BUCHHOLTZ-AU: E Va fi super-speciale.
TOMAS REIMERS: Deci asta o, avem id speciala.
Deci, modul de a selecta că, atunci, este în main.css, mai degrabă decât să aibă o etichetă p,
ce faci #special, bine?
Și selectează lucru cu id-ul special.
Are acest sens pentru toată lumea?
Audiența: Da.
TOMAS REIMERS: cool.
Deci, acum, dacă ne întoarcem, vom see-- Hopa.
Da.
Vom vedea că numai selectează cel cu id-ul special.
Da?
Sună rece.
Da.
>> Audiența: Poate ceva avea un atribut atât de clasă și un id?
>> TOMAS REIMERS: Da.
Audiența: OK.
Și apoi ce se întâmplă dacă, atunci da ea unele reguli în CSS acest conflict?
TOMAS REIMERS: Absolut.
Suntem cu siguranta vom pentru a vorbi despre asta.
Deci, exact ceea ce au fost obtinerea la, puteți avea, de asemenea, cursuri.
Așa că haideți să pretindem am avut trei paragrafe și I
a vrut să stilul primul doi, dar nu a treia.
Ei bine, în primul rând ideea ta ar putea fi, de asemenea, am ar putea da doar doua un id.
Dar nu poți, pentru că un id, exact ca Allison spunea,
trebuie să fie unic.
>> Deci, în loc de un id, ceea ce poate utiliza este de a putea utiliza o clasă.
Și o class-- ce permite să faci este spus în esență,
acest aparține ca parte a unui grup.
În acest caz, grupul nostru se numește speciale.
Și ce vom face atunci este vom say--, mai degrabă decât lira,
vom folosi punct.
OK?
Și observați că lira și punctul există doar în fișierul CSS,
nu în HTML.
ALLISON BUCHHOLTZ-AU: Da.
Distincție importantă.
>> TOMAS REIMERS: Am a avut atât de mult lupta,
pentru că am pus hash în HTML și apoi am simțit prost pentru o lungă perioadă de timp.
Vezi cum selectează atât de cei cu care clasă?
Se răcește.
>> Acum, lucrurile pot avea mai multe clase.
Să spun că am vrut să fac primul doi au un fond de culoare galbenă
iar următoarele două au o culoare font de albastru.
OK.
Nu știu cu adevărat de ce mi-ar vrei sa faci asta, dar eu pot.
>> ALLISON BUCHHOLTZ-AU: nu Might recomandat-o pentru site-ul tau.
Dar pentru scopurile noastre, va face.
>> TOMAS REIMERS: Nu este o schemă de culori bun.
ALLISON BUCHHOLTZ-AU: Ei bine, galben și albastru sunt culorile mele de liceu.
Nu știu, totuși.
TOMAS REIMERS: lui Allison mare școală a avut o schemă de culori mare.
[Râsete]
Deci, atunci ceea ce putem numi acest lucru este Să numim asta: deci avem Special
și avem destul.
Vă sugerez, pentru aceasta, să utilizați Numele mult mai descriptive.
ALLISON BUCHHOLTZ-AU: Da, aș face- numesc acest lucru, cum ar fi, galben sau albastru.
>> TOMAS REIMERS: Nu suntem a face într-adevăr un site web reală,
care este motivul pentru care noi nu facem asta.
Dar dacă de fapt a avut un site web reali,
ar putea avea, cum ar fi, antet articol, conținut articol, în primul rând cuvânt,
lucruri de genul asta, care permit să fie mult mai descriptiv.
Acestea sunt de fapt la fel ca variabile.
Acestea ar trebui să fie numit într-un mod în care puteți, like-- da, ca atare.
Perfect.
>> Deci, culoarea de fundal.
Și apoi vom say-- așa modalitate de a schimba culoarea este doar "culoare".
Și vom face albastru.
Asta e tare.
Deci, acum avem primele două au speciala.
O departe va au "class = destul de."
ALLISON BUCHHOLTZ-AU: Și atunci veți doriți să adăugați "destul de" la cea de mijloc.
TOMAS REIMERS: Da.
Și apoi a mijloc cea, pentru a adăuga "destul de" ceea ce se întâmplă
este, trebuie doar un spațiu.
Astfel, atributul de clasă este o listă separată, spațiu
a tuturor claselor care se aplică acea etichetă.
OK?
Nu e ca și cum aparține acesta a un fel de clasa speciala numita
", Spatiu special, destul de".
Ea aparține două classes-- specială și destul de.
Da?
Se răcește.
>> Și apoi dacă ne uităm la ce se întâmplă, suntem
vom vedea că în primul rând o are fond galben, text negru.
În al doilea rând Unu
>> ALLISON BUCHHOLTZ-AU: --has bold fond galben cu text albastru.
Și ultima noastră are doar Textul albastru pe care am atribuit-l.
>> TOMAS REIMERS: cool?
Cum selectoare de lucru?
Minunat.
>> ALLISON BUCHHOLTZ-AU: Nu vrem să vorbesc despre conflictul acum, atunci?
>> TOMAS REIMERS: Deci da.
Absolut.
Deci, ce se întâmplă dacă au un conflict, nu?
Să presupunem că prima stabilește ceva like--
ALLISON BUCHHOLTZ-AU: Poate acesta modifică fundal?
TOMAS REIMERS: Da.
Deci, vom face "destul de" schimba fundalul de somon.
ALLISON BUCHHOLTZ-AU: Ești doar cu toate marile culorile astăzi, Tomas.
TOMAS REIMERS: Da.
Pentru că am aflat că pot folosesc somon ca o culoare adevărat.
Așa că doar de gând să faci asta.
De asemenea, cred Sunset este o culoare adevărat.
Audiența: Apus de soare este o culoare adevărat?
ALLISON BUCHHOLTZ-AU: Hai să încercăm.
TOMAS REIMERS: După această demonstrație doar pentru că în cazul în care de oaie,
Nu vreau să fie depanare.
Deci, noi știm somon este o culoare adevărat.
Deci, orice presupuneri cu privire la ce se va întâmpla?
>> ALLISON BUCHHOLTZ-AU: Orice idee?
>> Audiența: [neauzit].
>> TOMAS REIMERS: Da.
Deci ai o exact dreapta.
Practic, este nevoie de Ultima regulă că a fost dat.
>> ALLISON BUCHHOLTZ-AU: Deci asta este în cazul în care va intra în vigoare în cascadă.
>> TOMAS REIMERS: Deci amintesc cum am a avut ca cascadă foi de stil?
Deci, prin asta, am un fel de medie că avem o grămadă de reguli
care se aplică pe partea de sus a reciproc, și ele pot, de asemenea, trece peste reciproc.
>> ALLISON BUCHHOLTZ-AU: Deci indiferent de la partea de jos
va suprascrie orice este în partea de sus.
Ai putea avea reguli care complet nega ceva înainte.
Acesta este, de asemenea, de ce vrei să fi Aveți grijă când ești styling,
astfel încât să nu creați reguli esti doar complet imperative.
>> TOMAS REIMERS: Sau poate te vreau să suprascrieți regulile.
>> ALLISON BUCHHOLTZ-AU: Sau poate faci.
Da.
>> TOMAS REIMERS: Simularea ai o clasă care se aplică la cele mai multe lucruri,
dar să spunem că doriți să schimbați culoarea de fundal pentru roșu și fontul
greutate la bold pentru cele mai multe lucruri, dar pentru unul,
vrei doar culoarea de fundal a fi de culoare roșie, dar vrei toate celelalte
proprietăți, ai putea face ceva ca "font-weight = normal",
ceea ce ar anula apoi că schimbările îndrăzneț.
Da?
Din nou, cel mai bun mod, cred Allison a spus că este doar practică.
>> ALLISON BUCHHOLTZ-AU: Experimentarea.
>> TOMAS REIMERS: Practice, practica, practică, și experiment.
Știu o mulțime de oameni care cred CSS este doar o mulțime de ghici-și check-
la sfârșitul zilei, unde dacă vrei sa faci something-- cum ar fi,
Ai o idee, dar încă, probabil, nevoie
să-l încercați să vă asigurați că Știi cum arată.
>> Audiența: Când aplici clase, mai mult de un
la același alineat sau secțiune, o face
indiferent de ceea ce poți comanda le introduceți în ghilimele?
>> TOMAS REIMERS: Nu, deloc.
>> ALLISON BUCHHOLTZ-AU: Ceea ce contează este comanda în termen de foaie de stil CSS.
Audiența: Puteți să repetați întrebarea?
TOMAS REIMERS: Oh.
ALLISON BUCHHOLTZ-AU: În clasă, atunci când dau clase
la ceva în HTML, nu contează ce ordine sunt in?
Nu contează ordinea.
Ceea ce contează este de ordinul a selectoare de clasă din cadrul CSS-ul,
în foaia de stil.
>> TOMAS REIMERS: bun sunet?
>> ALLISON BUCHHOLTZ-AU: Lovely.
>> TOMAS REIMERS: Și apoi vom continua sa--
ALLISON BUCHHOLTZ-AU: Ce avem viitor?
Am uitat.
Oh, noi trebuie doar exemple.
Dar am un fel de făcut celor.
Am făcut exemple pe zbor.
>> TOMAS REIMERS: Ajungem la combina selectorii curând.
>> ALLISON BUCHHOLTZ-AU: Oh, ajungem la combina selectoare.
TOMAS REIMERS: Deci unii Exemple este avem
# Lira dog--, sau hashtag, sau octothorpe, sau orice
doriți să apelați that-- ascuțite.
>> ALLISON BUCHHOLTZ-AU: câine Sharp.
>> TOMAS REIMERS: Atunci ai .pets.
Ceva are un id de câine, există doar un singur câine pe pagina.
Ceva are un id de pisică, nu există decât o pisică.
Pot exista multe animale de companie pe pagina.
De aceea am dat acea clase.
Aveți un exemplu de p.
Și apoi așa-unul din Ultima exemplu, care
este ceva ce nu am vorbit despre, este ceea ce se întâmplă atunci când le combinați.
Deci, p.pets.
>> Deci, pentru că, hai să ne întoarcem la cod și să introducă another-- da.
Deci, aici.
>> ALLISON BUCHHOLTZ-AU: I simt ca aceasta este really--
ca doar cauți prin exemple este într-adevăr modul de a învăța acest lucru.
Deci, asta e ceea ce facem.
>> TOMAS REIMERS: Deci să ne prefacem doar doriți să o selectați textul 2, nu?
Deci cu siguranta nu putem face asta cu un id.
Ei bine, am putea face asta cu un id, dar aceasta nu are un id.
Aș putea adăuga unul, dar hai sa pretindem că nu am vrut să adăugați un
sau are deja altceva.
Nu pot face asta cu asta.
Eticheta nu este cu siguranta unic, nu?
Și nici nu este clasa.
Dar puteți combina aceste lucruri.
Să spunem că am vrut să facem ceva care se aplică numai la lucruri care
au speciale de clasă și care au clasa destul de.
>> Deci, ce puteți face este în main.css, vă pot spune, hai șterge primul acest lucru.
Puteți combina aceste.
Astfel, puteți face .special.
Nu există spațiu.
Doar .special.pretty.
Ce înseamnă că este ceva care este atât de special și destul de.
Asta face sens?
Și dacă mergem aici, ceea ce veti vedea
este această regulă se aplică numai pentru în al doilea rând este de care are atât de cei.
Și tu poți face asta pentru o mulțime de lucruri.
Puteți say-- să prefac Am vrut doar
de a face lucruri care au clasa destul de și care sunt, de asemenea, o etichetă paragraf.
Deci, p.pretty.
Să presupunem că am avut ceva destul de pe corp tag.
OK?
Pot rula acest lucru și eu se poate vedea că este doar
O să se aplice lucruri care sunt punctele cu clasa destul de.
Și tu poți combina aceste, practic, cât mai multe, după cum doriți.
Așa că doar le puteți pune împreună.
Asta face sens?
ALLISON BUCHHOLTZ-AU: Deci acest tip de este mai util
când, Tomas spunea mai devreme, poate aveți un site foarte complicat,
și ai deja o mulțime a acestor reguli scrise,
și trebuie doar să combină două din înainte.
Ca loc de a scrie un întreg nou selector si o schimbare acolo,
puteti combina doar le în cazul în care se suprapune.
>> TOMAS REIMERS: Sau s-ar putea găsi out-- uneori
există o clasă care face culoarea fontului e ca albastru,
și nu există o altă clasă care face albastru fundal.
Și asta pur si simplu nu va funcționa.
Deci scrie un caz special, în cazul în care, like-- dar în cazul în care are atât, ceea ce ești
O să faceți este să ai de gând să fac asta această nuanță de albastru
iar aceasta o altă acest nuanță de albastru.
Chiar?
>> ALLISON BUCHHOLTZ-AU: Bun pentru acele tipuri de excepții.
TOMAS REIMERS: Deci, pentru a cred despre problemele
care ar putea apărea atunci când le combinați.
Se răcește.
Deci, înapoi la prezentarea noastră.
ALLISON BUCHHOLTZ-AU: Suntem aproape acolo.
TOMAS REIMERS: Și sa oprit de conectare.
ALLISON BUCHHOLTZ-AU: Oh, nu.
ALLISON BUCHHOLTZ-AU: CS la birou, internet se duce în jos.
Oh, ironia.
>> TOMAS REIMERS: Deci, din fericire, putem prezintă fără internet, cred,
pentru că avem toate diapozitivele aici.
Deci, hai sa vorbim despre relație de tag-uri.
ALLISON BUCHHOLTZ-AU: Corect.
Deci, doar un fel de a merge off de ceea ce a spus Tomas,
aceasta este doar un alt mod de a face acest lucru.
Deci avem niște mamă selector cu un selector copil.
Deci, în acest exemplu de aici, avem niște corp cu o navbar clasă, buton de clasă.
Ah.
>> TOMAS REIMERS: Oh, îmi pare rău.
>> ALLISON BUCHHOLTZ-AU: Și practic, ce înseamnă acest lucru
este selecta toți copiii, cum ar fi toate aceste tipuri de selectoare,
în acest selector părinte.
Iar acestea sunt singurele se vreodată de gând să se aplice.
Nu știu dacă ați au o cale mai bună de--
TOMAS REIMERS: Deci, eu ghici modul de a gândi
despre acest lucru este amintesc înainte cât am un fel de a le place pus împreună.
Și apoi asta înseamnă un element care corespund toate acestea.
Ceea ce se spune este, eu Vreau să se potrivească tot
în some-- vreau să găsiți un selector.
Și apoi în asta, vreau vă pentru a se potrivi lucruri noi.
Chiar?
Deci, în CSS, totul despre un fel de posibilitatea de a se potrivi aceste elemente.
Și puteți încerca pentru a se potrivi elemente în cadrul alte elemente.
>> Deci, hai sa facem de fapt un exemplu, și credem că vom clarifica.
Așa că haideți să ne prefacem că avem de construcții, special frumos, indiferent de.
Și atunci avem o legătură, bine?
Deci ține minte, o este un link.
Nu va pleca nicăieri.
Și vom da link-ul de clasă, cred.
Să-l da class---mi dea o idee.
ALLISON BUCHHOLTZ-AU: cool.
TOMAS REIMERS: Coo-- hai du-te-l clasa destul de.
De ce nu?
>> ALLISON BUCHHOLTZ-AU: OK.
TOMAS REIMERS: Deci lucrurile acum destul de
sunt de gând să facă fundal albastru, culoarea de fundal de somon.
Asta are sens.
Și dacă facem asta:
>> ALLISON BUCHHOLTZ-AU: Vrei să adăugați text
astfel hyperlinkul fapt apare?
TOMAS REIMERS: Această ar fi un apel bun.
ALLISON BUCHHOLTZ-AU: "Pentru că dreapta acum suntem doar să iau nimic.
TOMAS REIMERS: Deci, acesta este un link.
"Aceasta este o legătură."
Oh, și acest lucru se întâmplă a fi un alt link.
Să dau clasa "rece".
Ai dreptate.
Se răcește.
Deci, chiar acum vom apuca asta.
Vom arunca o.
Avem o în tag special, iar noi, de asemenea,
vor avea o în tag-ul destul de.
Și acum ce vom faci este vom face cool--
ce vrem să facem?
ALLISON BUCHHOLTZ-AU: Putem face mai mare?
TOMAS REIMERS: Să dau un chenar.
ALLISON BUCHHOLTZ-AU: Am putea frontieră.
TOMAS REIMERS: Da.
Deci, vom face ceva cum ar fi, este-- frontieră și suntem
O să explic toate astea într-o secundă.
Pentru acum--
>> ALLISON BUCHHOLTZ-AU: Pentru a modelului cutie.
TOMAS REIMERS: Dar de acum, suntem doar de gând să-i dea o frontieră.
Deci, ce înseamnă că este ești O să văd aceste link-uri.
Și vei vedea că au aceste, cum ar fi, frontiere negru urât, care
este rece.
>> ALLISON BUCHHOLTZ-AU: Site-ul nostru e așa de frumos.
>> TOMAS REIMERS: Da.
Site-ul nostru este minunat.
Deci, acestea două sunt link-uri, și acestea apar.
Acum să mă prefac că doar a vrut să facă acest lucru
dacă nu era în ceva care a avut un fundal de somon.
Deci, amintiți-vă că acesta are un fundal de somon,
pentru că este de clasă destul de.
>> Dar vrem să spunem că numai raceste care sunt în clasa speciala, nu în clasă
destul de, ar trebui să aibă acea graniță.
Ei bine, ceea ce poate face este vă poate spune, .special, spațiu, .cool.
Și ce face asta, atunci când te gândești despre ea, este e de fapt spune,
OK, mă găsească tot care se potrivește speciale.
Apoi, în cadrul acestor etichete, găsi mi tot ce e cool.
ALLISON BUCHHOLTZ-AU: Deci un alt mod care ar putea fi bine să se gândească la acest lucru,
aducându-l înapoi la C, este la fel ca și ideea de domeniul de aplicare.
Deci, atunci când au unele selector, cum ar fi cele
că am fost de lucru pentru înainte de aceasta, întreaga pagină web, toate HTML
este în domeniul de aplicare, nu?
Dar când avem aceste relațiile părinte-copil,
e ca și cum ai îngustarea jos în cazul în care sunteți în căutarea pentru un loc specific,
ca și în cazul în care, cum ar fi, căutăm în o funcție specifică în loc
de întreaga noastră fișier.
Audiența: Deci, cu asta în minte, ar fi au contat dacă am avea changed--
ALLISON BUCHHOLTZ-AU: Ordinea?
Audiența: --Discutii clasă în CSS la .cool, spațiu, .special?
ALLISON BUCHHOLTZ-AU: Da, pentru că atunci
ar spune, domeniul de aplicare să tot ceea ce are rece,
și apoi uita-te la ceea ce has-- Adică, cum ar fi, în acest caz,
Eu nu cred că s-ar fi schimbat.
>> TOMAS REIMERS: Dacă am fi spus ce?
Scuze.
>> ALLISON BUCHHOLTZ-AU: Dacă ne domeniul de aplicare să se răcească și apoi
uita-te pentru lucruri de construcții, ar fi la fel, de fapt.
>> TOMAS REIMERS: Deci nu ar fi.
>> ALLISON BUCHHOLTZ-AU: Nu ar fi?
Oh, oh bine.
Eu am greșit.
>> TOMAS REIMERS: Deci motivul e different-- mistake-- comun
este că acum numai link-ul dispune de rece, nu?
Cred că întrebarea mea pentru voi este, ce de pe această pagină este compensată de .cool?
Există două tag-uri aici, nu?
Care este acesta și acesta.
Ambele se potrivesc rece.
Nimic altceva nu.
Deci, dacă ai spus, .cool, spațiu, .special, ce ai de gând să spun este,
în aceste tag-uri, ceea ce este special?
ALLISON BUCHHOLTZ-AU: Hm.
Asta e ceea ce it-- drept.
Pentru că e ca și cum ceva aici.
>> TOMAS REIMERS: Deci selectează nimic.
>> ALLISON BUCHHOLTZ-AU: întrucât cu special, suntem în aceste tag-uri aici.
>> TOMAS REIMERS: Cei și cele care.
Audiența: OK.
Deci, aceste tag-uri de-a transmite slash?
>> TOMAS REIMERS: Da.
Asta face sens?
Cum este practic încercarea de a restrânge domeniul de aplicare.
ALLISON BUCHHOLTZ-AU: Da.
Cred că e, probabil, cel mai simplu mod de a gândi despre asta.
>> TOMAS REIMERS: Deci am găsit acest lucru, și am gasit acest corespund cu ambele specială.
Și apoi ne solicită, în tipii ăștia, ce e misto?
Și în asta, răcească asta e.
În cadrul acesta, nimic nu e rece.
Deci, aceasta este singura eticheta care rămâne.
>> ALLISON BUCHHOLTZ-AU: întrucât rece este doar în aceste tag-uri de acolo.
TOMAS REIMERS: Exact.
Și ceea ce este special în cele?
Nimic.
Acum, ceea ce voi spune este în cazul în care nu a existat nici spațiu,
te întreba ce e cool și special-- sau ceea ce este destul de special, nu?
Dacă spui .special.pretty, e la fel ca .pretty.special.
>> Pentru că ceea ce scoate spatiul este cere este, atunci când spui .special,
ceri, OK, care sunt cele speciale?
Și apoi a celor, care sunt cele de asemenea destul de,
care este aceeași, gramatical, ca cerut, ceea ce este destul de,
și apoi a celor, care, de asemenea, deosebit?
Chiar?
Este diferența de ceea ce este în ceea ce este.
Audiența: OK.
TOMAS REIMERS: Da.
Minunat.
Deci, cu asta în minte then--
>> ALLISON BUCHHOLTZ-AU: Cred că ultima noastră lucru este (ÎN FANCY BRITISH ACCENT)
modelul box.
>> TOMAS REIMERS: box-- [chicotește] Îmi place modul în Allison spune că.
Astfel, modelul caseta lucru.
>> ALLISON BUCHHOLTZ-AU: Doar au o cutie, voi fi modelul dumneavoastră cutie.
TOMAS REIMERS: Deci, hai sa vorbim despre asta.
Deci, chiar acum am petrecut mult de timp vorbind despre selectoare.
Până acum, voi sunteti probabil, cum ar fi, comandanții selectors-- știi,
cum pentru a selecta exact conținutul pe care doriți să manipula pe ecran.
>> Deci, acum intrebarea este, cum exact poți să-l manipula?
Deci, cred ca cele mai de bază mod de a gândi despre asta
este, ei bine, ce anume este un element în CSS?
Am petrecut o mulțime de timp vorbind despre, ceea ce este o etichetă,
sau ceea ce este cel mai de bază Reprezentarea de o etichetă?
>> O modalitate buna de a gândi despre că este, ceea ce forma este somon?
Ce formă este, cum ar fi, somon de culoarea de fond?
>> Audiența: E un dreptunghi.
>> TOMAS REIMERS: E un dreptunghi, nu?
>> ALLISON BUCHHOLTZ-AU: Nu a fost o întrebare truc.
[Râsete]
>> TOMAS REIMERS: Nu încerc să vă păcălească băieți această întârziere.
Deci avem acest dreptunghi.
Și tag-ul este un p, nu?
Așa că ne dă bine convingerea că paragraful
este reprezentat ca un dreptunghi, la cel puțin în mintea a browser-ului, care
este.
>> ALLISON BUCHHOLTZ-AU: Adică, browsere sunt de obicei dreptunghiulare,
deci are sens.
>> TOMAS REIMERS: Ideea este că toate etichetele cadrul CSS
sunt reprezentate ca un dreptunghi.
Și fiecare dreptunghi are patru Piese conform CSS, bine?
Ai conținutul real.
Asta în cazul în care textul se află.
>> ALLISON BUCHHOLTZ-AU: Poate imaginea ta.
>> TOMAS REIMERS: Da.
Ai padding, care este doar un fel de spațiu alb.
Apoi, aveți o frontieră.
Și apoi ai marja, care este spațiu alb în afara de asta.
Așa că nu are sens pentru oricine, deci suntem
O să vorbim despre asta pentru un al doilea.
Deci chiar aici, ceea ce vom face se vom crea unele divs, bine?
Scuzați-mă în timp ce Eu--
>> ALLISON BUCHHOLTZ-AU: mă simt ca ar trebui să punem o imagine drăguț în.
>> TOMAS REIMERS: Noi cu siguranta ar trebui.
>> ALLISON BUCHHOLTZ-AU: Mă simt ca și cum toată lumea
ar putea beneficia de o imagine drăguț, este tot.
>> TOMAS REIMERS: Putem toate beneficia de un--
>> Audiența: Da, sigur.
TOMAS REIMERS: OK, rece.
Deci, ar trebui să punem o drăguț imagine în undeva.
ALLISON BUCHHOLTZ-AU: Mă simt ca un iepuras dragut ar putea fi util chiar acum.
TOMAS REIMERS: Sigur.
ALLISON BUCHHOLTZ-AU: Sfârșitul săptămânii.
Au ceva adorab--
>> TOMAS REIMERS: Cum zici un pisoi?
>> ALLISON BUCHHOLTZ-AU: Un pisoi de lucrări, de asemenea.
>> TOMAS REIMERS: cool, pentru că exista un site pentru asta.
Se numește PlaceKitten.
ALLISON BUCHHOLTZ-AU: Asta-i grozav.
TOMAS REIMERS: Da.
ALLISON BUCHHOLTZ-AU: Doar pentru, cum ar fi, imagini substituent în site-ul dumneavoastră.
TOMAS REIMERS: Mm-hm.
Există, de asemenea PlacePuppy.
Și nu e PlaceBacon.
>> ALLISON BUCHHOLTZ-AU: PlaceBacon?
Într-adevăr?
>> TOMAS REIMERS: Oh, noi nu facem au acces la internet aici.
>> ALLISON BUCHHOLTZ-AU: [gemete]
Tragic.
TOMAS REIMERS: În caz contrar, Aș dori să vă arăt baieti
cum de a pune imagini în site-ul dumneavoastră.
Vom încerca să obțineți acest de lucru înainte de a avea pentru a merge.
Dar pentru moment, suntem doar vorbi în culori atunci.
Vrem să pun poze cu kittens--
>> ALLISON BUCHHOLTZ-AU: Am făcut-o.
>> TOMAS REIMERS: --Discutii internet de jos pentru moment fiind.
Deci avem două divs, și suntem O să le dea două id-uri.
Vom numi "Primul" și "al doilea".
Deci, id = "primul."
Și am de gând să le dea două culori.
Deci, cum putem selecta ceva cu un id de "primul"?
ALLISON BUCHHOLTZ-AU: Dot sau hash?
Audiența: Sharp.
TOMAS REIMERS: Sharp, perfect.
Sharp, hash, indiferent de we--
>> ALLISON BUCHHOLTZ-AU: O mulțime de lucruri să-i spunem.
>> TOMAS REIMERS: OK.
Vom stabili pe hashtag, și asta e ceea ce vom merge cu.
OK?
>> ALLISON BUCHHOLTZ-AU: hashtag.
>> TOMAS REIMERS: Deci hashtag primul.
>> ALLISON BUCHHOLTZ-AU: Deci puteți tweet seminar--
CSS hashtag, hashtag rece.
TOMAS REIMERS: hashtag Awesomeness.
ALLISON BUCHHOLTZ-AU: Hashtag Awesomeness, da.
TOMAS REIMERS: OK.
Deci avem "primul" și "al doilea".
Deci în primul rând, vom avea o culoare de fundal de roșu.
ALLISON BUCHHOLTZ-AU: Uh, colon.
TOMAS REIMERS: Da.
ALLISON BUCHHOLTZ-AU: Voi fi vostru spot-checker.
TOMAS REIMERS: Allison ma prins.
Culoare de fundal a blue--
>> TOMAS REIMERS: Purple!
>> TOMAS REIMERS: Purple.
ALLISON BUCHHOLTZ-AU: Da.
Purple culoarea mea preferată, și nu am folosit-o încă.
>> TOMAS REIMERS: Violet.
ALLISON BUCHHOLTZ-AU: Violet.
Asta funcționează.
>> TOMAS REIMERS: Deci suntem Va trebui două divs.
Vor fi complet gol.
Probabil că ar trebui să aibă un text.
Deci, "primul" va fi "HELLO".
Și "al doilea" va say--
>> ALLISON BUCHHOLTZ-AU: La revedere.
>> Audiența: - "WORLD."
Buna ziua, la revedere.
ALLISON BUCHHOLTZ-AU: Am văzut le în concert la două săptămâni.
TOMAS REIMERS: The Beatles?
ALLISON BUCHHOLTZ-AU: Pentru reali.
Nu sunt frumoasa.
Nu-mi place.
>> TOMAS REIMERS: Avem "Hello" și "la revedere."
Și din nou, CSS este doar minunat, pentru că ea recunoaște culorile noastre.
Nu trebuie să mai vă faceți griji că acestea există.
Ei fac.
>> ALLISON BUCHHOLTZ-AU: Ele există.
>> TOMAS REIMERS: Deci CSS cred are 255 de cuvinte pentru a vorbi despre culoare.
Dacă vă puteți gândi la o culoare din afara cele 255, cum ar fi, voi fi impresionat.
ALLISON BUCHHOLTZ-AU: Da.
Cred că voi putea avea doar vin în dreapta după.
>> TOMAS REIMERS: Deci aici, veți vedea că avem două cutii
dreapta pe partea de sus a reciproc, nu?
Bună ziua și la revedere.
>> ALLISON BUCHHOLTZ-AU: Nu e nici spațiu în între.
Sunt doar apasata chiar deasupra celuilalt.
>> TOMAS REIMERS: Deci, primul lucru Cred că ar trebui să vorbim despre
este, de asemenea, să say-- da.
Deci, CSS îi reprezintă ca un fel de cutii.
Și cutii, au conținut.
Iar conținutul acum este un fel de hello sau la revedere și asta e tot.
OK?
>> Astfel, unul dintre primele lucruri pe care le poate face este de a putea adăuga padding.
Garniture spune cât de mult spațiu aceasta ar trebui să lase pe fiecare parte.
Așa că haideți să spun că vreau să spun 10 pixeli pe fiecare parte.
Și voi diseca că într-o secundă.
ALLISON BUCHHOLTZ-AU: Toate aceste lucruri aici
vor fi mai ales in pixeli pentru restul seminarului.
Veti vedea ca are un spațiu în jurul ei, nu?
Deci, ceea ce nu văd aici e acolo e acest tip invizibil de umplutură
pe fiecare parte, care spune, cum ar fi, OK, ai cutia de content--
>> ALLISON BUCHHOLTZ-AU: Vrei a trage în sus doar inspecta elementul?
>> TOMAS REIMERS: Da, asta este o idee bună.
ALLISON BUCHHOLTZ-AU: De asemenea, mi se pare că inspecta element este un mod bun
să ne dăm seama dacă ceva se întâmplă greșit, se întâmplă ceva neașteptat,
inspectarea etichetele și de a vedea ce e ca si cum suprascrise este de ajutor.
>> TOMAS REIMERS: Deci, eu nu sunt sigur dacă voi putea vedea această culoare.
Poți?
Veți vedea acest umplutură pe un fel de margine.
Și apoi veți vedea real conținut în albastru, nu?
Deci asta e foarte Elementele de bază ale modelului cutie.
Ai conținut.
Apoi, aveți padding.
>> Audiența: De ce nu te utilizați caseta de interior the--
>> ALLISON BUCHHOLTZ-AU: Corect.
Pentru că doar selectând elementul chiar acum.
>> TOMAS REIMERS: Da.
Alte lucruri.
Deci, hai sa vorbim despre asta comandă padding pentru o secundă.
Deci, în CSS, măsurători trebuie să aibă o unitate.
Deci, mai întâi trebuie suma.
Deci, în acest caz, am spus 10.
Și apoi următoarea ne-am spus este pixeli, px.
Alte cele pe care le-ar putea avea sunteți lucruri cum ar fi centimetri, inch.
Poti face lucruri de genul, ceea ce este de 10 cm?
Și va fi ridicol.
>> ALLISON BUCHHOLTZ-AU: Oh, băiete.
>> Audiența: Whoa.
>> Tomas ALLISON: Da.
TOMAS REIMERS: Deci asta e tot padding.
Mă duc să mă întorc la pixeli.
>> ALLISON BUCHHOLTZ-AU: Pixeli tind să fie, cum ar fi, standardul.
Când te uiți la o mulțime de site-uri web, ei lucrează mai ales în pixeli.
TOMAS REIMERS: Deci te duci sa vezi fie pixels-- celelalte pe care le vedeți
este em, care este unul le este egală cu înălțimea fontului
care îl utilizați în prezent.
>> ALLISON BUCHHOLTZ-AU: Mm.
TOMAS REIMERS: E un mod bun de a spune, cum ar fi, eu vreau la fel de mult spațiu ca font meu
este de a lua.
ALLISON BUCHHOLTZ-AU: Nu știu asta.
Veți învăța ceva nou in fiecare zi.
TOMAS REIMERS: Există o mulțime de măsurători în CS.
Vă sugerez să le privi în sus.
Pentru toate cazurile tale, cred pixeli ar trebui să fie suficientă.
Și ei sunt, de asemenea, ceea ce veti vedea
în majoritatea exemplelor face online.
Deci, vom pleca la pixeli.
>> Puteți, de asemenea, ar trebui să say-- așa seturi de umplutură toate din Garniture.
Puteți face, de asemenea, ceva de genul "Padding-top" la doar set--
ALLISON BUCHHOLTZ-AU: Poate vom ajunge nostru "Hello" înapoi.
TOMAS REIMERS: --to Situat chiar padding pe partea de sus și nimic altceva.
Astfel, cele patru comenzi sunt padding-top, padding-bottom, padding stânga-,
și padding-dreapta.
>> ALLISON BUCHHOLTZ-AU: La fel ca v-ați aștepta pentru o cutie.
>> TOMAS REIMERS: Da.
Nimic prea nebun acolo.
Asta face sens?
Deci, care este padding.
Am de gând să se stabilească toate în Garniture înapoi la 10.
Și apoi am de gând să se mute la frontieră.
>> Deci, ce este de frontieră este frontieră este o comandă ciudat.
Este nevoie de un fel de trei lucruri deodată.
Deci, prima este cât de mare te vrea să fie ca o măsurătoare.
Din nou, eu sunt doar folosind pixeli.
Și ultimul lucru pe care am ar trebui să adauge la măsurători
este singurul lucru care nu are nevoie de o unitate este 0.
Este de fapt incorect pentru a se obține o unitate de 0,
pentru că 0 este 0 pe inch, pixeli, centimetri, orice.
Totul înseamnă doar 0, nu?
Deci, în primul rând vă dau de măsurare.
>> Apoi da stilul.
Așa că am de gând să spun "solid".
Și vom vorbi despre ce înseamnă asta.
Și apoi în cele din urmă, îți dau o culoare.
Așa că am de gând să spun "negru".
Și toate acestea sunt lucruri pe care le-ați acum văzut înainte, cu excepția stil,
dar vom vorbi despre asta.
Deci, voi ați văzut măsurători, și ai văzut culori.
Și ce se întâmplă este că obține acest chenar negru în jurul valorii de frumos, nu?
Voi vedea cum am făcut asta?
>> Audiența: Da.
>> TOMAS REIMERS: cool.
Deci, ce este asta?
Deci, în primul rând, este un pixel.
Asta e de la sine înțeles destul, nu?
Cum ar fi, este un pixel gros.
Sau ar fi un pixel, dar eu sunt mărită, deci e un pic mai mult
decât asta.
>> ALLISON BUCHHOLTZ-AU: Si ne-am această rezoluție televizor ridicol.
>> TOMAS REIMERS: Da.
Puteți face asta mai mare, mai mici, indiferent de.
Deci, aici e un chenar cu două pixel.
Veți vedea că e de două ori mai gros.
Urmatorul lucru pe care trebuie este culoarea.
Asta nu e interesant.
Eu nu am de gând să vorbesc despre asta, într-adevăr.
>> ALLISON BUCHHOLTZ-AU: Dar stilul ar putea fi doar un pic interesant.
>> TOMAS REIMERS: Da.
Deci stil, sunt cele câteva că văd frecvent utilizate.
Solide, unul pentru următoarele Primul cuiva punctată, iar punctată ultima lui.
Și aici este punctată.
Veți vedea că ei sunt o grămadă de puncte, nu?
O modalitate buna de a obține un fel de frontieră frumos merge, linii sunt, de asemenea, destul de populare.
>> ALLISON BUCHHOLTZ-AU: Și apoi, desigur, eu sunt
sigur există o mulțime alte stiluri pe care le puteți obține.
Și avem un set mare de Link-uri de la sfârșitul pentru voi
la fel de citi cu atenție și uita-te la mai rece CSS.
>> TOMAS REIMERS: Și apoi ultimul lucru, suntem
vorbi despre Modele box foarte repede.
Oh, și apoi de frontieră, exact ca umplutură,
aveți, de asemenea lucruri, cum ar fi stânga-frontieră, frontieră-dreapta, border-top,
border-bottom, care vă permite pentru a ajunge la un anumit frontieră.
Deci, aici e doar granița stânga-definite.
Are care face sens?
>> ALLISON BUCHHOLTZ-AU: Este un misto mod de a sublinia lucrurile sau adăuga
Liniile între elemente diferite.
TOMAS REIMERS: Absolut.
Deci asta e frontiera noastră.
Și marja de ultima lui.
Padding ca Marja de cu excepția nu este within--
ALLISON BUCHHOLTZ-AU: E nu în jurul valorii de elementul tau
dar de fapt în jurul întregii casetă pe care le-am văzut.
>> TOMAS REIMERS: Da.
Allison a spus perfect.
Nu e, cum ar fi, în interiorul tău Element, e în jurul întregului centru.
Asta înseamnă lucruri cum ar fi fundal nu i se aplică.
Și se spune în esență, cum ar fi, nu vreau nimic
în acest spațiu mult pentru mine.
Deci, ca și cum aici avem o marjă de 10 pixeli.
Deci, nimic în termen de 10 pixeli ar trebui să fie lângă mine.
Asta e un fel de sale spațiu dar un fel de nu.
Deci asta e foarte Elementele de bază ale modelului cutie.
Asta face sens?
Se răcește, se răcește.
ALLISON BUCHHOLTZ-AU: Awesome.
Așa că acum ne gândim doar au resursele noastre reci
că noi vă vom lua băieți prin foarte repede.
Și vom actually-- bine, avem internet încă?
>> TOMAS Reimers: Să să văd dacă pot deschide up--
lasă-mă să văd doar dacă am minim internet rapid
în timp ce Allison vorbește despre nimic Allison vrea să vorbească despre.
ALLISON BUCHHOLTZ-AU: Deci basically-- nu fac
știu ce altceva pot să spun în acest moment.
Dar acestea sunt unele resurse foarte bune.
Acestea sunt cele care Tomas si am folosit
și că noi de fapt folosit sa te pregatesti pentru aceasta.
W3Schools este una pe care o baieti ar fi văzut înainte.
Am recomanda pentru o mulțime de lucruri cu CSS.
Știu că îl recomand secțiune mea tot timpul.
>> Unul din lucrurile mari este faptul că vă permite să fel de pui cu CSS
și vezi modificările instantaneu în acest sens,
cum ar fi, dublu-fereastră a vedea că are.
Deci, nu trebuie să vă faceți griji cu privire la configurarea pagina web proprie,
sau înființarea vhost în ta aparat locală și gazdă locale,
și obtinerea tuturor că lucrurile lucru.
Este încorporat chiar în cadrul paginii.
>> Și are aceste mici lecții pe care le poti
du-te prin a învăța mai multe despre selectoare,
sau pentru a afla despre manipularea ta font, sau un fundal sau o imagine.
Și aveți aceste Rezultatele instantanee pe care le
Nu trebuie să faci orice alte lucrări prep pentru.
Așa că am iubesc W3Schools.
E fabulos.
Este de lucru?
>> TOMAS REIMERS: Da.
Nu, nu e.
Vrei să încercați și reporniți calculatorul meu?
Sau vrem sa--
>> ALLISON BUCHHOLTZ-AU: Adică, bine, aceasta va fi, de asemenea, on-line.
Toate diapozitivele vor fi on-line.
Deci, eu doar foarte recomanda faci acestea.
>> Acest lucru este la fel de mare doar ca o foaie de ieftin.
E doar tot de bază comenzi pe care le aveți.
E minunat când ești primul incepand site-ul tau.
Pentru că poate că nu doriți să obțineți în toate
nitty curajos reală -design grele lucruri.
Trebuie doar să-l formatați într-un mod acest tip de are sens și a voinței
face pentru moment.
Și dacă vrei într-adevăr pentru a intra în el, eu știu
acest lucru este, cum ar fi, unul dintre Referințele favorit Tomas lui.
Am fost folosind pentru prep, și e fabulos.
E Developer la Mozilla.
>> TOMAS REIMERS: Deci, Mozilla sunt cei care fac Firefox.
Și e doar propria lor developer referință, care cred că este minunat.
Și are o minunat Listă de resurse.
Așa că am have--
>> ALLISON BUCHHOLTZ-AU: Și apoi ultima notă este
când încerci să proiectarea site-ul dvs.,
inspira din lucruri care credeți că sunt destul de.
Verificarea elementului, de control codul sursă
poate fi foarte util pentru că au încercat să dau seama
cum să stilul site-ul tau.
>> De multe ori, mă simt ca cel mai bun Astfel, în afară de experimentare,
este doar să se uite la lucruri care sunt destul de.
Mi se pare că e foarte greu să doar fel de a proiecta lucruri pe cont propriu,
mai ales la început.
Deci, vă rugăm uita-te la site-uri web că vă bucurați de uita la.
Figura ce face le atractive pentru tine.
Și atunci nu ezitați să încercați și replica asta.
>> TOMAS REIMERS: pe dreapta.
Chiar ca site-uri web ca aceasta, puteți vedea
există cu siguranță o div în partea de sus.
Și apoi un alt div în aici, ceea ce este CSS Awesomeness.
Și atunci ai o grămadă de link-uri aici.
Dacă într-adevăr doar inspecta Elemente, aveți posibilitatea să sortați de
începe pentru a vedea ce face site-uri arata ca si cum pot eu
recrea că, dacă am vrut să.
Asta face sens?
Deci avem doar trei minute ramase.
Deci întrebări?
Oricare dintre ei?
Da.
>> Audiența: Pentru culoare dreptunghi, cum ar fi
have-- dacă nu l-ați vrea merge în întreaga pagină, ar putea
aveti si voi o merge peste numai jumătate pagina sau doar textul?
>> TOMAS REIMERS: Da, absolut.
Așa că lasă-mă să văd de fapt.
Am două idei.
Deci, în primul rând, voi poate utiliza, de asemenea, procente.
>> Audiența: Într-adevăr?
>> ALLISON BUCHHOLTZ-AU: Deci ceva să se uite în sus este de poziționare relativă.
E ceva ce noi nu au timp pentru a ajunge în,
dar e ceva ce am siguranta recomanda voi check-out.
>> TOMAS REIMERS: procente Deci.
Și vedem cum am făcut doar 50% din lățimea?
ALLISON BUCHHOLTZ-AU: Dacă știu de fapt numărul de pixeli,
poti fi mai precis așa.
Puteți juca și în jurul valorii de cu ea.
Dar 50%.
Dacă ar fi să redimensiona browser-ul nostru, ea ar face mai mici.
>> TOMAS REIMERS: Ei bine, e practic 50% chiar acum, cred.
E 50%, iar apoi marja a fost adăugată la aceasta.
CSS are o multime de quirks.
Deci, acum acest lucru este 50% din lățimea paginii.
Dar amintiți-vă că aveți 10 pixeli decolat de pe fiecare parte.
Deci, dacă ar fi să mutați că împotriva marginea din stânga a browser-ului,
atunci ar arata ca 50%.
Din nou, așa cum am spus, CSS poate fi o mulțime de ghici-și-control.
Ca, crezi ceva e O să se comporte într-un fel,
dar se comportă un mod cu totul diferit.
>> ALLISON BUCHHOLTZ-AU: Și te mai inteligent,
și doar veți obține o mai bună intuiție pentru el măsură ce vă deplasați de-a lungul.
>> TOMAS REIMERS: Și se înrăutățește și mai rău.
Deci, este de fapt doar o cursă.
>> ALLISON BUCHHOLTZ-AU: Asta e foarte încurajator.
Ne dorim ca ei să plac CSS.
>> TOMAS REIMERS: CSS este minunat.
Amintiți-vă că.
Alte întrebări?
>> ALLISON BUCHHOLTZ-AU: un lucru.
Altceva?
Se răcește.
>> TOMAS REIMERS: Awesome.
>> ALLISON BUCHHOLTZ-AU: Ei bine, dacă ați baieti aveți orice întrebări mai târziu,
suntem mereu disponibil ca de obicei.
Veți vedea, probabil, unele de ne pentru proiecte finale
si cu siguranta la hackathon.
>> TOMAS REIMERS: Absolut.
Și la târg.
>> ALLISON BUCHHOLTZ-AU: Și la târg.
Oh.
>> TOMAS REIMERS: Aștept cu nerăbdare să văzând toate de awesome-- ta
>> ALLISON BUCHHOLTZ-AU: Vom vedea toate site-urile dvs. minunat
că va fi frumos.
TOMAS REIMERS: Puteți oricând a se vedea, cum ar fi, site-urile
care a avut, cum ar fi, bine CSS și apoi cum ar fi cele care nu au încercat să facă CSS.
ALLISON BUCHHOLTZ-AU: De asemenea, un alt lucru, un lucru să se uite în
este Bootstrapping.
Deci, Bootstrap este mare.
>> TOMAS REIMERS: Google că dacă Tu--
>> ALLISON BUCHHOLTZ-AU: Google ea.
E fabulos.
O să-ți iubești.
Și acum, că aveți o înțelegere de bază a CSS,
se va face mult mai mult sens.
Minunat.
Mulțumesc, băieți.
>> TOMAS REIMERS: Vă mulțumesc foarte mult.