[Mūzikas atskaņošanai] ALLISON Buchholtz-AU: So mēs būtībā tikai gatavojas lai dotu jums nolietota CSS, jo mēs zinām, ka tai nebija iekļauti visās sadaļās. Un mēs patiešām vēlamies, lai pārliecinātos, ka jūs puiši ir šo rīku, jūsu rīcībā, jo tā ir spēja veikt jūsu mājas lapas izskatās daudz glītāka. 

Un, ja jūs veidot mājas lapu, tad Jūs droši vien vēlaties, lai būtu diezgan. Es domāju, jums nav, bet es gribētu ieteikt to. [Smejas] Ja vēlaties, lai lietotāji to izmantot, jūs varētu vēlaties, lai būtu nedaudz [nedzirdama]. Tātad, mēs esam gatavojas izmēģināt un sniegt jums tikai daži pamata instrumenti un izpratne, tā, ka tad, kad jūs dodaties, un jūs esat pētot lietas par CSS, tas nav pabeigt buldurēšana, piemēram, CSS dažreiz būt. 

TOMAS REIMERS: Jā. Allison teica, ka diezgan labi. Tāpēc es domāju, ka pirmā lieta, kas mums vajadzētu sākt ar ir tas, kas ir CSS? Tātad CSS ir laba. CSS-- 

ALLISON Buchholtz-AU: Tas ir nosaukums mūsu seminārā. 

TOMAS REIMERS: Jā. Tas ir patiešām svarīgi, ka jūs saprotat, ka līdz tam laikam. Ja jūs tikai atņemt vienu lieta, tas ir, ka CSS ja awesome. Divi ir CSS kājiņām Kaskādes Style Sheets. Tātad pēc savas būtības, CSS ir stila lapas, kas nozīmē tas ļauj jums pieskaņot mājas lapā. Un tad, ko tas nozīmē, tas ir veids, kā pievienot stilu jūsu mājas lapas. Tātad pēc stila, mēs domājam visu Tas nav structural-- lai lietas, piemēram, krāsas, fons attēlus, robežas, tāpat kā, polsterējums, starpība. Mēs runājam par to, ko viss, kas nozīmē mazliet. 

Tātad mēs esam tikai gājusi uz priekšu un atvēra abi no tiem izveidots gedit. Tātad tas ir index.html. Un tas ir main.css. Tātad main.css ir nekas. ALLISON Buchholtz-AU: Nē stils līdz šim. TOMAS REIMERS: Nav. Un, kā jūs redzēsiet, tas ir tiešām neglīts vietā. ALLISON Buchholtz-AU: Tas ir vienkārši. TOMAS REIMERS: Jā. Jā, tas nav neglīts, tas ir tikai minimālisma. Un tad šeit mums ir index.html. Un tā, lai ātri Atgādinājums par HTML, Allison, jūs vēlaties, lai tikai runāt par lapu? 

ALLISON Buchholtz-AU: Jā. Tātad acīmredzot, mums ir mūsu HTML tag, kas tikko nosaukumi HTML failu. Mums ir mūsu galveni šeit, ar CSS Awesomeness, which-- ja jūs iet atpakaļ. Kur tas ir? 

TOMAS REIMERS: Ak. Jā, jūs varat redzēt. ALLISON Buchholtz-AU: Un paziņojums galveni tas tab header labi šeit. Un tad "Hello, world!" ir teksts, ka mums ir tikko izlikšana tīmeklī lapa, kas is-- iet atpakaļ. Atpakaļ. Kas ir tikai mūsu organismā here-- vienkāršu tekstu. Arī viena lieta, lai paziņojums, ja paskatās šeit, Tomas pārgāja šos divi no mūsu slaida. Tik ilgi, kamēr jums ir visas trīs no tiem, tu esi labi. Tie var būt jebkādā secībā tie vēlas. Kas ir vissvarīgākais, ir tikai, ka Jums ir katrai no šīm trim lietām. 

TOMAS REIMERS: Cool. Pievienot doc veids? ALLISON Buchholtz-AU: Jā. TOMAS REIMERS: Jā. Cool. ALLISON Buchholtz-AU: Acīmredzot, mani mikrofonus nepatīk mani. TOMAS REIMERS: Ak, dod mums sec tikko bet Allison pārslēdzas no viņas MIC. So yeah. Tātad mums ir mūsu galvenajā lapā. Tas ir sava veida unstyled. Mums nav daudz. Mums vienkārši ir būtībā tekstu. Mums ir stila lapas. Mums ir titulu. Tik vienkārši tukša kauliem komponenti veido mājas lapā. 

Tātad no turienes, pieņemsim runāt par to, CSS ir un kā tas izskatās un tas viss. Tātad that-- ALLISON Buchholtz-AU: Atpakaļ uz slaidiem. TOMAS REIMERS: Atpakaļ uz slaidiem. Un Allison var pārņemt. 

ALLISON Buchholtz-AU: Woo. OK. Tātad jūsu CSS failu, Jums nāksies daudz no šīm lietām sauc selektori. Tas būs tikai pamatojoties uz savu CSS failu. Tas tikai būs daudz un daudz no tiem. Tik selektors. Tas ir tikai vispārējs anatomija. Mēs ejam, lai iet cauri piemēri, jo, ja jūs puiši nekad noskatījās manu sadaļu, es jūtos patīk lietas abstrakti nav īsti jēgas. Tas vienmēr palīdz redzēt piemērus. 

Tātad mums ir dažas selektoru. Kas notiek, lai daži identifikators ko mēs gribam stils piemērot. Un tad mēs varam būt jebkurš noteikumu kopumu un vērtībām. Tātad pārslēdzējiem ka jūs varētu redzēt varētu būt kaut kas līdzīgs organismā, vai punkts ar P, vai header, vai kāds, ko jūs vēlaties, lai jūsu HTML tagus, lai būtu. 

Tātad, šajā gadījumā, mums ir ķermenis. Un mums ir dažas noteikums, kas tas atbilst uz ko savu stilu uz. Tātad, šajā gadījumā, mums ir fona krāsu un fontu svaru. Tātad tas mainīsies fons neko jebkurā ķermeņa tag mūsu HTML failu. Un tas notiek, lai dotu tā tas gaiši zila vērtību. 

Tātad, tas notiek, lai fona gaiši zilā krāsā. Un tad kaut kas laikā organismā ir nāksies fonta svars drosmīgu. Tātad tas ir tikai gatavojas drosmīgs visu mūsu tekstu. Un tas ir tikai viens selektoru. Bet jūs varētu būt ļoti daudzi no šiem. Un kā mēs spēsim parādīt vēlāk, mazliet vairāk par to, kā ka darbi un vairāk piemēru tur. Viss, ko jūs vēlaties pievienot? 

TOMAS REIMERS: Nē. Allison dabūja to. Mēs esam tikai gatavojas sagriezt piemērs šeit mūsu piemērs lapā. Tāpēc pieņemsim faktiski ņemt to. Tas ir ideāls. Tāpēc es esmu tikai gatavojas kopēt un ielīmēt šīs tiesības mūsu main.css failā. Un es esmu gatavojas, lai saglabātu to. Un tad mēs palaist to. Tā sānu piezīmi, viens no visvairāk nomākta lietas ir, ja jums nav saglabāt failu, un tad jūs, piemēram, pārlādēt lapu, un, piemēram, kāpēc nav pārmaiņas notiek? Tas notiek. Tāpēc šeit mēs redzējām, ka mēs, kas mūsu mājas lapa gaiši zila fona un daži treknrakstā tekstu. 

Man vajadzētu arī pieminēt, ja jums puiši ir jautājumi par kaut ko mēs darām, lūdzu brīvi mūs apturēt un jautājiet mums. Mēs esam pilnīgi gatavi laukam jautājumus. 

ALLISON Buchholtz-AU: Protams, ar CSS, viss balstās uz sevi. Tātad, ja viena lieta nav jēgas tagad mēs negribu, ka to purvs jūs noteikti vēlāk. 

TOMAS REIMERS: Tātad pieņemsim veida preparēt to. Tātad jūs vēlaties, lai sāktu ar selektoru šeit? 

ALLISON Buchholtz-AU: Jā. Kā jau teicu iepriekš, ķermeņa ir tikai mūsu selektors šeit. Tātad, ja mēs atgriežamies pie mūsu index-- ah. 

TOMAS REIMERS: Ko es tikko slēgts. Dodiet man otru. Tātad File, Open, index.html. ALLISON Buchholtz-AU: Cool. Tātad, ja jūs pamanāt šeit, mēs ir šīs ķermeņa tagus, vai ne? Tik selektors tikai atbilst tagi, ka mēs runājam. Tātad iestādes tiesības šeit. Tātad, ko mēs sakām, everything-- mēs varam iet atpakaļ? Es vēlos es varētu tikko tāpat pieskarties ekrānam. Tas lūdzu būt tik daudz vēsāka. 

Tātad kaut kas neatbilst pasākumiem ķermeņa tagus, ko mēs redzējām bija tikai, piemēram, tekstu, un ķermenis kopumā attiecas uz, piemēram, fona. Ja jūs kādreiz vēlaties mainīt fona, kas notiek, lai būt ķermeņa tag. Vienkārši ir šos noteikumus piemēro tām. 

