[MUZYKA GRY] ALLISON Buchholtz-AU: Tak mamy w zasadzie tylko będzie dać wybiegiem CSS, ponieważ wiemy, że to nie było objęte we wszystkich punktach. I naprawdę chcemy, aby upewnić się, że faceci to narzędzie do Państwa dyspozycji, ponieważ ma zdolność dokonywania Twoje strony wygląda dużo ładniej. 

A jeśli budowa strony internetowej, a następnie prawdopodobnie chcesz, aby go dość. To znaczy, że nie trzeba, ale ja to sugerują. [Śmiech] Jeśli chcesz, aby użytkownicy z niej korzystać, to polubisz chcemy, aby było trochę [niesłyszalne]. Tak więc mamy zamiar spróbować i dać tylko podstawowe narzędzia i zrozumienie, tak, że kiedy wyjdzie i jesteś badania rzeczy o CSS to nie zakończyć bełkot, takich jak CSS czasem być. 

TOMAS REIMERS: Tak. Allison powiedział to całkiem dobrze. Więc myślę, że pierwszą rzeczą, jaką należy rozpocząć to, co to jest CSS? Więc CSS jest niesamowite. CSS-- 

ALLISON Buchholtz-AU: To Nazwa naszego seminarium. 

TOMAS REIMERS: Tak. To naprawdę ważne, że zrozumieć, że do tego czasu. Jeśli tylko zabrać jedną rzeczą, jest to, że CSS, jeśli niesamowite. Dwa to jest CSS oznacza Kaskadowe arkusze stylów. Tak więc w swej istocie, CSS arkusz stylów, co oznacza, pozwala projektować strony internetowej. A potem, co to znaczy, że to sposób, aby dodać styl do swoich stron internetowych. Więc o stylu, mamy na myśli wszystko to nie structural-- więc rzeczy takie jak kolory, tło obrazy, granice, jak, wypełnienie, marże. Będziemy rozmawiać o tym, co to wszystko oznacza w trochę. 

Więc my po prostu poszedł do przodu i otwarte zarówno tych w gedit. Więc jest to index.html. I to jest main.css. Więc main.css ma nic. ALLISON Buchholtz-AU: Nie Styl tej pory. TOMAS REIMERS: Brak. A jak zobaczysz, że to bardzo brzydka strona. ALLISON Buchholtz-AU: To po prostu. TOMAS REIMERS: Tak. Tak, to nie jest brzydka, to jest po prostu minimalistyczny. A potem mamy tutaj index.html. I tak szybkie podsumowanie HTML, Allison, chcesz po prostu porozmawiać o stronie? 

ALLISON Buchholtz-AU: Tak. Tak oczywiście, mamy HTML tag, który właśnie nazwy pliku HTML. Mamy nagłówek tutaj, z CSS Awesomeness, which-- jeśli wrócę. Gdzie to jest? 

TOMAS REIMERS: Och. Tak, można zobaczyć. ALLISON Buchholtz-AU: I zwróć uwagę na nagłówek Ta karta jest nagłówek aż tutaj. A potem "Witaj, świecie!" jest Tekst, który mamy po prostu wyświetlania w Internecie Strona, która is-- wrócić. Powrót. Co jest tylko w naszym organizmie here-- zwykły tekst. Ponadto, jedna rzecz zauważyć, jeżeli obejrzysz tutaj Tomas włącza się je dwie z naszej slajdu. Tak długo, jak masz wszystko trzy z nich, jesteś w porządku. Mogą one być w dowolnej kolejności chcą. Co najważniejsze, jest tak, że masz każdego z tych trzech rzeczy. 

TOMAS REIMERS: Spoko. Dodaj typ doc? ALLISON Buchholtz-AU: Tak. TOMAS REIMERS: Tak. Cool. ALLISON Buchholtz-AU: Najwyraźniej, moje mikrofony mnie nie lubią. TOMAS REIMERS: Och, daj nam chwilkę po prostu gdy włącza się jej Allison mikrofon. Więc tak. Mamy więc naszą stronę główną. To rodzaj pierwotnych ustawień. Nie mamy dużo. Musimy po prostu w zasadzie tekst. Mamy arkusz stylów. Mamy tytuł. Więc po prostu gołe kości Składniki zrobić stronę internetową. 

Więc stąd, niech rozmawiać o tym, co jest CSS i jak to wygląda i to wszystko. Więc dla that-- ALLISON Buchholtz-AU: Powrót do zjeżdżalni. TOMAS REIMERS: Powrót do zjeżdżalni. I Allison może przejąć. 

ALLISON Buchholtz-AU: Woo. OK. Tak więc w pliku CSS, będziesz mieć Wiele z tych rzeczy nazywane selektorów. To będzie tylko Podstawą pliku CSS. To jest po prostu będzie wiele i wiele z nich. Więc wyboru. To tylko ogólne anatomii. Mamy zamiar przejść przez przykłady, bo jeśli nigdy chłopaki oglądał mój punkt, czuję jak rzeczy w abstrakcyjne tak naprawdę nie ma sensu. Zawsze pozwala patrz przykłady. 

Tak więc mamy trochę wyboru. To będzie jakiś identyfikator co chcemy stylu stosuje się do. I wtedy możemy mieć dowolny zbiór zasad i wartości. Więc selektorów, które można zobaczyć może być coś podobnego ciała, lub ust z P, lub nagłówek, lub cokolwiek innego, co chcesz, aby znaczniki HTML być. 

A więc w tym przypadku mamy ciała. I mamy pewne zasady, które odpowiada do tego, co Twój styl dotyczy. Więc w tym przypadku, mamy kolor tła i waga czcionki. Tak to się zmieni tło niczym w obrębie każdego znacznika body naszego pliku HTML. I to się da Wartość jest to światło niebieskie. 

Więc to będzie zrobić tło światło niebieskie. I wtedy coś w ciele jest będzie mieć grubość czcionki odważne. Więc nie jest to po prostu będzie pogrubienie wszystkich naszych tekstów. A to tylko jeden przełącznik. Ale można mieć bardzo wiele z nich. I jak mamy zamiar pokazać później, nieco więcej, w jaki sposób że prace i więcej przykładów tam. Chcesz coś dodać? 

TOMAS REIMERS: Nie Allison dostał. Jesteśmy po prostu się pociąć Przykładem na naszej przykładowej strony. Więc właściwie odebrać. Jest to idealne rozwiązanie. Więc jestem po prostu skopiować i wkleić że prawo do naszego pliku main.css. I idę, aby go zapisać. A potem będziemy go uruchomić. Więc marginesie, jednym z najbardziej frustrujących rzeczy jest, jeśli nie zapisać plik, a wtedy, jak, przeładuj stronę, i jak, dlaczego nie jest Zmiana dzieje? To się zdarza. Więc tutaj widzieliśmy, że zrobiliśmy strona światło niebieskie tło a niektóre pogrubiony tekst. 

Należy również wspomnieć, jeśli Ciebie faceci mają pytania o cokolwiek robimy, prosimy wolne nas zatrzymać i zapytać nas. Jesteśmy całkowicie gotowi do pola pytania. 

ALLISON Buchholtz-AU: Oczywiście, z CSS, wszystko opiera się na siebie. Więc jeśli coś nie działa sensu teraz, nie chce, że do bagien Cię później. 

TOMAS REIMERS: Więc niech rodzaj wnikliwie to. Więc chcesz zacząć z selektorem tutaj? 

ALLISON Buchholtz-AU: Tak. Jak mówiłem wcześniej, ciało jest po prostu nasz selektor tutaj. Tak więc, jeśli wrócimy do naszego index-- ah. 

TOMAS REIMERS: Który po prostu zamknięte. Daj mi chwilę. Więc Plik, Otwórz, index.html. ALLISON Buchholtz-AU: Spoko. Więc jeśli zauważysz tutaj, my mają te tagi ciała, prawda? Więc po prostu odpowiada wyboru znaczniki, że mówisz. Więc ciała tutaj. Więc to, co mówimy jest everything-- możemy wrócić? Chciałabym po prostu jakby dotknąć ekranu. Byłoby o wiele chłodniej. 

Więc wszystko w ramach tych tagi ciała, które widzieliśmy właśnie, jak tekst, a ciało w ogóle odnosi się do, jak, w tle. Jeśli kiedykolwiek chcesz zmienić tło, że będzie w tagu ciała. Podobnie ma te zasady stosować się do nich. 

