[MÜZİK OYUN] ALLISON BUCHHOLTZ-AU: Yani Biz temelde sadece gidiyoruz Size bir özet vermek CSS, biz biliyoruz çünkü o kapalı değildi Bütün bölümlerde. Ve biz gerçekten emin olmak istiyorum sen çocuklar, senin emrinde bu aracı var bunu yapmak için yeteneğine sahiptir, çünkü web siteleri çok daha güzel görünüyorsun. 

Ve bir web sitesi inşa eğer, o zaman muhtemelen oldukça yapmak istiyorum. Yani, gerek yok, ama bunu öneririm. [Gülüyor] Kullanıcıların kullanmak istiyorsanız, size olabilir biraz [duyulamaz] yapmak istiyorum. Yani biz denemek ve size sadece vermek için gidiyoruz bazı temel araçları ve anlayış, böylece dışarı çıkmak ve sen ne zaman CSS hakkında bir şeyler araştırma, bu anlamsız tamamlamak değil, CSS gibi bazen olmak. 

TOMAS REIMERS: Evet. Allison oldukça iyi dedi. Yani ilk şey, biz sanırım CSS ne olduğudur ile başlamalıdır? Yani CSS harika. CSS-- 

ALLISON BUCHHOLTZ-AU: İşte Bizim seminer adı. 

TOMAS REIMERS: Evet. Bu gerçekten önemli Eğer o kadar anlıyorum. Eğer sadece bir tane alıp Eğer müthiş eğer bir şey, o CSS. İki CSS için standları Cascading Style Sheets. Yani özünde, CSS anlamına gelen bir stil sayfası, Eğer bir web sayfası tarzı sağlar. Ve sonra ne demek olduğunu, bu kadar bir yolu web sitelerine stil eklemek için. Yani tarzı ile, her şeyi demek Bu structural-- değil böylece renkleri gibi şeyler, arka plan görüntüler, sınırlar gibi, dolgu, marjları. Biz bahsedeceğiz ne Tüm bu biraz anlamına gelir. 

Yani biz sadece önde gitti ve ettik gedit bu kadar her ikisi de açtı. Yani bu index.html olduğunu. Bu main.css olup. Yani main.css bir şey vardır. ALLISON BUCHHOLTZ-AU: Henüz tarzı. TOMAS REIMERS: Yoktur. Göreceğiniz gibi, bu kadar gerçekten çirkin bir site. ALLISON BUCHHOLTZ-AU: Bu sadece düz değil. TOMAS REIMERS: Evet. Evet, bu çirkin değil sadece minimalist. Ve sonra burada index.html var. Ve böylece hızlı için HTML, Allison recap, Sadece sayfa hakkında konuşmak istiyorum? 

ALLISON BUCHHOLTZ-AU: Evet. Yani açıkçası, bizim HTML var etiket, sadece isimler HTML dosyası. Biz CSS ile, burada bizim başlık var Awesomeness, hususların geri gidin. Nerede bu? 

TOMAS REIMERS: Ah. Evet, sen görebilirsiniz. ALLISON BUCHHOLTZ-AU: Ve başlığını fark Sağ buraya bu sekme başlığıdır. Ve ardından "Merhaba dünya!" olduğunu biz sadece var metin web üzerinde görüntüleme Geri dönmek bu-- sayfası. Geri. Hangi sadece bizim vücutta olduğunu Düz metin ötürü--. Ayrıca, bir şey için Burada bakarsanız, fark, Tomas bu kadar açık Bizim slayt iki. Yani sürece hepsi var gibi Bunlardan üç, sen iyisin. Onlar istedikleri sipariş olabilir. Ne en önemli sadece budur Eğer bu üç şey her vardır. 

TOMAS REIMERS: Serin. Bir doktor türü ekle? ALLISON BUCHHOLTZ-AU: Evet. TOMAS REIMERS: Evet. Serin. ALLISON BUCHHOLTZ-AU: Görünüşe göre, Benim mikrofonlar beni sevmiyorum. TOMAS REIMERS: Oh, sadece bize bir saniye ver Allison onun mikrofon dışarı anahtarları ise. Yani evet. Yani bizim ana sayfa var. Bu stillendirilmemiş tür. Biz çok fazla yok. Biz sadece temelde metin var. Biz stil sayfasını var. Biz başlık var. Yani sadece çıplak kemikli bileşenleri bir web sitesi yapmak. 

Oradan Yani, hadi CSS nedir hakkında konuşmak ve benzeri ve bunun tüm göründüğünü. Yani ki- için ALLISON BUCHHOLTZ-AU: Geri slaytlar. TOMAS REIMERS: slaytlar Geri. Ve Allison üzerinden alabilir. 

ALLISON BUCHHOLTZ-AU: Woo. TAMAM MI. , CSS dosyasındaki Yani Eğer zorunda gidiyoruz Bu bir çok şey seçiciler çağırdı. Bu sadece olacak CSS dosyasının temelini. Sadece olacak çok ve bu çok. Yani seçici. Bu sadece genel anatomisi. Biz aracılığıyla gidiyoruz örnekler, çünkü eğer siz asla Ben hissediyorum, benim bölüm izledim soyut şeyler gibi gerçekten mantıklı değil. Her zaman örnekleri görmek için yardımcı olur. 

Bu yüzden bazı seçici var. Bunun için bazı tanımlayıcı olacak ne istediğimizi stil uygulamak için. Ve sonra herhangi olabilir kurallar ve değerler ayarlayın. Gördüğünüz olabilir seçiciler Yani vücut gibi bir şey olabilir, veya P ile paragraf, veya başlık, ya da her neyse, ne olursa olsun HTML etiketleri olmak istiyorum. 

Yani bu durumda biz bir gövdeye sahiptir. Ve bazı kural var, hangi Bu karşılık Ne için stil için de geçerlidir. Yani bu durumda, biz var arka plan rengi ve yazı tipi ağırlık. Yani bu değişecek şey arka plan Bizim HTML dosyasının herhangi bir vücut etiketi içinde. Ve vermek için gidiyor Bu açık mavi değer. 

Peki bunu yapmak için gidiyor arka plan açık mavi. Ve sonra vücut içinde bir şey kalın bir yazı ağırlığa sahip olacak. Yani sadece gidiyor Bizim tüm metni kalın. Ve bu sadece bir seçici olduğunu. Ama bu çok fazla olabilir. Ve biz göstermek için gidiyoruz gibi Daha sonra, biraz daha nasıl içine Orada işler ve daha fazla örnek olduğunu. Eklemek istediğiniz bir şey var? 

TOMAS REIMERS: Hayır Allison aldım. Biz sadece bir yukarı kesmek için gidiyoruz Burada bizim örnek sitede örnek. Yani aslında bu alalım. Bu mükemmel. Ben sadece kopyala yapıştır gidiyorum Bizim main.css dosyasına bu doğru. Ve ben onu kurtarmak için gidiyorum. Ve sonra bunu çalışacaktır. Yani yan not, bir En sinir bozucu şeyler Bir dosyayı kaydetmek ve yok ise o zaman, gibi, sayfayı yeniden yükleyin, ve benzeri, neden değil, oluyor değişiklik? Bu olur. Yani burada biz yapılan gördüm bizim açık mavi arka plan web sitesi ve bazı metin koyu. Eğer 

Ben de, bahsetmeliyiz adamlar bir şey hakkında sorularınız varsa Biz yapıyoruz, çekinmeyin ücretsiz bizi durdurmak ve bize sormak için. Biz tamamen istekli soruları tarla. 

ALLISON BUCHHOLTZ-AU: Açıkça ile CSS, her şeyi kendi üzerine inşa. Bir şey değil Yani eğer Şimdi mantıklı biz istemiyorum Sonra çıkmaza için. 

TOMAS REIMERS: Yani diyelim tür bu teşrih. Yani başlamak istiyorum Burada seçici ile? 

ALLISON BUCHHOLTZ-AU: Evet. Ben daha önce söylediğim gibi, vücut Burada sadece bizim seçici olduğunu. Yani bizim indisini ah geri gitmek durumunda. 

TOMAS REIMERS: Ben sadece kapalı. Bana bir saniye ver. Yani index.html, Dosya Aç. ALLISON BUCHHOLTZ-AU: Serin. Yani burada fark ederseniz, biz Doğru, bu beden etiketleri var? Yani seçici lazım gelir Bahsettiğimiz etiketleri. Burada vücudun Yani. Peki ne söylüyorsun olduğunu everything-- geri gidebilir? Ben sadece isterdim gibi ekrana dokunun. O kadar çok soğuk olurdu. Bu içinde 

Yani bir şey Gördüğümüz vücut etiketleri, sadece, gibi, metin oldu ve genel olarak vücut gibi, arka işaret eder. Hiç istiyorsanız arka plan değiştirmek, bir vücut etiketi olacak. Sadece kendilerine uygulanan bu kuralları vardır. Yani eğer 

biz gitmek için index.html ve- aslında, Biz bir şey olabilir Vücudun dış? Biz olsaydı, böyle bir altbilgi veya şey, bu için geçerli olmaz. Ama içinde bir şey Bu vücut etiketleri gidiyor Bu vücut tarafından etkilenecek Yaptığımız seçici. Yazmanız için olsaydı Yani başka bir şey orada-- 