Tātad, ja mēs būtu doties uz index.html and-- faktiski, mēs varam būt kaut ārpus ķermeņa? Ja mēs būtu, piemēram, kājenes vai kaut ko, tas neattiecas uz to. Bet kaut ietvaros šie ķermeņa tags notiek var ietekmēt šīs iestādes selektors, ka mēs esam padarījuši. Tātad, ja jūs būtu rakstīt kaut kas cits there-- 

TOMAS REIMERS: Let 's braukt, ka mājās. Tātad, ja mums bija div-- tā, ka ir tikai citu tagu, jūs varat būt. Es esmu gatavojas, lai to aizvērtu. Vai pieņemsim padara šo punktu. Tātad p apzīmē punktu. Un šajā punktā. Un tad es saku: "Šis ir teksts." Cool. Un tad es šis noteikums attiecas uz punkts, nevis ķermeņa. Jūs redzēsiet, cik tas attiecas tikai uz jaunizveidotā daļu, pa labi, nav viss. Vai tas ir jēga? 

ALLISON Buchholtz-AU: Tātad tas ir viss ķermenis, bet tagad mūsu pārslēgs tikko atbilst punktā. Tātad mums vienkārši ir treknrakstā un zilā krāsā par šo konkrēto punktu, jo tas ir vienīgais, kas ir ielikta p tag. 

TOMAS REIMERS: Vai, ka jēga kārtošanas par to, kā lietas iekapsulēt citas lietas? ALLISON Buchholtz-AU: Arī tikko teikt, piemēram, viens no labākajiem veidiem, kā lai patiešām iegūt apmierināti ar CSS ir tikai darīt lietas, piemēram, tas, vienkārši to izmēģinātu. Tas ir ļoti vienkārši kaut ko rakstīt out, hit Atsvaidzināt, un redzēt, kas notiek. Un kā ar lielāko CS, eksperimenti bieži vien var novest pie daudz labāk intuitīvi izpratne. Pat vairāk nekā mums tikai, piemēram, runājot ar jums. 

TOMAS REIMERS: Pilnīgi 100% piekrītu šajā jautājumā. Tātad, ja mēs ejam atpakaļ uz to, sāksim preparēšanas tieši to, ko šie divi darīt. Tātad mums ir divi noteikumi par to. Tātad pirmais ir fona krāsu. Un jūs redzēsiet, ka mēs esam, kas to vienāds ar vērtību, gaiši zilā. 

Tātad CSS, CSS ir sava ļoti mīksti par to, kā jums ir tiesības definēt krāsu. Tātad jūs varat noteikt tos pēc nosaukuma. Jūs varat arī darīt kaut ko līdzīgu "sarkanā krāsā." Un tad, ja mēs ejam atpakaļ uz to, Jūs redzēsiet, ka fons ir sarkanā krāsā. Jūs varat arī saņemt really-- es domāju, jums var iegūt diezgan radoši ar to, vai ne? 

ALLISON Buchholtz-AU: I domāju, ka jūs varat izmantot Hex. Vai ne? 

TOMAS REIMERS: Jā. Tātad jūs varat izmantot Hex. Bet es domāju vārdu gudrs. Vai tur nav? ALLISON Buchholtz-AU: Jūs varat darīt diezgan maz. Diezgan daudz, piemēram, lielākā daļa krāsas, kas jums var name--, piemēram, es domāju, ka lasis ir viens. 

TOMAS REIMERS: Mēs esam gonna izmēģināt lasi. ALLISON Buchholtz-AU: I domāju chartreuse ir tur. TOMAS REIMERS: Jā. Redzēt? Tātad jūs varat saņemt diezgan radoši. 

ALLISON Buchholtz-AU: You varētu iegūt diezgan radošs. Tāpat kā, ja jūs varat iedomāties krāsas nosaukums, tas ir iespējams, jo tur. Ja jūs patiešām vēlaties fine detaļu, jūs varat iet Hex. 

TOMAS REIMERS: Jā. Tik heksadecimālo. Ja jūs puiši atcerēsies šo atpakaļ no vecā PSET, Image atgūt, jūs puiši bija jātiek galā ar šīm hex vērtībām. Un veida vēlreiz apkopot to, kas tas ir, hex ir trīs vērtības glabā to. Tātad, tas ir grupās divu intervālu. Pirmie divi pārstāv sarkano vērtību. Otrais pārstāv zaļā vērtību. Un pēdējais ir zils? 

Tātad FF notiek pārstāvēt heksadecimālo 255. Tātad jums ir 255 sarkans, 255 zaļa, un 0 zilā krāsā. Un vērtības svārstās no 0 līdz 255. 

AUDITORIJA: Right. Tātad būtībā, mēs varētu meklēt internets jebkurā krāsā mēs vēlamies, un noteikt faktiski pazīstams krāsu spektrs combo, un tad mēs varētu likt to? ALLISON Buchholtz-AU: Tieši tā. Tātad jums ir diezgan daudz pilnīga kontrole pār krāsu jūs vēlaties ietvaros CSS. Vai mēs runājam par fona attēlus vēlāk? Vai mēs gribam to darīt? 

TOMAS REIMERS: Jā. Absolūti. Tātad, pirmkārt, tikai, lai pierādītu, ka sarkans un zaļš ir dzeltenā krāsā. Un, ja jums ir nepieciešams zināms palīdzēt atrast šo, jūs Vai Google kaut ko piemēram, "Color Picker." ALLISON Buchholtz-AU: Ak, tas ir tik labi. Es mīlu Color Picker. 

TOMAS REIMERS: colorpicker.com ir labs piemērs. Un šeit, jūs redzēsiet, ka jums ir pilna Photoshop līdzīgu krāsu plūcējs. 

ALLISON Buchholtz-AU: Mm-hm. Arī labas lietas ir jums var radīt krāsu shēmas tā, ka jums nav, piemēram, kas ir pretrunā krāsas. TOMAS REIMERS: Un tad šeit ir hex vērtība šeit. Tātad, jūs vienmēr varat atrast internetā būtībā vietas, lai iegūtu Hex vērtību no. Tas nav veida, ka tikai, piemēram, mēs redzēt krāsas pasaules skaita. Tas ir vairāk, ka mēs ejam online un atrast kādas krāsas mēs gribam, un tad skaitli uz leju. Jo tas ir tikai ļoti viegli veids, kā atsauces lietas CS. 

ALLISON Buchholtz-AU: Un tad tur ir also-- Esmu aizmirsis precīzu nosaukumu vietā. Bet tur ir noteikti, es domāju, kaut ko no Adobe kas rada krāsu shēmas, lai jūs, kas ir tiešām foršs, jo jums definitely-- tas dažreiz grūti izrēķināt, oh, ja es vēlos izmantot šo krāsu, to, kas varētu būt vēl viens noderīgs viens izmantot citur manā vietā, lai, piemēram, padarīt to jauka un saliedēta. 

TOMAS REIMERS: Allison runā viens Adobe sauc Kuler, es domāju. Tas ir K-U-L-E-R. ALLISON Buchholtz-AU: es tā domāju. Es esmu diezgan pārliecināts, ka ir viens. 

TOMAS REIMERS: Mani mīļākie ir vienmēr ir bijis Krāsu shēma Dizaineris. 

ALLISON Buchholtz-AU: Ooh. 

TOMAS REIMERS: Kurš ir now-- 

ALLISON Buchholtz-AU: Ah, tas ir skaisti. 

TOMAS REIMERS: Un jūs var būtībā teikt, piemēram, Es vēlas, trīs krāsas blakus viens otram. Un tad pieņemsim kaut ko jauku darīt. Un tad jūs varat saņemt piemēru par to, kas tas varētu izskatīties. Un tad, ja jūs lidināties virs kādu viņiem, tas dod jums hex vērtību. 

Tik vienkārši kā labs veids, kā sākt domājot par krāsu shēmām vai kādas krāsas ir mājas lapā varētu iet labi kopā. Jo, kas var būt pārsteidzoši nav tik viegli izvēlēties, kā jūs domājat. Un tad otru cool lieta Es esmu vienmēr atrada par šo vietni ir, ja jūs hit piemēri, tas būs rāda piemēru, kādā mājas lapā varētu izskatīties, izmantojot šo krāsu shēmu. Anyway. 

Atpakaļ uz faktisko CSS. ALLISON Buchholtz-AU: Bet protams, mēs zināt šīs norādes varētu būt noderīga. TOMAS REIMERS: Nē, viņi noteikti var būt noderīga. Tātad otrajā likums, Allison? 

ALLISON Buchholtz-AU: Jā. Otrais noteikums ir tikai atbilst mūsu fontu. Tātad fonts svars ir tikai veida of-- tā svars būtu būt, ja jūs vēlaties, tāpat, piemēram, normāls vai, piemēram, plānāks fontus, vai šajā gadījumā, tāpat, bold. Es aizmirstu. Kas ir, ja jūs vēlētos it-- ir tur plānāks vienu nekā tikai, piemēram, normāli? TOMAS REIMERS: man nav reāli zināt, vai tur ir plānāks viens. ALLISON Buchholtz-AU: es aizmirstu. Tātad fonta svars mēs parasti tikai izmantot treknrakstā. Ja jūs vēlaties saņemt patiešām vērā tā, mēs ejam, lai parādītu jums. W3Schools ir visas atšķirīgs lietas, jūs varat darīt, lai fontus. Bet būtībā, ja jūs kādreiz vēlaties mainīt kaut ko par fontu, tas vienmēr būs, piemēram, font-kaut ko. Tātad tas būs, piemēram, burtu-ģimeni, ja esat mēģinot mainīt faktisko veidu. Tas būs font-style, ja jums vēlas, lai padarītu to kā kursīvs, vai slīprakstā, vai plauktiņš. Vai pat fonta krāsu, ja Mēs vēlējāmies, lai mainītu to. 