Więc jeśli były, aby przejść do index.html and-- rzeczywistości, możemy mieć coś poza ciałem? Gdybyśmy mieli, jak, stopki lub coś, to nie stosuje się tego. Ale wszystko w ramach Znaczniki te ciało będzie być dotknięte przez ten organ selektor, że zrobiliśmy. Więc jeśli było wpisać coś innego there-- 

TOMAS REIMERS: Chcę pojechać tego domu. Więc jeśli mieliśmy div-- więc to tylko kolejny znacznik można mieć. Mam zamiar go zamknąć. Albo zróbmy to pkt. Więc p oznacza ust. I w tym punkcie. I wtedy powiedzieć: "To jest tekst." Cool. A potem zrobiłem zasada ta stosuje się do ust zamiast ciała. Zobaczysz, jak to ma zastosowanie tylko do Nowo utworzona pkt, w prawo, nie całość. Czy to ma sens? 

ALLISON Buchholtz-AU: Więc to wszystko jest organem, ale teraz po prostu nasz selektor odnosi się do punktu. Więc po prostu śmiały i niebieskie w tym konkretnym ust, bo to jest jedyna rzecz, który jest zamknięty w etykiecie s. 

TOMAS REIMERS: Czy to ma sens swego jak rzeczy hermetyzacji inne rzeczy? ALLISON Buchholtz-AU: Również, po prostu powiedzieć, jak, jeden z najlepszych sposobów, naprawdę się komfortowo z CSS jest po prostu zrobić takie rzeczy, po prostu spróbować. To bardzo proste, aby wpisać coś się, kliknij Refresh, i zobaczyć, co się dzieje. I jak w większości CS, eksperymenty, często może prowadzić do znacznie lepiej intuicyjne zrozumienie. Nawet bardziej niż nas po prostu, jak, z tobą rozmawiać. 

TOMAS REIMERS: Absolutnie 100% zgadzam się w tej kwestii. Tak więc, jeśli wrócimy do tego, zacznijmy prosektorium, co dokładnie tych dwóch zrobić. Więc mamy dwie reguły na ten temat. Tak więc pierwszy jest kolor tła. I widać, że mamy ustawić równa wartości, jasnoniebieski. 

Więc w CSS, CSS jest porządek bardzo luźne, jak masz prawo do zdefiniowania koloru. Tak można określić ich po imieniu. Możesz też zrobić coś jak "czerwony". A potem, jeśli wrócimy do tego, zobaczysz, że tło jest czerwone. Można również uzyskać really-- myślę was można uzyskać bardzo kreatywny z tego, nie możesz? 

ALLISON Buchholtz-AU: I że można użyć hex. Nie możesz? 

TOMAS REIMERS: Tak. Możesz więc użyć hex. Ale myślę, że nazwa mądry. Czy nie ma? ALLISON Buchholtz-AU: Można zrobić bardzo niewiele. Prawie jak w większości kolorów, które można może name-- jak, myślę, że łosoś jest jeden. 

TOMAS REIMERS: że my będziemy starać łososia. ALLISON Buchholtz-AU: I myślę Chartreuse tam jest. TOMAS REIMERS: Tak. Patrz? Więc można uzyskać bardzo oszczędny. 

ALLISON Buchholtz-AU: Ty może uzyskać bardzo oszczędny. Na przykład, jeśli można myśleć Nazwa koloru, to pewnie tam. Jeśli naprawdę chcesz dobrze szczegół, można przejść hex. 

TOMAS REIMERS: Tak. Więc szesnastkowym. Jeśli faceci pamiętam to z powrotem ze starego pset, odzyskać zdjęcia, chłopaki mieli do czynienia z tych wartości hex. A jakby się podsumować to, co to jest, hex ma trzy wartości przechowywanych w nim. Dlatego w grupy dwóch krokach. Pierwsze dwa przedstawiają wartość koloru czerwonego. Drugi przedstawia zielone wartość. I ostatni jest niebieski? 

Tak dzieje się do reprezentowania FF szesnastkowym 255. Więc masz 255 czerwony, 255 zielony, i 0 dla niebieskiego. I wartości w zakresie od 0 do 255. 

PUBLICZNOŚCI: Prawo. Więc zasadniczo, możemy szukać internet dla każdego koloru chcemy, i identyfikacji rzeczywiście znane Kolor spektrum kombi, a następnie możemy umieścić go w? ALLISON Buchholtz-AU: Dokładnie. Więc masz prawie pełną kontrolę nad kolorami chcesz ramach CSS. Czy będziemy mówić o obrazy tła później? Czy chcemy, aby to zrobić? 

TOMAS REIMERS: Tak. Absolutnie. Więc po pierwsze, po prostu pokazać, że czerwony i zielony jest żółty. A jeśli potrzebujesz pomocy w znalezieniu tego, jesteś może coś z Google jak "próbnika kolorów." ALLISON Buchholtz-AU: Och, to jest tak dobre. Kocham Próbnik kolorów. 

TOMAS REIMERS: colorpicker.com Jest to dobry przykład. I tu, zobaczysz, że masz pełna Photoshop-jak próbnik kolorów. 

ALLISON Buchholtz-AU: Mm-hm. Również fajne rzeczy są ci może generować schematy kolorów tak, że nie trzeba, jak, starcia kolory. TOMAS REIMERS: A potem tu jest wartość hex tutaj się. Tak więc zawsze można znaleźć w zasadzie w Internecie miejsca, aby uzyskać wartość hex. To nie jest rodzaj, które po prostu, jak, mamy zobacz kolory świata w liczbach. To bardziej, że w trybie online Kolor i znaleźć to, co chcemy, a następnie wziąć numer w dół. Bo to jest po prostu bardzo proste sposób odwoływać rzeczy w CS. 

ALLISON Buchholtz-AU: A wtedy nie also-- Nie pamiętam dokładnej nazwy witryny. Ale jest na pewno, że myślę, coś z Adobe który generuje schematy kolorów dla Ciebie, co jest naprawdę fajne, bo Ciebie definitely-- to czasem trudno dowiedzieć się, oh, jeśli chcesz używać tego koloru, co może być kolejnym dobrym jednym do wykorzystania w innym miejscu na mojej stronie, aby, jak, zrobić to ładne i spójne. 

TOMAS REIMERS: Allison mówi o jeden przez Adobe nazywa Kuler, myślę. To K-U-L-E-R. ALLISON Buchholtz-AU: Myślę, że tak. Jestem prawie pewien, że to jedno. 

TOMAS REIMERS: Mój ulubiony ma Schemat kolorów zawsze projektant. 

ALLISON Buchholtz-AU: Ooh. 

TOMAS REIMERS: Jakie jest now-- 

ALLISON Buchholtz-AU: Ach, to jest piękne. 

TOMAS REIMERS: I Można w zasadzie powiedzieć, jak, I ma trzy kolory obok siebie. A potem zróbmy coś fajnego. A potem można uzyskać przykład , co to może wyglądać. A potem, gdy po najechaniu na którykolwiek z je, daje wartość hex. 

Więc po prostu jako dobry sposób na rozpoczęcie myśleć o kolorach lub jakie kolory na stronie internetowej może pójść dobrze. Ponieważ może być zaskakująco nie tak łatwo podnieść, jak myślisz. A potem inne fajne Zawsze uważałem, że o tej stronie to jeśli trafisz Przykłady, to będziesz Pokaż, co Przykład strony internetowej może wyglądać przy użyciu tego schematu kolorów. W każdym razie. 

Powrót do rzeczywistej CSS. ALLISON Buchholtz-AU: Ale oczywiście, że wiem te odniesienia może być przydatne. TOMAS REIMERS: Nie, na pewno może być pomocny. Więc drugą regułę, Allison? 

ALLISON Buchholtz-AU: Tak. Druga zasada jest tylko odpowiadający naszym czcionki. Więc waga jest po prostu rodzaj czcionki of-- więc masa będzie być, jeśli chcesz po prostu, jak, normalny lub, jak, cieńsze czcionki, czy w tym przypadku, podobnie jak, odważne. Zapomnę. Co jeśli jest tam chciał it-- cieńszy niż tylko, jak, normalne? TOMAS REIMERS: nie mam właściwie wiedzieć, czy jest cieńszy. ALLISON Buchholtz-AU: nie pamiętam. Waga czcionki mamy zazwyczaj tak wystarczy użyć na śmiałe. Jeśli chcesz uzyskać naprawdę w Opisz mamy zamiar pokazać. W3Schools ma wszystko inaczej rzeczy, które możesz zrobić dla czcionek. Ale w zasadzie, jeśli kiedykolwiek chcesz zmienić coś o czcionce to zawsze będzie, jak, font-coś. Więc to będzie jak, font-family, jeśli jesteś próbuje zmienić rzeczywisty typ. Będzie to font-style, jeśli Ciebie Aby zrobić to jak kursywą, lub kursywa, lub cokolwiek. Lub nawet font-color, jeśli Chcieliśmy, by to zmienić. 