TOMAS REIMERS: en o eve götürmek edelim. Yani eğer bu yüzden biz div-- vardı Eğer olabilir sadece başka bir etiket. Bunu kapatmak için gidiyorum. Ya da en bu bir paragraf yapalım. Yani p paragraf için duruyor. Ve bu paragraf içinde. Ve sonra ben "Bu metin." Derler Serin. Ve sonra bu kural geçerlidir yapılan yerine vücudun bir paragraf. Bunu sadece nasıl uygulanacağını göreceksiniz Yeni oluşturulan paragraf, sağ, değil her şey. Mantıklı mı? 

ALLISON BUCHHOLTZ-AU: Yani bu, tüm vücut olduğunu, ama şimdi bizim seçici sadece Paragraf karşılık gelir. Yani biz sadece cesur ve mavi var Bu özel paragraf için, Bu tek şey, çünkü O p etiketi içinde alınmış. 

TOMAS REIMERS: Bu mantıklı sıralama mu ve nasıl şeyler başka şeyler saklanması? ALLISON BUCHHOLTZ-AU: Ayrıca, sadece gibi, en iyi yollarından biri demek Gerçekten CSS ile rahat olsun sadece bu gibi şeyler yapmak olduğunu, sadece denemek. Bu tip şeyler çok basit dışarı, Yenile vurdu, ve ne olduğunu görün. Ve en CS gibi, deneme sık sık can çok daha iyi bir yol Sezgisel anlayış. Hatta daha çok bizden daha adil, gibi, seninle konuşurken. 

TOMAS REIMERS: Kesinlikle % 100 bu noktada katılıyorum. Biz bu gitmek Yani, en başlayalım Bu iki yapmak tam olarak ne diseksiyon. Bu yüzden bu iki kural var. Yani ilk plan rengi. Ve biz onu kurduğunuz görüyoruz Bir değer, açık mavi eşit. 

Peki CSS, CSS tür nasıl çok gevşek Eğer renk tanımlamak için izin ediyoruz. Yani onları isimleriyle tanımlayabilirsiniz. Ayrıca böyle bir şey yapabilirim "kırmızı." Ve biz bu geri dönmek, sonra eğer, Eğer arka plan kırmızı olduğunu göreceksiniz. Ayrıca seni düşünüyorum gerçekten-- alabilirsiniz Bu oldukça yaratıcı alabilirsiniz, yapamazsın? 

ALLISON BUCHHOLTZ-AU: Ben Eğer hex kullanabilirsiniz düşünüyorum. Değil miyim? 

TOMAS REIMERS: Evet. Yani hex kullanabilirsiniz. Ama isim-bilge düşünüyorum. Yok mudur? ALLISON BUCHHOLTZ-AU: Sen epeyce yapabilirsiniz. En renkleri gibi oldukça fazla olduğunu size gibi aşkına--, ben somon biri olduğunu düşünüyorum. 

TOMAS REIMERS: Biz deneyeceğim somon sensin. ALLISON BUCHHOLTZ-AU: Ben chartreuse orada olduğunu düşünüyorum. TOMAS REIMERS: Evet. Görmek? Yani oldukça yaratıcı alabilirsiniz. 

ALLISON BUCHHOLTZ-AU: Sen Oldukça yaratıcı alabilir. Gibi, aklınıza eğer renk adı, orada muhtemelen. Eğer gerçekten iyi istiyorsanız detay, sen hex gidebilirsiniz. 

TOMAS REIMERS: Evet. Yani onaltılık. Siz bu geri Hatırlarsanız Eski pset gelen, Görüntü Kurtar, Siz uğraşmak zorunda Bu onaltılık değerleri ile. Ve çeşit, ne olduğunu tekrarlamak için onaltılık içinde saklanan üç değer vardır. Yani iki artışlarla gruplar halinde bulunuyor. İlk iki kırmızı değerini temsil eder. İkinci bir temsil Yeşil değer. Ve son bir mavi mi? 

Yani FF temsil etmek olur onaltılık 255. Yani 255 kırmızı, 255 mavi, yeşil, ve 0. Ve değerler 0 ile 255 arasında değişmektedir. 

İZLEYİCİ: Doğru. Yani aslında, biz arama olabilir İstediğimiz herhangi bir renk için internet, ve aslında bilinen-tanımlamak Renk tayfı açılan, ve sonra biz koymak olabilir? ALLISON BUCHHOLTZ-AU: Kesinlikle. Yani hemen hemen tam kontrole sahip renkler üzerinde CSS içinde istiyorum. Biz hakkında konuşmak için gidiyoruz arka plan görüntüleri daha sonra? Ya da biz bunu istiyoruz? 

TOMAS REIMERS: Evet. Kesinlikle. Yani ilk, sadece göstermek için Kırmızı ve yeşil sarı. Ve bazı gerekirse Bu bulgu yardım, sen Google şey olabilir "renk seçici." gibi ALLISON BUCHHOLTZ-AU: Ah, o kadar iyi. Ben Renk Seçici seviyorum. 

TOMAS REIMERS: colorpicker.com iyi bir örnektir. Ve burada, sen sahip olduğunu görürsünüz Tam Photoshop benzeri bir renk seçici. 

ALLISON BUCHHOLTZ-AU: Mm-hm. Ayrıca, serin şeyler sen renk şemaları oluşturabilir Eğer yoksa, böylece, gibi, renkler çatışan. TOMAS REIMERS: Ve Burada burada onaltılık değeri kalmış. Yani her zaman temelde çevrimiçi bulabilirsiniz yerler altıgen değerini almak için. Bu gibi, bu sadece sıralamak değil biz sayıların dünya renkleri görmek. Bu online gitmek daha var ve biz istediğimiz renk bulmak ve sonra numarayı aşağı çekmek. Sadece gerçekten kolay Çünkü yolu CS şeyler referans. 

ALLISON BUCHHOLTZ-AU: Sonra also-- var Ben sitenin tam adını unutmak. Ama, kesinlikle orada ben Adobe'den bir şey düşünmek Bu, sizin için renk şemaları oluşturur hangi gerçekten iyidir çünkü sen definitely-- bazen bulunuyor anlamaya zor, oh, ben bu rengi kullanmak istiyorsanız, ne başka yararlı bir olabilir benim sitede başka bir yerde kullanmak için, gibi, güzel ve tutarlı olun. 

TOMAS REIMERS: Allison hakkında konuşuyor Adobe tarafından bir Kuler'i denilen, sanırım. Bu K-U-L-E-R var. ALLISON BUCHHOLTZ-AU: Ben öyle düşünüyorum. O biri eminim. 

TOMAS REIMERS: Benim favori vardır Her zaman Renk Şeması Tasarımcı olmuştur. 

ALLISON BUCHHOLTZ-AU: Ooh. 

TOMAS REIMERS: şimdi-- olan 

ALLISON BUCHHOLTZ-AU: Ah, bu çok güzel. 

TOMAS REIMERS: Ve sen temelde gibi, diyebilirim, Ben yanyana üç renk istiyorum. Ve sonra en güzel şey yapalım. Ve sonra bir örnek alabilirsiniz Bu gibi görünebilir ne. Ve sonra herhangi üzerinde gezdirin eğer Onları, size onaltılık değerini verir. 

Yani sadece iyi bir yolu olarak başlatmak için renk şemaları hakkında düşünme Bir web sitesi veya hangi renkleri birlikte iyi gidebilir. Şaşırtıcı bir şekilde olabileceğinden Sandığın kadar kolay değil almak için. Ve sonra diğer serin şey Ben hep bu site hakkında bulduk Eğer Örnekler vurursan, o olacak olan ne bir örnek web sitesi göstermek Bu renk düzeni kullanarak gibi görünebilir. Neyse. 

Geri gerçek CSS. ALLISON BUCHHOLTZ-AU: Ama açıkçası, biz Bu referanslar yararlı olabilir biliyorum. TOMAS REIMERS: Hayır, onlar Kesinlikle yararlı olabilir. İkinci kural, Allison Yani? 

ALLISON BUCHHOLTZ-AU: Evet. İkinci kural sadece bir Bizim yazı tekabül. Yani yazı ağırlığı sadece tür of-- böylece kilo olur Eğer gibi, sadece istiyorsanız olmak, Normal veya benzeri, ince yazı tipleri, veya bu durumda, gibi, cesur. Ben unutmak. İsterseniz bu-- orada neler Normal gibi, sadece daha ince bir? TOMAS REIMERS: Aslında yok Bir ince tane var olmadığını biliyorum. ALLISON BUCHHOLTZ-AU: unutuyorum. Yani yazı ağırlığı genellikle biz Sadece cesur için kullanın. Eğer gerçekten içine almak istiyorsanız o, biz size göstermek için gidiyoruz. W3Schools farklı olan şeyler yazı için yapabilirsiniz. Ama temelde, hiç isterseniz yazı hakkında bir şey değiştirmek için, her zaman, olacak gibi, yazı-şey. Sen eğer Yani, font-family gibi olacak Gerçek türünü değiştirmek için çalışıyor. Bu eğer font-style olacak el yazısıyla gibi yapmak istiyorum, veya italik veya etajer. Hatta yazı renkli, eğer Biz bunu değiştirmek istedim. 