TOMAS REIMERS: Yup. Tātad jūs varat mainīt. Un veida tikai Atgādinājums tagad, tāpēc jūs varat redzēt, ka mums ir selektoru šeit. Mums ir šie cirtaini lencēm. Un tad mums ir noteikumi atdalīts ar semikoliem. Vai tas ir jēga? Yeah? Cool. Tātad, ja tas ir good-- 

ALLISON Buchholtz-AU: Back. TOMAS REIMERS: Parunāsim speciāli par to, kāda veida šķirotāja mums ir. "Iemesls šobrīd mēs esam kārtot tikai parādīts tagus. Bet jūs puiši varētu redzēt to ticams. Say jums ir divus punktus lapā un jums vēlas, lai varētu to stilu viens, bet ne citādi, jums nav vienkārši vēlaties ierobežot sevi ir izmantot dažādas faktisko HTML tags dot viņiem dažādus stilus. 

Tātad mums ir trīs pamata veidi šķirotāja. ALLISON Buchholtz-AU: Jā. Tāpēc mums ir tag, kas ir tas, ko mēs esam runājuši par tieši tagad. Tātad tas ir veids, kā jūsu ķermeņa vai p. Un tad mums ir klase, kas ir kad mēs definējam to mūsu CSS failu, tas vienmēr būs dot, neatkarīgi vēlaties nosaukums jūsu klasei. Un tas var attiekties uz vairākām lietām. 

Say jums ir pieci punkti un divi no trim no tām nepieciešams veidoti vienādi, Jūs varētu piemērot klasi uz to. Un tas ir tikai veids, kā mēs to darām. Mēs jums piemēru ja tas tiešām rāda uz augšu. Bet, ja jums bija varbūt kādu tagu p, pēc tam, jūs varētu rakstīt, klase ir vienāds neatkarīgi nodarbības Jūs vēlaties pieteikties uz to. Tātad, kāds klases selektori, ka mēs vēlamies piemērot šo konkrēto punktu, mēs varētu vienkārši uzrakstīt kā šis. Protams, es domāju, ka piemērs padarīs to daudz betona. 

Otrs mums ir id, ko mēs apzīmētu ar hash vai mārciņas, vai hashtag. TOMAS REIMERS: Octothorpe. ALLISON Buchholtz-AU: Octothorpe. Kas darbojas, too. Un tas viens ir patiešām unikāls. Tie būtu tikai uz viena lieta, par jūsu lapā. Tā, vai tas ir īpašs punkts vai kāds priekšmets sarakstā, vai kāds, tas būtu unikāls. Un tādā pašā veidā, ka mēs tikko saka, piemēram, class = "kategorija 1 class2," tas var būt tikai id no kāda mums ir. TOMAS REIMERS: Jā. Tātad, pieņemsim noteikti talk par piemēru šeit. Un es esmu tikai gatavojas nirt taisni atpakaļ uz kodu. Tātad, pieņemsim apskatīt mūsu HTML. Un tāpēc mums tagad ir viens punkts. Tas ir teksts. Es esmu tikai gatavojas mainīt tā. "Šis ir teksts 1." Un tad mēs ejam ir "Šis ir teksts 2." 

ALLISON Buchholtz-AU: Second vienu. TOMAS REIMERS: Yup. Tāpēc mums tagad ir "Tas ir teksts 2," vai ne? Un mēs ejam, lai redzētu, ka, ja mēs pārlādētu lapas, ko mēs ejam, lai atrastu ir, mēs esam gonna find-- ALLISON Buchholtz-AU: Ooh. TOMAS REIMERS: Jā. Mēs ejam, lai atrastu "Tas ir teksts 1 "un" Šis ir teksts 2. " 

ALLISON Buchholtz-AU: And ārā jauki dzeltenā krāsā. 

TOMAS REIMERS: Un jūs redzēsiet ka mūsu pārslēgs tieši tagad, kas attiecas uz p s, vai punkts, ietekmē gan no tiem, jo viņiem abiem tikties nosacījums, ka viņi abi p tag. Tas padara kopējo sajūtu. Tātad jautājums ir, labi, kādi ja mēs vēlējāmies, lai tikai iegūtu vienu? Tātad, tieši tāpat kā Allison teica, mums ir divi citi veidi, kā darīt. Es esmu gatavojas sākt ar id. 

ALLISON Buchholtz-AU: Sāksim ar id. 

TOMAS REIMERS: Un gan no tiem ir atribūti. Tātad atribūti pastāv HTML. Un ko viņi ir kaut kas jums pievienot iekšpusē tag, kas ir atsevišķi no taga nosaukumu. Tātad jūs varat būt vairākas atribūti. Yeah? 

ALLISON Buchholtz-AU: man bija tikai gatavojas teikt, no jūsu piemēram, no PSET 7, ja kāds no jums mēģinās saskaņot lietas, kas centrā, jūs varētu būt izmantotas "Teksta saskaņot = centru." Un esat ievērojuši to, iespējams, būtu vērsta savu tekstu vai jūsu navigācijas bar. Tātad tas ir tikai arī atribūts ka jūs varētu būt pazīstami ar. TOMAS REIMERS: Tur ķekars no atribūti, ka jūs redzēsiet. Yeah. Tāpat kā labs atsaucoties uz PSET 7. Mums ir id. Jūs varat arī klase, lietas, kā šis. Viena tag var būt daudz atribūtus. Tātad sākot ar id, pieņemsim izlikties mēs vēlaties, lai būtu id of-- es nezinu. Mēs to saucam īpašs, jo šo vienu, mēs esam gatavojas veikt treknrakstā, un uzsvērt, un neatkarīgi. ALLISON Buchholtz-AU: Ir gonna būt super īpašs. TOMAS REIMERS: Tātad šis viens, mums ir id īpašu. Tātad veids, lai izvēlētos, ka, tad, ir in main.css, nevis ir p tagu, jūs #special, OK? Un, kas atlasa lieta ar id special. Vai tas ir jēga, lai visiem? AUDITORIJA: Jā. TOMAS REIMERS: Cool. Tāpēc tagad, ja mēs ejam atpakaļ, mēs see-- Whoops. Yeah. Mēs redzam, ka tas tikai atlasa viens ar id special. Yeah? Skaņas atdzist. Jā. 

Mērķauditorija: Vai kaut kas ir atribūts gan klases un ID? 

TOMAS REIMERS: Jā. AUDITORIJA: OK. Un tad kas notiek, ja tu pēc tam sniedz tas daži noteikumi CSS, ka konflikts? TOMAS REIMERS: Protams. Mēs noteikti gatavojas runāt par to. Tātad, tieši to, ko jūs saņemat at, jūs varat arī nodarbības. Tātad, pieņemsim izlikties man bija trīs daļas, un es vēlējās, lai stils pirmais divi bet ne trešais. Nu, jūsu pirmā ideja var būt, labi, es varētu tikai dot otrs id. Bet jūs nevarat, jo ID, tieši tāpat Allison teica, ir unikāls. 

Tā vietā, id, ko jūs var izmantot, ir varat izmantot klasi. Un class-- ko tas ļauj jums jādara, ir būtībā saka, šis pieder kā daļu no grupas. Šajā gadījumā, mūsu grupa sauc Special. Un tas, ko mēs gatavojamies darīt, tad ir, mēs ejam say-- nevis mārciņu, mēs spēsim izmantot dot. OK? Un paziņojums, ka mārciņa un dot eksistēt tikai CSS failu, neietilpst HTML. ALLISON Buchholtz-AU: Jā. Būtiska atšķirība. 

TOMAS REIMERS: Man ir bija tik daudz cīņu, jo man hash ar HTML un tad vienkārši jutās stulba uz ilgu laiku. Redzēt, kā tas atlasa abas tie, ar šīs klases? Cool. 

Tagad, lietas var būt vairākas klases. Pieņemsim, ka es gribēju, lai pirmais divi ir fona dzeltens un otrais divi būt fonta krāsa zila. OK. Es īsti nezinu, kāpēc es gribētu vēlas to darīt, bet es varu. 

ALLISON Buchholtz-AU: Might nav ieteica to savā mājas lapā. Bet mūsu vajadzībām, tas būs jādara. 

TOMAS REIMERS: Tas nav labs krāsu shēmu. ALLISON Buchholtz-AU: Nu, dzeltena un zila ir mana vidusskolas krāsas. Es nezinu, though. TOMAS REIMERS: Allison Lielais Skola bija lieliska krāsu shēmu. [Smiekli] Tātad, tad ko mēs varam zvanīt tas ir Sauksim this-- tāpēc mums ir īpaša un mums ir Pretty. Es ieteiktu, jo tas, jūs izmantojat daudz aprakstošus vārdus. ALLISON Buchholtz-AU: Jā, es būtu to sauc, piemēram, dzeltenā vai zilā krāsā. 