TOMAS REIMERS: Tak. Więc może to zmienić. A jakby tylko podsumowanie teraz, więc można zobaczyć, że mamy tu do wyboru. Mamy te nawiasy klamrowe. A potem mamy zasady rozdzielany średnikami. Czy to ma sens? Tak? Cool. Tak więc, jeśli jest to dobre- 

ALLISON Buchholtz-AU: Powrót. TOMAS REIMERS: Porozmawiajmy specjalnie o jaki rodzaj selektorów mamy. Bo teraz mamy jakby po prostu pokazano tagi. Ale wam się zobaczyć to prawdopodobne. Powiedzmy, że masz dwa akapity na stronie i Ciebie Aby móc stylu jeden, ale nie inne, nie po prostu ograniczyć się musiał użyć innego rzeczywistego HTML tagi dać im różne style. 

Mamy więc trzy podstawowe selektorów. ALLISON Buchholtz-AU: Tak. Więc mamy znacznik, który jest co rozmawialiśmy teraz o. Więc to jest trochę jak z ciała lub p. A potem mamy klasę, która jest gdy definiujemy ją w naszym pliku CSS, to zawsze będzie kropka, co chcesz nazwa klasy jest. A to może mieć zastosowanie do wielu rzeczy. 

Powiedzmy, że masz pięć akapitów i dwa z trzech z nich muszą być stylizowany samo, chcesz zastosować klasę do niego. I to jest właśnie sposób, w jaki to zrobić. Damy wam przykład gdzie to faktycznie pokazuje się. Ale jeśli masz może jakiś tag p, po to, by pisać, Klasa równa bez względu klas chcesz mieć do niego. Więc niezależnie od klasy selektorów, które chcemy stosuje się do tego konkretnego ustępu, możemy tylko napisać tak. Oczywiście, myślę, że przykład będzie o wiele bardziej konkretne. 

Drugi mamy jest identyfikator, który oznaczymy z mieszania lub funt lub hashtag. TOMAS REIMERS: Octothorpe. ALLISON Buchholtz-AU: Octothorpe. To działa też. A ten powinien być naprawdę wyjątkowa. Powinny one mieć zastosowanie jedynie do jedna rzecz na swojej stronie. Więc, czy to szczególne pkt, lub jakiś element na liście, lub cokolwiek, powinno to być unikalne. W ten sam sposób, po prostu powiedzieć, jak, class = "class1 class2" może to być po prostu id, co mamy. TOMAS REIMERS: Tak. Więc na pewno rozmawiać o przykłady. A ja po prostu się do nurkowania prosto do kodu. Więc spójrzmy na naszej HTML. A więc teraz mają jeden akapit. To jest tekst. Idę do modyfikacji go. "To jest tekst 1." I wtedy będziemy mają "To jest tekst 2." 

ALLISON Buchholtz-AU: Druga. TOMAS REIMERS: Tak. Więc teraz mamy "To jest tekst 2", prawda? A my będziemy widzieć, że jeśli przeładować Strona, co mamy zamiar znaleźć to zrobimy find-- ALLISON Buchholtz-AU: Ooh. TOMAS REIMERS: Tak. Mamy zamiar znaleźć "To jest Tekst 1 "i" To jest tekst 2. " 

ALLISON Buchholtz-AU: A na piękny żółty kolor. 

TOMAS REIMERS: I zobaczysz że nasz selektor teraz, które stosuje się do wartości p, lub ustępy, wpływa na obu z nich, ponieważ obydwa z nich spełnia warunkiem, że są one zarówno znacznik p. To jest całkowicie uzasadniona. Więc pytanie jest, dobrze, co jeśli chcemy dostać tylko jeden? Tak dokładnie jak Allison mówił, mamy dwa inne sposoby, aby to zrobić. Mam zamiar zacząć id. 

ALLISON Buchholtz-AU: Zacznijmy id. 

TOMAS REIMERS: I obie to są atrybuty. Więc atrybuty istnieją w HTML. A jakie są to coś, co można dodać wewnątrz znacznika, który jest oddzielone od nazwy znacznika. Więc można mieć wiele atrybutów. Tak? 

ALLISON Buchholtz-AU: Właśnie miałem powiedzieć, z własnego przykładu z pset 7, czy ktoś z was próbują wyrównać rzeczy do centrum, Może masz używane "Text align = centrum." I zauważyłem, że prawdopodobnie powinny koncentrowały Twój tekst lub pasek nawigacji. Tak to właśnie również atrybut że możesz znać. TOMAS REIMERS: Jest kilka z atrybutów, które można zobaczyć. Tak. Jak dobre odniesienie do pset 7. Mamy id. Możesz również klasy, takie rzeczy. Jeden znacznik może mieć wiele atrybutów. Więc zaczynając id, udawajmy my chcą mieć identyfikator of-- nie wiem. Nazwijmy go specjalnym, bo ten, jesteśmy zamiar zrobić śmiały, i podkreślić, a co. ALLISON Buchholtz-AU: To będzie bardzo wyjątkowy. TOMAS REIMERS: Więc to jeden, mamy id wyjątkowym. Tak więc sposób, aby wybrać, które jest więc w main.css, niż mieć tag s, zrobić #special, OK? I że wybiera sprawa z id wyjątkowy. Czy to ma sens dla każdego? Publiczność: Tak. TOMAS REIMERS: Spoko. Więc teraz, jeśli wrócimy, my see-- okrzyki. Tak. Zobaczymy, że to tylko wybiera jednym z id wyjątkowy. Tak? Brzmi fajnie. Tak. 

PUBLICZNOŚCI: Czy coś ma przypisują zarówno klasy i id? 

TOMAS REIMERS: Tak. PUBLICZNOŚCI: OK. A to co się dzieje, jeśli potem dać że niektóre przepisy w CSS, które są sprzeczne? TOMAS REIMERS: Absolutnie. Jesteśmy na pewno będzie o tym rozmawiać. Tak dokładnie to, czego się co, można również zajęcia. Warto więc udawać, że miał Ja i trzy akapity chciałem projektować pierwszy dwa, ale nie trzecią. Cóż, pierwszym pomysłem może być, dobrze, może po prostu dać drugi identyfikator. Ale nie może, bo identyfikatorem, dokładnie tak, jak Allison mówił, Musi być unikalny. 

Więc zamiast id, co można użyć to można użyć klasy. I class-- co pozwala można zrobić, to po prostu powiedzieć, to należy w ramach grupy. W tym przypadku, nasza grupa nazywa się Special. A co mamy zamiar zrobić to jest będziemy say-- niż funt, mamy zamiar użyć kropki. OK? I zauważ, że funt i kropka istnieją tylko w pliku CSS, nie w HTML. ALLISON Buchholtz-AU: Tak. Ważne rozróżnienie. 

TOMAS REIMERS: mam miał tyle walki, bo umieścić skrót w języku HTML i a potem po prostu głupio przez długi czas. Zobacz, jak wybiera oba te z tej klasy? Cool. 

Teraz, co może mieć wiele klas. Powiedzmy, że chciałem zrobić pierwszy dwa mają tło żółty a kolejne dwa mają kolor czcionki z niebieskim. OK. I naprawdę nie wiem, dlaczego I dalszy Aby to zrobić, ale nie mogę. 

ALLISON Buchholtz-AU: nie Might Zaleca się go na swojej stronie internetowej. Ale dla naszych celów, to zrobi. 

TOMAS REIMERS: Nie dobra kolorystyka. ALLISON Buchholtz-AU: Cóż, żółty i niebieskie kolory są moje wysokie szkolne. Nie wiem, choć. TOMAS REIMERS: Allison wysokie Szkoła świetnie kolorów. [Śmiech] Tak więc to, co można nazwać to Nazwijmy this-- więc mamy specjalne i mamy ładny. Proponuję, za to, użyć znacznie bardziej opisowe nazwy. ALLISON Buchholtz-AU: Tak, chciałbym Nazywamy to, jak, żółty lub niebieski. 

TOMAS REIMERS: Nie jesteśmy naprawdę czyni prawdziwą stronę dlatego nie robisz tego. Ale jeśli rzeczywiście miał prawdziwą stronę, ty może mieć, podobnie jak artykuł nagłówek, treść artykułu, pierwsze słowo, takie rzeczy, które pozwalają Ci być bardziej opisowe. Są to naprawdę tak samo jak zmienne. Powinny one być nazwane w sposób, gdzie Państwo jako takie mogą, like-- tak,. Doskonałe. 