TOMAS REIMERS: Evet. Yani bunu değiştirebilirsiniz. Ve çeşit lazım Şimdi recap, sen, böylece Burada seçici kadar var olduğunu görüyoruz. Biz bu küme parantezi var. Ve sonra kuralları var noktalı virgülle ayrılmış. Mantıklı mı? Evet? Serin. Yani good-- ise 

ALLISON BUCHHOLTZ-AU: Geri. TOMAS REIMERS: en özel konuşalım seçiciler ne tür biz. 'Şu anda biz ettik Çünkü tür, sadece etiketleri gösterilmiştir. Ama siz bunun makul görebiliyordu. İki paragraf var Say Bir sayfa ve size tarzı edebilmek olmak istiyorum bir ama değil diğer, Sadece kendinizi sınırlamak istemiyorum Farklı gerçek HTML kullanmak zorunda etiketler onlara farklı stilleri vermek. 

Bu yüzden temel üç var seçiciler türleri. ALLISON BUCHHOLTZ-AU: Evet. Peki ne olduğu, etiketi var şu anda bahsediyoruz oldum. Yani bu tür vücudunuza veya p gibi. Ve sonra olan sınıf var Bizim CSS dosyasında tanımlamak zaman, her zaman nokta için gidiyor, ne olursa olsun Eğer sınıfın adı olmak istiyorum. Ve bu birden şeyler uygulayabilirsiniz. 

Eğer beş paragraf var ki ve bunların üçünün iki Aynı tarz gerekir, buna bir sınıf geçerli olacak. Ve bu biz bunu sadece yoludur. Size bir örnek vereyim Nerede bu aslında gösterir. Ama belki bazı etiketi olsaydı p, ondan sonra, sen, yazarsınız sınıf ne olursa olsun sınıfları eşittir bunu uygulamak istiyorum. Istediğimiz Yani ne olursa olsun sınıf seçiciler Bu özel paragrafa uygulamak için, biz sadece bu gibi yazabilirsiniz. Tabii ki, ben bir örnek bence çok daha somut hale getirecek. 

Elimizdeki diğeri id biz ifade hangi bir bir karma veya sterlin, ya da hashtag ile. TOMAS REIMERS: Octothorpe. ALLISON BUCHHOLTZ-AU: Octothorpe. Bu da, çalışır. Ve bu gerçekten benzersiz olmalıdır. Onlar sadece başvurmalıdır sayfanızda bir şey. Bu özel bir paragraf olsun Yani, ya da bazı bir listede öğe, ya da her neyse, Bu benzersiz olmalıdır. Ve aynı şekilde biz sadece demek gibi class = "sınıfı1 class2," Bu sadece biz var ne olursa olsun kimliği olabilir. TOMAS REIMERS: Evet. Yani kesinlikle konuşalım Burada örnekler hakkında. Ve ben sadece dalış için gidiyorum düz geri koduna. Yani bizim HTML bakalım. Ve bu yüzden şimdi bir paragraf var. Bu metin. Ben sadece değiştirmek için gidiyorum o. "Bu metin, 1'dir" Ve sonra biz gidiyoruz var bir "Bu metin, 2'dir" 

ALLISON BUCHHOLTZ-AU: İkinci bir. TOMAS REIMERS: Evet. Yani biz şimdi var sağ "Bu metin 2, bir"? Ve biz yeniden eğer görmek için gidiyoruz sayfa, ne bulmak için gidiyoruz Yapacağımız olduğunu find-- ALLISON BUCHHOLTZ-AU: Ooh. TOMAS REIMERS: Evet. Biz bir "Bu bulmak için gidiyoruz Metin 1 "ve" Bu "Metin 2'dir 

ALLISON BUCHHOLTZ-AU: Ve dışarı güzel sarı bir renk. 

TOMAS REIMERS: Ve göreceksiniz Şu anda bizim seçici olduğunu hangi p en uygulanır, ya da paragraflar, ikisi de etkiler, ikisi de karşılamak için durum bir p etiketi, hem konum. Bu toplam mantıklı. Yani soru iyi olduğunu, ne eğer biz istedik sadece bir tane olsun? Peki tam olarak Allison diyordu gibi, biz bunu diğer iki yol vardır. Ben kimliği ile başlamak için gidiyorum. 

ALLISON BUCHHOLTZ-AU: En kimliği ile başlayalım. 

TOMAS REIMERS: Ve her ikisi de Bunların nitelikleridir. Yani özellikler HTML var. Ve ne olmasıdır Eğer eklemek şey bir etiketi içinde etiket adından ayrı. Yani birden fazla özelliklere sahip olabilir. Evet? 

ALLISON BUCHHOLTZ-AU: Ben sadece gidiyordu pset 7 sizin örnekten, demek, Eğer herhangi hizaya çalışırsanız merkeze şeyler, Eğer kullanmış olabilir "Text align = center." Ve muhtemelen fark merkezli olmalıdır metin veya navigasyon çubuğu. Yani bu sadece, aynı zamanda bir nitelik var Eğer aşina olabileceği. TOMAS REIMERS: Bir sürü var size görürsünüz bağlıyor. Evet. Pset 7 iyi referans gibi. Biz id var. Ayrıca olabilir sınıf, bu gibi şeyler. Tek bir etiketi birçok özelliklere sahip olabilir. Yani kimliği ile başlayan, en biz taklit edelim Bilmiyorum of-- bir kimliği var istiyorum. Biz, özel arayacağım Bu bir nedeni, biz konum kalın yapacak ve altını, ve ne olursa olsun. ALLISON BUCHHOLTZ-AU: It olacak süper özel olacak. TOMAS REIMERS: Yani bu bir, biz id özel var. Yolu bu seçmek için, o zaman, bir main.css olarak, bir p etiketine sahip yerine Tamam, # özel mi? Ve bu seçer id special ile bir şey. Bu herkese mantıklı mı? HEDEF KİTLE: Evet. TOMAS REIMERS: Serin. Yani şimdi biz geri giderseniz, Biz hoppala see-- edeceğiz. Evet. Göreceğiz ki sadece seçer id special olan. Evet? Serin Sesler. Evet. 

İZLEYİCİ: bir şey alabilir miyim bir Her iki sınıf ve bir id özniteliği? 

TOMAS REIMERS: Evet. HEDEF KİTLE: Tamam. Eğer verirsen Ve sonra ne olur bu çatışma CSS bazı kurallar? TOMAS REIMERS: Kesinlikle. Biz kesinlikle gidiyoruz Bu konuda konuşmak. Peki tam olarak ne elde edildi , sen de sınıfları olabilir. Yani ben vardı gibi yapalım Üç paragraf ve ben İlk stil istedi İki ancak üçüncü değil. Peki, senin ilk fikir Ben, iyi, olabilir, Sadece ikinci bir kimliği verebilir. Ama yapamam, bir kimliği nedeniyle, tam Allison diyordu gibi, özgü olması gerekmektedir. 

Bunun yerine bir kimliği, ne kullanabilir bir sınıfını kullanabilirsiniz olduğunu. Ve bir class-- buna izin ne temelde söylüyorlar yapmak, Bu grubun bir parçası olarak aittir. Bu durumda, bizim grup Özel denir. Ve biz o yapacağız ne biz yerine sterlin daha say-- için gidiyoruz Biz nokta kullanmak için gidiyoruz. TAMAM MI? Ve dikkat edin kiloluk ve nokta Sadece CSS dosyası içinde var, değil HTML içinde. ALLISON BUCHHOLTZ-AU: Evet. Önemli bir ayrım. 

TOMAS REIMERS: Ben , çok mücadele vardı Ben HTML karma koymak çünkü daha sonra sadece uzun süre aptal hissettim. Bu iki seçer Bak nasıl Bu sınıfın olanlar? Serin. 

Şimdi, işler birden sınıfları olabilir. Diyelim ki ilk yapmak istedim diyelim İki sarı bir arka plan var ve ikinci iki var mavi bir yazı rengi. TAMAM MI. Ben ediyorum neden gerçekten bilmiyorum Bunu yapmak istiyorum, ama ben yapamam. 

ALLISON BUCHHOLTZ-AU: değil Olabilir web siteniz için önerilir. Ama bizim için, bunu yapacağız. 

TOMAS REIMERS: Öyle değil İyi bir renk düzeni. ALLISON BUCHHOLTZ-AU: Peki, sarı ve mavi benim lise renklerdir. Ama, bilmiyorum. TOMAS REIMERS: Allison yüksek Okul büyük bir renk düzeni vardı. [KAHKAHA] Öyleyse biz dediğimiz bu bu-- çağrı en izin yüzden Special var ve biz Pretty var. Bunun için, kullandığınız, öneririz daha açıklayıcı isimler. ALLISON BUCHHOLTZ-AU: Evet, yapardım sarı veya mavi gibi, bu çağrı. 