TOMAS REIMERS: Mēs neesam patiešām padarīt reālu mājas lapā, kas ir iemesls, kāpēc mēs nedarām to. Bet, ja jūs faktiski bija reāla mājas lapā, jūs varētu būt, piemēram, raksts header, rakstu saturu, pirmais vārds, lietas, piemēram, ka, kas ļauj Jums ir daudz vairāk aprakstošs. Tie ir patiešām tāpat kā mainīgajiem. Tie būtu jānosauc tādā veidā kur Jūs varat, like-- yeah, kā tādu. Perfekta. 

Tā fona krāsu. Un tad mēs ejam say-- tā veids, kā mainīt krāsu, ir tikai "krāsu." Un mēs ejam, lai padarītu to zilā krāsā. Tas ir forši. Tāpēc tagad mums ir pirmie divi ir īpašs. Nākamais gatavojas ir "class = diezgan." ALLISON Buchholtz-AU: Un tad jūs vēlaties pievienot "diezgan", to vidū vienu. TOMAS REIMERS: Yup. Un pēc tam uz vidu one, pievienot "diezgan", kas notiek ir jums vienkārši ir atstarpi. Tātad klases atribūtu ir telpa atdalīts saraksts no visām klasēm kas attiecas uz šo atzīmi. OK? Tas nav kā šis viens pieder daži no īpašas klases veida sauc "Īpašs, telpa, diezgan." Tas pieder pie divām classes-- īpašs un skaists. Jā? Cool. 

Un tad, ja mēs skatāmies par to, kas notiek, mēs esam gatavojas redzēt, ka pirmais ir dzeltena fona, melns teksts. Otrais one-- 

ALLISON Buchholtz-AU: --has bold dzeltena fona ar zilu tekstu. Un mūsu pēdējais vienkārši ir zils teksts, kas mums uzticēti. 

TOMAS REIMERS: Cool? Kā selektori strādā? Awesome. 

ALLISON Buchholtz-AU: Vai mēs vēlamies runāt par konfliktu tagad tad? 

TOMAS REIMERS: So yeah. Absolūti. Tātad, kas notiek, ja jums ir konflikts, vai ne? Izliecies pirmo, izveido kaut like-- ALLISON Buchholtz-AU: Varbūt tas viens maina fona? TOMAS REIMERS: Jā. Tātad mēs ejam, lai padarītu "skaistu" mainīt fona ar lasi. ALLISON Buchholtz-AU: Tu esi tikai ar visu lielo krāsas šodien, Tomas. TOMAS REIMERS: Jā. Tāpēc, ka es uzzināju varu izmantot lasis kā īsta krāsu. Tātad, mēs esam tikai gatavojas to darīt. Es arī domāju, ka Sunset ir īsts krāsu. Mērķauditorija: Sunset ir īsta krāsu? ALLISON Buchholtz-AU: Mēģināsim to. TOMAS REIMERS: Pēc šī demo tikai tāpēc, ka gadījumā, ja tas kopgaldu up, Es nevēlos, lai debugging. Tātad mēs zinām, lasis ir īsts krāsu. Tāpēc jebkura guesses par to, kas notiks? 

ALLISON Buchholtz-AU: Jebkura ideja? 

Mērķauditorija: [dzirdams]. 

TOMAS REIMERS: Jā. Tātad jums tas tieši labi. Būtībā, tas aizņem pēdējais noteikums, ka tā tika dota. 

ALLISON Buchholtz-AU: Tātad tas ir kur kaskādes stājas spēkā. 

TOMAS REIMERS: Tātad atcerēties, kā mēs bija, ka kaskādes stila lapas? Tātad, ka mēs veida nozīmē ka mums ir ķekars noteikumu kas attiecas uz viena virs otras, un tie var arī ignorēt viens otru. 

ALLISON Buchholtz-AU: So kāds s apakšā ignorēs kāds ir augšpusē. Jūs varētu būt noteikumi, kas pilnībā noliegt kaut ko iepriekš. Tas ir arī iemesls, kāpēc jūs vēlaties būt uzmanīgiem, kad jūs esat stils, lai jūs neesat radīt noteikumus, kas jūs tikai pilnīgi primāriem. 

TOMAS REIMERS: Vai varbūt jūs gribam pārrakstīt noteikumus. 

ALLISON Buchholtz-AU: Vai varbūt jūs darāt. Jā. 

TOMAS REIMERS: Izlikties esat klase, kas attiecas uz lielāko daļu lietas, bet pieņemsim, ka jūs vēlaties mainīt fona krāsu uz sarkano un fontu svars treknrakstā vairumam lietas, bet par vienu, vēlaties tikai fona krāsu būt sarkans, bet vēlaties, lai visi citi īpašības, jūs varētu darīt kaut ko piemēram, "font-weight = normāls," kas tad atsaukt šo drosmīgo pārmaiņas. Yeah? Atkal, labākais veids, es domāju, ka Allison teica, ka tas ir tikai praksē. 

ALLISON Buchholtz-AU: eksperimenti. 

TOMAS REIMERS: prakse, prakse, prakse, un eksperiments. Es zinu daudz cilvēku, kas domā CSS ir tikai daudz uzminēt-un-pārbaudi beigās, dienā, kur, ja jūs vēlaties darīt something--, piemēram, jums aptuvenu priekšstatu, bet Jums joprojām, iespējams, ir nepieciešams to izmēģināt, lai pārliecinātos, jūs zināt, kā tas izskatās. 

Mērķauditorija: Kad jūs esat piesakās klases, vairāk nekā viens ar to pašu punktu, vai nodaļas, to dara neatkarīgi no tā, kādā secībā jūs varat ierakstiet tos pēdiņām? 

TOMAS REIMERS: Nē, nemaz. 

ALLISON Buchholtz-AU: Svarīgi ir rīkojums jūsu CSS stila lapas. Mērķauditorija: Vai jūs varētu atkārtot jautājumu? TOMAS REIMERS: Ak. ALLISON Buchholtz-AU: ietvaros klases, kad jūs dodat nodarbības uz kaut ko HTML, nav tas jautājums, ko lai viņi ir? Tas nav svarīgi pasūtījumu. Nozīme ir no rīkojums klases selektori jūsu CSS, jūsu stila lapas. 

TOMAS REIMERS: Sound labs? 

ALLISON Buchholtz-AU: Lovely. 

TOMAS REIMERS: Un tad mēs turpināsim kuri paredzēti, lai ALLISON Buchholtz-AU: Kas mums ir tālāk? Es aizmirstu. Ak, mēs vienkārši ir piemēri. Bet mēs esam veida darījuši tiem. Mēs esam darījuši piemērus par lidot. 

TOMAS REIMERS: Mēs nokļūt apvienot selektori drīz. 

ALLISON Buchholtz-AU: Ak, mēs apvienot selektori. TOMAS REIMERS: Tātad daži piemēri ir mums # Dog-- mārciņu, vai hashtag, vai octothorpe, vai kāds Jūs vēlaties, lai izsauktu that-- asas. 

ALLISON Buchholtz-AU: Sharp suns. 

TOMAS REIMERS: Tad jums ir .pets. Kaut kas ir id suns, tur ir tikai viens suns lapā. Kaut kas ir id kaķis, tur ir tikai viens kaķis. Tur var būt daudz mājdzīvnieki uz lapas. Tieši tāpēc mēs deva, ka klasēs. Jums ir piemērs p. Un pēc tam tā viens no Pēdējais piemērs, kas ir kaut mēs neesam runājuši par, ir tas, kas notiek, kad jūs apvienot tos. Tik p.pets. 

Tātad, ka iesim atpakaļ kods un ieviest another-- yeah. Tātad atpakaļ šeit. 

ALLISON Buchholtz-AU: I šķiet, ka tas ir really-- piemēram, tikai skatoties caur piemēriem ir patiešām veids, kā mācīties šo. Tāpēc, ka tas, ko mēs darām. 

TOMAS REIMERS: Tātad pieņemsim izlikties mēs tikai vēlas, lai izvēlētos tekstu 2, vai ne? Tātad, mēs noteikti nevaram darīt ar id. Nu, mēs varētu darīt, ka ar id, bet tas nav id. Es varētu pievienot vienu, bet pieņemsim izlikties ka es negribēju, lai pievienotu vienu vai tas jau ir kaut kas cits. Es nevaru darīt, ka ar to. Tag noteikti nav unikāls, labi? Un neviena no tām nav klase. Bet jūs varat apvienot šīs lietas. Teiksim, mēs gribējām kaut ko darīt kas attiecas tikai uz lietām, kuras ir klases īpašs un kas ir klasi diezgan. 

