[Muzik bermain] ALLISON BUCHHOLTZ-AU: Jadi kami pada dasarnya hanya akan untuk memberikan anda yang buruk CSS, kerana kita tahu bahawa ia tidak dilindungi dalam semua bahagian. Dan kita benar-benar ingin memastikan bahawa anda lelaki itu mempunyai alat ini di pelupusan anda, kerana ia mempunyai keupayaan untuk membuat laman web anda kelihatan jauh lebih cantik. 

Dan jika anda membina sebuah laman web, maka anda mungkin ingin ia cantik. Maksud saya, anda tidak perlu, tetapi saya hendak mencadangkan ia. [Ketawa] Jika anda ingin pengguna untuk menggunakannya, anda mungkin ingin ia sedikit [didengar]. Jadi kita akan cuba memberikan anda hanya beberapa alat asas dan pemahaman, supaya apabila anda keluar dan anda menyelidik perkara tentang CSS, ia tidak melengkapkan bahasa raban, seperti CSS kadang-kadang menjadi. 

TOMAS REIMERS: Yeah. Allison berkata ia dengan baik. Jadi saya rasa perkara pertama yang kami harus bermula dengan apa yang ada CSS? Jadi CSS adalah hebat. CSS-- 

ALLISON BUCHHOLTZ-AU: Itu nama seminar kami. 

TOMAS REIMERS: Yeah. Ia benar-benar penting bahawa anda memahami bahawa pada masa itu. Jika anda hanya mengambil satu perkara, ia CSS bahawa jika menggerunkan. Dua adalah CSS bermaksud Cascading Style Sheets. Jadi pada intinya, CSS adalah lembaran gaya, yang bererti ia membolehkan anda untuk gaya laman web. Dan kemudian apa yang bermakna, ia adalah satu cara untuk menambah gaya ke laman web anda. Jadi dengan gaya, kita bermakna segala-galanya itu bukan structural-- supaya perkara-perkara seperti warna, latar belakang imej, sempadan, seperti, padding, margin. Kami akan bercakap tentang apa yang semua yang bermakna dalam sedikit. 

Oleh itu, kita baru sahaja pergi ke depan dan membuka kedua-dua orang-orang di gedit. Jadi ini adalah index.html. Dan ini adalah main.css. Jadi main.css mempunyai apa-apa. ALLISON BUCHHOLTZ-AU: Tidak gaya setakat ini. TOMAS REIMERS: Tiada. Dan seperti yang anda akan lihat, itu tapak benar-benar hodoh. ALLISON BUCHHOLTZ-AU: Ia hanya yang nyata. TOMAS REIMERS: Yeah. Ya, ia bukan hodoh, ia hanya minimalis. Dan maka di sini kita mempunyai index.html. Dan demikian bagi yang cepat recap HTML, Allison, anda mahu hanya bercakap tentang halaman? 

ALLISON BUCHHOLTZ-AU: Yeah. Jadi jelas, kita mempunyai HTML kami tag, yang hanya nama fail HTML. Kami mempunyai header kami di sini, dengan CSS Kehebatan, yang- jika anda kembali. Di manakah itu? 

TOMAS REIMERS: Oh. Ya, anda boleh melihat. ALLISON BUCHHOLTZ-AU: Dan perhatikan pengepala boleh menanduk tab ini sehingga di sini. Dan kemudian "Hello, dunia!" adalah teks yang kita ada hanya memaparkan di web halaman, yang is-- kembali. Kembali. Yang hanya di dalam badan kita here-- teks ringkas. Juga, satu perkara yang perlu perasan, jika anda melihat penggunaan di sini, Tomas dihidupkan sehingga ini dua daripada slaid kami. Jadi selagi anda mempunyai semua tiga ini, anda halus. Mereka boleh dalam apa jua perintah yang mereka mahu. Apa yang paling penting adalah bahawa hanya anda mempunyai setiap daripada tiga perkara. 

TOMAS REIMERS: Cool. Tambah jenis doc? ALLISON BUCHHOLTZ-AU: Yeah. TOMAS REIMERS: Yeah. Cool. ALLISON BUCHHOLTZ-AU: Rupa-rupanya, mics saya tidak suka saya. TOMAS REIMERS: Oh, memberi kita saat yang adil manakala Allison beralih daripada mikrofon beliau. Jadi yeah. Oleh itu, kita mempunyai halaman utama kami. Ia adalah jenis unstyled. Kami tidak mempunyai banyak. Kami hanya perlu pada dasarnya teks. Kami mempunyai lembaran gaya. Kami mempunyai tajuk. Jadi hanya kosong tanpa tulang komponen membuat laman web. 

Jadi dari sana, mari kita bercakap tentang apa yang CSS adalah dan apa yang ia kelihatan seperti dan semua itu. Jadi untuk bahawa- ALLISON BUCHHOLTZ-AU: Kembali ke slaid. TOMAS REIMERS: Kembali kepada slaid. Dan Allison boleh mengambil alih. 

ALLISON BUCHHOLTZ-AU: Woo. OK. Jadi dalam fail CSS anda, anda akan mempunyai banyak perkara-perkara ini dipanggil pemilih. Itu hanya akan menjadi dasar fail CSS anda. Ia hanya akan menjadi banyak dan banyak ini. Jadi pemilih. Ini hanyalah anatomi umum. Kita akan pergi melalui contoh, kerana jika kamu tidak pernah menonton seksyen saya, saya rasa seperti apa yang di abstrak tidak benar-benar masuk akal. Ia sentiasa membantu untuk melihat contoh-contoh. 

Oleh itu, kita mempunyai beberapa pemilih. Yang akan menjadi sebahagian pengecam untuk apa yang kita mahu gaya yang memohon untuk. Dan kemudian kita boleh mempunyai apa-apa set peraturan dan nilai-nilai. Jadi pemilih yang mungkin anda lihat mungkin sesuatu seperti badan, atau perenggan dengan P, atau header, atau apa sahaja, apa sahaja yang anda mahu tag HTML anda untuk menjadi. 

Jadi dalam kes ini, kita mempunyai badan. Dan kita mempunyai beberapa peraturan, yang ini adalah sejajar untuk apa gaya anda juga dengan. Jadi dalam kes ini, kita mempunyai warna latar belakang dan berat font. Jadi ini akan mengubah latar belakang apa-apa dalam mana-mana tag badan fail HTML kami. Dan ia akan memberikan ia nilai ini biru muda. 

Maka ia akan membuat latar belakang biru muda. Dan kemudian apa-apa di dalam badan adalah akan mempunyai berat fon berani. Jadi ia hanya akan berani semua teks kami. Dan ini hanyalah salah satu pemilih. Tetapi, anda boleh mempunyai sangat banyak ini. Dan seperti yang kita akan menunjukkan kemudian, sedikit lebih ke dalam bagaimana bahawa kerja-kerja dan banyak lagi contoh-contoh yang ada. Apa-apa sahaja yang anda mahu tambah? 

TOMAS REIMERS: No. Allison mendapat ia. Kami hanya akan memotong satu contoh di sini di laman web contoh kita. Jadi mari kita benar-benar mengambil ini. Ia sesuai. Jadi, saya hanya akan copy dan paste yang betul ke dalam fail main.css kami. Dan saya akan menyimpannya. Dan kemudian kami akan menjalankannya. Jadi nota sampingan, satu daripada perkara yang paling mengecewakan adalah jika anda tidak menyimpan fail, dan maka anda, seperti, muat semula halaman, dan sebagainya, mengapa tidak perubahan yang berlaku? Ia berlaku. Jadi di sini kita melihat bahawa kami membuat kami laman web latar belakang biru muda dan beberapa teks tebal. 

Saya juga perlu menyebut, jika anda lelaki itu mempunyai soalan mengenai apa-apa kita lakukan, sila bebas untuk berhenti kami dan meminta kami. Kami benar-benar bersedia meletakkan soalan. 

ALLISON BUCHHOLTZ-AU: Jelas sekali, dengan CSS, segala sesuatu atas dirinya. Oleh itu, jika satu perkara tidak masuk akal sekarang, kita tidak mahu itu rawa anda kemudian. 

TOMAS REIMERS: Jadi mari kita jenis membedah ini. Jadi adakah anda ingin memulakan dengan pemilih di sini? 

ALLISON BUCHHOLTZ-AU: Yeah. Seperti yang saya katakan sebelum ini, badan hanya pemilih kami di sini. Jadi, jika kita kembali kepada ah index-- kami. 

TOMAS REIMERS: Yang saya ditutup. Berikan saya satu saat. Jadi Fail, Terbuka, index.html. ALLISON BUCHHOLTZ-AU: Cool. Jadi, jika anda perhatikan di sini, kita mempunyai tag badan, kan? Jadi pemilih hanya sepadan dengan tag yang kita berbicara tentang. Jadi badan di sini. Jadi apa yang kita katakan adalah everything-- boleh kita kembali? Saya ingin saya boleh hanya seperti menyentuh skrin. Ia akan menjadi begitu banyak sejuk. 

Jadi apa-apa jua dalam mereka tags badan, yang kita lihat hanya, seperti, teks, dan badan secara umum merujuk kepada, seperti, latar belakang. Jika anda pernah mahu menukar latar belakang, yang akan menjadi di tag badan. Hanya mempunyai peraturan-peraturan ini digunakan untuk mereka. 

Jadi jika kita pergi ke index.html dan- sebenarnya, kita boleh mempunyai sesuatu luar dalam tubuh? Jika kita mempunyai, seperti, kaki atau sesuatu, ia tidak akan berlaku untuk ini. Tetapi apa-apa jua dalam tag badan akan terjejas oleh badan ini pemilih yang telah kami buat. Jadi, jika anda adalah untuk menaip sesuatu yang lain there-- 