TOMAS REIMERS: Biz değiliz Gerçekten, gerçek bir web sitesi yapma hangi bunu yapmıyoruz neden. Ama eğer gerçekten Eğer gerçek bir web sitesi vardı olabilir gibi, makale başlığı, Makalenin içeriği, ilk kelime, izin böyle şeyler, Eğer çok daha açıklayıcı olması için. Bunlar sadece değişkenler gibi gerçekten. Onlar bir şekilde nerede adlı olmalıdır Eğer gibi, da-- evet, can. Mükemmel. 

Yani arka plan rengi. Ve sonra biz çok say-- gidiyoruz rengini değiştirmek için yolu sadece "renk" dir. Ve biz mavi yapmak için gidiyoruz. Çok havalı. Yani şimdi biz İlk iki özel var. Sonraki birine gidiyor "Oldukça = sınıf." var ALLISON BUCHHOLTZ-AU: Ve sonra olacak Orta biri "güzel" eklemek istiyorum. TOMAS REIMERS: Evet. Ve sonra orta biri, "güzel," ne olur eklemek için Sadece bir boşluk olması. Sınıf özniteliği Yani Bir boşluk ayrılmış listesi Tüm sınıfların o etikete geçerlidir. TAMAM MI? Bu birine ait gibi değil denilen özel sınıf çeşit "Özel, uzay, güzel." İki classes-- ait Özel ve güzel. Evet? Serin. 

Ve sonra bakarsanız ne olur, biz konum İlki olduğunu göreceğiz Sarı arka plan, siyah metin. İkinci Şehre 

ALLISON BUCHHOLTZ-AU: bold var- mavi metin sarı arka plan. Ve son bir sadece vardır biz ona atanmış mavi metin. 

TOMAS REIMERS: Soğuk? Seçiciler nasıl çalışır? Korku. 

ALLISON BUCHHOLTZ-AU: biz istiyor musunuz Şimdi o çatışma hakkında konuşmak? 

TOMAS REIMERS: Yani evet. Kesinlikle. Peki eğer olur Doğru, bir çatışma var? Ilk bir rol edelim bir şey kurar da-- ALLISON BUCHHOLTZ-AU: Belki Bu bir arka plan değiştirir? TOMAS REIMERS: Evet. Yani biz yapmak için gidiyoruz "güzel" somon için arka plan değiştirmek. ALLISON BUCHHOLTZ-AU: Sadece berabersin Tüm harika renkler, bugün, Tomas. TOMAS REIMERS: Evet. Ben öğrendim Çünkü can Gerçek bir renk olarak somon kullanın. Yani biz sadece bunu yapmak için gidiyoruz. Ben de Sunset bir gerçek renk olduğunu düşünüyorum. HEDEF KİTLE: Sunset bir gerçek renk değil mi? ALLISON BUCHHOLTZ-AU: Şunu deneyelim. TOMAS REIMERS: Bu demo sonra Sadece, durumda o kadar messes çünkü Ben hata ayıklama olmak istemiyorum. Bu yüzden somon bir gerçek renk olduğunu biliyorum. So herhangi bir tahmin ne olacak ki? 

ALLISON BUCHHOLTZ-AU: Herhangi bir fikir? 

İZLEYİCİ: [duyulamaz]. 

TOMAS REIMERS: Evet. Yani tam olarak doğru var. Temelde, onu alır o verildi son kural. 

ALLISON BUCHHOLTZ-AU: Yani bu nerede basamaklı yürürlüğe girer. 

TOMAS REIMERS: Peki nasıl hatırlıyorum biz stil sayfaları basamaklı olduğunu vardı? Bu So, biz tür demek Biz kuralların bir grup var ki ki birbirinin üstüne uygulanır ve onlar da birbirlerini geçersiz kılabilirsiniz. 

ALLISON BUCHHOLTZ-AU: Yani altta ne olursa olsun en üstünde ne varsa geçersiz kılar. Bunu tamamen kurallar olabilir önceden bir şey inkâr. Eğer olmak istiyorum bu yüzden de bulunuyor Eğer stil olduğunuzda dikkatli, böylece kurallarını oluştururken değilsin ki Eğer sadece tamamen geçersiz kılma ediyoruz. 

TOMAS REIMERS: Ya da belki seni kuralları üzerine yazmak istiyorum. 

ALLISON BUCHHOLTZ-AU: Ya da belki bunu. Evet. 

TOMAS REIMERS: Bir var davran birçok şey için geçerlidir sınıf, ama en Değiştirmek istediğiniz diyelim Kırmızı ve yazı arka plan rengi En cesur ağırlık şeyler, ancak biri için, Yalnızca arka plan rengini istiyorum kırmızı olabilir ama tüm diğer istediğiniz özellikleri, sen bir şey yapabileceğini gibi "font-weight = Normal," hangi o cesur değişikliği geri istiyorum. Evet? Yine, en iyi yolu, bence Allison, sadece pratik olduğunu söyledi. 

ALLISON BUCHHOLTZ-AU: Deneme. 

TOMAS REIMERS: Uygulama, uygulama, uygulama ve deney. Bence bir sürü insan biliyorum CSS tahmin-ve-çek sadece bir sürü nerede olursa günün sonunda, Eğer, şey-- gibi yapmak istiyorum Eğer bir fikir var, ama Eğer muhtemelen hala ihtiyacınız emin olmak için denemek için Eğer neye benzediğini biliyorum. 

İZLEYİCİ: Eğer uyguluyorsanız sınıfları, birden fazla Aynı paragraf veya bölüm, öyle ne olursa olsun sipariş yapabilirsiniz tırnak içine yazdıkça? 

TOMAS REIMERS: Hayır, hiç de değil. 

ALLISON BUCHHOLTZ-AU: Önemli nedir CSS stil sayfasına içindeki sırası. HEDEF KİTLE: Eğer soruyu tekrar edebilir mi? TOMAS REIMERS: Ah. ALLISON BUCHHOLTZ-AU: Içinde sınıf, sen veriyorsun sınıfları HTML şey yapar onlar konum hangi sırası önemli? Bu sipariş önemli değil. Önemli emridir CSS içinde sınıf seçiciler, stil sayfasının içinde. 

TOMAS REIMERS: Ses iyi? 

ALLISON BUCHHOLTZ-AU: Güzel. 

TOMAS REIMERS: Ve Biz amaçlara yönelik devam edeceğiz ALLISON BUCHHOLTZ-AU: Bundan sonra ne var? Ben unutmak. Ah, biz sadece örnekler var. Ama biz tür bu yaptım. Biz anında örnekler yaptık. 

TOMAS REIMERS: Biz almak Yakında seçiciler birleştirir. 

ALLISON BUCHHOLTZ-AU: Oh, Biz seçiciler birleştirmek için olsun. TOMAS REIMERS: Yani bazı örnekler elimizdeki olduğunu # Dog-- kiloluk ya da hashtag, ya octothorpe, ya da ne olursa olsun Eğer ki- keskin aramak istiyorum. 

ALLISON BUCHHOLTZ-AU: Keskin köpek. 

TOMAS REIMERS: Sonra .pets var. Bir şey, köpek bir kimliği vardır sayfada yalnızca bir köpek var. Bir şey bir kimliği vardır kedi, tek bir kedi var. Sayfadaki birçok evcil hayvan olabilir. Sınıfların bu yüzden verdim. Sen p bir örnek var. Ve sonra biri bu yüzden Son örnek, hangi , konuştuğumuz değil bir şeydir Bunları birleştirmek ne olur. P.pets Yani. 

Bunun için Yani, geri dönelim Kod ve evet another-- tanıtmak. Yani buraya. 

ALLISON BUCHHOLTZ-AU: Ben Bu gerçekten-- gibi hissediyorum gibi sadece örnekler üzerinden bakıyor Gerçekten bu öğrenmek için yoludur. Yani biz ne yapıyoruz bu. 

TOMAS REIMERS: Öyleyse biz taklit edelim Sadece sağ metin 2, seçmek istediğiniz? Yani biz kesinlikle olamaz Bir id bunu. Peki, biz bir o yapabilirdi id, ancak bir kimliği yoktur. Ben bir tane eklemek, ama en taklit izin verebilir Ben bir tane eklemek istemiyordu ki ya zaten başka bir şey vardır. Ben o yapamam. etiketi doğru, kesinlikle benzersiz değil mi? Ve ne sınıftır. Ama bunları birleştirebilirsiniz. En bir şey yapmak istedim diyelim hangi sadece şeyler geçerli olan sınıf özel var ve hangi sınıf tatlı var. 

Peki ne yapabilirim, main.css olduğunu Eğer ilk bu silmenize izin söyleyebiliriz. Bu birleştirebilirsiniz. Yani .Özel yapabilirsiniz. Yer yok. Sadece .special.pretty. Ne demektir şeydir hangi özel ve güzel hem de. Mantıklı mı? Ve biz burada giderseniz, ne Eğer görmek için gidiyoruz Bu kural için geçerlidir olduğunu Bunların her ikisi de olan ikinci bir. Ve bir çok şey için bunu yapabilirsiniz. Sen atalım say-- olabilir Ben sadece istedim iddia güzel sınıfı şeyler yapmak ve ayrıca bir paragraf etiketi olan. Yani p.pretty. En vardı iddia edelim etiket vücutta oldukça bir şey. TAMAM MI? Ben bu koşmak ve ben yapabilirsiniz sadece olduğunu görebilirsiniz olan şeyleri uygulamak için gidiyor güzel sınıf paragraflar. Ve sen, bu birleştirebilirsiniz temelde, istediğiniz kadar. Yani sadece onları bir araya koyabilirsiniz. Mantıklı mı? ALLISON BUCHHOLTZ-AU: Yani Bu tür daha yararlıdır zaman, Tomas, belki, daha önce diyordu Eğer çok karmaşık bir web sitesi var, ve zaten bir çok şey var Yazılı Bu kuralların, ve sadece gerekir önce gelen iki birleştirmek. Gibi yerine bir bütün yazma Yeni seçici ve orada değişen Sadece birleştirebilirsiniz Onları örtüşüp örtüşmediğini nerede. 