Tātad, ko jūs varat darīt, ir main.css, Jūs varat teikt, pieņemsim vispirms izdzēsiet to. Jūs varat apvienot tos. Tātad jūs varat darīt .special. Nav vietas. Just .special.pretty. Ko tas nozīmē, ka ir kaut kas kas ir gan īpašs un skaists. Vai tas ir jēga? Un, ja mēs ejam šeit, kādi jūs gatavojas redzēt ir šis noteikums attiecas tikai uz Otrs, kuram ir gan no tiem. Un jūs varat darīt, ka daudz lietas. Jūs varat say-- pieņemsim izlikties Es tikai gribēju darīt lietas, kas ir klasi diezgan un kas ir arī tag punktu. Tik p.pretty. Izliecies, ka man bija kaut kas diezgan uz tagu ķermeni. OK? Es varu palaist šo un es var redzēt, ka tas ir tikai gatavojas piemērot lietām, kuras ir punkts ar klasi diezgan. Un jūs varat apvienot tos, būtībā, tik daudz, cik vēlaties. Tātad jūs varat vienkārši viņus kopā. Vai tas ir jēga? ALLISON Buchholtz-AU: So šāda veida ir vairāk noderīgs kad, Tomas teica agrāk, varbūt Jums ir ļoti sarežģīta mājas lapā, un jums jau ir daudz šo noteikumu rakstveida, un jums ir nepieciešams, lai apvienot divas no iepriekš. Tāpat kā tā vietā rakstot veselumu Jaunais selektors un mainot to tur, Jūs varat vienkārši apvienot tiem, kas pārklājas. 

TOMAS REIMERS: Vai arī jūs varētu atrast out-- dažreiz tur ir viena klase, kurā padara fonta krāsu, piemēram, zila, un tur ir cita klase, kas padara fona zilā krāsā. Un tas vienkārši nestrādās. Tātad jūs rakstīt īpašu gadījumu, kad, like-- bet, ja tas ir gan, ko jūs esat gatavojas darīt, ir jūs gatavojas šī ir viena šo toni zila un tas viens šo citu toni zilā krāsā. Taisnība? 

ALLISON Buchholtz-AU: Good tiem izņēmumu veidu. TOMAS REIMERS: Tātad, lai domāt par problēmām kas varētu rasties, ja jūs tos apvienot. Cool. Tātad atpakaļ pie mūsu prezentāciju. ALLISON Buchholtz-AU: Mēs esam gandrīz tur. TOMAS REIMERS: Un tas ir apstājusies savieno. ALLISON Buchholtz-AU: Ak, nē. ALLISON Buchholtz-AU: CS at punkts, interneta iet uz leju. Ak, ironija. 

TOMAS REIMERS: Tātad, par laimi, mēs varam iesniegt bez interneta, es domāju, jo mums ir visas slaidus šeit. So parunāsim par attiecības tagiem. ALLISON Buchholtz-AU: Right. Tik tikko veida iet nost no tā, ko teica Tomas, tas ir tikai vēl viens veids, kā to darīt. Tātad mums ir dažas vecāks selektors ar bērnu selektoru. Tātad šajā piemērā šeit, mums ir dažas ķermenis ar klases navigācijas joslas, klases pogu. Ah. 

TOMAS REIMERS: Ak, piedodiet. 

ALLISON Buchholtz-AU: And būtībā, ko tas nozīmē ir izvºlºtos visi no bērniem, kā, piemēram visi no šiem veida selektori, šajā mātes selektoru. Un tie ir vienīgie tas kādreiz gatavojas piemērot. Es nezinu, vai jūs ir labāks veids of-- TOMAS REIMERS: Tāpēc es guess ceļu domāt par šo ir atcerēties pirms cik mēs veida patīk viņus kopā. Un tad tas nozīmē, ka vienu elementu kas atbilst visiem šiem. Ko tas saka, ir, es gribu, lai jūs, lai atbilstu visu ietvaros some-- Es gribu Jūs atrast selektoru. Un tad, ka pašlaik, es gribu jūs saskaņot jaunas lietas. Taisnība? Tātad CSS, tas viss ir par sava veida to var saskaņot šos priekšmetus. Un jūs varat mēģināt saskaņot posteņus citiem posteņiem. 

Tātad, pieņemsim faktiski darīt piemēru, un mēs domājam, ka būs noskaidrot. Tātad, pieņemsim izlikties mums ir īpašs, īpašu diezgan, neatkarīgi. Un tad mums ir saiti, OK? Līdz ar to atcerēties, ir saite. Tas nav gatavojas doties jebkur. Un mēs ejam, lai arī tā saite klases, I guess. Pieņemsim arī tā, ka class-- man ideja. ALLISON Buchholtz-AU: Cool. TOMAS REIMERS: Coo-- pieņemsim iet tā klasē diezgan. Kāpēc ne? 

ALLISON Buchholtz-AU: OK. TOMAS REIMERS: So tagad diezgan lietas gatavojas veikt fona zila, fona krāsu lasi. Tas ir jēga. Un, ja mēs this-- 

ALLISON Buchholtz-AU: Vai vēlaties pievienot tekstu tāpēc hipersaite faktiski parādās? TOMAS REIMERS: Ka varētu būt labs zvanu. ALLISON Buchholtz-AU: "Cēlonis tiesības Tagad mēs esam tikai gonna iegūt neko. TOMAS REIMERS: Tātad tas ir saite. "Tas ir saikne." Ak, un tas notiek būs vēl viens posms. Dosim tai klasi "cool". Tev taisnība. Cool. Tātad šobrīd mēs ejam, lai greifers šo. Mēs ejam, lai mest vienu. Mums ir viens īpašu tag, un mēs arī nāksies vienu diezgan tag. Un tieši tagad, ko mēs ejam darīt, ir, mēs esam gatavojas darīt cool-- ko mēs vēlamies to darīt? ALLISON Buchholtz-AU: Vai mēs varam padarīt to lielāks? TOMAS REIMERS: Let 's to robežu. ALLISON Buchholtz-AU: Mēs varētu robežai. TOMAS REIMERS: Jā. Tātad, mēs esam gatavojas darīt kaut ko piemēram, robežu is-- un mēs esam gatavojas izskaidrot visu sekundē. Par now-- 

ALLISON Buchholtz-AU: lodziņā modeli. TOMAS REIMERS: Bet tagad, mēs esam tikai gatavojas sniegt tai robežu. Tātad, ko tas nozīmē, jūs esat gatavojas redzēt šīs saites. Un jūs gatavojas redzēt, ka viņi ir šie, piemēram, neglīts melnā robežas, kas ir forši. 

ALLISON Buchholtz-AU: Mūsu mājas lapa ir tik jauka. 

TOMAS REIMERS: Jā. Mūsu mājas lapa ir laba. Tātad šie divi ir saites, un tie parādās. Tagad pieņemsim izlikties I tikai gribēju to darīt ja tas nav laikā kaut ko kas bija fona lasi. Tāpēc atcerieties, ka šo vienu ir fona lasi, jo tas ir klases diezgan. 

Bet mēs gribam teikt, ka tikai atdziest kas ir klasē īpašs, ne klasē diezgan, vajadzētu būt, ka robežu. Nu, ko jūs varat darīt, ir jums var teikt, .special, telpu, .cool. Un ko tas dara, ja jūs domājat, ka par to, vai tas ir būtībā sakot, OK, atrast man visu kas atbilst īpašs. Tad šajās tagus, atrast man viss, kas ir cool. ALLISON Buchholtz-AU: Tātad vēl viens veids kas varētu būt labs, lai domāt par to, apvienojot to atpakaļ uz C, ir tāpat kā ideja par darbības jomu. Tātad, ja jums ir dažas selektors, piemēram, tiem, ka mēs esam strādājuši pirms tam, visu jūsu mājas lapā, visi jūsu HTML ir jūsu darbības jomā, vai ne? Bet, kad mums ir šīs vecāku un bērnu attiecības, tas ir kā tad, ja jūs esat sašaurinot kur jūs meklējat, lai konkrētā vietā, kā tad, ja, piemēram, mēs meklējam laikā īpaša funkcija vietā Mūsu visu failu. Mērķauditorija: Tātad ar to prātā, būtu tas ir vienaldzīgs, ja mums būtu changed-- ALLISON Buchholtz-AU: pasūtījums? Mērķauditorija: --the klase CSS līdz .cool, telpu, .special? ALLISON Buchholtz-AU: Jā, jo tad tas teiktu, joma to viss, kas ir cool, un pēc tam apskatīt kādā has-- Es nozīmē, tāpat, šajā gadījumā, Es nedomāju, ka tas būtu mainījis. 

TOMAS REIMERS: Ja mēs būtu teicis, ko? Piedodiet. 

ALLISON Buchholtz-AU: Ja mēs joma tai atdzist un pēc tam meklēt lietas no īpaša, tas būtu tas pats, faktiski. 

TOMAS REIMERS: Tātad tas nebūtu. 

ALLISON Buchholtz-AU: Tas nebūtu? Oh, oh labi. Es esmu nepareizi. 

TOMAS REIMERS: Tātad iemesls tas different-- bieži mistake-- ir tas, ka tagad tikai saite ir cool, vai ne? Es domāju, mans jautājums jums puiši ir, to, kas šajā lapā ir saskaņota ar .cool? Ir divi tags šeit, vai ne? Kas ir tas viens, un tas viens. Gan spēles cool. Nekas cits dara. Tātad, ja jūs teicāt, .cool, telpa, .special, ko jūs gatavojas teikt, ir, šajās tagiem, kas ir īpašs? ALLISON Buchholtz-AU: Hm. Tas ir tas, ko it-- labi. Jo tas ir tāpat kā tikai kaut ko šeit. 

TOMAS REIMERS: Tātad tas izvēlas neko. 

ALLISON Buchholtz-AU: tā kā ar īpašs, mēs esam šajās tagus šeit. 