TOMAS REIMERS: Mari kita memandu rumah itu. Jadi, jika kita mempunyai div-- yang jadi itulah hanya satu lagi tag anda boleh mempunyai. Saya akan menutupnya. Atau mari kita membuat ini satu perenggan. Jadi p bermaksud perenggan. Dan dalam perenggan itu. Dan kemudian saya berkata: "Ini adalah teks." Cool. Dan kemudian saya membuat peraturan ini terpakai bagi perenggan bukannya badan. Anda akan melihat bagaimana ia hanya terpakai kepada perenggan yang baru ditubuhkan, hak, tidak perkara keseluruhan. Adakah ini masuk akal? 

ALLISON BUCHHOLTZ-AU: Jadi ini adalah semua badan, tetapi sekarang kami hanya pemilih sepadan dengan perenggan. Oleh itu, kita hanya perlu berani dan biru perenggan ini tertentu, kerana ini adalah satu-satunya perkara yang dilampirkan dalam p tag. 

TOMAS REIMERS: Adakah ini masuk akal jenis bagaimana perkara payung kepada perkara lain? ALLISON BUCHHOLTZ-AU: Juga, hanya untuk mengatakan, seperti, salah satu cara yang terbaik untuk benar-benar selesa dengan CSS adalah untuk hanya melakukan perkara-perkara seperti ini, hanya mencubanya. Ia amat mudah untuk menaip sesuatu keluar, memukul Muat semula, dan lihat apa yang berlaku. Dan seperti kebanyakan CS, uji kaji boleh sering membawa kepada yang lebih baik pemahaman intuitif. Lebih-lebih lagi daripada kita adil, seperti, bercakap dengan anda. 

TOMAS REIMERS: Boleh 100% bersetuju mengenai hal itu. Jadi, jika kita kembali kepada ini, mari kita mulakan membedah apa yang kedua-dua lakukan. Jadi kita mempunyai dua peraturan ini. Jadi yang pertama adalah warna latar belakang. Dan anda melihat bahawa kita telah menetapkannya sama dengan nilai, biru muda. 

Jadi dalam CSS, CSS adalah jenis dari sangat longgar tentang bagaimana anda dibenarkan untuk menentukan warna. Jadi, anda boleh menentukan mereka dengan nama. Anda juga boleh melakukan sesuatu seperti "merah." Dan kemudian jika kita kembali kepada ini, anda akan melihat bahawa latar belakang berwarna merah. Anda juga boleh mendapatkan really-- Saya rasa anda boleh mendapatkan cukup kreatif dengan ini, tidak boleh anda? 

ALLISON BUCHHOLTZ-AU Saya berfikir anda boleh menggunakan hex. Tidak boleh anda? 

TOMAS REIMERS: Yeah. Oleh itu, anda boleh menggunakan hex. Tetapi saya berfikir nama-bijak. Adakah tidak ada? ALLISON BUCHHOLTZ-AU: Anda boleh melakukan banyak juga. Cukup banyak seperti kebanyakan warna yang anda boleh name-- seperti, saya rasa salmon adalah satu. 

TOMAS REIMERS: Kami akan cuba salmon. ALLISON BUCHHOLTZ-AU Saya berfikir minuman keras manis adalah di sana. TOMAS REIMERS: Yeah. Lihat? Jadi, anda boleh mendapatkan cukup kreatif. 

ALLISON BUCHHOLTZ-AU: Anda boleh mendapatkan cukup kreatif. Seperti, jika anda boleh berfikir daripada nama warna, itu mungkin di sana. Jika anda benar-benar mahu denda terperinci, anda boleh pergi hex. 

TOMAS REIMERS: Yeah. Jadi perenambelasan. Jika anda semua masih ingat balik ini dari Serangga lama anda, imej Recover, anda semua terpaksa berhadapan dengan nilai-nilai hex. Dan jenis untuk menggulung apa yang, hex mempunyai tiga nilai yang disimpan di dalamnya. Jadi, dalam kumpulan dua kenaikan. Dua yang pertama mewakili nilai merah. Yang kedua mewakili nilai hijau. Dan yang terakhir adalah biru? 

Jadi FF berlaku untuk mewakili yang perenambelasan 255. Jadi, anda mempunyai 255 merah, 255 hijau, dan 0 untuk biru. Dan nilai-nilai adalah di antara 0 dan 255. 

PENONTON: Betul. Jadi pada dasarnya, kita boleh mencari internet untuk mana-mana warna yang kita mahu, dan mengenal pasti-diketahui sebenarnya warna kombo spektrum, dan kemudian kita boleh memasukkannya ke dalam? ALLISON BUCHHOLTZ-AU: Tepat. Jadi, anda mempunyai kawalan penuh cukup banyak lebih warna yang anda mahu dalam CSS. Adakah kita akan bercakap tentang imej latar belakang kemudian? Atau adakah kita mahu berbuat demikian? 

TOMAS REIMERS: Yeah. Sama sekali. Jadi pertama, hanya untuk menunjukkan bahawa merah dan hijau kuning. Dan jika anda memerlukan membantu mencari ini, anda boleh Google sesuatu seperti "warna pemetik." ALLISON BUCHHOLTZ-AU: Oh, ia begitu baik. Saya suka Warna Picker. 

TOMAS REIMERS: colorpicker.com adalah contoh yang baik. Dan di sini, anda akan melihat bahawa anda mempunyai warna Photoshop seperti pemetik penuh. 

ALLISON BUCHHOLTZ-AU: Mm-hm. Juga, perkara-perkara yang sejuk adalah anda boleh menjana skim warna supaya anda tidak perlu, seperti, bertempur warna. TOMAS REIMERS: Kemudian inilah nilai hex di sini. Jadi, anda sentiasa boleh mencari dalam talian pada dasarnya tempat untuk mendapatkan nilai hex dari. Ia tidak menyelesaikan daripada yang adil, seperti, kita melihat warna dunia dalam nombor. Ia lebih yang kita pergi ke dalam talian dan mendapati apa warna yang kita mahu, dan kemudian mengambil nombor ini. Kerana ia hanya benar-benar mudah cara untuk merujuk perkara di CS. 

ALLISON BUCHHOLTZ-AU: Dan kemudian ada also-- Saya lupa nama yang tepat dari laman web ini. Tetapi ada pasti, saya berfikir, sesuatu dari Adobe yang menjana skim warna untuk anda, yang benar-benar sejuk, kerana anda definitely-- itu kadang-kadang sukar untuk memikirkan, oh, jika saya mahu menggunakan warna ini, apa yang mungkin menjadi satu lagi berguna untuk digunakan di tempat lain di laman web saya untuk, seperti, membuat bagus dan padu. 

TOMAS REIMERS: ini Allison bercakap tentang satu demi Adobe Kuler dipanggil, saya berfikir. Ia K-U-L-E-R. ALLISON BUCHHOLTZ-AU: Saya fikir begitu. Saya agak pasti itulah yang. 

TOMAS REIMERS: kegemaran saya mempunyai sentiasa Warna Designer. 

ALLISON BUCHHOLTZ-AU: Ooh. 

TOMAS REIMERS: Yang now-- 

ALLISON BUCHHOLTZ-AU: Ah, ini adalah indah. 

TOMAS REIMERS: Dan anda pada dasarnya boleh berkata, seperti, Saya mahu tiga warna bersebelahan antara satu sama lain. Kemudian mari kita buat sesuatu yang baik. Dan kemudian anda boleh mendapatkan contoh apa yang mungkin kelihatan seperti. Dan kemudian jika anda berlegar tetikus di atas mana-mana mereka, ia memberi anda nilai hex. 

Jadi, sebagai cara yang baik untuk memulakan berfikir tentang skim warna atau apa warna di laman web mungkin baik bersama-sama. Kerana yang boleh mengejutkan bukan sebagai mudah untuk memilih yang anda berfikir. Kemudian Perkara yang sejuk yang lain Saya selalu didapati mengenai laman ini adalah jika anda memukul Contoh IA AKAN menunjukkan apa yang laman contoh mungkin kelihatan seperti menggunakan skim warna. Anyway. 

Kembali ke CSS sebenar. ALLISON BUCHHOLTZ-AU: Jelas sekali, kita tahu rujukan ini mungkin berguna. TOMAS REIMERS: Tidak, mereka pasti boleh membantu. Jadi kedaulatan kedua, Allison? 

ALLISON BUCHHOLTZ-AU: Yeah. Peraturan kedua hanya sepadan dengan fon kami. Jadi berat fon adalah hanya jenis daripada- begitu berat akan menjadi jika anda mahu hanya, seperti, normal atau, seperti, fon nipis, atau dalam kes ini, seperti, berani. Saya terlupa. Apa yang jika anda mahu it-- ada satu yang lebih nipis daripada hanya, seperti, normal? TOMAS REIMERS: Saya tidak benar-benar tahu jika ada satu yang lebih nipis. ALLISON BUCHHOLTZ-AU: saya lupa. Jadi berat badan font kita biasanya hanya menggunakan untuk berani. Jika anda ingin mendapatkan benar-benar ke dalam itu, kami akan menunjukkan kepada anda. W3Schools mempunyai semua berbeza perkara yang boleh anda lakukan untuk fon. Tetapi pada dasarnya, jika anda pernah mahu untuk mengubah apa-apa tentang fon, ia sentiasa akan menjadi, seperti, font-sesuatu. Oleh itu, ia akan menjadi seperti, font-keluarga jika anda cuba menukar jenis sebenar. Ia akan menjadi gaya fon jika anda ingin ia seperti kursif, atau italik, atau barang kecil. Atau bahkan font-warna, jika kita mahu mengubahnya. 