TOMAS REIMERS: Ya bazen bir konrtol bulabilirsiniz bir sınıf var ki gibi yazı tipi rengi mavi olması, ve başka bir sınıf var ki arka plan mavi yapar. Ve bu sadece işe yaramaz. Yani özel bir durum yazma, nerede, hem varsa da-- ama, ne sen yapacaksın sen gidiyoruz olduğunu Bu bir mavi bu gölge yapmak ve bu bir mavi bu diğer gölge. Doğru? 

ALLISON BUCHHOLTZ-AU: İyi istisnalar bu tür. TOMAS REIMERS: Yani sorunlar hakkında düşünmek Bunları birleştirmek zaman bu ortaya çıkabilir. Serin. Yani geri sunumu. ALLISON BUCHHOLTZ-AU: Biz neredeyse oradayız. TOMAS REIMERS: Ve bağlantı durdu. ALLISON BUCHHOLTZ-AU: Oh, hayır. ALLISON BUCHHOLTZ-AU: En CS ofis, internet aşağı gider. Ah, ironi. 

TOMAS REIMERS: Yani neyse, biz internet olmadan sunmak, sanırım, Burada tüm slaytlar var çünkü. Yani hakkında konuşalım etiketleri ilişkisi. ALLISON BUCHHOLTZ-AU: Sağ. Gidiş Yani sadece tür Tomas ne dedi kapalı, bunu yapmak için sadece başka bir yoludur. Bu yüzden bazı ebeveyne sahip Bir çocuk seçici ile Seçiciye. Yani burada bu örnekte, bazı var Bir sınıf navbar, sınıf düğmesine vücut. Ah. 

TOMAS REIMERS: Oh, üzgünüm. 

ALLISON BUCHHOLTZ-AU: Ve temelde, bu ne demektir gibi, tüm çocukların seçmektir seçiciler bu tür tüm, Bu ana seçicisi içinde. Ve bu sadece onlar hiç uygulamak için gidiyor. Bilmiyorum eğer Daha iyi bir yol var of-- TOMAS REIMERS: Ben düşünmek için bir yol sanırım Bu konuda nasıl önce hatırlayın biz tür bir araya koymak onları seviyorum. Sonra bu bir elemanını hangi tüm bu eşleşir. Ne bu söylediğini ben, bir Her şeyi maç istiyorum Ben istiyorum some-- içinde Bir seçici bulmak için. Ve o içinde, ben istiyorum Yeni şeyler eşleşecek. Doğru? Yani CSS, tüm hakkında tür var Bu öğeleri maç edememek. Ve maç deneyebilirsiniz diğer öğeleri içinde öğeler. 

Peki, en aslında bir örnek yapalım ve biz açıklamak düşünüyorum. Bu yüzden biz özel var gibi yapalım, özel tatlı, ne olursa olsun. Ve sonra tamam, bir bağlantı var? Yani bir bir link, hatırlıyorum. Bu yere gitmek için gitmiyor. Ve biz bunu vereceğiz sınıf bağlantısı, sanırım. Haydi verelim Bana bir fikir ver class--. ALLISON BUCHHOLTZ-AU: Serin. TOMAS REIMERS: atalım COO- oldukça sınıf gidin. Neden olmasın? 

ALLISON BUCHHOLTZ-AU: Tamam. TOMAS REIMERS: Yani Şu anda güzel şeyler arka plan yapmak için gidiyoruz somon, mavi, arka plan rengi. Bu mantıklı. Ve biz bu-- yaparsak 

ALLISON BUCHHOLTZ-AU: Metin eklemek ister misiniz böylece köprü aslında gösterir? TOMAS REIMERS: O İyi bir çağrı olacaktır. ALLISON BUCHHOLTZ-AU: 'Çünkü hakkı Şimdi hiçbir şey alacağız sadece ediyoruz. TOMAS REIMERS: Yani bu bir bağlantıdır. "Bu bir bağlantıdır." Oh, ve bu gidiyor Başka bir bağlantı olması. Hadi bunu sınıfı verelim "serin." Haklısın. Serin. Yani şimdi biz bu kapmak için gidiyoruz. Biz bir tane atmak için gidiyoruz. Biz bir tane var özel etiket ve ayrıca güzel etiketi birine sahip olacak. Ve şimdi biz gidiyoruz ne yapmak, biz cool-- yapmak için gidiyoruz olduğunu ne biz yapmak istiyorsun? ALLISON BUCHHOLTZ-AU: Biz büyük yapabilir miyim? TOMAS REIMERS: en oa sınır vereyim. ALLISON BUCHHOLTZ-AU: Biz sınır olabilir. TOMAS REIMERS: Evet. Bu yüzden bir şey yapacağız gibi, sınır o-- ve biz konum Bütün bir saniye içinde bu açıklamaya gidiyor. Şimdilik-- 

ALLISON BUCHHOLTZ-AU: kutu modeli için. TOMAS REIMERS: Ama şimdi, biz konum Sadece ona bir sınır verecek. Peki demektir sen olduğunu Bu bağlantıları göreceğiz. Ve onlar sahip olduğunu görmek için gidiyoruz Bu gibi çirkin siyah sınırları, hangi serin. 

ALLISON BUCHHOLTZ-AU: Sitemiz çok güzel. 

TOMAS REIMERS: Evet. Sitemiz harika. Yani bu iki bağlantılar ve göründükleri. Şimdi ben taklit edelim Sadece bunu yapmak istedim o şey içinde değilse hangi somon bir arka plan vardı. Yani bu bir unutmayın , somon bir geçmişe sahip oldukça sınıfın çünkü. 

Ama biz sadece soğutur söylemek istiyorum sınıfta sınıfta, özel olmayan hangi güzel, o sınırı olmalıdır. Peki, ne yapabilirim sen .cool, .Özel, uzay söyleyebiliriz. Sizce Ve o, ne yapıyor Bu konuda, bu temelde söylüyor ise, Tamam, bana her şeyi bulmak Bu özel maçlar. Daha sonra bu etiketleri içinde bulmak serin bana her şeyi. ALLISON BUCHHOLTZ-AU: Yani başka bir yolu Bu, bu düşünmek iyi olabilir C geri getiren, bir sadece kapsam fikir gibi. Yani bazı varsa olanlar gibi seçici, Bu daha önce çalışan oldum, tüm web sayfası, HTML tüm Doğru, senin kapsamında değildir? Ama biz bu olduğunda ebeveyn-çocuk ilişkileri, aşağı nerede daralma konum sanki bulunuyor Belirli bir yere arıyorsanız sanki, gibi, içimizdeki arıyoruz Belirli bir işlev yerine Bizim tüm dosya. HEDEF KİTLE: olur, akılda So Biz changed-- olsaydı önemi var ALLISON BUCHHOLTZ-AU: sipariş? HEDEF KİTLE: CSS açıyı sınıf boşluk, .cool için .Özel? ALLISON BUCHHOLTZ-AU: Evet, çünkü o kapsam bunu için, söyleyebilirim serin olan her şey, ve sonra ne has-- bakmak Ben, bu durumda olduğu gibi, yani Ben bunu değişti sanmıyorum. 

TOMAS REIMERS: Biz ne demişti Eğer? Özür dilerim. 

ALLISON BUCHHOLTZ-AU: biz ise daha sonra soğumaya ve kapsamı Özel dışarı şeyler aramak, aslında, aynı olurdu. 

TOMAS REIMERS: Yani olmaz. 

ALLISON BUCHHOLTZ-AU: Bu değil mi? Oh iyi, oh. Ben yanlış duyuyorum. 

TOMAS REIMERS: Yani nedeni o different-- ortak mistake-- var olduğunu şu anda sadece bağlantı sağ, serin var? Siz ise ben, benim sorum sanırım Bu sayfada ne .cool tarafından eşleştirilir? İki etiketleri doğru, burada vardır? Hangisi bu ve bu biridir. Hem serin maç. Başka bir şey yok. Yani dedi, eğer, .cool, uzay, .Özel, sen söylemek için gidiyoruz ne, Bu etiketleri içinde, özel nedir? ALLISON BUCHHOLTZ-AU: Hm. İşte ne Durdur-- doğru. Burada sadece bir şey gibi çünkü. 

TOMAS REIMERS: Yani hiçbir şey seçer. 

ALLISON BUCHHOLTZ-AU: Halbuki Özel, burada bu etiketleri içinde konum. 