TOMAS REIMERS: Tie, un tiem. AUDITORIJA: OK. Tātad šie tagus no šķērssvītras? 

TOMAS REIMERS: Jā. Vai tas ir jēga? Kā tas būtībā mēģināt sašaurināt jomu. ALLISON Buchholtz-AU: Jā. Es domāju, ka ir iespējams Vieglākais veids, kā domāt par to. 

TOMAS REIMERS: Tātad mēs atradām šo, un Mēs atradām abi saskaņota īpašs. Un tad mēs esam jautā, laikā šie puiši, kas ir cool? Un šajā vienu, tas savu atdzist. Šajā vienu, nekas ir cool. Tātad šis ir vienīgais tagu, kas paliek. 

ALLISON Buchholtz-AU: tā cool ir tikai šajās pēc tagiem tur. TOMAS REIMERS: Tieši tā. Un, kas ir īpaša laikā tos? Nekas. Tagad, ko es teikšu, ir ja nebija vietas, jūs jautā, kas ir forši un special-- vai to, kas ir diezgan, un īpašs, vai ne? Ja jūs sakāt .special.pretty, tas ir tāds pats kā .pretty.special. 

Jo tas, ko noņemot telpa ir jautā ir, kad jūs sakāt .special, jūs jautā, OK, kādi ir īpašs? Un tad no tiem, kas tiem ir arī diezgan, kas ir tas pats, gramatiski, kā jautā, kas ir diezgan, un tad no tiem, kas ir arī īpašs? Taisnība? Tā ir atšķirība kas ir robežās, kas ir. AUDITORIJA: OK. TOMAS REIMERS: Jā. Awesome. Tātad ar šo prātā then-- 

ALLISON Buchholtz-AU: Es domāju, ka mūsu pēdējā lieta ir (IN FANCY britu akcentu) box modelis. 

TOMAS REIMERS: box-- [Chuckles] Man patīk, kā Allison saka, ka. Tātad kastē modeļa lieta. 

ALLISON Buchholtz-AU: Vienkārši ir kaste, es būšu jūsu kaste modeli. TOMAS REIMERS: Tātad parunāsim par to. Tātad šobrīd mēs esam pavadījuši daudz laika runājot par šķirotāja. Līdz šim, jūs puiši, iespējams, piemēram, meistari selectors-- jūs zināt, Kā precīzi izvēlēties saturu, kas Jūs vēlaties, lai manipulēt ekrānā. 

Tāpēc tagad jautājums ir, kā tieši jūs varat manipulēt ar to? Tāpēc es domāju, visvienkāršākā veids, kā domāt par to, ka ir labi, ko tieši ir elements CSS? Mēs esam pavadījuši daudz laika runājam par, to, kas ir tag, vai kāds ir visvienkāršākā pārstāvība birku? 

Labs veids, kā domāt par tas ir, kādā veidā ir lasis? Kāda forma ir, piemēram, lašu krāsas fona? 

Mērķauditorija: Tas ir taisnstūris. 

TOMAS REIMERS: Tas ir taisnstūris, vai ne? 

ALLISON Buchholtz-AU: Nebija āķīgs jautājums. [Smiekli] 

TOMAS REIMERS: Nemēģina triks jums puiši to vēlu. Tātad mums ir šī taisnstūri. Un tag ir p, vai ne? Tā, ka dod mums labu pārliecība, ka daļa tiek attēlots kā taisnstūris, at vismaz prātā pārlūku, kas tas ir. 

ALLISON Buchholtz-AU: Es domāju, pārlūkprogrammas parasti ir taisnstūra, tāpēc tas ir jēga. 

TOMAS REIMERS: Ideja šeit ir ka visi tagus CSS tiek attēlots kā taisnstūris. Un katru taisnstūris ir četri daļas, saskaņā ar CSS, OK? Jums ir faktisko saturu. Tas ir, ja teksts ir. 

ALLISON Buchholtz-AU: Varbūt jūsu attēlu. 

TOMAS REIMERS: Jā. Jums ir polsterējums, kas ir tikai daži veida atstarpēm. Tad jums ir robežas. Un tad jums ir rezerve, kas balta telpa ārpus tā. Tā, ka nav jēgas ikvienam, tāpēc mēs esam gatavojas runāt par to, ka uz otru. Tātad šeit, ko mēs gatavojamies darīt ir, mēs spēsim izveidot kādu divs, OK? Atvainojiet, bet I-- 

ALLISON Buchholtz-AU: Es jūtos patīk mums vajadzētu likt cute attēlu. 

TOMAS REIMERS: Mums noteikti vajadzētu. 

ALLISON Buchholtz-AU: Es jūtos tāpat kā ikvienam varētu gūt labumu no gudrs attēlu, ir viss. 

TOMAS REIMERS: Vai mēs varam visi gūst labumu no a-- 

Mērķauditorija: Jā, protams. TOMAS REIMERS: OK, atdzesē. Tātad mums vajadzētu likt gudrs aina kaut kur. ALLISON Buchholtz-AU: es jūtos kā cute bunny varētu būt noderīga tieši tagad. TOMAS REIMERS: Protams. ALLISON Buchholtz-AU: nedēļas beigām. Ir kaut adorab-- 

TOMAS REIMERS: Kā cīkstēšanās kaķēns? 

ALLISON Buchholtz-AU: Kaķēns strādā, too. 

TOMAS REIMERS: Cool, jo tur ir vieta, kas. To sauc PlaceKitten. ALLISON Buchholtz-AU: Tas ir lieliski. TOMAS REIMERS: Jā. ALLISON Buchholtz-AU: Just, piemēram, viettura attēlus jūsu mājas lapā. TOMAS REIMERS: Mm-hm. Tur ir arī PlacePuppy. Un tur ir PlaceBacon. 

ALLISON Buchholtz-AU: PlaceBacon? Tiešām? 

TOMAS REIMERS: Ak, mums nav ir interneta pieslēgums šeit. 

ALLISON Buchholtz-AU: [čīkstoņu] Traģisks. TOMAS REIMERS: Pretējā gadījumā, Es gribētu jums parādīt puiši kā likt attēlus jūsu mājas lapā. Mēs ejam, lai mēģinātu iegūt šo strādāt pirms mums ir jāiet. Bet tagad mēs esam tikai gatavojas runāt krāsās tad. Mēs vēlamies, lai bildes kittens-- 

ALLISON Buchholtz-AU: Mēs darījām. 

TOMAS REIMERS: --the internets s leju uz šo brīdi ir. Tātad mums ir divas divs, un mēs esam gatavojas dot viņiem divas ID. Mēs ejam, lai izsauktu to "Pirmā" un "otrā." Tātad id = "pirmajā vietā." Un mēs ejam, lai dotu viņiem divas krāsas. Tātad, kā mēs izvēlēties kaut ko ar id "pirmais"? ALLISON Buchholtz-AU: Dot vai hash? AUDITORIJA: Sharp. TOMAS REIMERS: Sharp, perfekta. Sharp, hash, neatkarīgi we-- 

ALLISON Buchholtz-AU: Daudz lietas, lai izsauktu to. 

TOMAS REIMERS: OK. Mēs ejam, lai norēķinātos par hashtag, un ka tas, ko mēs ejam, lai iet ar. OK? 

ALLISON Buchholtz-AU: hashtag. 

TOMAS REIMERS: So hashtag pirmā. 

ALLISON Buchholtz-AU: So Jūs varat čivināt seminar-- hashtag CSS, hashtag atdzesē. TOMAS REIMERS: hashtag awesomeness. ALLISON Buchholtz-AU: Hashtag awesomeness, jā. TOMAS REIMERS: OK. Tāpēc mums ir "pirmā" un "otrā." Tātad, pirmkārt, mēs esam nāksies fona krāsa sarkana. ALLISON Buchholtz-AU: Uh, resnās zarnas. TOMAS REIMERS: Yup. ALLISON Buchholtz-AU: Es būšu jūsu vietas pārbaudītājs. TOMAS REIMERS: Allison dabūja mani. Fona krāsa blue-- 

TOMAS REIMERS: Purple! 

TOMAS REIMERS: Purple. ALLISON Buchholtz-AU: Jā. Purple mana mīļākā krāsa, un mēs neesam lietojuši vēl. 

TOMAS REIMERS: Violet. ALLISON Buchholtz-AU: Violeta. Kas darbojas. 

TOMAS REIMERS: Tātad mēs esam nāksies divas divs. Viņi būs pilnīgi tukšs. Mums vajadzētu, iespējams, ir kādu tekstu. So "pirmais" būs "HELLO." Un "otro" būs say-- 

ALLISON Buchholtz-AU: redzēšanos. 

Mērķauditorija: - "WORLD." Sveiki, ardievas. ALLISON Buchholtz-AU: Es redzēju tos Koncerta otro nedēļu. TOMAS REIMERS: The Beatles? ALLISON Buchholtz-AU: For reals. Viņi nav tik liels. Man tas nepatīk. 

TOMAS REIMERS: Mums ir "HELLO" un "uz redzēšanos". Un atkal, CSS ir tikai laba, tāpēc, ka tā atzīst mūsu krāsas. Nav nepieciešams pat jāuztraucas, ka tie pastāv. Viņi dara. 