Tak więc kolor tła. A potem będziemy say-- tak sposób zmienić kolor jest po prostu "Kolor". I mamy zamiar zrobić to niebieski. To jest fajne. Więc teraz mamy Pierwsze dwa mają szczególne. Następny jedzie mają "class = ładna." ALLISON Buchholtz-AU: A potem będziesz Aby dodać "dość", aby środkowa. TOMAS REIMERS: Tak. A następnie do środkowemu dodać "dość", co się dzieje, jest po prostu mieć miejsca. Więc atrybutu class Jest to lista rozdzielonych spacjami wszystkich klas które mają zastosowanie do tego tagu. OK? To nie jest jak ten należący do jakieś specjalnej klasy o nazwie "Specjalne, przestrzeń, dość." Należy do dwóch classes-- specjalne i ładna. Tak? Cool. 

A potem, jeśli spojrzymy na to, co się dzieje, jesteśmy zobaczymy, że pierwszy z nich ma żółte tło, czarny tekst. Druga jedno- 

ALLISON Buchholtz-AU: --has pogrubienie żółte tło z niebieskim tekstem. A nasz ostatni po prostu musi Tekst niebieski, że przypisane do niego. 

TOMAS REIMERS: cool? Jak selektorów działa? Niesamowite. 

ALLISON Buchholtz-AU: Czy chcemy mówić o konflikcie teraz to? 

TOMAS REIMERS: Więc tak. Absolutnie. Więc co się dzieje, jeśli Ciebie mają konflikt, prawda? Załóżmy, że pierwszy z nich tworzy coś like-- ALLISON Buchholtz-AU: Może ta zmienia tło? TOMAS REIMERS: Tak. Więc idziemy do "dość" zmienić tło na łososia. ALLISON Buchholtz-AU: Jesteś tylko z wszystkie wielkie kolory dzisiaj, Tomas. TOMAS REIMERS: Tak. Bo okazało się, mogę użyć łososia jako prawdziwy kolor. Więc jesteśmy tylko będzie to zrobić. Uważam również, że Zachód jest rzeczywistym kolorem. PUBLICZNOŚCI: Zachód słońca prawdziwy kolor? ALLISON Buchholtz-AU: Spróbujmy. TOMAS REIMERS: Po tej prezentacji tylko dlatego, że w przypadku, bałagan, Nie chcę być debugowania. Więc wiemy, łosoś prawdziwy kolor. Więc wszelkie domysły na temat co się stało? 

ALLISON Buchholtz-AU: Każdy pomysł? 

PUBLICZNOŚCI: [niesłyszalne]. 

TOMAS REIMERS: Tak. Więc masz to dokładnie. W zasadzie, to trwa Ostatnia reguła, że ​​została ona podana. 

ALLISON Buchholtz-AU: Więc to jest gdzie kaskadowych w życie. 

TOMAS REIMERS: Tak pamiętam, jak my miał, że kaskadowe arkusze stylów? Więc przez to, że rodzaj myśli że mamy kilka zasad które stosuje się na górze drugiej, a Można również zastąpić siebie. 

ALLISON Buchholtz-AU: Tak Cokolwiek się na dole zastąpi co jest na górze. Można mieć zasady, które całkowicie zanegować coś wcześniej. To również, dlaczego chcesz być Uważaj, gdy jesteś stylizacji, więc nie jesteś tworzenie reguł, które jesteś po prostu całkowicie nadrzędnymi. 

TOMAS REIMERS: A może chcesz zapisać zasady. 

ALLISON Buchholtz-AU: A może to zrobić. Tak. 

TOMAS REIMERS: Udajemy, że masz Klasa, która ma zastosowanie do większości rzeczy, ale powiedzmy, że chcesz zmienić kolor tła na czerwony i czcionki waga dla większości pogrubiony rzeczy, ale dla jednego, chcesz tylko kolor tła być czerwone, ale chcesz, wszystko inne Właściwości, można zrobić coś jak "font-weight = normalne" które następnie cofnąć że odważne zmiany. Tak? Ponownie, jest najlepszym sposobem, myślę, że Allison powiedział, że to jest po prostu ćwiczyć. 

ALLISON Buchholtz-AU: Eksperymentowanie. 

TOMAS REIMERS: Praktyka, praktyka, Praktyka i doświadczenie. Znam wiele osób, które zdaniem CSS jest po prostu dużo domysłach i-check Na koniec dnia, gdzie po chcesz zrobić something-- jak, masz z grubsza, ale nadal prawdopodobnie trzeba go wypróbować, aby upewnić się, wiesz, jak to wygląda. 

PUBLICZNOŚCI: Kiedy starasz Klasy, więcej niż jeden do tego samego ustępu lub sekcji, to robi Niezależnie od celu można wpisz je w cudzysłowie? 

TOMAS REIMERS: Nie, wcale nie. 

ALLISON Buchholtz-AU: Liczy się to, Kolejność w swoim arkuszu stylów CSS. PUBLICZNOŚCI: Czy możesz powtórzyć pytanie? TOMAS REIMERS: Och. ALLISON Buchholtz-AU: W klasy, kiedy dając lekcje coś w kodzie HTML, nie to ważne, w jakiej kolejności są one w? To nie ma znaczenia kolejność. Liczy się kolejność klasy selektorów w arkuszu CSS, w swoim arkuszu stylów. 

TOMAS REIMERS: dobry dźwięk? 

ALLISON Buchholtz-AU: Lovely. 

TOMAS REIMERS: A potem mamy zamiar kontynuować to-- ALLISON Buchholtz-AU: Co mamy teraz? Zapomnę. Och, musimy tylko przykłady. Ale my niby zrobić ci. Zrobiliśmy przykłady w locie. 

TOMAS REIMERS: Docieramy do połączyć selektorów wkrótce. 

ALLISON Buchholtz-AU: Och, mamy połączyć selektorów. TOMAS REIMERS: Więc niektóre przykłady to mamy # Dog-- funta lub hashtag, lub octothorpe, czy cokolwiek chcesz zadzwonić that-- ostre. 

ALLISON Buchholtz-AU: Sharp psa. 

TOMAS REIMERS: Wtedy masz .pets. Coś ma identyfikator psa, jest tylko jeden pies na stronie. Coś ma identyfikator kot, jest tylko jeden kot. Może być wiele zwierząt po stronie. Dlatego daliśmy, że klas. Masz przykład p. A potem, tak jeden z Ostatni przykład, który jest coś, czego nie mówił o, jest to, co się dzieje, kiedy je połączyć. Więc p.pets. 

Więc za to, wróćmy do Kod i wprowadzić another-- tak. Więc tutaj. 

ALLISON Buchholtz-AU: I poczuć się jak to jest really-- jak po prostu patrząc na przykładach jest naprawdę sposobem, aby dowiedzieć się tego. Więc to, co robimy. 

TOMAS REIMERS: Warto więc udawać, że chcą tylko, aby zaznaczyć tekst dwa, prawda? Więc na pewno nie może zrobić z identyfikatorem. Cóż, możemy to zrobić z id, ale to nie ma identyfikatora. Mógłbym dodać jeden, ale udawajmy że nie chcę, aby dodać jeden i ma już coś innego. Nie mogę zrobić z tym. Zmienna nie jest na pewno wyjątkowy, prawda? I nie jest klasa. Ale można połączyć te rzeczy. Powiedzmy, że chcemy zrobić coś które stosuje się tylko do rzeczy, które mają specjalną klasę i które mają klasę dość. 

Więc co można zrobić, to w main.css, można powiedzieć, niech najpierw usunąć tego. Możesz je łączyć. Więc można zrobić .special. Brak miejsca. Wystarczy .special.pretty. Co oznacza, że ​​jest coś, który jest zarówno wyjątkowy i dość. Czy to ma sens? A jeśli go tutaj, co masz zamiar zobaczyć to zasada ta ma zastosowanie wyłącznie do drugi, który ma oba z nich. A można to zrobić na wiele rzeczy. Możesz say-- niech udawać, że tylko chciał do robienia rzeczy, które mają klasę ładny i które są również znacznik akapitu. Więc p.pretty. Udajmy, że miałem coś całkiem na ciele znacznika. OK? Mogę uruchomić to i ja widać, że to tylko zamierza stosować się do rzeczy, które są ustępy z klasy ładna. I można połączyć je, w zasadzie, tak wiele jak chcesz. Więc może po prostu umieścić je razem. Czy to ma sens? ALLISON Buchholtz-AU: Tak tego rodzaju jest bardziej użyteczne gdy mówił wcześniej, Tomas, może masz bardzo skomplikowaną stronę internetową, i masz już dużo z tych zapisanych reguł, i wystarczy połączenie dwóch sprzed. Jak zamiast pisać całość Nowy przełącznik i zmieniając ją tam, można po prostu połączyć im, gdzie nakładają się. 