TOMAS REIMERS: Yup. Jadi anda boleh menukar bahawa. Dan semacam hanya untuk recap sekarang, jadi anda boleh melihat bahawa kita mempunyai pemilih di sini. Kami mempunyai ini pendakap kerinting. Dan kemudian kita mempunyai peraturan dihalang oleh koma bertitik. Adakah ini masuk akal? Yeah? Cool. Jadi, jika yang good-- 

ALLISON BUCHHOLTZ-AU: Kembali. TOMAS REIMERS: Mari kita bercakap secara khusus mengenai jenis pemilih yang kita ada. 'Sebab sekarang kita telah semacam hanya ditunjukkan tag. Tetapi anda semua dapat melihatnya munasabah. Katakanlah anda mempunyai dua perenggan pada halaman dan anda mahu menjadi mampu untuk gaya satu tetapi tidak yang lain, anda tidak hanya mahu mengehadkan diri anda perlu menggunakan HTML sebenar berbeza tag untuk memberi mereka gaya yang berbeza. 

Oleh itu, kita mempunyai tiga asas jenis pemilih. ALLISON BUCHHOLTZ-AU: Yeah. Oleh itu, kita mempunyai tag, yang adalah apa yang kita telah bercakap tentang sekarang. Jadi itulah jenis seperti badan atau p anda. Dan kemudian kita mempunyai kelas, iaitu apabila kita menentukan ia dalam fail CSS kami, ia sentiasa akan dot, apa sahaja anda ingin nama kelas anda untuk menjadi. Dan ini boleh memohon untuk pelbagai perkara. 

Katakanlah anda mempunyai lima perenggan dan dua daripada tiga daripada mereka perlu gaya yang sama, anda akan memohon kelas yang kepadanya. Dan ini hanyalah cara kita melakukannya. Kami akan memberikan anda satu contoh di mana ini sebenarnya muncul. Tetapi jika anda mempunyai mungkin beberapa tag p, selepas itu, anda akan menulis, kelas sama dengan apa kelas anda ingin memohon kepadanya. Oleh itu apa sahaja pemilih kelas yang kita mahu terpakai bagi perenggan ini tertentu, kita hanya boleh menulis seperti ini. Sudah tentu, saya rasa contoh akan membuat ia lebih konkrit. 

Yang lain kita mempunyai adalah id, yang kita menunjukkan dengan hash, atau paun, atau hashtag. TOMAS REIMERS: Octothorpe. ALLISON BUCHHOLTZ-AU: Octothorpe. Yang bekerja, terlalu. Dan yang satu ini benar-benar harus menjadi unik. Mereka sepatutnya hanya terpakai kepada satu perkara pada halaman anda. Jadi sama ada itu perenggan yang tertentu, atau beberapa item dalam senarai, atau apa sahaja, ini perlu menjadi unik. Dan dengan cara yang sama bahawa kita hanya berkata, seperti, class = "class1 class2," ini hanya boleh menjadi id daripada apa yang kita ada. TOMAS REIMERS: Yeah. Jadi mari kita pasti bercakap mengenai contoh-contoh di sini. Dan saya hanya akan menyelam lurus ke dalam kod. Jadi mari kita lihat HTML kami. Demikianlah kita sekarang mempunyai satu perenggan. Ini adalah teks. Saya hanya akan mengubah suai ia. "Ini adalah teks 1." Dan kemudian kita akan mempunyai "Ini adalah teks 2." 

ALLISON BUCHHOLTZ-AU: Kedua satu. TOMAS REIMERS: Yup. Oleh itu, kita kini mempunyai "Ini adalah teks 2," betul? Dan kita akan lihat bahawa jika kita menambah nilai halaman, apa yang kita akan mendapati adalah kami gonna find-- ALLISON BUCHHOLTZ-AU: Ooh. TOMAS REIMERS: Yeah. Kami akan mencari "Ini adalah teks 1, "dan" Ini adalah teks 2. " 

ALLISON BUCHHOLTZ-AU: Dan warna kuning keluar indah. 

TOMAS REIMERS: Dan anda akan melihat pemilih kita sekarang, yang terpakai kepada p, atau perenggan, memberi kesan kepada kedua-dua mereka, kerana kedua-dua mereka memenuhi syarat mereka berdua yang p tag. Ini menjadikan jumlah akal. Jadi persoalannya adalah, baik, apa yang jika kita mahu hanya mendapatkan satu? Jadi sama seperti Allison telah berkata, kita mempunyai dua cara lain untuk berbuat demikian. Saya akan bermula dengan id. 

ALLISON BUCHHOLTZ-AU: Mari kita mulakan dengan id. 

TOMAS REIMERS: Dan kedua-dua ini adalah sifat-sifat. Jadi sifat-sifat wujud dalam HTML. Dan apa yang mereka adalah sesuatu yang anda menambah dalam tag yang berasingan daripada nama tag. Jadi, anda boleh mempunyai beberapa sifat-sifat. Yeah? 

ALLISON BUCHHOLTZ-AU: saya hanya akan berkata, dari contoh anda dari Serangga 7, jika mana-mana anda cuba untuk menyelaraskan perkara ke pusat, anda mungkin telah menggunakan "Teks align = pusat." Dan anda perasan ia mungkin sepatutnya berpusat teks anda atau bar navigasi anda. Jadi itu hanya juga sesuatu sifat yang anda mungkin biasa dengan. TOMAS REIMERS: Ada sekumpulan daripada sifat-sifat yang anda akan melihat. Yeah. Seperti rujukan yang baik untuk Serangga 7. Kami mempunyai id. Anda juga boleh mempunyai kelas, perkara-perkara seperti ini. Tag tunggal boleh mempunyai banyak sifat-sifat. Jadi bermula dengan id, mari kita berpura-pura kita ingin mempunyai id daripada- Saya tidak tahu. Kami akan memanggilnya khas, kerana yang satu ini, kami akan membuat berani, dan garis bawah, dan apa sahaja. ALLISON BUCHHOLTZ-AU: Ia gonna super khas. TOMAS REIMERS: Jadi ini satu, kita mempunyai id khas. Jadi cara untuk memilih itu, maka, adalah dalam main.css, bukannya mempunyai p tag, anda lakukan #special, OK? Dan bahawa memilih yang perkara dengan id khas. Adakah ini masuk akal untuk semua orang? PENONTON: Yeah. TOMAS REIMERS: Cool. Oleh sebab itu jika kita kembali, kami akan see-- Alamak. Yeah. Kita akan melihat bahawa ia hanya pilihan pelanggan satu dengan id khas. Yeah? Bunyi sejuk. Ya. 

PENONTON: Bolehkah sesuatu yang mempunyai sifat kedua-dua kelas dan id? 

TOMAS REIMERS: Ya. PENONTON: OK. Kemudian apa yang berlaku jika anda kemudian memberikan ia beberapa peraturan dalam CSS konflik itu? TOMAS REIMERS: Boleh. Kami pasti akan untuk bercakap tentang itu. Jadi apa yang anda telah mendapat di, anda juga boleh mempunyai kelas. Jadi mari kita berpura-pura saya tiga perenggan dan saya mahu gaya pertama dua orang tetapi tidak ketiga. Nah, idea pertama anda mungkin, baik, saya hanya boleh memberikan satu kedua id. Tetapi anda tidak boleh, kerana id, sama seperti Allison telah berkata, perlu menjadi unik. 

Jadi, daripada id, apa yang anda boleh digunakan ialah anda boleh menggunakan kelas. Dan class-- yang apa yang ia membolehkan anda lakukan adalah pada dasarnya berkata, ini adalah milik sebagai sebahagian daripada kumpulan. Dalam kes ini, kumpulan kami dipanggil Khas. Dan apa yang kita akan lakukan kemudian adalah kita akan say-- bukannya paun, kita akan menggunakan titik. OK? Dan perhatikan bahawa pound dan dot hanya wujud dalam fail CSS, tidak dalam HTML. ALLISON BUCHHOLTZ-AU: Ya. Perbezaan penting. 

TOMAS REIMERS: Saya mempunyai begitu banyak perjuangan, kerana saya meletakkan hash dalam HTML dan kemudian hanya berasa bodoh untuk masa yang lama. Lihat bagaimana ia memilih kedua-dua orang-orang dengan golongan itu? Cool. 

Sekarang, perkara yang boleh mempunyai pelbagai kelas. Katakan saya mahu membuat pertama dua mempunyai latar belakang kuning dan dua yang kedua mempunyai warna font biru. OK. Saya tidak benar-benar tahu mengapa Saya akan ingin melakukannya, tetapi saya boleh. 

ALLISON BUCHHOLTZ-AU: Mungkin tidak disyorkan untuk laman web anda. Tetapi untuk tujuan kita, ia akan lakukan. 

TOMAS REIMERS: Ini bukan skim warna yang baik. ALLISON BUCHHOLTZ-AU: Nah, kuning dan biru adalah warna sekolah tinggi saya. Saya tidak tahu, walaupun. TOMAS REIMERS: Allison yang tinggi sekolah mempunyai skim warna yang hebat. [Ketawa] Sebab itu apa yang kita boleh memanggil ini adalah Mari kita memanggil this-- jadi kami mempunyai Khas dan kami mempunyai Pretty. Saya cadangkan, untuk ini, anda menggunakan nama-nama yang lebih deskriptif. ALLISON BUCHHOLTZ-AU: Ya, saya akan panggilan ini, seperti, kuning atau biru. 