ALLISON Buchholtz-AU: Tās pastāv. 

TOMAS REIMERS: Tātad CSS es domāju, ir 255 vārdi runāt par krāsu. Ja jūs varat iedomāties krāsu ārpus tie 255, piemēram, es būšu pārsteigts. ALLISON Buchholtz-AU: Jā. Es domāju, ka jūs guys var būt tikai nāk uzreiz pēc. 

TOMAS REIMERS: Tātad šeit, jūs redzēsiet, mums ir divas kastes tiesības uz augšu no otra, labi? HELLO un ardievas. 

ALLISON Buchholtz-AU: Nav vietas starp. Viņi vienkārši smooshed tiesības uz augšu no otra. 

TOMAS REIMERS: Tātad pirmā lieta Es domāju, mums vajadzētu runāt par ir pieņemsim arī say-- yeah. Tātad CSS pārstāv tos kā sava veida kastes. Un kā kastes, viņiem ir saturs. Un saturs šobrīd ir sava veida HELLO vai goodbye un tas arī viss. OK? 

Tātad viena no pirmajām lietām, jūs var darīt, ir varat pievienot polsterējums. Polsterējums saka, cik daudz vietas tas nedrīkst atstāt katrā pusē. Tāpēc pieņemsim, ka es gribu teikt 10 pikseļi katrā pusē. Un es preparēt ka sekundē. ALLISON Buchholtz-AU: Visas šīs lietas šeit gribam būt pārsvarā pikseļos par pārējo semināra. Jūs esat dodas, lai redzētu, ka tā ir dažas vietas ap to, labi? Tātad, ko jūs neredzat šeit ir tur ir šī neredzamā veida polsterējumu katrā pusē, kas norāda, tāpat, Labi, jums ir jūsu kastē content-- 

ALLISON Buchholtz-AU: Vai jūs vēlaties vienkārši uzvilkt iepazīties elements? 

TOMAS REIMERS: Jā, tas ir laba ideja. ALLISON Buchholtz-AU: Arī es atrast ka pārbaudīt elements ir labs veids lai noskaidrotu, vai kaut kas notiek nepareizi, kaut kas neparedzēts notiek, pārbaudot tagus un redzēt to, ko tas ir tāpat kā pārrakstīts ir noderīga. 

TOMAS REIMERS: Tātad es neesmu pārliecināts ja jūs guys var redzēt šo krāsu. Vai tu? Jūs redzēsiet šo polsterējums par tāda veida malas. Un tad jūs redzat faktisko saturs zilā krāsā, vai ne? Tā, ka ir ļoti pamati kastē modeli. Jums ir saturs. Tad jums ir polsterējums. 

Mērķauditorija: Kāpēc ne jūs vienkārši izmantojiet lodziņu iekšā the-- 

ALLISON Buchholtz-AU: Right. Jo tas ir tikai izvēloties elements tiesības tagad. 

TOMAS REIMERS: Yup. Citas lietas. So parunāsim par to, ka polsterējums komandu par sekundi. Tātad CSS, mērījumu nepieciešams, lai būtu vienību. Tātad vispirms jums ir summu. Tātad šajā gadījumā, mēs esam teica 10. Un tad nākamais mēs jau teicām, ir pikseļi, px. Citas tie, jums varētu būt esat lietas, piemēram, centimetri, collas. Jūs varat darīt lietas, piemēram, kas ir 10 collas? Un tas būs smieklīgi. 

ALLISON Buchholtz-AU: Oh, boy. 

AUDITORIJA: Paga. 

TOMAS UN ALLISON: Jā. TOMAS REIMERS: Tātad tas viss polsterējums. Es iešu atpakaļ uz pikseļiem. 

ALLISON Buchholtz-AU: Pixels mēdz būt, piemēram, standarta. Kad paskatās daudz mājas lapām, tie galvenokārt strādā pikseļos. TOMAS REIMERS: Tātad jūs esat dodas, lai redzētu nu pixels-- citas, kuras jūs redzat ir em, kas ir viens em ir vienāds ar augstumu font kuru jūs pašlaik izmantojat. 

ALLISON Buchholtz-AU: Mm. TOMAS REIMERS: Tas ir labs veids, kā pateikt, piemēram, es gribu tik daudz vietas, kā mans fonts ir veikt. ALLISON Buchholtz-AU: Vai nezināt, ka. Jūs uzzināt kaut ko jaunu katru dienu. TOMAS REIMERS: Ir Mērījumu CS daudz. Es iesaku jums tos uzmeklēt. Attiecībā uz visiem jūsu gadījumos, es domāju, ka pikseļi vajadzētu būt pietiekami. Un viņi arī to, kas jūs gatavojas redzēt vairumā piemēriem izdarīt tiešsaistē. Tātad mēs atstāt to pikseļi. 

Jūs varat arī, man vajadzētu say-- tik polsterējuma komplekti visi no paddings. Jūs varat arī darīt kaut ko līdzīgu "Polsterējums-top", lai tikai set-- ALLISON Buchholtz-AU: Varbūt mēs saņemt mūsu "hello" muguru. TOMAS REIMERS: --to vienkārši noteikt polsterējums uz augšu un nekas cits. Tātad četras komandas ir polsterējums-top, polsterējums-bottom, polsterējums, pa kreisi, un polsterējums-labi. 

ALLISON Buchholtz-AU: Tāpat kā jūs varētu sagaidīt par kastīti. 

TOMAS REIMERS: Jā. Nekas pārāk traks tur. Vai tas ir jēga? Tāpēc, ka ir polsterējums. Es esmu gatavojas noteikt visus tad paddings atpakaļ uz 10. Un tad es esmu gatavojas pāriet uz robežas. 

Tātad, kas ir robeža ir robeža ir dīvaini komandu. Tas aizņem veida trim lietām vienlaicīgi. Tātad pirmais ir, cik liels gribu, lai to kā mērījumu. Atkal, es esmu tikai izmantojot pikseļi. Un pēdējā lieta, ko es vajadzētu pievienot mērījumiem ir viena lieta, kas nav nepieciešams vienību ir 0. Tas ir tiešām nepareizi spēj izraisīt 0 vienību, jo 0 ir 0 pāri collas, pikseļi, centimetri, neatkarīgi. Tas viss nozīmē tikai 0, labi? Tātad vispirms jums arī tā mērīšanu. 

Tad jūs arī tā stilu. Tāpēc es esmu gatavojas teikt "ciets." Un mēs runājam par to, ko tas nozīmē. Un tad visbeidzot, jums arī tā krāsu. Tāpēc es esmu gatavojas teikt "melna". Un tie visi ir lietas, ko mēs esam tagad redzējis, izņemot stilu, bet mēs runājam par to. Tātad jums puiši ir redzējuši mērījumus, un jūs esat redzējis krāsas. Un kas notiek, ir mēs šo jauki melna apmale ap to, labi? Jūs guys redzēt, kā mēs to izdarīja? 

AUDITORIJA: Jā. 

TOMAS REIMERS: Cool. Tātad, kas tas ir? Tātad pirmkārt, tas ir viens pikseļu. Tas ir pašsaprotami pietiekami, vai ne? Tāpat kā, tas ir viens pikseļu biezs. Vai tas būtu viens pikseļu, bet es esmu pietuvināto, tāpēc tas ir mazliet vairāk nekā. 

ALLISON Buchholtz-AU: Un mums ir tas smieklīgi izšķirtspēja TV. 

TOMAS REIMERS: Jā. Jūs varat padarīt to lielāku, mazāks, neatkarīgi. Tātad, šeit ir divu pikseļu robežas. Jūs redzēsiet, tas ir divas reizes plānāka. Nākamā lieta, jums ir krāsu. Tas nav interesanti. Es neesmu gatavojas runāt par to, tiešām. 

ALLISON Buchholtz-AU: Bet stils varētu būt tikai nedaudz interesanti. 

TOMAS REIMERS: Jā. Tātad stilu, ir maz ones ka es redzu izmantoti bieži. Pirmais ir cietas, nākamais s dotted, un pēdējais ir sagrautas. Un šeit ir izraibināta. Jūs redzēsiet, ka viņi ķekars punkti, labi? Labs veids, kā sava veida iegūt jauku robežu iet, domuzīmes ir arī diezgan populārs. 

ALLISON Buchholtz-AU: Un tad, protams, es esmu pārliecināts, ka ir daudz citu stili, ka jūs varat saņemt. Un mums ir liels kopums saites beigās par jums, puiši līdz veida iepazīties un apskatīt vairāk vēsā CSS. 

TOMAS REIMERS: Un tad pēdējā lieta, mēs esam gatavojas runāt par box modeļi nekustamo ātri. Ak, un pēc tam robežu, tieši tāpat polsterējumu, Jums ir arī lietas, piemēram, robežu pa kreisi, pa robežu labo, robežu-top, robežu apakšā, kas ļauj jums nokļūt noteiktā robežas. Tātad, šeit ir tikai robeža kreisās definēta. Vai tas ir jēga? 

ALLISON Buchholtz-AU: Tas ir cool veids, lai uzsvērtu lietas vai pievienot līnijas starp dažādiem elementiem. TOMAS REIMERS: Protams. Tātad tas ir mūsu robežas. Un pēdējais ir starpība. Maržinālā s piemēram polsterējums izņemot tas nav within-- ALLISON Buchholtz-AU: Ir nav apkārt jūsu elements bet patiesībā ap visu kaste, kas mēs esam bijis redzēt. 