TOMAS REIMERS: Albo Czasami może znaleźć out-- jest jedna klasa, która sprawia, że ​​kolor fontu jak niebieski, i jest jeszcze jedna klasa, która sprawia, że ​​tło niebieski. A to po prostu nie będzie działać. Tak piszesz szczególny przypadek, w którym, like-- ale jeśli to ma zarówno, co masz zamiar zrobić, to będziesz sprawiają, że jeden ten odcień niebieskiego i ten to inny odcień błękitu. Prawda? 

ALLISON Buchholtz-AU: Dobry dla tych rodzajów wyjątków. TOMAS REIMERS: Tak, aby myśleć o problemach które mogą się pojawić, gdy je połączyć. Cool. Wracając do naszej prezentacji. ALLISON Buchholtz-AU: Jesteśmy prawie na miejscu. TOMAS REIMERS: I zatrzymał podłączenia. ALLISON Buchholtz-AU: Och, nie. ALLISON Buchholtz-AU: CS w biuro, internet idzie w dół. Och, ironia. 

TOMAS REIMERS: Więc na szczęście, możemy przedstawić bez internetu, myślę, ponieważ mamy tutaj wszystkie slajdy. Więc porozmawiajmy o Relacja tagów. ALLISON Buchholtz-AU: Prawo. Więc po prostu rodzaj dzieje off, co Tomas powiedział, to jest po prostu inny sposób to zrobić. Tak więc mamy trochę rodzica Selector z selektora dziecka. Tak więc w tym przykładzie tutaj mamy pewne Korpus z paska nawigacyjnego klasy, przycisk Klasa. Ach. 

TOMAS REIMERS: Och, przepraszam. 

ALLISON Buchholtz-AU: A w zasadzie, co to oznacza jest wybrać wszystkie dzieci, jak wszystkie tego rodzaju selektorów w tym wyboru dominującej. A ci są jedynymi, to kiedykolwiek będzie dotyczyć. Nie wiem, czy Ciebie mają lepszy sposób of-- TOMAS REIMERS: Więc Chyba tak myśleć o tym pamiętać, zanim, jak jest to coś jak je połączyć. A to oznacza jeden element które odpowiada nich wszystkich. Co to mówi to, że chcą się dopasować wszystko Chcę ciągu some-- można znaleźć przełącznik. A następnie w terminie, że chcę dopasowywanie nowych rzeczy. Prawda? Więc w CSS, to wszystko o rodzaju jest w stanie spełnić wszystkie te elementy. I można spróbować dopasować pozycji w innych pozycjach. 

Więc faktycznie przykład, i myślimy, że będzie wyjaśnić. Warto więc udawać, że mamy specjalne, Specjalne dość, cokolwiek. A potem mamy link, OK? Więc pamiętaj, to link. To nie będzie nigdzie iść. I mamy zamiar dać go Link klasy, myślę. Dajmy na to class-- dać mi pomysł. ALLISON Buchholtz-AU: Spoko. TOMAS REIMERS: Coo-- niech go to klasa dość. Dlaczego nie? 

ALLISON Buchholtz-AU: OK. TOMAS REIMERS: Tak ładne rzeczy teraz zamiar zrobić tło niebieski, kolor tła z łososia. To ma sens. A jeśli robimy this-- 

ALLISON Buchholtz-AU: Chcesz dodać tekst tak naprawdę pojawia się hiperłącze? TOMAS REIMERS: Tak byłoby dobre połączenia. ALLISON Buchholtz-AU: Bo prawo teraz jesteśmy po prostu dostaniemy nic. TOMAS REIMERS: Więc to jest link. "To jest link". Aha, i to się dzieje być inny link. Dajmy mu klasę "cool". Masz rację. Cool. Więc teraz mamy zamiar złapać tego. Mamy zamiar rzucić jedną. Mamy jeden w specjalny znacznik, a także będą mieć jeden w tagu ładna. A teraz to, co mamy zamiar zrobić, to jedziemy do cool-- co chcemy to zrobić? ALLISON Buchholtz-AU: Czy możemy je powiększyć? TOMAS REIMERS: Dajmy jej granicy. ALLISON Buchholtz-AU: Mogliśmy granicy. TOMAS REIMERS: Tak. Więc mamy zamiar coś zrobić jak, granicy is-- i jesteśmy Wytłumaczę to wszystko w sekundę. Dla now-- 

ALLISON Buchholtz-AU: W modelu pudełkowego. TOMAS REIMERS: Ale teraz jesteśmy po prostu się dać mu granicę. Więc co to oznacza to, że jesteś zobaczymy te linki. I masz zamiar zobaczyć, że mają te, jak, brzydkie czarne granic, jest cool. 

ALLISON Buchholtz-AU: Nasza strona internetowa jest tak ładna. 

TOMAS REIMERS: Tak. Nasza strona internetowa jest niesamowite. Więc te dwa linki, i wydaje. Teraz udawać I tylko chciał to zrobić Jeśli nie było w czymś który miał tło łososia. Dlatego należy pamiętać, że ten jeden ma doświadczenie z łososia, bo to klasy ładna. 

Ale chcę powiedzieć, że tylko chłodzi które znajdują się w klasie specjalnego, nie w klasie ładna, powinien mieć tej granicy. Cóż, to, co można zrobić, to można można powiedzieć, .special, przestrzeń, .cool. I co, że to robi, kiedy myślisz o tym, jest to w zasadzie powiedzieć, OK, wszystko mi znaleźć który odpowiada specjalny. Następnie w ramach tych znaczników, znaleźć mnie wszystko, co jest cool. ALLISON Buchholtz-AU: Więc inny sposób to może być dobry, aby myśleć o tym, przywracając je do C, to podobnie jak idea zakresie. Więc jeśli masz jakiś wyboru, jak te że pracujemy dla przed tym, cała strona, wszystkie HTML jest w twoim zasięgu, prawda? Ale gdy mamy je relacje rodzic-dziecko, to tak jakbyś zawężenie gdzie szukasz konkretnego miejsca, jak, jak, szukamy ciągu specyficzna funkcja, a nie naszego całego pliku. Publiczność: Tak z tym pamiętać, by nie ma znaczenia, czy mamy changed-- ALLISON Buchholtz-AU: zamówienie? PUBLICZNOŚCI: --The klasy w CSS do .cool, miejsca, .special? ALLISON Buchholtz-AU: Tak, bo to, że powiedziałbym, zakres do wszystko, co jest fajne, a następnie spojrzeć na jakim has-- Chodzi mi o to, jak w tym przypadku, Nie sądzę, by to zmienił. 

TOMAS REIMERS: Jeśli powiedział, co? Przepraszam. 

ALLISON Buchholtz-AU: Jeśli my Zakres do ostygnięcia, a następnie szukać rzeczy z specjalnego, byłoby to samo, w rzeczywistości. 

TOMAS REIMERS: Więc to nie będzie. 

ALLISON Buchholtz-AU: To by nie chciał? Och, no cóż. Jestem zła. 

TOMAS REIMERS: Więc powodem to different-- wspólne mistake-- jest to, że teraz tylko Link ma fajne, prawda? Myślę, że moje pytanie do wy jest, co na tej stronie są dopasowane .cool? Istnieją dwa znaczniki tutaj, prawda? Który jest ten jeden i ten jeden. Zarówno dopasować fajne. Nic innego nie robi. Więc jeśli powiedział, .cool, przestrzeń, .special, co masz zamiar powiedzieć to, w tych etykietach, co jest wyjątkowe? ALLISON Buchholtz-AU: Hm. To, co it-- prawo. Bo to jak tylko coś tutaj. 

TOMAS REIMERS: Tak wybiera nic. 

ALLISON Buchholtz-AU: Podczas gdy w Specjalny, jesteśmy w tych etykietach tutaj. 

TOMAS REIMERS: Ci, i tych. PUBLICZNOŚCI: OK. Więc te tagi z ukośnik? 

TOMAS REIMERS: Tak. Czy to ma sens? Jak to jest w zasadzie starając się ograniczyć zakres. ALLISON Buchholtz-AU: Tak. Myślę, że to prawdopodobnie Najprostszym sposobem, aby o tym myśleć. 