TOMAS REIMERS: Kami tidak benar-benar membuat sebuah laman web sebenar, itulah sebabnya kami tidak melakukannya. Tetapi jika anda benar-benar mempunyai laman web sebenar, anda mungkin mempunyai, seperti, tajuk artikel, kandungan artikel, perkataan pertama, perkara-perkara seperti itu, yang membenarkan anda untuk menjadi lebih deskriptif. Ini adalah benar-benar sama seperti pemboleh ubah. Mereka patut dinamakan dengan cara di mana anda boleh, like-- yeah, seperti. Perfect. 

Jadi warna latar belakang. Dan kemudian kita akan say-- jadi cara untuk menukar warna adalah hanya "warna." Dan kita akan membuat ia biru. Itu sejuk. Jadi sekarang kita mempunyai dua pertama mempunyai khas. Seterusnya yang akan mempunyai "class = cantik." ALLISON BUCHHOLTZ-AU: Dan kemudian anda akan ingin menambah "cukup" kepada orang tengah. TOMAS REIMERS: Yup. Dan kemudian dengan yang tengah, menambah "cukup," apa yang berlaku adalah anda hanya perlu ruang. Jadi sifat kelas adalah senarai terpisah ruang semua kelas yang berkenaan dengan tag itu. OK? Ia bukan seperti ini kepunyaan beberapa jenis kelas khas yang dipanggil "Khas, ruang, cukup." Ia tergolong dalam dua classes-- khas dan cantik. Ya? Cool. 

Dan kemudian jika dilihat pada apa yang berlaku, kami akan melihat bahawa salah satu yang pertama mempunyai latar belakang kuning, teks hitam. One-- Kedua 

ALLISON BUCHHOLTZ-AU: --has berani latar belakang kuning dengan teks biru. Dan terkini kami hanya mempunyai teks biru yang kita diberikan kepadanya. 

TOMAS REIMERS: Cool? Bagaimana pemilih bekerja? Awesome. 

ALLISON BUCHHOLTZ-AU: Adakah kita mahu bercakap mengenai konflik yang kini kemudian? 

TOMAS REIMERS: Jadi yeah. Sama sekali. Jadi apa yang berlaku jika anda mempunyai konflik, bukan? Mari kita berpura-pura yang pertama menubuhkan sesuatu like-- ALLISON BUCHHOLTZ-AU: Mungkin satu ini menukar latar belakang? TOMAS REIMERS: Yeah. Oleh itu, kita akan membuat "cantik" menukar latar belakang untuk salmon. ALLISON BUCHHOLTZ-AU: Hanya dengan semua warna yang besar hari ini, Tomas. TOMAS REIMERS: Yeah. Kerana saya mendapati saya boleh menggunakan salmon sebagai warna sebenar. Oleh itu, kita hanya akan berbuat demikian. Saya juga berfikir Sunset adalah warna sebenar. PENONTON: Sunset adalah warna sebenar? ALLISON BUCHHOLTZ-AU: Mari kita mencubanya. TOMAS REIMERS: Selepas demo ini hanya kerana sekiranya ia messes sehingga, Saya tidak mahu untuk debugging. Jadi kita tahu salmon adalah warna sebenar. Jadi mana-mana tekaan pada apa yang akan berlaku? 

ALLISON BUCHHOLTZ-AU: Apa-apa idea? 

PENONTON: [didengar]. 

TOMAS REIMERS: Yeah. Jadi, anda mendapat ia betul-betul tepat. Pada asasnya, ia mengambil masa yang peraturan lalu bahawa ia telah diberikan. 

ALLISON BUCHHOLTZ-AU: Jadi ini adalah mana melata itu berkuat kuasa. 

TOMAS REIMERS: Jadi ingat bagaimana kita mempunyai yang melata lembaran gaya? Jadi oleh itu, kita jenis bermakna bahawa kita telah mempunyai banyak peraturan yang dikenakan di atas satu sama lain, dan mereka juga boleh mengatasi satu sama lain. 

ALLISON BUCHHOLTZ-AU: Jadi apa sahaja di bahagian bawah akan mengatasi yang mengikut di bahagian atas. Anda boleh mempunyai kaedah-kaedah yang benar-benar meniadakan sesuatu terlebih dahulu. Itulah juga mengapa anda mahu menjadi berhati-hati apabila anda penggayaan, supaya anda tidak mewujudkan kaedah-kaedah yang anda hanya benar-benar mengatasi. 

TOMAS REIMERS: Atau mungkin anda adakah anda ingin menulis ganti peraturan. 

ALLISON BUCHHOLTZ-AU: Atau mungkin anda lakukan. Ya. 

TOMAS REIMERS: Berpura-pura anda mempunyai kelas yang terpakai kepada kebanyakan perkara, tetapi katakan anda hendak menukar warna latar belakang untuk merah dan fon berat untuk berani untuk paling perkara, tetapi untuk satu, anda hanya mahu warna latar belakang menjadi merah tetapi anda ingin semua yang lain hartanah, anda boleh melakukan sesuatu seperti "font-weight = normal," yang kemudian akan buat asal perubahan berani. Yeah? Sekali lagi, cara yang terbaik, saya fikir Allison berkata, hanya amalan. 

ALLISON BUCHHOLTZ-AU: Eksperimen. 

TOMAS REIMERS: Amalan, amalan, amalan dan eksperimen. Saya tahu ramai orang yang berfikir CSS adalah hanya banyak tekaan-dan-cek pada akhir hari, di mana jika yang anda mahu lakukan something-- seperti, anda mempunyai idea kasar, tetapi anda masih mungkin perlu untuk mencubanya memastikan anda tahu apa yang ia kelihatan seperti. 

PENONTON: Apabila anda memohon kelas, lebih daripada satu perenggan yang sama atau seksyen, adakah ia kira apa perintah yang anda boleh menaip mereka ke dalam sebut harga? 

TOMAS REIMERS: Tidak, tidak sama sekali. 

ALLISON BUCHHOLTZ-AU: Apa yang penting ialah perintah itu dalam lembaran gaya CSS anda. PENONTON: Bolehkah anda mengulangi soalan? TOMAS REIMERS: Oh. ALLISON BUCHHOLTZ-AU: Dalam kelas, apabila anda memberikan kelas untuk sesuatu dalam HTML, adakah itu perkara yang mereka perintah dalam? Tidak kira perintah itu. Apa yang penting ialah perintah pemilih dalam kelas CSS anda, dalam lembaran gaya anda. 

TOMAS REIMERS: Bunyi yang baik? 

ALLISON BUCHHOLTZ-AU: Lovely. 

TOMAS REIMERS: Kemudian kita akan terus supaya- ALLISON BUCHHOLTZ-AU: Apa yang kita ada akan datang? Saya terlupa. Oh, kita hanya perlu contoh. Tetapi kita telah sejenis dilakukan mereka. Kami telah melakukan contoh dengan cepat. 

TOMAS REIMERS: Kami dapat menggabungkan pemilih tidak lama lagi. 

ALLISON BUCHHOLTZ-AU: Oh, kita akan mendapat untuk menggabungkan pemilih. TOMAS REIMERS: Jadi beberapa contoh adalah kita mempunyai # Paun dog--, atau hashtag, atau octothorpe, atau apa sahaja anda mahu panggil bahawa- tajam. 

ALLISON BUCHHOLTZ-AU: anjing Sharp. 

TOMAS REIMERS: Kemudian anda mempunyai .pets. Sesuatu yang mempunyai id anjing, terdapat hanya satu anjing pada halaman. Sesuatu yang mempunyai id kucing, terdapat hanya satu kucing. Mungkin terdapat banyak haiwan peliharaan di halaman. Itulah sebabnya kita memberikan yang kelas. Anda mempunyai satu contoh p. Dan kemudian jadi salah satu Contoh terakhir, yang adalah sesuatu yang kita tidak bercakap mengenai, adalah apa yang berlaku apabila anda menggabungkan mereka. Jadi p.pets. 

Jadi untuk itu, mari kita kembali kepada kod dan memperkenalkan another-- yeah. Jadi kembali ke sini. 

ALLISON BUCHHOLTZ-AU Saya berasa seperti ini adalah really-- seperti hanya melihat melalui contoh adalah benar-benar cara untuk belajar ini. Jadi itulah apa yang kita lakukan. 

TOMAS REIMERS: Jadi mari kita berpura-pura kita hanya mahu untuk memilih teks 2, bukan? Oleh itu, kita pasti tidak boleh berbuat demikian dengan id. Nah, kita boleh berbuat demikian dengan id, tetapi ia tidak mempunyai id. Saya boleh menambah satu, tetapi mari kita berpura-pura bahawa saya tidak mahu menambah satu atau ia telah mempunyai sesuatu yang lain. Saya tidak boleh melakukannya dengan itu. Tag pasti tidak unik, bukan? Dan tidak adalah kelas. Tetapi anda boleh menggabungkan perkara-perkara ini. Katakan kita ingin melakukan sesuatu yang hanya terpakai kepada perkara-perkara yang mempunyai kelas khas dan yang mempunyai kelas yang cukup. 