TOMAS REIMERS: Bu ve bu. HEDEF KİTLE: Tamam. Yani ileri gelenler etiketler çizgi? 

TOMAS REIMERS: Evet. Mantıklı mı? Nasıl temelde kapsamını daraltmak için çalışıyor. ALLISON BUCHHOLTZ-AU: Evet. Ben muhtemelen düşünüyorum en kolay yolu bunu düşünmek. 

TOMAS REIMERS: Yani biz bunu buldum, ve Bu hem özel Bahisler bulundu. Ve sonra içinde, soruyorsun Bu adamlar, serin ne? Ve bu bir, bu kişinin serin içinde. Bu biri içinde, bir şey serin. Yani bu kalan tek etikettir. 

ALLISON BUCHHOLTZ-AU: serin Oysa sadece orada bunlar etiketleri içinde. TOMAS REIMERS: Kesinlikle. Ve o içinde özel nedir? Hiçbir şey. Şimdi, ben ne diyecekler olduğunu boşluk varsa, serin ve special-- ne soruyorsun veya sağa, güzel ve özel ne? Eğer .special.pretty derseniz, işte .pretty.special gibi. 

Boşluk çıkarmadan ne Çünkü Eğer .Özel deyince, soran, Eğer, tamam, soruyorsun hangilerinin özeldir? Sonra, bu, hangi olanlar da oldukça vardır, hangi dilbilgisi, aynı, soran gibi oldukça ne, ve daha sonra olanlar, özel de ne? Doğru? Bu farkı var ne ne içinde var. HEDEF KİTLE: Tamam. TOMAS REIMERS: Evet. Korku. Sonra-- düşünülerek Yani 

ALLISON BUCHHOLTZ-AU: Ben bizim son düşünüyorum şey (FANTAZİ İngiliz aksanıyla) 'dir kutu modeli. 

TOMAS REIMERS: box-- [güler] Ben Allison söylüyor yolu seviyorum. Kutu modeli şey Yani. 

ALLISON BUCHHOLTZ-AU: Sadece var Bir kutu, ben senin kutu modeli olacak. TOMAS REIMERS: Yani bu konuda konuşalım. Yani şu anda biz çok geçirdim Zaman seçiciler bahsediyoruz. Artık, siz gibi, muhtemelen, Bildiğiniz selectors-- ustaları, tam içeriği seçmek için nasıl Eğer ekranda işlemek istiyorum. 

Şimdi soru, nasıl tam olarak işleyebilirsiniz? Yani en temel sanırım Bu konuda düşünmek yolu iyi, tam olarak ne olduğunu CSS bir unsurdur? Biz çok zaman geçirdim hakkında konuşurken, bir etiket nedir, ya da en temel ne Bir etiket gösterimi? 

Düşünmek için iyi bir yol yani, somon ne şekil nedir? Gibi, Ne şekil arka plan Somon renkli? 

İZLEYİCİ: Bu bir dikdörtgen var. 

TOMAS REIMERS: Bu doğru, bir dikdörtgen değil mi? 

ALLISON BUCHHOLTZ-AU: Bir tuzak soru değildi. [KAHKAHA] 

TOMAS REIMERS: çalışıyorum değil Bu geç Sizi kandırmak için. Yani biz bu dikdörtgen var. Ve etiketi p, değil mi? Yani bize iyi verir paragraf inancı de, bir dikdörtgen olarak gösterilmektedir Tarayıcının zihninde, en az hangi öyle. 

ALLISON BUCHHOLTZ-AU: Yani, tarayıcılar olarak dik dörtgen şeklinde olan bu yüzden mantıklı. 

TOMAS REIMERS: Fikir burada CSS içinde etiketleri tüm bu bir dikdörtgen olarak temsil edilir. Ve her dikdörtgen dört sahiptir CSS göre parçalar, tamam mı? Sen gerçek içeriği var. Metin yatıyor orası. 

ALLISON BUCHHOLTZ-AU: Belki resim. 

TOMAS REIMERS: Evet. Sen hangi, dolgu var beyaz boşluk sadece bazı tür. Sonra bir sınır var. Ve sonra, marjı var olan Bunun dışında beyaz alanıdır. Bu hiç mantıklı Yani herkese, bu yüzden konum Bir saniye için bu konuda konuşmak için gidiyoruz. Yani burada biz yapacağız ne tamam, bazı divs oluşturmak için gidiyoruz mı? Beni ederken dilerim ben- 

ALLISON BUCHHOLTZ-AU: Ben gibi hissediyorum Biz sevimli bir resim koymak gerekir. 

TOMAS REIMERS: Biz kesinlikle gerekir. 

ALLISON BUCHHOLTZ-AU: Ben herkes gibi hissediyorum Bir yararlanabilecek sevimli resim, hepsi bu. 

TOMAS REIMERS: Can biz bir-- tüm parası 

İZLEYİCİ: Evet, tabii. TOMAS REIMERS: Tamam, güzel. Yani biz bir şirin koymak gerekir yerde resim. ALLISON BUCHHOLTZ-AU: Ben gibi hissediyorum sevimli tavşan hemen yararlı olabilir. TOMAS REIMERS: Tabii. ALLISON BUCHHOLTZ-AU: Hafta sonu. Bir şey var adorab-- 

TOMAS REIMERS: Nasıl bir kedi yavrusu dersin? 

ALLISON BUCHHOLTZ-AU: Bir yavru da çalışır. 

TOMAS REIMERS: Serin, çünkü Bunun için bir site var. Bu PlaceKitten denir. ALLISON BUCHHOLTZ-AU: Bu harika. TOMAS REIMERS: Evet. ALLISON BUCHHOLTZ-AU: Tıpkı, için, web sitenizde yer tutucu görüntüleri. TOMAS REIMERS: Mm-hm. PlacePuppy da bulunuyor. Ve PlaceBacon var. 

ALLISON BUCHHOLTZ-AU: PlaceBacon? Gerçekten mi? 

TOMAS REIMERS: Ah, biz yok Burada internet erişimi var. 

ALLISON BUCHHOLTZ-AU: [homurdanıyor] Trajik. TOMAS REIMERS: Aksi takdirde, Sizi gösterecektir nasıl web sitenize görüntüleri koymak. Biz bu almak için denemek için gidiyoruz biz gitmek zorunda önce çalışma. Ama şimdi, biz sadece konum sonra renklerde konuşacağım. Biz kittens-- resimlerini koymak istiyorum 

ALLISON BUCHHOLTZ-AU: Biz yaptık. 

TOMAS REIMERS: açıyı internet sitesinin Şu an için aşağı olmak. Bu yüzden iki divs var, ve biz konum Onlara iki kimlikleri vereceğim. Biz onu aramak için gidiyoruz "İlk" ve "ikinci". Yani id = "ilk". Ve biz onlara iki renk vermek için gidiyoruz. Bu yüzden bir şey seçmek nasıl "İlk" bir kimliği ile? ALLISON BUCHHOLTZ-AU: Nokta veya karma? HEDEF KİTLE: Keskin. TOMAS REIMERS: Keskin, mükemmel. Keskin, karma, ne olursa olsun biz-- 

ALLISON BUCHHOLTZ-AU: Çok şeyler onu aramak için. 

TOMAS REIMERS: Tamam. Biz hashtag yerleşmek için gidiyoruz, ve konum biz gitmek için gidiyoruz budur. TAMAM MI? 

ALLISON BUCHHOLTZ-AU: Hashtag. 

TOMAS REIMERS: O hashtag ilk. 

ALLISON BUCHHOLTZ-AU: Yani Eğer seminar-- tweet edebilirsiniz hashtag CSS, serin hashtag. TOMAS REIMERS: Hashtag Awesomeness. ALLISON BUCHHOLTZ-AU: Hashtag Awesomeness, evet. TOMAS REIMERS: Tamam. Bu yüzden "ilk" ve "ikinci" var. Yani ilk, biz gidiyoruz kırmızı bir arka plan rengi. ALLISON BUCHHOLTZ-AU: Ah, kolon. TOMAS REIMERS: Evet. ALLISON BUCHHOLTZ-AU: Ben senin yerinde denetleyici olacak. TOMAS REIMERS: Allison beni. Blue-- bir background-color 

TOMAS REIMERS: Mor! 

TOMAS REIMERS: Mor. ALLISON BUCHHOLTZ-AU: Evet. Purple benim en sevdiğim renk, ve biz henüz bunu kullanmadım. 

TOMAS REIMERS: Violet. ALLISON BUCHHOLTZ-AU: Violet. Yani çalışır. 

TOMAS REIMERS: Yani sen İki divs olacak. Onlar tamamen boş gidiyoruz. Biz muhtemelen bazı metin olmalıdır. Yani "ilk" olacak "MERHABA." Ve "ikinci" say-- olacak 

ALLISON BUCHHOLTZ-AU: Güle güle. 

İZLEYİCİ: - "DÜNYA." Hoşçakal, Merhaba. ALLISON BUCHHOLTZ-AU: gördüm konserde onları diğer hafta. TOMAS REIMERS: The Beatles? ALLISON BUCHHOLTZ-AU: reals için. Onlar bu harika değil. Ben bunu sevmedim. 