TOMAS REIMERS: Więc okazało się, oraz okazało się, jak dopasować specjalny. A potem pytamy, w ramach ci faceci, co jest fajne? I w tym jeden, ten jest super. W tym jednym, nic nie jest fajne. Więc to jest tylko znacznik, który pozostaje. 

ALLISON Buchholtz-AU: Natomiast fajne tam jest tylko w obrębie tych tagów ciągu. TOMAS REIMERS: Dokładnie. A co jest specjalnego w ramach tych? Nic. Teraz to, co powiem, jest Jeśli nie ma miejsca, pytasz co jest fajne i special-- lub, co jest ładne i specjalnego, prawda? Jeśli powiesz .special.pretty, to same jak .pretty.special. 

Bo to, co jest usunięcie miejsca pytaniem jest, kiedy mówisz .special, pytasz, OK, które z nich są wyjątkowe? A potem z tych, które z nich są również bardzo, które same, gramatycznie jak pytanie, co jest ładne, a następnie tych, co również wyjątkowy? Prawda? Jest to różnica co w ramach tego, co jest. PUBLICZNOŚCI: OK. TOMAS REIMERS: Tak. Niesamowite. Tak więc biorąc to pod uwagę then-- 

ALLISON Buchholtz-AU: Myślę, że nasz ostatni Chodzi o to (w fantazyjny brytyjskim akcentem) Model blokowy. 

TOMAS REIMERS: box-- [chichocze] Uwielbiam sposób, Allison mówi, że. Tak więc model pole rzeczy. 

ALLISON Buchholtz-AU: Po prostu okno, będę twój model okno. TOMAS REIMERS: Więc porozmawiajmy o tym. Więc teraz spędziliśmy dużo czasu mówić o selektorów. Do teraz, chłopaki są prawdopodobnie, jak, Mistrzowie selectors-- wiesz, jak dokładnie określić treść, która chcesz aby na ekranie. 

Więc teraz pytanie, jak dokładnie można manipulować? Sądzę więc, że najbardziej podstawowe sposób, aby o tym myśleć jest dobrze, co dokładnie Jest to element w CSS? Spędziliśmy dużo czasu mówi, co jest znacznik, lub co jest najbardziej podstawowa reprezentacja tag? 

Dobrym sposobem, aby myśleć o to znaczy, jaki kształt ma łososia? Jaki kształt jest, jak, koloru łososiowego tła? 

PUBLICZNOŚCI: To prostokąt. 

TOMAS REIMERS: To prostokąt, prawda? 

ALLISON Buchholtz-AU: Nie było podchwytliwe pytanie. [Śmiech] 

TOMAS REIMERS: Nie stara oszukać was tak późno. Więc mamy ten prostokąt. I znacznik jest p, prawda? Tak, że daje nam dobre Przekonanie, że pkt jest przedstawiony jako prostokąt z najmniej w umyśle, który przeglądarce to jest. 

ALLISON Buchholtz-AU: To znaczy, przeglądarki to zazwyczaj prostokątny, więc ma to sens. 

TOMAS REIMERS: Chodzi o to, że wszystkie znaczniki w ramach CSS są reprezentowane jako prostokąt. I każdy prostokąt ma cztery części zgodnie z CSS, OK? Musisz rzeczywistej zawartości. To miejsce, gdzie tekst leży. 

ALLISON Buchholtz-AU: Być może Twoje zdjęcie. 

TOMAS REIMERS: Tak. Musisz wyściółkę, która jest po prostu jakiś rodzaj białej przestrzeni. Wtedy masz granicę. I wtedy masz marżę, która jest biała przestrzeń poza tym. Tak, że nie ma sensu każdemu, więc jesteśmy Porozmawiamy o tym za chwilę. Więc tutaj, co będziemy robić jest zamierzamy stworzyć kilka div, OK? Proszę mi wybaczyć, gdy ja-- 

ALLISON Buchholtz-AU: Czuję się jak powinniśmy umieścić ładny obrazek w. 

TOMAS REIMERS: Zdecydowanie powinno. 

ALLISON Buchholtz-AU: Czuję się jak wszyscy może skorzystać z ładny obraz, to wszystko. 

TOMAS REIMERS: Czy możemy wszystkie korzyści z A-- 

Publiczność: Tak, jasne. TOMAS REIMERS: OK, fajnie. Więc powinniśmy umieścić słodkie obraz w gdzieś. ALLISON Buchholtz-AU: Czuję się jak Cute bunny teraz może być przydatne. TOMAS REIMERS: Jasne. ALLISON Buchholtz-AU: Koniec tygodnia. Masz coś adorab-- 

TOMAS REIMERS: Jak walka kotka? 

ALLISON Buchholtz-AU: Kotek działa też. 

TOMAS REIMERS: Cool, ponieważ tam miejsce na to. To się nazywa PlaceKitten. ALLISON Buchholtz-AU: To świetnie. TOMAS REIMERS: Tak. ALLISON Buchholtz-AU: Tylko dla, jak, obrazy zastępcze w witrynie. TOMAS REIMERS: Mm-hm. Jest też PlacePuppy. I nie PlaceBacon. 

ALLISON Buchholtz-AU: PlaceBacon? Naprawdę? 

TOMAS REIMERS: Oh, my nie mają tu dostęp do Internetu. 

ALLISON Buchholtz-AU: [wzdycha] Tragiczna. TOMAS REIMERS: W przeciwnym razie, Chciałbym pokazać wam jak umieścić zdjęcia na swojej stronie. Jedziemy, aby spróbować tego pracy, zanim musimy iść. Ale teraz, jesteśmy po prostu Porozmawiamy w kolorach wtedy. Chcemy umieścić zdjęcia kittens-- 

ALLISON Buchholtz-AU: Zrobiliśmy. 

TOMAS REIMERS: --The www na w dół do momentu bycia. Więc mamy dwie div, a my jesteśmy zamiar dać im dwa identyfikatory. Mamy zamiar to nazwać "Pierwszy" i "drugi". Więc id = "pierwszy". I mamy zamiar dać im dwa kolory. Jak więc wybrać coś z id "pierwszy"? ALLISON Buchholtz-AU: Dot lub skrótu? PUBLICZNOŚCI: Sharp. TOMAS REIMERS: Sharp, doskonały. Ostry, hash, co we-- 

ALLISON Buchholtz-AU: Wiele rzeczy, jak to nazwać. 

TOMAS REIMERS: OK. Jedziemy na osiedlenie się na hashtag i że to, co mamy zamiar iść z. OK? 

ALLISON Buchholtz-AU: Hashtag. 

TOMAS REIMERS: Tak hashtag na pierwszym. 

ALLISON Buchholtz-AU: Tak można ćwierkanie seminar-- hashtag CSS, hashtag fajne. TOMAS REIMERS: Hashtag Awesomeness. ALLISON Buchholtz-AU: Hashtag Awesomeness, tak. TOMAS REIMERS: OK. Mamy więc "pierwszy" i "drugi". Więc po pierwsze, będziemy mieć Kolor tła czerwony. ALLISON Buchholtz-AU: Uh, okrężnicy. TOMAS REIMERS: Tak. ALLISON Buchholtz-AU: Będę twoim miejscem sprawdzania. TOMAS REIMERS: Allison ma mnie. Background-color z blue-- 

TOMAS REIMERS: Fioletowy! 

TOMAS REIMERS: Fioletowy. ALLISON Buchholtz-AU: Tak. Purple mój ulubiony kolor, i nie wykorzystaliśmy jeszcze. 

TOMAS REIMERS: Fioletowy. ALLISON Buchholtz-AU: Fioletowy. To działa. 

TOMAS REIMERS: Więc jesteśmy będzie mieć dwie DIV. Będą się być całkowicie pusty. Prawdopodobnie powinniśmy mieć jakiś tekst. Więc "pierwszy" będzie "Hello". I "drugi" będą say-- 

ALLISON Buchholtz-AU: Do widzenia. 

PUBLICZNOŚCI: - "świat". Dzień dobry, do widzenia. ALLISON Buchholtz-AU: widziałem je w porozumieniu drugi tydzień. TOMAS REIMERS: The Beatles? ALLISON Buchholtz-AU: Dla liczb rzeczywistych. Oni nie są tak świetne. Nie lubię go. 

TOMAS REIMERS: Mamy "Hello" i "Goodbye". I znowu, CSS jest po prostu niesamowite, ponieważ uznaje nasze kolory. Nie trzeba nawet obawiają się, że one istnieją. Oni robią. 