Jadi apa yang boleh anda lakukan adalah dalam main.css, anda boleh berkata, mari kita pertama memadam ini. Anda boleh menggabungkan ini. Jadi, anda boleh melakukan .special. Tiada ruang. Hanya .special.pretty. Apa yang bermakna adalah sesuatu yang kedua-dua adalah khas dan cantik. Adakah ini masuk akal? Dan jika kita pergi di sini, apa yang anda akan melihat adalah peraturan ini hanya terpakai kepada Yang kedua, yang mempunyai kedua-dua mereka. Dan anda boleh melakukannya untuk banyak perkara. Anda boleh say-- mari kita berpura-pura saya hanya mahu untuk melakukan perkara-perkara yang mempunyai kelas yang cukup dan yang juga tag perenggan. Jadi p.pretty. Mari kita berpura-pura bahawa saya mempunyai sesuatu yang cukup pada badan tag. OK? Saya boleh menjalankan ini dan saya dapat melihat bahawa ia hanya akan memohon kepada perkara-perkara yang perenggan dengan kelas cantik. Dan anda boleh menggabungkan ini, pada dasarnya, seberapa banyak yang anda mahu. Jadi anda hanya boleh meletakkan mereka bersama-sama. Adakah ini masuk akal? ALLISON BUCHHOLTZ-AU: Jadi ini jenis adalah lebih berguna apabila, Tomas katakan sebelum ini, mungkin anda mempunyai laman web yang rumit, dan anda sudah mempunyai banyak peraturan-peraturan ini ditulis, dan anda hanya perlu menggabungkan dua dari sebelum. Seperti bukannya menulis keseluruhan pemilih baru dan berubah-ubah di sana, anda hanya boleh menggabungkan mereka di mana ia bertindih. 

TOMAS REIMERS: Atau anda mungkin mendapati out-- kadang-kadang ada satu kelas yang membuat warna fon ini seperti biru, dan ada kelas lain yang membuat biru latar belakang. Dan yang hanya tidak akan berfungsi. Jadi anda menulis kes khas, di mana, like-- tetapi jika ia mempunyai kedua-dua, apa yang anda akan lakukan ialah anda akan membuat satu ini teduh ini biru dan satu ini teduh ini lain biru. Betul? 

ALLISON BUCHHOLTZ-AU: Baik untuk orang-orang jenis pengecualian. TOMAS REIMERS: Jadi untuk berfikir tentang masalah yang mungkin timbul apabila anda menggabungkan mereka. Cool. Jadi kembali kepada persembahan kami. ALLISON BUCHHOLTZ-AU: Kami hampir di sana. TOMAS REIMERS: Dan ia telah berhenti menyambungkan. ALLISON BUCHHOLTZ-AU: Oh, tidak. ALLISON BUCHHOLTZ-AU: CS di pejabat, internet terbenam. Oh, ironi. 

TOMAS REIMERS: Jadi nasib baik, kita boleh membentangkan tanpa internet, saya rasa, kerana kita mempunyai semua slaid di sini. Jadi mari kita bercakap tentang hubungan tag. ALLISON BUCHHOLTZ-AU: Betul. Jadi, seperti hendak pergi kira apa Tomas berkata, ini adalah salah satu cara untuk melakukannya. Oleh itu, kita mempunyai beberapa ibu bapa pemilih dengan pemilih anak. Jadi dalam contoh ini di sini, kami mempunyai beberapa badan dengan navbar kelas, butang kelas. Ah. 

TOMAS REIMERS: Oh, maaf. 

ALLISON BUCHHOLTZ-AU: Dan pada dasarnya, apa ini bermakna adalah memilih semua anak-anak, seperti semua ini macam pemilih, dalam pemilih induk ini. Dan mereka adalah orang-orang sahaja ia pernah akan memohon untuk. Saya tidak tahu jika anda mempunyai cara yang lebih baik daripada- TOMAS REIMERS: Jadi saya meneka cara untuk berfikir kira-kira ini adalah ingat bagaimana sebelum kita jenis suka meletakkan mereka bersama-sama. Dan kemudian itu bererti satu unsur yang perlawanan semua ini. Apa ini mengatakan, saya mahu anda untuk dipadankan dengan semua dalam some-- saya mahu anda untuk mencari pemilih yang. Dan kemudian dalam masa itu, saya ingin anda untuk dipadankan dengan perkara-perkara baru. Betul? Jadi dalam CSS, itu semua tentang jenis dapat sepadan dengan barang-barang ini. Dan anda boleh cuba untuk dipadankan item dalam barang-barang lain. 

Jadi mari kita benar-benar melakukan contoh, dan kita berfikir bahawa akan menjelaskan. Jadi mari kita berpura-pura kita mempunyai khas, khas cantik, apa sahaja. Dan kemudian kita mempunyai pautan, OK? Jadi ingat, satu pautan. Ia tidak akan ke mana-mana. Dan kita akan memberikan pautan kelas, saya rasa. Mari kita memberikan yang class-- memberikan saya idea. ALLISON BUCHHOLTZ-AU: Cool. TOMAS REIMERS: Coo-- mari kita ia pergi kelas cantik. Mengapa tidak? 

ALLISON BUCHHOLTZ-AU: OK. TOMAS REIMERS: Jadi perkara yang sekarang cukup akan membuat latar belakang biru, warna latar belakang salmon. Yang masuk akal. Dan jika kita lakukan this-- 

ALLISON BUCHHOLTZ-AU: Adakah anda mahu menambah teks jadi hyperlink sebenarnya muncul? TOMAS REIMERS: Itu akan menjadi panggilan yang baik. ALLISON BUCHHOLTZ-AU: 'Punca hak kini kami hanya gonna mendapatkan apa-apa. TOMAS REIMERS: Jadi ini adalah pautan. "Ini adalah pautan." Oh, dan ini akan menjadi pautan lain. Mari kita memberikan kelas "sejuk." Anda betul. Cool. Jadi sekarang kita akan merebut ini. Kita akan membuang satu. Kami ada satu di tag khas, dan kita juga akan mempunyai satu di tag cantik. Dan sekarang apa yang kita akan lakukan ialah kita akan membuat cool-- apa yang kita mahu ia lakukan? ALLISON BUCHHOLTZ-AU: Bolehkah kita membuat ia lebih besar? TOMAS REIMERS: Mari kita memberikan sempadan. ALLISON BUCHHOLTZ-AU: Kita boleh sempadan. TOMAS REIMERS: Yeah. Jadi, kita akan melakukan sesuatu seperti, sempadan is-- dan kami akan menjelaskan semua ini dalam satu saat. Untuk now-- 

ALLISON BUCHHOLTZ-AU: Untuk model kotak. TOMAS REIMERS: Tetapi buat masa ini, kami hanya akan memberikan sempadan. Jadi apa itu artinya anda akan melihat pautan ini. Dan anda akan melihat bahawa mereka mempunyai ini, seperti, sempadan hitam hodoh, yang sejuk. 

ALLISON BUCHHOLTZ-AU: Laman web kami begitu cantik. 

TOMAS REIMERS: Yeah. Laman web kami adalah hebat. Jadi kedua-dua adalah pautan, dan mereka muncul. Sekarang mari kita berpura-pura saya hanya mahu melakukan ini jika ia tidak berada di dalam sesuatu yang mempunyai latar belakang salmon. Jadi ingat bahawa satu ini mempunyai latar belakang salmon, kerana ia adalah kelas cantik. 

Tetapi kita mahu mengatakan bahawa hanya menyejukkan yang berada di dalam kelas khas, tidak di dalam kelas cantik, perlu ada sempadan itu. Well, apa yang boleh anda lakukan adalah anda boleh berkata, .special, ruang, .cool. Dan apa yang lakukan, apabila anda berfikir mengenainya, adalah ia pada dasarnya berkata, OK, saya mendapati semua yang sepadan khas. Kemudian dalam tag tersebut, cari kepadaku segala sesuatu yang sejuk. ALLISON BUCHHOLTZ-AU: Jadi cara lain yang mungkin baik untuk berfikir tentang perkara ini, membawanya kembali ke C, adalah seperti idea skop. Oleh itu, apabila anda mempunyai beberapa pemilih, seperti yang bahawa kita telah bekerja untuk sebelum ini, Laman web keseluruhan anda, semua HTML anda adalah dalam skop anda, bukan? Tetapi apabila kita mempunyai ini hubungan ibu bapa dan anak, ia seolah-olah anda menyempitkan mana anda sedang mencari untuk tempat tertentu, seolah-olah, seperti, kita cari dalam fungsi tertentu dan bukannya keseluruhan fail kami. PENONTON: Maka dengan itu dalam fikiran, akan ia telah mattered jika kita mempunyai changed-- ALLISON BUCHHOLTZ-AU: Perintah itu? PENONTON: Kelas --the dalam CSS untuk .cool, ruang, .special? ALLISON BUCHHOLTZ-AU: Ya, kerana itu yang akan berkata, skop kepada semua yang mempunyai sejuk, dan kemudian melihat apa yang has-- Maksud saya, seperti, dalam kes ini, Saya tidak fikir ia akan menukarnya. 

TOMAS REIMERS: Jika kita telah berkata apa? Maaf. 

ALLISON BUCHHOLTZ-AU: Jika kita skop ia sejuk dan kemudian mencari sesuatu daripada khas, ia akan menjadi yang sama, sebenarnya. 

TOMAS REIMERS: Jadi ia tidak akan menjadi. 

ALLISON BUCHHOLTZ-AU: Ia tidak akan? Oh, oh baik. Saya salah. 

TOMAS REIMERS: Jadi sebab itu itu different-- mistake-- biasa adalah bahawa sekarang hanya pautan yang mempunyai sejuk, kan? Saya rasa soalan saya kepada anda semua adalah, apa yang di halaman ini dipadankan dengan .cool? Ada dua tanda di sini, bukan? Yang merupakan salah satu ini dan ini. Kedua-dua sepadan sejuk. Tiada apa-apa lain tidak. Jadi, jika anda berkata, .cool, ruang, .special, apa yang anda akan katakan adalah, dalam tag, apa yang istimewa? ALLISON BUCHHOLTZ-AU: Hm. Itulah yang it-- betul. Kerana ia seperti sesuatu yang hanya di sini. 

TOMAS REIMERS: Jadi ia memilih apa-apa. 

ALLISON BUCHHOLTZ-AU: Manakala dengan khas, kami dalam tag di sini. 

TOMAS REIMERS: Mereka dan orang-orang. PENONTON: OK. Maka orang-orang tag dari hadapan slash? 