TOMAS REIMERS: Biz "MERHABA" ve "VEDA". Ve yine, CSS, sadece harika bizim renkleri tanır çünkü. Hatta gerek yok onların var olduğunu endişe. Onlar yapmak. 

ALLISON BUCHHOLTZ-AU: Onlar var. 

TOMAS REIMERS: Yani CSS ben olduğunu düşünüyorum 255 kelime rengi hakkında konuşmak için. Dışında bir renk düşünüyorum Eğer Bu 255 gibi, ben etkilendim olacak. ALLISON BUCHHOLTZ-AU: Evet. Sizlerin olabilir düşünüyorum sadece sağ sonra gelir. 

TOMAS REIMERS: Yani burada, biz iki kutu var görürsünüz Sağ birbirlerini sağ üst? MERHABA ve VEDA. 

ALLISON BUCHHOLTZ-AU: Arasında boşluk var. Onlar sadece smooshed konum Sağ birbirinin üstüne. 

TOMAS REIMERS: Yani ilk şey Sanırım hakkında konuşmak sanırım en de evet say-- üzüyor. Yani CSS kutuları tür olarak temsil eder. Ve kutular gibi, onlar içeriğe sahip. Ve içerik şu anda tür olduğunu MERHABA veya VEDA ve o kadar. TAMAM MI? Ilk şeylerden 

Yani bir sen yapabilirsiniz Eğer dolgu ekleyebilirsiniz olduğunu. Dolgu ne kadar yer diyor her tarafta bırakmalısınız. Yani söylemek istediğim diyelim Her tarafta 10 piksel. Ve ben bir saniye o teşrih edecek. ALLISON BUCHHOLTZ-AU: Burada Bütün bunlar piksel çoğunlukla olacak Seminerin geri kalanı için. Bunu sahip olduğunu görmek için gidiyoruz etrafında biraz boşluk, değil mi? Yani burada göremiyor ne var olduğunu padding bu görünmez tür gibi der her kenarında, Tamam, sen content-- sizin kutusu var 

ALLISON BUCHHOLTZ-AU: İstediğiniz musunuz Sadece kontrol elemanı yukarı çekmek için? 

TOMAS REIMERS: Evet, bu iyi bir fikir. ALLISON BUCHHOLTZ-AU: Ayrıca, ben buluyorum kontrol elemanı iyi bir yol olduğunu bir şey oluyor eğer anlamaya Yanlış, beklenmedik bir şey olur, etiketleri teftiş ve görme ne üzerine yazılır yararlı gibi değil. 

TOMAS REIMERS: Ben emin değilim Siz bu rengi görebilirsiniz eğer. Can? Bu doldurma görürsünüz kenarın tür üzerinde. Ve sonra gerçek görmek mavi içeriği, değil mi? Yani çok var kutu modelinin temelleri. Sen içeriğe sahip. Sonra dolgu var. 

İZLEYİCİ: Neden sadece yok Şeyin içinde kutuyu kullanın 

ALLISON BUCHHOLTZ-AU: Sağ. Sadece seçme Çünkü Şu anda eleman. 

TOMAS REIMERS: Evet. Diğer şeyler. Yani bu konuda konuşalım Bir saniye için dolgu komutu. CSS, ölçümlerde Yani Bir birim olması gerekir. Yani ilk önce miktarda var. Yani bu durumda, biz 10 söyledim. Sonra bir sonraki söylediğim biz piksel, px olduğunu. Aklınıza gelebilecek diğer olanlar santimetre, inç gibi şeyler. Sen gibi şeyler yapabilirsiniz, 10 inç nedir? Ve saçma olacak. 

ALLISON BUCHHOLTZ-AU: Ah, oğlum. 

İZLEYİCİ: Vay. 

TOMAS VE ALLISON: Evet. TOMAS REIMERS: Böylece tüm padding. Ben piksel geri dönmek için gidiyorum. 

ALLISON BUCHHOLTZ-AU: Piksel standart gibi olma eğilimindedir. Eğer web sitelerinin bir sürü baktığımızda, çoğunlukla piksel çalışır. TOMAS REIMERS: Yani görmek için gidiyoruz Ya gördüğünüz diğer olanları pixels-- bir em olan, em olduğunu yazı yüksekliğine eşit hangi anda kullanıyoruz. 

ALLISON BUCHHOLTZ-AU: Mm. TOMAS REIMERS: Bu, söylemek için iyi bir yoldur gibi, benim yazı kadar yer istiyor alarak. ALLISON BUCHHOLTZ-AU: bilmiyor muydunuz. Sen yeni bir şey her gün öğrenirler. TOMAS REIMERS: var olan bir CS ölçümlerin çok. Ben onları bakmak öneririz. Tüm durumlarda, sanırım piksel için yeterli olmalıdır. Ve onlar da ne konum Eğer görmek için gidiyoruz Online yapılan örnekler çoğunda. Bu yüzden piksel bırakacağım. 

Siz de yapabilirsiniz, ben bu yüzden say-- gerekir dolgu setleri altlık tüm. Ayrıca böyle bir şey yapabilirsiniz Sadece set-- için "padding-top" ALLISON BUCHHOLTZ-AU: Belki bizim "MERHABA" geri alırsınız. TOMAS REIMERS: sadece set --to üst ve başka bir şey dolgu. Yani dört komutları padding-top vardır, padding-bottom, padding-left, ve dolgu sağ. 

ALLISON BUCHHOLTZ-AU: Sadece gibi Eğer bir kutu için beklenebilir. 

TOMAS REIMERS: Evet. Hiçbir şey orada çok çılgın. Mantıklı mı? Yani dolgu olduğunu. Ben tüm ayarlamak için gidiyorum geri 10 altlıkları. Ve sonra sınıra hareket edeceğim. 

Peki sınır olduğunu Sınır garip bir komut var. Aynı anda üç tür şeyleri alır. Yani ilk ne büyük Bir ölçü olarak olmak istiyorum. Yine, ben sadece pikselleri kullanıyorum. Ve son şey ölçümlere eklemek gerekir bir şey olduğu Bir birim gerekmez 0 olduğunu. Aslında yanlış var 0 bir birim elde etmek üzere 0 0 inç arasında olduğundan, piksel, santimetre, ne olursa olsun. Hepsi sadece doğru, 0 demek? Yani ilk bunu ölçümü verir. 

Sonra bunu stil vermek. Yani söylemek için gidiyorum "katı." Ve biz bu ne anlama geldiği hakkında konuşacağız. Ve sonra son olarak, bunu bir renk verir. Yani söylemek için gidiyorum "siyah." Ve bunlar biz ettik her şey vardır şimdi tarzı dışında, daha önce görülen, ama biz bu konuda konuşacağım. Yani siz ölçümleri gördük, ve renkleri gördüm. Ve ne olur biz bu olsun çevresinde güzel siyah sınır, değil mi? Biz bunu nasıl Siz gördünüz mü? 

İZLEYİCİ: Evet. 

TOMAS REIMERS: Serin. Peki bu ne? Yani her şeyden önce, bir piksel var. Bu doğru, yeterli apaçık değil mi? Gibi, bir piksel kalın. Ya da bir piksel olurdu, ama ben değilim o biraz daha yani, yakınlaştırılmış daha. 

ALLISON BUCHHOLTZ-AU: Ve biz var Bu saçma çözünürlük TV. 

TOMAS REIMERS: Evet. Bunu büyük yapabilirsiniz, küçük, ne olursa olsun. Yani burada bir iki-piksel sınır var. Bunu kalın olarak iki kat göreceksiniz. Eğer varsa sonraki şey renktir. Bu ilginç değil. Ben konuşmak için gitmiyorum Gerçekten, bu konuda. 

ALLISON BUCHHOLTZ-AU: Ama stil Biraz ilginç olabilir. 

TOMAS REIMERS: Evet. Tarzı Yani, birkaç olanları vardır Ben sık kullanılan bakınız ki. İlk kişinin katı, bir sonraki en Noktalı ve son kişinin kesik. Ve burada noktalı. Eğer onlar olduğunu göreceksiniz nokta bir demet, değil mi? Tür güzel bir sınır almak için iyi bir yol gidiyor, tire de oldukça popüler. 

ALLISON BUCHHOLTZ-AU: Ve sonra tabii ki, ben Emin diğer bolluk var alabilirsiniz stilleri. Ve biz büyük bir dizi var Sizin için sonunda bağlantılar tür incelemek için ve daha serin CSS bakmak. 

TOMAS REIMERS: Ve son şey, biz konum hakkında konuşmak için gidiyoruz kutu modelleri gerçek hızlı. Oh, ve sonra sınır, Tam dolgu gibi, Ayrıca gibi şeyler var Sınır-sol, sınır-sağ, border-top, border-bottom, size izin Belirli bir sınırda almak için. Yani burada sadece sınır sol-tanımlı değil. Bu mantıklı mı? 

ALLISON BUCHHOLTZ-AU: Bu bir serin yolu şeyler vurgulamak veya eklemek için farklı unsurları arasındaki çizgiler. TOMAS REIMERS: Kesinlikle. Yani bizim sınır var. Ve son kişinin marjı. Margin'in benzeri dolgu o within-- değil dışında ALLISON BUCHHOLTZ-AU: It değil elemanı etrafında ama aslında bütünün etrafında kutu biz görmeye oldum. 