ALLISON Buchholtz-AU: one istnieją. 

TOMAS REIMERS: Więc myślę, że ma CSS 255 słów, aby mówić o kolorze. Jeśli można myśleć o kolorze na zewnątrz tych 255, jak będę pod wrażeniem. ALLISON Buchholtz-AU: Tak. Myślę, że chłopaki mogą mieć po prostu przyjść tuż po. 

TOMAS REIMERS: Więc, zobaczysz, mamy dwa pola prawo na szczycie siebie, prawda? WITAJ i do widzenia. 

ALLISON Buchholtz-AU: Nie ma miejsca pomiędzy. Oni tylko smooshed dokładnie nad sobą. 

TOMAS REIMERS: Więc pierwszą rzeczą, Myślę, że powinniśmy mówić o to niech say-- również tak. Więc CSS reprezentuje je jako swego rodzaju pudełka. A jak pudełka, mają treść. A teraz jest treść rodzaju WITAJ lub POŻEGNANIE i to jest to. OK? 

Tak więc jedną z pierwszych rzeczy, które może zrobić, to można dodać dopełnienie. Wypełnienie mówi, jak wiele miejsca należy zostawić na każdej stronie. Więc powiedzmy, że chcę powiedzieć 10 pikseli z każdej strony. I będę wnikliwie, że w drugim. ALLISON Buchholtz-AU: Wszystkie te rzeczy tutaj będą głównie w pikselach do końca seminarium. Będziesz zobaczyć, że ma Przestrzeń wokół niego pewne, prawda? Więc co nie widać tutaj jest tam ten niewidzialny rodzaj obicia z każdej strony, która mówi, jak, OK, masz pole content-- 

ALLISON Buchholtz-AU: Czy chcesz po prostu wyciągnąć element wglądu? 

TOMAS REIMERS: Tak, to dobry pomysł. ALLISON Buchholtz-AU: Również uważam, że element sprawdzić to dobry sposób dowiedzieć się, czy coś się dzieje tak, zdarzyło się coś niespodziewanego, inspekcji tagi i widząc, co jak to jest zastępowane jest pomocne. 

TOMAS REIMERS: Więc nie jestem pewien, jeśli faceci widzą ten kolor. Można? Zobaczysz, to dopełnienie od rodzaju krawędzi. A potem widzisz rzeczywisty Zawartość w kolorze niebieskim, prawda? Więc to jest bardzo Podstawy modelu pudełkowego. Masz treści. Wtedy masz wyściółkę. 

PUBLICZNOŚCI: Dlaczego nie można po prostu użyć pola wewnątrz the-- 

ALLISON Buchholtz-AU: Prawo. Bo to jest po prostu wybierając Element teraz. 

TOMAS REIMERS: Tak. Inne rzeczy. Więc porozmawiajmy o tym, że Komenda wyściółka na sekundę. Tak więc w CSS, pomiarów muszą posiadać urządzenia. Więc najpierw trzeba kwotę. Więc w tym przypadku, mamy powiedział 10. A potem następny mówiliśmy jest pikseli, px. Inne z nich może mieć to takie rzeczy jak centymetrów, cali. Można zrobić takie rzeczy jak, co to jest 10 cali? I to będzie śmieszne. 

ALLISON Buchholtz-AU: Och, chłopcze. 

PUBLICZNOŚCI: Zaraz. 

TOMAS i Allison: Tak. TOMAS REIMERS: Więc to wszystko wyściółka. Mam zamiar wrócić do pikseli. 

ALLISON Buchholtz-AU: Piksele wydają się być, na przykład, w normie. Kiedy patrzysz na wielu stronach internetowych, że w większości pracują w pikselach. TOMAS REIMERS: Więc masz zamiar zobaczyć albo pixels-- inne te widoczne Jest em, który jest jednym em jest równa wysokości czcionki które obecnie używasz. 

ALLISON Buchholtz-AU: Mm. TOMAS REIMERS: Jest to dobry sposób, aby powiedzieć, jak chcę tak dużo miejsca jak mój czcionki jest podjęcie. ALLISON Buchholtz-AU: Nie wiedziałem, że. Możesz nauczyć się czegoś nowego każdego dnia. TOMAS REIMERS: Jest Wiele pomiarów w CS. Proponuję szukać ich. Dla wszystkich przypadków, myślę, że pikseli powinno wystarczyć. I oni także to, co masz zamiar zobaczyć W większości przykładów wykonanych w Internecie. Będziemy więc zostawić go w pikselach. 

Można również, mam say-- tak Zestawy dopełnienia wszystkich uszczelek. Możesz też zrobić coś takiego "Padding-top" tylko set-- ALLISON Buchholtz-AU: Może dostaniemy naszą "Hello" z powrotem. TOMAS REIMERS: --to wystarczy ustawić Wyściółka na górze i na nic innego. Tak więc cztery polecenia padding-top padding-bottom, padding-left, i padding-prawo. 

ALLISON Buchholtz-AU: Podobnie jak można się spodziewać w pudełku. 

TOMAS REIMERS: Tak. Nic nie jest zbyt szalone. Czy to ma sens? Więc to jest dopełnienie. Mam zamiar ustawić wszystkie z powrotem do 10 podkładki. A potem mam zamiar przenieść się do granicy. 

Więc co to jest granica Komenda granica jest dziwne. To trwa rodzaj trzech rzeczy na raz. Tak więc pierwszy jest jak duży ma to być jako miary. Ponownie, używam tylko pikseli. I ostatnia rzecz, Należy dodać do pomiarów Jest jedna rzecz, która nie musi jednostkę 0. To rzeczywiście nieprawidłowe dać 0 jednostkę, ponieważ 0 jest 0 poprzek cali, piksele, centymetry, cokolwiek. To wszystko oznacza tylko 0, prawda? Więc najpierw dać pomiar. 

Następnie należy nadać jej styl. Więc mam zamiar powiedzieć "stałe". I porozmawiamy o tym, co to znaczy. I wtedy wreszcie nadać mu kolor. Więc mam zamiar powiedzieć "czarny". I to są wszystkie rzeczy mamy Teraz widział, z wyjątkiem stylu, ale porozmawiamy o tym. Więc chłopaki widzieli pomiarów, i widziałem kolory. A co się dzieje, to mamy tego ładne czarne obramowanie wokół niego, prawda? Chłopaki zobaczyć, jak to zrobiłeś? 

Publiczność: Tak. 

TOMAS REIMERS: Spoko. Więc co to jest? Więc przede wszystkim, jest to jeden piksel. To oczywiste, wystarczy, prawda? Jak, to gruba jeden piksel. Albo będzie to jeden piksel, ale jestem powiększony, więc jest to trochę bardziej niż to. 

ALLISON Buchholtz-AU: I mamy to śmieszne rozdzielczości TV. 

TOMAS REIMERS: Tak. Możesz zrobić to większe, mniejsze, cokolwiek. Tak tu jest granica dwóch pikseli. Zobaczysz, że to dwa razy grubsze. Następne co masz jest kolor. To nie jest interesujące. Nie zamierzam mówić o tym, naprawdę. 

ALLISON Buchholtz-AU: Ale styl może być tylko trochę ciekawe. 

TOMAS REIMERS: Tak. Więc stylu, istnieje kilka z nich Widzę, że używane powszechnie. Pierwszym z nich jest stałe, obok własnego przerywana, a ostatni jest przerywana. I tu jest przerywana. Zobaczysz, że są one kilka punktów, prawda? Dobrym sposobem na rodzaj uzyskać ładny granicę dzieje, kreski są również bardzo popularne. 

ALLISON Buchholtz-AU: A potem, oczywiście, jestem pewien, że istnieje wiele innych stylów, które można uzyskać. I mamy wielki zestaw linki na końcu dla was do rodzaju czytać i Zobacz więcej chłodnym CSS. 

TOMAS REIMERS: A potem Ostatnią rzeczą, że jesteśmy Porozmawiamy o Modele box bardzo szybko. Och, a następnie granicy, dokładnie tak, jak obicia, masz również takie rzeczy jak border-left, border-right, border-top, border-bottom, które pozwalają aby w określonej granicy. Więc tutaj jest tylko granica lewej zdefiniowane. Czy to ma sens? 

ALLISON Buchholtz-AU: To jest fajne sposób, aby podkreślić, rzeczy lub dodać linie między różnymi elementami. TOMAS REIMERS: Absolutnie. Więc to jest nasza granica. A ostatni na margines. Jak wyściółka marża za chyba to nie within-- ALLISON Buchholtz-AU: To nie wokół elementu ale w rzeczywistości wokół całego Okno, które byliśmy zobaczyć. 