TOMAS REIMERS: Ya. Adakah ini masuk akal? Bagaimana ia pada dasarnya cuba untuk menyempitkan skop. ALLISON BUCHHOLTZ-AU: Yeah. Saya rasa itulah mungkin yang cara paling mudah untuk berfikir mengenainya. 

TOMAS REIMERS: Oleh itu, kita dapati ini, dan kami mendapati kedua-dua ini dipadankan khas. Kemudian kami bertanya, dalam lelaki-lelaki ini, apa yang sejuk? Dan dalam satu ini, sejuk ini seseorang. Dalam masa satu ini, tiada apa yang sejuk. Jadi ini adalah satu-satunya tanda yang kekal. 

ALLISON BUCHHOLTZ-AU: Manakala sejuk hanya dalam masa ini yang ada tag. TOMAS REIMERS: Tepat. Dan apa yang khusus di dalam orang-orang? Tiada apa-apa. Kini, apa yang saya akan katakan adalah jika tidak ada ruang, anda bertanya apa yang keren dan special-- atau apa yang cantik dan istimewa, bukan? Jika anda mengatakan .special.pretty, itu yang sama seperti .pretty.special. 

Oleh kerana apa yang menghapuskan ruang adalah bertanya adalah, apabila anda mengatakan .special, anda bertanya, OK, mana yang khas? Kemudian orang-orang yang yang juga cantik, yang adalah sama, tatabahasa, seperti yang diminta, apa yang cukup, dan kemudian daripada mereka, apa yang juga khas? Betul? Ia adalah perbezaan apa yang di dalam apa yang. PENONTON: OK. TOMAS REIMERS: Yeah. Awesome. Maka dengan itu dalam fikiran then-- 

ALLISON BUCHHOLTZ-AU: Saya rasa lepas kami perkara yang (IN FANCY BRITISH ACCENT) model kotak. 

TOMAS REIMERS: The box-- [tertawa kecil] Saya suka cara Allison mengatakan bahawa. Jadi perkara kotak model. 

ALLISON BUCHHOLTZ-AU: Hanya mempunyai kotak, saya akan menjadi model kotak anda. TOMAS REIMERS: Jadi mari kita bercakap tentang itu. Jadi sekarang kita telah menghabiskan banyak masa bercakap tentang pemilih. Pada masa ini, anda semua mungkin, seperti, tuan selectors-- anda tahu, bagaimana untuk betul-betul pilih kandungan yang anda ingin memanipulasi pada skrin anda. 

Jadi sekarang persoalannya ialah, bagaimana sebenarnya anda boleh memanipulasi ia? Jadi saya rasa yang paling asas cara untuk berfikir tentang itu adalah, baik, apa yang betul-betul adalah satu elemen dalam CSS? Kami telah menghabiskan banyak masa bercakap tentang, apakah tanda nama, atau apa yang paling asas perwakilan tag? 

Cara yang baik untuk berfikir tentang iaitu, apa bentuk adalah salmon? Apa bentuk adalah, seperti, yang salmon berwarna latar belakang? 

PENONTON: Ia adalah segi empat tepat. 

TOMAS REIMERS: Ia adalah segi empat tepat, bukan? 

ALLISON BUCHHOLTZ-AU: Bukan persoalan helah. [Ketawa] 

TOMAS REIMERS: Tidak cuba untuk menipu anda semua ini lewat. Oleh itu, kita mempunyai segi empat tepat ini. Dan tag adalah p, kan? Supaya memberikan kita baik kepercayaan bahawa perenggan diwakili sebagai segi empat tepat, di kurangnya dalam fikiran penyemak imbas, yang ia adalah. 

ALLISON BUCHHOLTZ-AU: Maksud saya, pelayar biasanya segi empat tepat, jadi ia masuk akal. 

TOMAS REIMERS: Idea di sini adalah bahawa semua tag dalam CSS adalah seperti segi empat tepat. Dan setiap segi empat tepat mempunyai empat bahagian mengikut CSS, OK? Anda mempunyai kandungan yang sebenar. Itulah di mana teks yang terletak. 

ALLISON BUCHHOLTZ-AU: Mungkin gambar anda. 

TOMAS REIMERS: Yeah. Anda mempunyai padding, yang hanya beberapa jenis ruang putih. Kemudian anda mempunyai sempadan. Dan kemudian anda mempunyai margin yang ruang putih di luar itu. Supaya tidak masuk akal kepada sesiapa, jadi kami akan bercakap tentang itu untuk kali kedua. Jadi di sini, apa yang kita akan lakukan ini kita akan membuat beberapa divs, OK? Maafkan saya manakala I-- 

ALLISON BUCHHOLTZ-AU: Saya rasa seperti kita harus meletakkan gambar comel dalam. 

TOMAS REIMERS: Kami pasti sepatutnya. 

ALLISON BUCHHOLTZ-AU: Saya rasa seperti semua orang boleh mendapat manfaat daripada gambar comel, adalah semua. 

TOMAS REIMERS: Bolehkah kita semua manfaat dari a-- 

PENONTON: Ya, pasti. TOMAS REIMERS: OK, sejuk. Oleh itu, kita perlu meletakkan comel gambar di suatu tempat. ALLISON BUCHHOLTZ-AU: Saya rasa seperti bunny comel mungkin berguna sekarang. TOMAS REIMERS: Pasti. ALLISON BUCHHOLTZ-AU: Akhir minggu. Ada sesuatu adorab-- 

TOMAS REIMERS: Bagaimana pertarungan anak kucing? 

ALLISON BUCHHOLTZ-AU: Anak kucing A bekerja, terlalu. 

TOMAS REIMERS: Cool, kerana ada laman web untuk itu. Ia dipanggil PlaceKitten. ALLISON BUCHHOLTZ-AU: Itu yang besar. TOMAS REIMERS: Ya. ALLISON BUCHHOLTZ-AU: Hanya untuk, seperti, imej pemegang tempat di laman web anda. TOMAS REIMERS: Mm-hm. Terdapat juga PlacePuppy. Dan ada PlaceBacon. 

ALLISON BUCHHOLTZ-AU: PlaceBacon? Betul ke? 

TOMAS REIMERS: Oh, kita tidak mempunyai akses internet di sini. 

ALLISON BUCHHOLTZ-AU: [meminta pertolongan] Tragis. TOMAS REIMERS: Jika tidak, Saya akan menunjukkan kepada anda semua bagaimana untuk meletakkan gambar di laman web anda. Kami akan cuba untuk mendapatkan ini bekerja sebelum kita pergi. Tetapi buat masa ini, kami hanya akan bercakap dalam warna-warna itu. Kami mahu meletakkan gambar kittens-- 

ALLISON BUCHHOLTZ-AU: Kami lakukan. 

TOMAS REIMERS: --the internet ini selama masa itu. Jadi kita mempunyai dua divs, dan kami akan memberikan mereka dua id. Kami akan memanggilnya "Pertama" dan "kedua." Jadi id = "pertama." Dan kita akan memberikan mereka dua warna. Jadi bagaimana kita memilih sesuatu dengan id "pertama"? ALLISON BUCHHOLTZ-AU: Dot atau hash? PENONTON: Sharp. TOMAS REIMERS: Sharp, sempurna. Sharp, hash, apa we-- 

ALLISON BUCHHOLTZ-AU: Banyak perkara yang memanggilnya. 

TOMAS REIMERS: OK. Kami akan menyelesaikan pada hashtag, dan itulah yang kita akan pergi dengan. OK? 

ALLISON BUCHHOLTZ-AU: Hashteg. 

TOMAS REIMERS: Jadi hashtag pertama. 

ALLISON BUCHHOLTZ-AU: Jadi anda boleh tweet yang seminar-- CSS hashtag, hashtag sejuk. TOMAS REIMERS: Hashteg Kehebatan. ALLISON BUCHHOLTZ-AU: Hashtag Kehebatan, ya. TOMAS REIMERS: OK. Oleh itu, kita mempunyai "pertama" dan "kedua." Jadi pertama, kita akan mempunyai warna latar belakang merah. ALLISON BUCHHOLTZ-AU: Uh, usus besar. TOMAS REIMERS: Yup. ALLISON BUCHHOLTZ-AU: Saya akan menjadi tempat-checker anda. TOMAS REIMERS: Allison ini mendapat saya. Latar Belakang-warna blue-- 

TOMAS REIMERS: Purple! 

TOMAS REIMERS: Ungu. ALLISON BUCHHOLTZ-AU: Ya. Warna kegemaran saya ungu ini, dan kita telah tidak digunakan lagi. 

TOMAS REIMERS: Violet. ALLISON BUCHHOLTZ-AU: Violet. Yang bekerja. 

TOMAS REIMERS: Jadi kami akan mempunyai dua divs. Mereka akan menjadi betul-betul kosong. Kita mungkin akan mempunyai beberapa teks. Jadi "pertama" akan menjadi "HELLO." Dan yang "kedua" akan say-- 

ALLISON BUCHHOLTZ-AU: Selamat tinggal. 

PENONTON: - "DUNIA." Hello, selamat tinggal. ALLISON BUCHHOLTZ-AU: saya melihat mereka dalam konsert minggu lain. TOMAS REIMERS: The Beatles? ALLISON BUCHHOLTZ-AU: Untuk sahih. Mereka bukan orang yang hebat. Saya tidak suka ia. 

TOMAS REIMERS: Kami mempunyai "HELLO" dan "SELAMAT TINGGAL." Dan sekali lagi, CSS adalah hanya hebat, kerana ia mengiktiraf warna kami. Tidak perlu walaupun bimbang bahawa mereka wujud. Yang mereka lakukan. 