TOMAS REIMERS: Evet. Allison mükemmel şekilde söyledi. Bu gözündeki gibi, değil, eleman, bütün kutu etrafında var. Bu gibi şeyler demektir arka plan buna geçerli değildir. Ve bu temelde, diyor gibi ben bir şey istemiyorum Benim için bu çok alanda. Biz burada gibi Yani 10 piksel marjı. 10 piksel içinde çok şey Yanımda olmalıdır. Bu tür onun Uzay ama tür değil. Yani çok var kutu modelinin temelleri. Mantıklı mı? Serin serin. ALLISON BUCHHOLTZ-AU: Başar. Yani şimdi ben sadece biz düşünüyorum bizim serin kaynaklara sahip Biz sizi götüreyim ki çok hızlı aracılığıyla. Ve biz de actually-- edeceğiz, Henüz internet var mı? 

TOMAS REIMERS: Diyelim Ben up-- açabilirsiniz görmek bana sadece eğer görelim ben hızlı internet alabilirsiniz Allison şey bahsediyor ise Allison hakkında konuşmak istiyor. ALLISON BUCHHOLTZ-AU: Yani basically-- I do not Ben bu noktada başka ne diyebilirim biliyorum. Ancak bu bazı Gerçekten iyi kaynaklar. Bu olanlar olduğunu Tomas ve ben kullandım ve biz aslında o Bunun için hazırlık için kullanılır. W3Schools biri olduğunu size adamlar daha önce görmeliydin. Biz için tavsiye CSS ile şeylerin çok. Ben bunu tavsiye biliyorum Benim bölüm her zaman. 

Büyük şeylerden biri olduğunu öyle CSS ile karışıklık tür yapmanızı sağlar ve değişiklikleri görmek anında bu, gibi, çift penceresi olduğunu görmek. Yani endişelenmenize gerek yok Kendi web sayfası kurma, veya vHost kurmanız Yerel cihaz ve yerel ana, ve tüm bu şeyler çalışma almak. Sağ sayfa içinde gömülüdür. 

Ve bu çok az var dersler olduğunu yapabilirsiniz öğrenmek için geçmesi seçiciler hakkında daha fazla, veya manipüle hakkında bilgi senin yazı tipi, ya da bir arka plan ya da bir görüntü. Ve bu var anlık sonuçları siz Herhangi yapmak zorunda değilsiniz için diğer hazırlık çalışmaları. Yani W3Schools seviyorum. Bu inanılmaz. Bu çalışma mı? 

TOMAS REIMERS: Evet. Hayır, öyle değil. Beni denemek istiyor musunuz ve benim bilgisayarı yeniden başlatın? Ya da biz amaçlara yönelik istiyoruz 

ALLISON BUCHHOLTZ-AU: Yani, iyi, bu da online olacak. Tüm slaytlar online olacak. Ben sadece çok bu yapıyor öneririz. 

Bu sadece büyük bir Bir hile levha gibi. Sadece tüm temel var Eğer varsa komutları. İlk olduğunuzda harika Web siteniz başlıyorum. Belki değil çünkü Tüm içine almak istiyorum cesur gerçek işin tasarım ağır şeyler. Sadece bir şekilde biçimlendirmek gerekir bu tür anlam ve iradesini yapar şimdilik yok. Ve eğer gerçekten istiyorsanız içine almak için, ben biliyorum Bu gibi biridir Tomas'ın favori referanslar. Biz bunu kullanarak edildi hazırlık ve o muhteşem. Bu Mozilla Geliştirici bulunuyor. 

TOMAS REIMERS: Bu yüzden, Mozilla olan Firefox yapan insanlar. Ve bu sadece kendi geliştirici var Bence başvuru, harika. Ve harika bir vardır kaynakların listesi. Bu yüzden have-- 

ALLISON BUCHHOLTZ-AU: Ve sonra son nottur ne zaman çalışıyoruz , web sitesi tasarımı şeylerden ilham Bu size güzel olduğunu düşünüyorum. Elemanı incelenmesi, kaynak kodu teftiş Süper yararlı olabilir anlamaya çalıştıkları için nasıl kendi web sitesi stil. 

Genellikle, ben iyi hissediyorum Böylece, deney yanı sıra, Sadece bakmak olduğunu güzel olan şeyler. Ben sadece zor gerçekten bulmak tür kendi şeyler tasarlamak, Özellikle başlangıçta. Yani web sitelerine bakmak lütfen Eğer bakarak zevk. Yapar anlamaya Onları size hitap. Ve sonra çekinmeyin deneyin ve çoğaltmak. 

TOMAS REIMERS: Sağ. Hatta web siteleri gibi Bu gibi görebilirsiniz üstünde bir div kesinlikle var. Ve sonra içinde başka bir div var burada, burada CSS muhteşem. Ve sonra burada bağlantıları bir grup var. Eğer gerçekten sadece kontrol ederse elementler, Eğer sıralayabilirsiniz web siteleri ne görmeye başlar gibi bakmak ve nasıl can Ben istedim ki yeniden. Mantıklı mı? Yani biz sadece sol üç dakika var. Sorular Yani? Bunlardan herhangi? Evet. 

İZLEYİCİ: renk için Dikdörtgen, nasıl size olur Bunu istemiyordu have-- tüm sayfa boyunca olabilir gidiyor Eğer sadece genelinde gitmek yaptık yarım sayfa ya da sadece metin? 

TOMAS REIMERS: Evet, kesinlikle. Bu yüzden bana aslında görelim. Ben iki fikir var. Tüm Yani ilk, sen Ayrıca yüzdeleri kullanabilirsiniz. 

İZLEYİCİ: Gerçekten mi? 

ALLISON BUCHHOLTZ-AU: Yani bir şey bakmak göreceli konumlandırma. Bu bir şey ki içine almak için zamanımız yok, ama ben kesinlikle bir şey var Siz kontrol öneririz. 

TOMAS REIMERS: yüzdeleri Yani. Biz nasıl yaptığımı görmek genişliğinin sadece 50%? ALLISON BUCHHOLTZ-AU: Eğer Aslında piksel sayısını bilmek, Eğer bu şekilde daha hassas olabilir. Sen onunla uğraşmak olabilir. Ama% 50. Bizim tarayıcı yeniden boyutlandırmak için olsaydı, o küçük yapar. 

TOMAS REIMERS: Peki, bu kadar temelde% 50 şimdi, sanırım. Daha sonra marj% 50, ve Buna ilave edilmiştir. CSS tuhaflıklar bir yeri vardır. Yani şimdi bu Sayfa genişliğinin% 50. Ama 10 olduğunu unutmayın piksel her taraftan çıkarmış. Yani eğer karşı hareket edildi Tarayıcının sol kenarı, o zaman% 50 gibi görünecektir. Dediğim gibi yine, CSS yapabilirsiniz Tahminim-ve-çek bir sürü olacak. Gibi, bir şey olduğunu düşünüyorum bir şekilde davranmaya gidiyor, ama bu tamamen farklı bir şekilde davranır. 

ALLISON BUCHHOLTZ-AU: Ve sadece, akıllı olsun ve sadece bir iyi olsun Bunun için sezgi size birlikte hareket olarak. 

TOMAS REIMERS: Ve kötü ve daha kötü olur. Bu yüzden gerçekten sadece bir yarış var. 

ALLISON BUCHHOLTZ-AU: Bu süper cesaret var. Biz onları CSS gibi istiyorum. 

TOMAS REIMERS: CSS harika. Unutmayın. Diğer sorular? 

ALLISON BUCHHOLTZ-AU: bir şey. Başka herhangi bir şey? Serin. 

TOMAS REIMERS: Başar. 

ALLISON BUCHHOLTZ-AU: Peki, eğer çocuklar, daha sonra herhangi bir sorunuz varsa biz her zaman her zamanki gibi mevcut konum. Muhtemelen bazı görürsünüz Nihai projeler için bize ve kesinlikle hackathon de. 

TOMAS REIMERS: Kesinlikle. Ve fuarda. 

ALLISON BUCHHOLTZ-AU: Ve fuarda. Ah. 

TOMAS REIMERS: için sabırsızlanıyoruz senin awesome-- tüm görme 

ALLISON BUCHHOLTZ-AU: Göreceğiz senin müthiş tüm web sitelerinin O güzel olacak. TOMAS REIMERS: Her zaman can gibi, web sitelerine bakın kim, sonra gibi, iyi CSS ve vardı CSS yapmayı deneyin vermedi olanlar gibi. ALLISON BUCHHOLTZ-AU: Ayrıca, başka şey, içine bakmak için bir şey daha Bootstrapping olduğunu. Yani Bootstrap harika. 

TOMAS REIMERS: Google, sen-- eğer 

ALLISON BUCHHOLTZ-AU: Google o. Bu inanılmaz. Bunu seveceksiniz. Ve şimdi bir var CSS temel anlayış, Bir çok daha mantıklı olacak. Korku. Teşekkürler çocuklar. 

TOMAS REIMERS: Size çok teşekkür ederim.