TOMAS REIMERS: Tak. Allison powiedział to doskonale. To nie jest, jak, wewnątrz Element, to po całym opakowaniu. Oznacza to, że takie rzeczy jak Tło nie mają do niej zastosowania. I to w zasadzie mówi, jak, nie chcę niczego w tym dużo miejsca dla mnie. Więc jak mamy tutaj margines 10 pikseli. Więc nic w ciągu 10 pikseli powinna być obok mnie. To rodzaj jego Przestrzeń ale niby nie. Więc to jest bardzo Podstawy modelu pudełkowego. Czy to ma sens? Fajne, fajne. ALLISON Buchholtz-AU: Niesamowite. Tak teraz myślę, że my po prostu Posiadamy fajne zasobów że zabierzemy was poprzez bardzo szybko. A my dobrze actually--, mamy jeszcze internet? 

TOMAS REIMERS: Załóżmy, zobaczyć, czy mogę otworzyć up-- Pozwólcie mi zobaczyć, czy mogę mogą szybko uzyskać dostęp do internetu podczas rozmowy o niczym Allison Allison chce rozmawiać. ALLISON Buchholtz-AU: Więc basically-- ja nie wiem, co jeszcze mogę powiedzieć w tym momencie. Ale są pewne naprawdę dobrych zasobów. Są to te, które Tomas i Użyłem i że faktycznie wykorzystane do prep do tego celu. W3Schools jest, że ci Powinniście nie widział. Polecamy go dla Wiele rzeczy z CSS. Wiem, że polecam go mój punkt cały czas. 

Jedną z wielkich zalet jest to, że to pozwala rodzaju bałagan z CSS i zobaczyć zmiany natychmiastowo na tym, jak dwukrotnie okno zobaczyć, że ma. Więc nie musisz się martwić, utworzenie własnej strony internetowej, lub ustanowienie vhosta w swoim lokalne urządzenia i hosta lokalnego, i dostajesz wszystkie obróbce rzeczy. Jest osadzony w prawo w obrębie strony. 

I ma te małe lekcje, które można przejść do nauki więcej na temat selektorów, lub dowiedzieć się o manipulowania czcionki lub tła lub obrazu. I masz te Wyniki, że chwilowe nie trzeba wykonywać żadnej Przygotowanie do innych prac. Tak kocham w3schools. To wspaniałe. Czy to działa? 

TOMAS REIMERS: Tak. Nie, to nie jest. Czy chcesz, żebym spróbowała i ponownie uruchomić komputer? Albo chcemy to-- 

ALLISON Buchholtz-AU: To znaczy, dobrze, to będzie również w Internecie. Wszystkie slajdy będzie online. Więc po prostu bardzo polecam robić to. 

To jest dobre, jak tylko jak ściągawki. To jest po prostu wszystkie podstawowe Polecenia, które masz. To wspaniałe, gdy jesteś pierwszy zaczynasz swoją stronę. Bo może nie masz Aby dostać się do wszystkich Maryla Rodowicz rzeczywistym Konstrukcja ciężkich rzeczy. Po prostu trzeba go sformatować w sposób że niby ma sens i woli to na razie. A jeśli naprawdę chcesz dostać się do niego, wiem, jest to, na przykład, jeden z Ulubione odnośniki Tomasza. Używaliśmy go do prep, i to jest wspaniałe. To Deweloper z Mozilli. 

TOMAS REIMERS: Tak Mozilla są ludzie, którzy sprawiają, że Firefox. I to tylko ich własny dewelopera odniesienia, który myślę, że jest super. I ma wspaniałe Lista zasobów. Więc have-- 

ALLISON Buchholtz-AU: I ostatnia uwaga jest to kiedy starasz się projektowania witryny, czerpać inspirację od rzeczy sądzisz, że są ładne. Kontrola element, kontroli kodu źródłowego może być bardzo pomocne dla próbuje dowiedzieć się, jak projektować własną stronę internetową. 

Często czuję się jak najlepiej sposób, oprócz doświadczeń, jest po prostu patrzeć na rzeczy, które są dość. Uważam, że to naprawdę trudno tak rodzaj projektowania rzeczy na własną rękę, zwłaszcza na początku. Więc proszę spojrzeć na stronach internetowych że lubisz patrzeć. Dowiedzieć się, co sprawia, je odwołując się do Ciebie. A potem po prostu Próbuje się odtworzyć tego. 

TOMAS REIMERS: Prawo. Nawet jak strony internetowe jak to można zobaczyć tam na pewno div na górze. I wtedy masz inny div wewnątrz tutaj, co to jest CSS Awesomeness. I wtedy masz kilka linków tutaj. Jeśli naprawdę sprawdzić Elementy można sortować z rozpocząć, aby zobaczyć, co robić strony internetowe wyglądać i jak mogę odtworzyć, że gdybym chciał. Czy to ma sens? Więc mamy tylko trzy minuty w lewo. Więc pytania? Każda z nich? Tak. 

PUBLICZNOŚCI: W kolorze prostokąt, jak chcesz have-- jeśli nie chcesz go będzie na całej stronie, może dokonałeś to przejść przez tylko pół strony lub po prostu tekst? 

TOMAS REIMERS: Tak, absolutnie. Więc pozwól mi zobaczyć w rzeczywistości. Mam dwa pomysły. Więc przede wszystkim, mogą również korzystać procentach. 

PUBLICZNOŚCI: Naprawdę? 

ALLISON Buchholtz-AU: Więc coś patrzeć jest pozycjonowanie względne. To coś, czego nie mają czasu, aby dostać się, ale to jest coś, co na pewno polecam chłopaki sprawdzić. 

TOMAS REIMERS: So procenty. I zobaczyć, jak udało nam się tylko 50% szerokości? ALLISON Buchholtz-AU: Jeśli rzeczywiście znać liczbę pikseli, można być bardziej precyzyjnym w ten sposób. Możesz bawić się z nim. A 50%. Gdybyśmy mieli do zmiany rozmiaru naszej przeglądarki, to by go zmniejszyć. 

TOMAS REIMERS: Cóż, to w zasadzie 50% teraz, myślę. To 50%, a następnie margines Dodano do tego. CSS ma wiele dziwactw. Więc teraz to jest 50% szerokości strony. Ale pamiętaj, że masz 10 pikseli zdjęty z każdej strony. Więc jeśli były, aby przenieść, że przed lewa krawędź przeglądarce wtedy to będzie wyglądać 50%. Ponownie, tak jak powiedziałem, CSS może za dużo domysłach i-check. Jak myślisz, że coś jest zachowa się w jedną stronę, ale zachowuje się zupełnie inny sposób. 

ALLISON Buchholtz-AU: I po prostu się mądrzejszy, i po prostu się lepiej intuicja na to, jak poruszać się wzdłuż. 

TOMAS REIMERS: I coraz gorzej i gorzej. Więc to naprawdę tylko wyścig. 

ALLISON Buchholtz-AU: To jest bardzo zachęcające. Chcemy, aby jak CSS. 

TOMAS REIMERS: CSS jest niesamowite. Pamiętaj o tym. Inne pytania? 

ALLISON Buchholtz-AU: jedna rzecz. Coś jeszcze? Cool. 

TOMAS REIMERS: Niesamowite. 

ALLISON Buchholtz-AU: Cóż, jeśli Ciebie faceci mają jakieś pytania później, jesteśmy zawsze dostępne jak zwykle. Prawdopodobnie będzie zobaczyć niektóre z nas projektów końcowych i na pewno na hackathon. 

TOMAS REIMERS: Absolutnie. I na targach. 

ALLISON Buchholtz-AU: A na targach. Och. 

TOMAS REIMERS: Czekamy na widząc wszystkie swoje awesome-- 

ALLISON Buchholtz-AU: Zobaczymy wszystkich wspaniałych stron internetowych że będzie piękny. TOMAS REIMERS: Możesz zawsze zobacz, jak, strony internetowe który miał, jak, dobry CSS, a następnie jak ci, którzy nie starają się zrobić CSS. ALLISON Buchholtz-AU: Również inna rzecz, jedna rzecz do zbadania jest Bootstrapping. Więc Bootstrap jest wielki. 

TOMAS REIMERS: Google, że jeśli you-- 

ALLISON Buchholtz-AU: Google to. To wspaniałe. Pokochasz go. I teraz, że masz Podstawowa znajomość CSS, będzie to zrobić dużo więcej sensu. Niesamowite. Dzięki, chłopaki. 

TOMAS REIMERS: Dziękuję bardzo.