ALLISON BUCHHOLTZ-AU: Mereka wujud. 

TOMAS REIMERS: Jadi CSS saya rasa mempunyai 255 perkataan untuk bercakap tentang warna. Jika anda boleh berfikir warna di luar 255 orang-orang, seperti, saya akan terkesan. ALLISON BUCHHOLTZ-AU: Yeah. Saya rasa anda semua boleh mempunyai hanya datang selepas. 

TOMAS REIMERS: Jadi di sini, anda akan melihat kita mempunyai dua kotak betul-betul di atas satu sama lain, bukan? HELLO dan SELAMAT TINGGAL. 

ALLISON BUCHHOLTZ-AU: Tidak ada ruang di antaranya. Mereka hanya smooshed betul-betul di atas satu sama lain. 

TOMAS REIMERS: Jadi perkara pertama yang Saya rasa kita perlu bercakap tentang adalah mari kita juga say-- yeah. Jadi CSS mewakili mereka sebagai semacam kotak. Dan sebagai kotak, mereka mempunyai kandungan. Dan kandungan yang sekarang adalah semacam yang HELLO atau SELAMAT TINGGAL dan itu sahaja. OK? 

Jadi salah satu perkara pertama yang anda boleh lakukan adalah anda boleh menambah padding. Padding mengatakan berapa banyak ruang ia harus meninggalkan pada setiap sisi. Jadi katakan saya ingin katakan 10 piksel pada setiap sisi. Dan saya akan membedah bahawa dalam satu saat. ALLISON BUCHHOLTZ-AU: Semua perkara-perkara ini di sini akan menjadi sebahagian besar dalam piksel untuk sepanjang seminar tersebut. Anda akan melihat bahawa ia mempunyai sedikit ruang di sekitarnya, bukan? Jadi apa yang kamu tidak lihat di sini ialah ada seperti ini tidak kelihatan padding pada setiap sisi, yang berkata, seperti, OK, anda mempunyai kotak anda content-- 

ALLISON BUCHHOLTZ-AU: Adakah anda mahu hanya tarik elemen memeriksa? 

TOMAS REIMERS: Ya, itu adalah idea yang baik. ALLISON BUCHHOLTZ-AU: Juga, saya mendapati bahawa unsur memeriksa adalah cara yang baik untuk memikirkan jika ada sesuatu yang akan salah, sesuatu yang tidak dijangka berlaku, memeriksa tag dan melihat apa yang ia seperti ditulis ganti adalah membantu. 

TOMAS REIMERS: Jadi saya tidak pasti jika anda semua boleh lihat warna ini. Bolehkah anda? Anda akan melihat padding ini pada jenis kelebihan. Dan kemudian anda lihat sebenar kandungan dalam biru, bukan? Jadi itulah yang sangat asas-asas model kotak. Anda mempunyai kandungan. Kemudian anda mempunyai padding. 

PENONTON: Mengapa tidak anda hanya gunakan petak di dalam the-- 

ALLISON BUCHHOLTZ-AU: Betul. Kerana ia hanya memilih unsur sekarang. 

TOMAS REIMERS: Yup. Perkara-perkara lain. Jadi mari kita bercakap tentang yang perintah padding untuk kali kedua. Jadi dalam CSS, ukuran perlu mempunyai satu unit. Jadi pertama anda mempunyai jumlah yang. Jadi dalam kes ini, kami telah berkata 10. Dan kemudian yang seterusnya kami telah berkata adalah piksel, px. Orang lain yang anda mungkin ada adalah perkara seperti sentimeter, inci. Anda boleh melakukan perkara-perkara seperti, apa yang 10 inci? Dan ia akan menjadi tidak masuk akal. 

ALLISON BUCHHOLTZ-AU: Oh, budak. 

PENONTON: Whoa. 

TOMAS DAN ALLISON: Yeah. TOMAS REIMERS: Jadi itu sahaja padding. Saya akan kembali ke piksel. 

ALLISON BUCHHOLTZ-AU: Piksel cenderung untuk menjadi, seperti, standard itu. Apabila anda melihat banyak laman web, mereka kebanyakannya bekerja dalam piksel. TOMAS REIMERS: Jadi, anda akan melihat sama ada pixels---orang yang lain yang anda lihat adalah em, yang merupakan salah satu em adalah sama dengan ketinggian fon yang anda sedang gunakan. 

ALLISON BUCHHOLTZ-AU: Mm. TOMAS REIMERS: Ia adalah cara yang baik untuk mengatakan, seperti, saya mahu ruang sebanyak fon saya adalah mengambil. ALLISON BUCHHOLTZ-AU: Tidak tahu. Anda belajar sesuatu yang baru setiap hari. TOMAS REIMERS: Terdapat banyak ukuran dalam CS. Saya cadangkan anda melihat mereka. Bagi semua kes anda, saya rasa piksel hendaklah mencukupi. Dan mereka juga apa yang anda akan melihat dalam kebanyakan contoh dilakukan dalam talian. Oleh itu, kita akan meninggalkannya di piksel. 

Anda boleh juga, saya perlu say-- jadi set padding semua paddings. Anda juga boleh melakukan sesuatu seperti "Padding-top" untuk hanya set-- ALLISON BUCHHOLTZ-AU: Mungkin kami akan kami "HELLO" kembali. TOMAS REIMERS: --to hanya menetapkan padding pada bahagian atas dan apa-apa lagi. Jadi empat arahan adalah padding-top, padding-bottom, padding-kiri, dan padding-betul. 

ALLISON BUCHHOLTZ-AU: Sama seperti yang anda inginkan untuk sebuah kotak. 

TOMAS REIMERS: Yeah. Tiada apa-apa terlalu gila di sana. Adakah ini masuk akal? Jadi yang padding. Saya akan menetapkan semua yang paddings kembali ke 10. Dan kemudian saya akan beralih kepada sempadan. 

Jadi apa yang sempadan adalah adalah sempadan adalah satu perintah yang pelik. Ia mengambil bentuk tiga benda dalam satu masa. Jadi yang pertama adalah bagaimana besar anda mahu ia menjadi sebagai ukuran. Sekali lagi, saya hanya menggunakan piksel. Dan perkara terakhir yang saya perlu menambah ukuran adalah satu perkara yang tidak memerlukan unit yang adalah 0. Ini sebenarnya tidak betul untuk memberi 0 unit, kerana 0 adalah 0 seluruh inci, piksel, sentimeter, apa sahaja. Semuanya hanya bermakna 0, bukan? Jadi pertama anda memberikan pengukuran. 

Kemudian anda memberikan gaya. Jadi, saya akan mengatakan "pepejal." Dan kita akan bercakap tentang apa yang bermakna. Dan kemudian akhir sekali, anda memberikan warna. Jadi, saya akan mengatakan "hitam." Dan semua ini adalah perkara-perkara yang kita kena kini dilihat sebelum ini, kecuali gaya, tetapi kita akan bercakap tentang itu. Jadi anda semua telah melihat ukuran, dan anda telah melihat warna. Dan apa yang berlaku ialah kita mendapatkan ini sempadan bagus hitam di sekitarnya, bukan? Kamu lihat bagaimana kita lakukan itu? 

PENONTON: Yeah. 

TOMAS REIMERS: Cool. Jadi, apakah itu? Jadi pertama sekali, ia adalah satu piksel. Itu jelas cukup, kan? Seperti, ia adalah salah satu piksel tebal. Atau ia akan menjadi satu piksel, tetapi saya dizum dalam, jadi ia sedikit lebih daripada itu. 

ALLISON BUCHHOLTZ-AU: Dan kami mempunyai resolusi ini TV tidak masuk akal. 

TOMAS REIMERS: Yeah. Anda boleh membuat ia lebih besar, lebih kecil, apa sahaja. Jadi di sini adalah satu sempadan dua piksel. Anda akan melihat ia adalah dua kali lebih tebal. Perkara seterusnya yang anda perlu adalah warna. Bukan itu menarik. Saya tidak akan bercakap tentang itu, benar-benar. 

ALLISON BUCHHOLTZ-AU: Tetapi gaya mungkin hanya sedikit menarik. 

TOMAS REIMERS: Yeah. Jadi gaya, terdapat beberapa orang yang saya lihat digunakan biasanya. Satu pertama pepejal, satu depan putus-putus, putus-putus dan yang terakhir ini. Dan di sini dipenuhi. Anda akan melihat bahawa mereka sekumpulan titik, bukan? Cara yang baik untuk jenis mendapat sempadan bagus pergi, sengkang juga cukup popular. 

ALLISON BUCHHOLTZ-AU: Kemudian sudah tentu, saya pasti ada banyak lain gaya yang anda boleh mendapatkan. Dan kita mempunyai satu set besar pautan di bahagian akhir untuk anda semua untuk jenis membaca dengan teliti dan melihat CSS lebih sejuk. 

TOMAS REIMERS: Kemudian perkara terakhir, kami akan bercakap tentang model kotak cepat. Oh, dan kemudian sempadan, sama seperti padding, anda juga ada perkara seperti sempadan-kiri, sempadan-hak, sempadan-top, sempadan-bawah, yang membolehkan anda untuk mendapatkan di sempadan tertentu. Jadi di sini hanya sempadan kiri ditakrifkan. Adakah ini masuk akal? 

ALLISON BUCHHOLTZ-AU: Ia sejuk cara untuk menekankan perkara atau menambah garisan antara unsur-unsur yang berbeza. TOMAS REIMERS: Boleh. Jadi itulah sempadan kami. Dan margin yang terakhir ini. Padding seperti margin ini kecuali ia tidak within-- ALLISON BUCHHOLTZ-AU: Ia tidak seluruh elemen anda tetapi sebenarnya sekitar keseluruhan kotak yang kita telah melihat. 