TOMAS REIMERS: Jā. Allison teica perfekti. Tas nav, piemēram, iekšpusē jūsu elements, tas ir ap visu kastē. Tas nozīmē, ka lietas, piemēram, fona neattiecas uz to. Un tas būtībā saka: piemēram, es negribu neko šajā daudz vietas par mani. Tātad, piemēram, šeit mums ir rezerve 10 pikseļi. Tātad nekas 10 pikseļi būtu man blakus. Tas ir sava veida tā telpa, bet sava veida ne. Tā, ka ir ļoti pamati kastē modeli. Vai tas ir jēga? Cool, cool. ALLISON Buchholtz-AU: satriecošs. Tāpēc tagad es domāju, ka mēs tikko ir mūsu atdzist resursi ka mēs ņemšu jūs guys cauri ļoti ātri. Un mēs actually-- labi, mums ir internets vēl? 

TOMAS Reimers: Let 's redzēt, ja es varētu atvērt up-- ļaujiet man tikai redzēt, ja es var iegūt internetā ātri bet Allison runā par kaut ko Allison grib runāt. ALLISON Buchholtz-AU: Tāpēc basically-- man nav zināt, ko vēl es varu teikt šajā brīdī. Bet tie ir daži tiešām labas resursu. Tie ir tie, kas Tomas un man ir izmantoti un ka mēs faktiski izmanto, lai ieplūdes šim. W3Schools ir viens, ka jums puiši būtu redzējis. Mēs iesakām to lietas ar CSS daudz. Es zinu, es ieteiktu to mans sadaļa visu laiku. 

Viens no lielas lietas ir tas, ka tā ļauj veida putru ar CSS un redzēt izmaiņas uzreiz šajā, piemēram, dubultās logu viedokli, ka tā ir. Tātad jums nav jāuztraucas par izveidot savu mājas lapu, vai izveidojot vhost in jūsu vietējo ierīces un vietējās uzņēmējas, un iegūt visu, sīkumi darbu. Tas ir nostiprināts labi ietvaros lapā. 

Un tas ir šie maz nodarbības, ka jūs varat iet cauri, lai uzzinātu vairāk par šķirotāja, vai uzzināt par manipulējot savu font, vai fona, vai attēlu. Un jums ir šie caurplūdes rezultātus, ka jūs nav jādara kādu citi pirmskola darbs. Tāpēc es mīlu W3Schools. Tas ir pasakains. Vai tas darbojas? 

TOMAS REIMERS: Jā. Nē, tas nav. Vai jūs vēlaties, lai es mēģinātu un restartēt datoru? Vai mēs gribam kuri paredzēti, lai 

ALLISON Buchholtz-AU: Es domāju, labi, tas būs arī internetā. Visi slaidi būs tiešsaistē. Tāpēc es vienkārši ļoti ieteiktu darīt tiem. 

Tas ir liels, kā tikko kā apkrāptu lapas. Tas ir tikai viss pamata komandas, kas jums ir. Tas ir lieliski, ja jūs esat pirmo reizi sākot no jūsu mājas lapā. Jo varbūt jums nav vēlas nokļūt visus reālā utains graudaini dizains smago sīkumi. Jums vienkārši nepieciešams formatēt to tādā veidā, šāda veida jēga un griba darīt pagaidām. Un, ja jūs patiešām vēlaties iekļūt tajā, es zinu tas ir, piemēram, viens no Tomas mīļākie atsauces. Mums bija, izmantojot to, lai PREP, un tas ir pasakains. Tas ir Izstrādātājs Mozilla. 

TOMAS REIMERS: Tātad Mozilla ir cilvēki, kas padara Firefox. Un tas ir tikai viņu pašu attīstītājs reference, kas, manuprāt, ir laba. Un tas ir brīnišķīgi sarakstu resursu. Tātad, mēs have-- 

ALLISON Buchholtz-AU: Un tad pēdējā piezīme ir kad jūs mēģināt dizains jūsu mājas lapā, smelties iedvesmu no lietām ka jūs domājat, ka ir diezgan. Pārbaudot elementu, Pārbaudot pirmkodu var būt super noderīgi lai mēģina izdomāt kā stila jūsu pašu mājas lapā. 

Bieži vien, es jūtos kā labākais veids, turklāt eksperimentiem, ir tikai apskatīt lietas, kas ir diezgan. Es uzskatu, ka tas ir patiešām grūti vienkārši veida dizaina lietām par savu, it īpaši sākumā. Tāpēc, lūdzu, apskatīt tīmekļa vietnēs ka jums patiks meklē. Izdomāt, kas padara viņiem pievilcīgu jums. Un tad nekautrējieties mēģināt atkārtot to. 

TOMAS REIMERS: Tieši tā. Pat, piemēram, tīmekļa vietnes piemēram, tas, jūs varat redzēt tur noteikti div augšpusē. Un tad jums ir cits div laikā šeit, kas ir CSS awesomeness. Un tad jums ir ķekars saites šeit. Ja jūs patiešām vienkārši pārbaudīt elementus, jūs varat kārtot of sākt redzēt to, ko darīt mājaslapas izskatās, un kā es varu atjaunotu, ka, ja es gribēju. Vai tas ir jēga? Tātad mums ir tikai palikuši trīs minūtes. Tātad jautājumi? Jebkurš no viņiem? Jā. 

Mērķauditorija: Par krāsu taisnstūris, kā tu have-- ja jūs nevēlaties to iet pāri visu lapu, varētu Jūs esat padarījuši iet pāri tikai pusi lapas vai tikai tekstu? 

TOMAS REIMERS: Jā, pilnīgi noteikti. Tāpēc ļaujiet man redzēt faktiski. Man ir divas idejas. Tātad, pirmkārt, jums var izmantot arī procentus. 

AUDITORIJA: Tiešām? 

ALLISON Buchholtz-AU: Tātad kaut kas uzmeklēt ir relatīvs pozicionēšana. Tas ir kaut kas, ko mēs nav laika, lai nokļūt, bet tas ir kaut kas man noteikti ieteiktu jums puiši pārbaudīt out. 

TOMAS REIMERS: Tik procenti. Un redzēt, kā mēs, kas to tikai 50% no platuma? ALLISON Buchholtz-AU: Ja jūs zina pikseļu skaitu, Jūs varat būt precīzāks, ka veidā. Jūs varat vijole apmēram ar to. Bet 50%. Ja mēs mainītu mūsu pārlūku, tas padara to mazāku. 

TOMAS REIMERS: Nu, tas ir būtībā 50% tieši tagad, es domāju. Tas ir 50%, un tad starpība ir pievienota to. CSS ir daudz quirks. Tātad šobrīd tas ir 50% no lapas platumu. Bet atcerieties, ka jums ir 10 pikseļi pacēlies no katras puses. Tātad, ja jums ir, lai pārvietotos, ka pret kreisi mala pārlūku, tad tas izskatās 50%. Atkal, tāpat kā es teicu, CSS var būt daudz uzminēt-un-pārbaudi. Tāpat kā, jūs domājat, ka kaut kas nav gatavojas uzvesties vienā virzienā, bet tas uzvedas pilnīgi atšķirīgu ceļu. 

ALLISON Buchholtz-AU: Un jūs vienkārši iegūt gudrāku, un jūs tikai iegūt labāku intuīcija par to, kā jūs pārvietoties pa. 

TOMAS REIMERS: Un tas kļūst arvien sliktāk un sliktāk. Tātad, tas ir patiešām tikai sacensības. 

ALLISON Buchholtz-AU: Tas ir super iepriecinoši. Mēs gribam, lai, piemēram, CSS. 

TOMAS REIMERS: CSS ir laba. Atcerieties, ka. Citi jautājumi? 

ALLISON Buchholtz-AU: viena lieta. Kaut kas cits? Cool. 

TOMAS REIMERS: satriecošs. 

ALLISON Buchholtz-AU: Nu, ja jūs puiši ir kādi jautājumi vēlāk, Mēs esam vienmēr pieejami kā vienu parasti. Jūs, iespējams redzēt dažus no mums gala projektiem un noteikti pie hackathon. 

TOMAS REIMERS: Protams. Un izstādē. 

ALLISON Buchholtz-AU: Un izstādē. Oh. 

TOMAS REIMERS: Ceram redzēt visas jūsu awesome-- 

ALLISON Buchholtz-AU: Redzēsim visiem jūsu caku tīmekļa vietnes ka būs skaisti. TOMAS REIMERS: Jūs vienmēr varat skat, piemēram, tīmekļa vietnes kas bija, piemēram, labu CSS un tad tāpat kā tie, kas nav mēģināt darīt CSS. ALLISON Buchholtz-AU: Arī citu lieta, vēl viena lieta ieskatīties ir bootstrapping. Tātad Bootstrap ir liels. 

TOMAS REIMERS: Google, ka, ja you-- 

ALLISON Buchholtz-AU: Google tā. Tas ir pasakains. Jūs love to. Un tagad, ka jums ir pamatzināšanas par CSS, tas būs padarīt daudz lielāka jēga. Awesome. Paldies, puiši. 

TOMAS REIMERS: Paldies tik daudz.