TOMAS REIMERS: Yeah. Allison berkata dengan sempurna. Ia bukan, seperti, di dalam anda elemen, itu sekitar seluruh kotak. Ini bermakna perkara-perkara seperti latar belakang tidak terpakai kepadanya. Dan pada dasarnya berkata, seperti, saya tidak mahu apa-apa di ruang ini banyak untuk saya. Jadi seperti di sini kita mempunyai margin 10 piksel. Jadi apa-apa dalam tempoh 10 piksel harus sebelah saya. Itulah jenis yang ruang tetapi jenis tidak. Jadi itulah yang sangat asas-asas model kotak. Adakah ini masuk akal? Sejuk, sejuk. ALLISON BUCHHOLTZ-AU: Awesome. Jadi sekarang saya rasa kami hanya mempunyai sumber yang sejuk kami bahawa kami akan membawa anda guys melalui dengan cepat. Dan kami akan actually-- baik, yang kita ada internet lagi? 

TOMAS REIMERS: Mari kita melihat jika saya boleh membuka up-- biar saya lihat jika saya boleh mendapatkan internet dengan cepat manakala Allison bercakap tentang apa-apa Allison mahu bercakap mengenai. ALLISON BUCHHOLTZ-AU: Jadi basically-- saya tidak tahu apa lagi yang boleh saya katakan pada ketika ini. Tetapi ini adalah beberapa sumber benar-benar baik. Ini adalah orang-orang yang Tomas dan saya telah menggunakan dan bahawa kita sebenarnya digunakan untuk prep untuk ini. W3Schools adalah salah satu yang anda lelaki perlu lihat sebelum ini. Kami mengesyorkan untuk banyak perkara dengan CSS. Saya tahu saya mengesyorkan kepada seksyen saya sepanjang masa. 

Salah satu perkara yang besar adalah bahawa ia membolehkan anda jenis kucar-kacir dengan CSS dan melihat perubahan serta-merta dalam ini, seperti, double-tetingkap melihat bahawa ia mempunyai. Jadi anda tidak perlu bimbang tentang menubuhkan laman web anda sendiri, atau menubuhkan vhost dalam anda perkakas tempatan dan warga tempatan, dan mendapat semua barangan yang kerja. Ia tertanam hak dalam halaman. 

Dan ia mempunyai ini sedikit pengajaran yang anda boleh melalui belajar lebih lanjut mengenai pemilih, atau belajar tentang memanipulasi anda font, atau latar belakang, atau imej. Dan anda mempunyai ini keputusan serta-merta bahawa anda tidak perlu melakukan apa-apa kerja persediaan lain untuk. Jadi saya suka W3Schools. Ia adalah hebat. Adakah ia berfungsi? 

TOMAS REIMERS: Yeah. Tidak, ia tidak. Adakah anda mahu saya untuk mencuba dan mulakan semula komputer saya? Atau adakah kita mahu supaya- 

ALLISON BUCHHOLTZ-AU: Maksud saya, baik, ini juga akan berada dalam talian. Semua slaid akan berada dalam talian. Jadi saya hanya dinasihatkan melakukan ini. 

Ini adalah besar kerana hanya seperti lembaran menipu. Ia hanya semua asas yang menyuruh kamu mempunyai. Ia hebat apabila anda pertama memulakan laman web anda. Kerana mungkin anda tidak mahu masuk ke dalam semua seluk sebenar cekal reka bentuk-berat barangan. Anda hanya perlu memformat ia dengan cara yang yang jenis masuk akal dan kehendak lakukan pada masa itu. Dan jika anda benar-benar mahu untuk mendapatkan ke dalamnya, saya tahu ini adalah, seperti, salah satu Rujukan kegemaran Tomas ini. Kami menggunakannya untuk prep, dan itu hebat. Ia Pemaju daripada Mozilla. 

TOMAS REIMERS: Jadi Mozilla adalah orang-orang yang membuat Firefox. Dan ia hanya pemaju mereka sendiri rujukan, yang saya fikir adalah hebat. Dan ia mempunyai yang indah senarai sumber. Oleh itu, kita have-- 

ALLISON BUCHHOLTZ-AU: Dan kemudian nota terakhir apabila anda cuba mereka bentuk laman web anda, mendapat inspirasi daripada benda-benda yang anda fikir adalah cantik. Memeriksa elemen, memeriksa kod sumber boleh menjadi super berguna untuk cuba untuk memikirkan bagaimana untuk gaya laman web anda sendiri. 

Selalunya, saya rasa seperti yang terbaik cara, selain uji kaji, hanya untuk melihat perkara-perkara yang cantik. Saya mendapati ia benar-benar sukar untuk hanya jenis bentuk tindakan sendirian, terutama pada mulanya. Oleh itu, sila melihat laman bahawa anda menikmati lihat. Memikirkan apa yang membuat mereka merayu kepada anda. Dan kemudian berasa bebas untuk cuba meniru itu. 

TOMAS REIMERS: Betul. Malah seperti laman-laman web seperti ini, anda boleh melihat ada pasti div di bahagian atas. Dan kemudian anda mempunyai div lain dalam di sini, yang merupakan CSS Kehebatan. Dan kemudian anda telah mempunyai banyak pautan di sini. Jika anda benar-benar hanya memeriksa unsur-unsur, anda boleh menyusun daripada mula melihat apa yang dilakukan laman web kelihatan seperti, dan bagaimana boleh saya mencipta bahawa jika saya mahu. Adakah ini masuk akal? Oleh itu kita hanya mempunyai tiga minit. Jadi soalan? Mana-mana daripada mereka? Ya. 

PENONTON: Untuk warna segi empat tepat, bagaimana akan anda have-- jika anda tidak mahu ia akan merentasi seluruh halaman, boleh anda telah membuat ia pergi mencari hanya separuh halaman atau hanya teks ini? 

TOMAS REIMERS: Ya, benar-benar. Jadi biarlah saya melihat sebenarnya. Saya mempunyai dua idea. Jadi pertama sekali, anda juga boleh menggunakan persen. 

PENONTON: Betul ke? 

ALLISON BUCHHOLTZ-AU: Jadi sesuatu untuk mencari adalah kedudukan relatif. Ini adalah sesuatu yang kita tidak mempunyai masa untuk masuk ke dalam, tetapi ia sesuatu yang saya pasti mengesyorkan anda semua check-out. 

TOMAS REIMERS: Jadi persen. Dan melihat bagaimana kami berjaya hanya 50% daripada lebar? ALLISON BUCHHOLTZ-AU: Jika anda sebenarnya mengetahui bilangan piksel, anda boleh menjadi lebih tepat cara itu. Anda boleh biola-main dengan itu. Tetapi 50%. Jika kita mengubah saiz pelayar kami, ia akan membuatnya lebih kecil. 

TOMAS REIMERS: Nah, itu pada dasarnya 50% sekarang, saya fikir. Ia adalah 50%, dan kemudian margin telah ditambah untuk itu. CSS mempunyai banyak sifat-sifat. Jadi sekarang ini adalah 50% daripada lebar halaman. Tetapi ingat bahawa anda mempunyai 10 piksel diambil kira dari setiap sisi. Jadi, jika anda adalah untuk bergerak itu terhadap pinggir kiri penyemak imbas, maka ia akan kelihatan seperti 50%. Sekali lagi, seperti saya katakan, CSS boleh menjadi banyak tekaan-dan-cek. Seperti, anda berfikir ada sesuatu yang akan berkelakuan satu cara, tetapi ia berkelakuan cara yang sama sekali berbeza. 

ALLISON BUCHHOLTZ-AU: Dan anda hanya mendapat lebih bijak, dan anda hanya mendapatkan yang lebih baik gerak hati untuk ia yang anda bergerak bersama-sama. 

TOMAS REIMERS: Dan ia menjadi lebih teruk dan lebih teruk. Jadi ia adalah benar-benar hanya perlumbaan. 

ALLISON BUCHHOLTZ-AU: Itulah super menggalakkan. Kami mahu mereka suka CSS. 

TOMAS REIMERS: CSS adalah hebat. Ingatlah bahawa. Soalan-soalan lain? 

ALLISON BUCHHOLTZ-AU: Perkara satu. Apa-apa lagi? Cool. 

TOMAS REIMERS: Awesome. 

ALLISON BUCHHOLTZ-AU: Nah, jika anda mempunyai sebarang soalan di kemudian hari, kami sentiasa ada seperti biasa. Anda mungkin akan melihat beberapa daripada kita untuk projek akhir dan pasti di hackathon itu. 

TOMAS REIMERS: Boleh. Dan di pameran itu. 

ALLISON BUCHHOLTZ-AU: Dan di pameran itu. Oh. 

TOMAS REIMERS: Nantikan melihat semua awesome-- anda 

ALLISON BUCHHOLTZ-AU: Kami akan melihat semua laman web yang menggerunkan anda yang akan menjadi cantik. TOMAS REIMERS: Anda boleh sentiasa lihat, seperti, laman yang mempunyai, seperti, CSS baik dan kemudian seperti orang-orang yang tidak mencuba untuk melakukan CSS. ALLISON BUCHHOLTZ-AU: Juga, satu lagi perkara, satu lagi perkara untuk melihat ke dalam adalah Bootstrap. Jadi Bootstrap adalah besar. 

TOMAS REIMERS: Google bahawa jika you-- 

ALLISON BUCHHOLTZ-AU: Google itu. Ia adalah hebat. Anda akan menyukainya. Sekarang bahawa anda mempunyai pemahaman asas CSS, ia akan masuk akal lebih banyak. Awesome. Terima kasih, guys. 

TOMAS REIMERS: Terima kasih banyak.