1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,500 >> [Muzik bermain] 3 00:00:04,500 --> 00:00:10,099 4 00:00:10,099 --> 00:00:12,224 ALLISON BUCHHOLTZ-AU: Jadi kami pada dasarnya hanya akan 5 00:00:12,224 --> 00:00:14,629 untuk memberikan anda yang buruk CSS, kerana kita tahu 6 00:00:14,629 --> 00:00:16,420 bahawa ia tidak dilindungi dalam semua bahagian. 7 00:00:16,420 --> 00:00:20,090 Dan kita benar-benar ingin memastikan bahawa anda lelaki itu mempunyai alat ini di pelupusan anda, 8 00:00:20,090 --> 00:00:24,790 kerana ia mempunyai keupayaan untuk membuat laman web anda kelihatan jauh lebih cantik. 9 00:00:24,790 --> 00:00:28,660 >> Dan jika anda membina sebuah laman web, maka anda mungkin ingin ia cantik. 10 00:00:28,660 --> 00:00:31,372 Maksud saya, anda tidak perlu, tetapi saya hendak mencadangkan ia. [Ketawa] 11 00:00:31,372 --> 00:00:35,430 Jika anda ingin pengguna untuk menggunakannya, anda mungkin ingin ia sedikit [didengar]. 12 00:00:35,430 --> 00:00:39,130 Jadi kita akan cuba memberikan anda hanya beberapa alat asas dan pemahaman, 13 00:00:39,130 --> 00:00:42,340 supaya apabila anda keluar dan anda menyelidik perkara tentang CSS, 14 00:00:42,340 --> 00:00:45,902 ia tidak melengkapkan bahasa raban, seperti CSS kadang-kadang menjadi. 15 00:00:45,902 --> 00:00:47,240 >> TOMAS REIMERS: Yeah. 16 00:00:47,240 --> 00:00:49,930 Allison berkata ia dengan baik. 17 00:00:49,930 --> 00:00:53,250 Jadi saya rasa perkara pertama yang kami harus bermula dengan apa yang ada CSS? 18 00:00:53,250 --> 00:00:55,750 Jadi CSS adalah hebat. 19 00:00:55,750 --> 00:00:56,250 CSS-- 20 00:00:56,250 --> 00:00:58,320 >> ALLISON BUCHHOLTZ-AU: Itu nama seminar kami. 21 00:00:58,320 --> 00:00:58,434 >> TOMAS REIMERS: Yeah. 22 00:00:58,434 --> 00:01:00,130 Ia benar-benar penting bahawa anda memahami bahawa pada masa itu. 23 00:01:00,130 --> 00:01:03,090 Jika anda hanya mengambil satu perkara, ia CSS bahawa jika menggerunkan. 24 00:01:03,090 --> 00:01:06,180 Dua adalah CSS bermaksud Cascading Style Sheets. 25 00:01:06,180 --> 00:01:10,380 Jadi pada intinya, CSS adalah lembaran gaya, yang bererti 26 00:01:10,380 --> 00:01:13,200 ia membolehkan anda untuk gaya laman web. 27 00:01:13,200 --> 00:01:16,609 Dan kemudian apa yang bermakna, ia adalah satu cara untuk menambah gaya ke laman web anda. 28 00:01:16,609 --> 00:01:18,900 Jadi dengan gaya, kita bermakna segala-galanya itu bukan structural-- 29 00:01:18,900 --> 00:01:24,350 supaya perkara-perkara seperti warna, latar belakang imej, sempadan, seperti, padding, 30 00:01:24,350 --> 00:01:25,040 margin. 31 00:01:25,040 --> 00:01:27,310 Kami akan bercakap tentang apa yang semua yang bermakna dalam sedikit. 32 00:01:27,310 --> 00:01:30,110 >> Oleh itu, kita baru sahaja pergi ke depan dan membuka kedua-dua orang-orang di gedit. 33 00:01:30,110 --> 00:01:32,680 Jadi ini adalah index.html. 34 00:01:32,680 --> 00:01:34,800 Dan ini adalah main.css. 35 00:01:34,800 --> 00:01:36,829 Jadi main.css mempunyai apa-apa. 36 00:01:36,829 --> 00:01:38,412 ALLISON BUCHHOLTZ-AU: Tidak gaya setakat ini. 37 00:01:38,412 --> 00:01:39,245 TOMAS REIMERS: Tiada. 38 00:01:39,245 --> 00:01:42,577 Dan seperti yang anda akan lihat, itu tapak benar-benar hodoh. 39 00:01:42,577 --> 00:01:44,160 ALLISON BUCHHOLTZ-AU: Ia hanya yang nyata. 40 00:01:44,160 --> 00:01:45,820 TOMAS REIMERS: Yeah. 41 00:01:45,820 --> 00:01:49,150 Ya, ia bukan hodoh, ia hanya minimalis. 42 00:01:49,150 --> 00:01:53,430 Dan maka di sini kita mempunyai index.html. 43 00:01:53,430 --> 00:01:55,729 Dan demikian bagi yang cepat recap HTML, Allison, 44 00:01:55,729 --> 00:01:57,270 anda mahu hanya bercakap tentang halaman? 45 00:01:57,270 --> 00:01:58,395 >> ALLISON BUCHHOLTZ-AU: Yeah. 46 00:01:58,395 --> 00:02:01,100 Jadi jelas, kita mempunyai HTML kami tag, yang hanya nama fail HTML. 47 00:02:01,100 --> 00:02:07,080 Kami mempunyai header kami di sini, dengan CSS Kehebatan, yang- jika anda kembali. 48 00:02:07,080 --> 00:02:07,720 Di manakah itu? 49 00:02:07,720 --> 00:02:09,136 >> TOMAS REIMERS: Oh. 50 00:02:09,136 --> 00:02:10,301 Ya, anda boleh melihat. 51 00:02:10,301 --> 00:02:12,092 ALLISON BUCHHOLTZ-AU: Dan perhatikan pengepala 52 00:02:12,092 --> 00:02:14,120 boleh menanduk tab ini sehingga di sini. 53 00:02:14,120 --> 00:02:17,130 Dan kemudian "Hello, dunia!" adalah teks yang kita ada hanya 54 00:02:17,130 --> 00:02:19,620 memaparkan di web halaman, yang is-- kembali. 55 00:02:19,620 --> 00:02:21,290 Kembali. 56 00:02:21,290 --> 00:02:24,287 Yang hanya di dalam badan kita here-- teks ringkas. 57 00:02:24,287 --> 00:02:26,120 Juga, satu perkara yang perlu perasan, jika anda melihat penggunaan di sini, 58 00:02:26,120 --> 00:02:29,410 Tomas dihidupkan sehingga ini dua daripada slaid kami. 59 00:02:29,410 --> 00:02:32,035 Jadi selagi anda mempunyai semua tiga ini, anda halus. 60 00:02:32,035 --> 00:02:34,044 Mereka boleh dalam apa jua perintah yang mereka mahu. 61 00:02:34,044 --> 00:02:39,368 Apa yang paling penting adalah bahawa hanya anda mempunyai setiap daripada tiga perkara. 62 00:02:39,368 --> 00:02:40,340 >> TOMAS REIMERS: Cool. 63 00:02:40,340 --> 00:02:41,111 Tambah jenis doc? 64 00:02:41,111 --> 00:02:42,235 ALLISON BUCHHOLTZ-AU: Yeah. 65 00:02:42,235 --> 00:02:43,068 TOMAS REIMERS: Yeah. 66 00:02:43,068 --> 00:02:43,769 Cool. 67 00:02:43,769 --> 00:02:46,102 ALLISON BUCHHOLTZ-AU: Rupa-rupanya, mics saya tidak suka saya. 68 00:02:46,102 --> 00:02:49,650 TOMAS REIMERS: Oh, memberi kita saat yang adil manakala Allison beralih daripada mikrofon beliau. 69 00:02:49,650 --> 00:02:50,500 Jadi yeah. 70 00:02:50,500 --> 00:02:52,030 Oleh itu, kita mempunyai halaman utama kami. 71 00:02:52,030 --> 00:02:53,890 Ia adalah jenis unstyled. 72 00:02:53,890 --> 00:02:54,780 Kami tidak mempunyai banyak. 73 00:02:54,780 --> 00:02:57,110 Kami hanya perlu pada dasarnya teks. 74 00:02:57,110 --> 00:02:59,470 Kami mempunyai lembaran gaya. 75 00:02:59,470 --> 00:03:00,220 Kami mempunyai tajuk. 76 00:03:00,220 --> 00:03:04,020 Jadi hanya kosong tanpa tulang komponen membuat laman web. 77 00:03:04,020 --> 00:03:08,880 >> Jadi dari sana, mari kita bercakap tentang apa yang CSS adalah 78 00:03:08,880 --> 00:03:11,270 dan apa yang ia kelihatan seperti dan semua itu. 79 00:03:11,270 --> 00:03:12,047 Jadi untuk bahawa- 80 00:03:12,047 --> 00:03:13,755 ALLISON BUCHHOLTZ-AU: Kembali ke slaid. 81 00:03:13,755 --> 00:03:15,200 TOMAS REIMERS: Kembali kepada slaid. 82 00:03:15,200 --> 00:03:17,240 Dan Allison boleh mengambil alih. 83 00:03:17,240 --> 00:03:18,720 >> ALLISON BUCHHOLTZ-AU: Woo. 84 00:03:18,720 --> 00:03:19,220 OK. 85 00:03:19,220 --> 00:03:22,360 Jadi dalam fail CSS anda, anda akan mempunyai 86 00:03:22,360 --> 00:03:25,010 banyak perkara-perkara ini dipanggil pemilih. 87 00:03:25,010 --> 00:03:27,420 Itu hanya akan menjadi dasar fail CSS anda. 88 00:03:27,420 --> 00:03:29,480 Ia hanya akan menjadi banyak dan banyak ini. 89 00:03:29,480 --> 00:03:30,780 Jadi pemilih. 90 00:03:30,780 --> 00:03:32,649 Ini hanyalah anatomi umum. 91 00:03:32,649 --> 00:03:35,190 Kita akan pergi melalui contoh, kerana jika kamu tidak pernah 92 00:03:35,190 --> 00:03:38,400 menonton seksyen saya, saya rasa seperti apa yang di abstrak 93 00:03:38,400 --> 00:03:39,400 tidak benar-benar masuk akal. 94 00:03:39,400 --> 00:03:41,110 Ia sentiasa membantu untuk melihat contoh-contoh. 95 00:03:41,110 --> 00:03:42,420 >> Oleh itu, kita mempunyai beberapa pemilih. 96 00:03:42,420 --> 00:03:49,120 Yang akan menjadi sebahagian pengecam untuk apa yang kita mahu gaya yang memohon untuk. 97 00:03:49,120 --> 00:03:52,220 Dan kemudian kita boleh mempunyai apa-apa set peraturan dan nilai-nilai. 98 00:03:52,220 --> 00:03:55,680 Jadi pemilih yang mungkin anda lihat mungkin sesuatu seperti badan, 99 00:03:55,680 --> 00:04:00,262 atau perenggan dengan P, atau header, atau apa sahaja, 100 00:04:00,262 --> 00:04:02,000 apa sahaja yang anda mahu tag HTML anda untuk menjadi. 101 00:04:02,000 --> 00:04:03,570 >> Jadi dalam kes ini, kita mempunyai badan. 102 00:04:03,570 --> 00:04:06,985 Dan kita mempunyai beberapa peraturan, yang ini adalah sejajar 103 00:04:06,985 --> 00:04:09,610 untuk apa gaya anda juga dengan. 104 00:04:09,610 --> 00:04:12,720 Jadi dalam kes ini, kita mempunyai warna latar belakang dan berat font. 105 00:04:12,720 --> 00:04:16,200 Jadi ini akan mengubah latar belakang apa-apa 106 00:04:16,200 --> 00:04:19,640 dalam mana-mana tag badan fail HTML kami. 107 00:04:19,640 --> 00:04:22,810 Dan ia akan memberikan ia nilai ini biru muda. 108 00:04:22,810 --> 00:04:24,820 >> Maka ia akan membuat latar belakang biru muda. 109 00:04:24,820 --> 00:04:28,660 Dan kemudian apa-apa di dalam badan adalah akan mempunyai berat fon berani. 110 00:04:28,660 --> 00:04:31,142 Jadi ia hanya akan berani semua teks kami. 111 00:04:31,142 --> 00:04:32,970 Dan ini hanyalah salah satu pemilih. 112 00:04:32,970 --> 00:04:34,680 Tetapi, anda boleh mempunyai sangat banyak ini. 113 00:04:34,680 --> 00:04:38,730 Dan seperti yang kita akan menunjukkan kemudian, sedikit lebih ke dalam bagaimana 114 00:04:38,730 --> 00:04:40,709 bahawa kerja-kerja dan banyak lagi contoh-contoh yang ada. 115 00:04:40,709 --> 00:04:41,750 Apa-apa sahaja yang anda mahu tambah? 116 00:04:41,750 --> 00:04:42,499 >> TOMAS REIMERS: No. 117 00:04:42,499 --> 00:04:43,500 Allison mendapat ia. 118 00:04:43,500 --> 00:04:46,144 Kami hanya akan memotong satu contoh di sini di laman web contoh kita. 119 00:04:46,144 --> 00:04:47,310 Jadi mari kita benar-benar mengambil ini. 120 00:04:47,310 --> 00:04:48,620 Ia sesuai. 121 00:04:48,620 --> 00:04:54,460 Jadi, saya hanya akan copy dan paste yang betul ke dalam fail main.css kami. 122 00:04:54,460 --> 00:04:56,530 Dan saya akan menyimpannya. 123 00:04:56,530 --> 00:04:59,190 Dan kemudian kami akan menjalankannya. 124 00:04:59,190 --> 00:05:01,600 Jadi nota sampingan, satu daripada perkara yang paling mengecewakan 125 00:05:01,600 --> 00:05:04,490 adalah jika anda tidak menyimpan fail, dan maka anda, seperti, muat semula halaman, 126 00:05:04,490 --> 00:05:07,450 dan sebagainya, mengapa tidak perubahan yang berlaku? 127 00:05:07,450 --> 00:05:07,950 Ia berlaku. 128 00:05:07,950 --> 00:05:14,230 Jadi di sini kita melihat bahawa kami membuat kami laman web latar belakang biru muda 129 00:05:14,230 --> 00:05:16,560 dan beberapa teks tebal. 130 00:05:16,560 --> 00:05:20,730 >> Saya juga perlu menyebut, jika anda lelaki itu mempunyai soalan mengenai apa-apa 131 00:05:20,730 --> 00:05:23,622 kita lakukan, sila bebas untuk berhenti kami dan meminta kami. 132 00:05:23,622 --> 00:05:25,330 Kami benar-benar bersedia meletakkan soalan. 133 00:05:25,330 --> 00:05:27,951 134 00:05:27,951 --> 00:05:31,930 >> ALLISON BUCHHOLTZ-AU: Jelas sekali, dengan CSS, segala sesuatu atas dirinya. 135 00:05:31,930 --> 00:05:34,107 Oleh itu, jika satu perkara tidak masuk akal sekarang, kita 136 00:05:34,107 --> 00:05:35,690 tidak mahu itu rawa anda kemudian. 137 00:05:35,690 --> 00:05:38,390 138 00:05:38,390 --> 00:05:41,930 >> TOMAS REIMERS: Jadi mari kita jenis membedah ini. 139 00:05:41,930 --> 00:05:44,210 Jadi adakah anda ingin memulakan dengan pemilih di sini? 140 00:05:44,210 --> 00:05:45,979 >> ALLISON BUCHHOLTZ-AU: Yeah. 141 00:05:45,979 --> 00:05:48,270 Seperti yang saya katakan sebelum ini, badan hanya pemilih kami di sini. 142 00:05:48,270 --> 00:05:50,950 Jadi, jika kita kembali kepada ah index-- kami. 143 00:05:50,950 --> 00:05:53,245 >> TOMAS REIMERS: Yang saya ditutup. 144 00:05:53,245 --> 00:05:54,530 Berikan saya satu saat. 145 00:05:54,530 --> 00:05:58,286 Jadi Fail, Terbuka, index.html. 146 00:05:58,286 --> 00:05:59,410 ALLISON BUCHHOLTZ-AU: Cool. 147 00:05:59,410 --> 00:06:02,710 Jadi, jika anda perhatikan di sini, kita mempunyai tag badan, kan? 148 00:06:02,710 --> 00:06:06,270 Jadi pemilih hanya sepadan dengan tag yang kita berbicara tentang. 149 00:06:06,270 --> 00:06:07,670 Jadi badan di sini. 150 00:06:07,670 --> 00:06:10,315 Jadi apa yang kita katakan adalah everything-- boleh kita kembali? 151 00:06:10,315 --> 00:06:12,065 Saya ingin saya boleh hanya seperti menyentuh skrin. 152 00:06:12,065 --> 00:06:14,410 Ia akan menjadi begitu banyak sejuk. 153 00:06:14,410 --> 00:06:17,150 >> Jadi apa-apa jua dalam mereka tags badan, yang kita lihat 154 00:06:17,150 --> 00:06:19,637 hanya, seperti, teks, dan badan secara umum 155 00:06:19,637 --> 00:06:20,970 merujuk kepada, seperti, latar belakang. 156 00:06:20,970 --> 00:06:22,720 Jika anda pernah mahu menukar latar belakang, 157 00:06:22,720 --> 00:06:25,090 yang akan menjadi di tag badan. 158 00:06:25,090 --> 00:06:27,120 Hanya mempunyai peraturan-peraturan ini digunakan untuk mereka. 159 00:06:27,120 --> 00:06:32,040 >> Jadi jika kita pergi ke index.html dan- sebenarnya, 160 00:06:32,040 --> 00:06:33,840 kita boleh mempunyai sesuatu luar dalam tubuh? 161 00:06:33,840 --> 00:06:37,340 Jika kita mempunyai, seperti, kaki atau sesuatu, ia tidak akan berlaku untuk ini. 162 00:06:37,340 --> 00:06:40,900 Tetapi apa-apa jua dalam tag badan akan 163 00:06:40,900 --> 00:06:44,960 terjejas oleh badan ini pemilih yang telah kami buat. 164 00:06:44,960 --> 00:06:47,405 Jadi, jika anda adalah untuk menaip sesuatu yang lain there-- 165 00:06:47,405 --> 00:06:49,400 >> TOMAS REIMERS: Mari kita memandu rumah itu. 166 00:06:49,400 --> 00:06:55,330 Jadi, jika kita mempunyai div-- yang jadi itulah hanya satu lagi tag anda boleh mempunyai. 167 00:06:55,330 --> 00:06:56,350 Saya akan menutupnya. 168 00:06:56,350 --> 00:06:58,280 Atau mari kita membuat ini satu perenggan. 169 00:06:58,280 --> 00:07:01,430 Jadi p bermaksud perenggan. 170 00:07:01,430 --> 00:07:02,560 Dan dalam perenggan itu. 171 00:07:02,560 --> 00:07:05,650 Dan kemudian saya berkata: "Ini adalah teks." 172 00:07:05,650 --> 00:07:06,369 Cool. 173 00:07:06,369 --> 00:07:09,160 Dan kemudian saya membuat peraturan ini terpakai bagi perenggan bukannya badan. 174 00:07:09,160 --> 00:07:12,390 175 00:07:12,390 --> 00:07:17,320 Anda akan melihat bagaimana ia hanya terpakai kepada perenggan yang baru ditubuhkan, hak, 176 00:07:17,320 --> 00:07:18,892 tidak perkara keseluruhan. 177 00:07:18,892 --> 00:07:20,090 Adakah ini masuk akal? 178 00:07:20,090 --> 00:07:21,840 >> ALLISON BUCHHOLTZ-AU: Jadi ini adalah semua badan, 179 00:07:21,840 --> 00:07:24,450 tetapi sekarang kami hanya pemilih sepadan dengan perenggan. 180 00:07:24,450 --> 00:07:27,050 Oleh itu, kita hanya perlu berani dan biru perenggan ini tertentu, 181 00:07:27,050 --> 00:07:30,760 kerana ini adalah satu-satunya perkara yang dilampirkan dalam p tag. 182 00:07:30,760 --> 00:07:35,349 >> TOMAS REIMERS: Adakah ini masuk akal jenis bagaimana perkara payung kepada perkara lain? 183 00:07:35,349 --> 00:07:38,140 ALLISON BUCHHOLTZ-AU: Juga, hanya untuk mengatakan, seperti, salah satu cara yang terbaik 184 00:07:38,140 --> 00:07:40,889 untuk benar-benar selesa dengan CSS adalah untuk hanya melakukan perkara-perkara seperti ini, 185 00:07:40,889 --> 00:07:42,050 hanya mencubanya. 186 00:07:42,050 --> 00:07:46,700 Ia amat mudah untuk menaip sesuatu keluar, memukul Muat semula, dan lihat apa yang berlaku. 187 00:07:46,700 --> 00:07:48,940 Dan seperti kebanyakan CS, uji kaji boleh sering 188 00:07:48,940 --> 00:07:51,790 membawa kepada yang lebih baik pemahaman intuitif. 189 00:07:51,790 --> 00:07:54,432 Lebih-lebih lagi daripada kita adil, seperti, bercakap dengan anda. 190 00:07:54,432 --> 00:07:58,350 >> TOMAS REIMERS: Boleh 100% bersetuju mengenai hal itu. 191 00:07:58,350 --> 00:08:02,430 Jadi, jika kita kembali kepada ini, mari kita mulakan membedah apa yang kedua-dua lakukan. 192 00:08:02,430 --> 00:08:04,550 Jadi kita mempunyai dua peraturan ini. 193 00:08:04,550 --> 00:08:07,420 Jadi yang pertama adalah warna latar belakang. 194 00:08:07,420 --> 00:08:10,590 Dan anda melihat bahawa kita telah menetapkannya sama dengan nilai, biru muda. 195 00:08:10,590 --> 00:08:15,009 >> Jadi dalam CSS, CSS adalah jenis dari sangat longgar tentang bagaimana 196 00:08:15,009 --> 00:08:16,300 anda dibenarkan untuk menentukan warna. 197 00:08:16,300 --> 00:08:17,800 Jadi, anda boleh menentukan mereka dengan nama. 198 00:08:17,800 --> 00:08:20,650 Anda juga boleh melakukan sesuatu seperti "merah." 199 00:08:20,650 --> 00:08:25,270 Dan kemudian jika kita kembali kepada ini, anda akan melihat bahawa latar belakang berwarna merah. 200 00:08:25,270 --> 00:08:29,040 Anda juga boleh mendapatkan really-- Saya rasa anda boleh mendapatkan cukup kreatif dengan ini, 201 00:08:29,040 --> 00:08:29,540 tidak boleh anda? 202 00:08:29,540 --> 00:08:31,170 >> ALLISON BUCHHOLTZ-AU Saya berfikir anda boleh menggunakan hex. 203 00:08:31,170 --> 00:08:31,250 Tidak boleh anda? 204 00:08:31,250 --> 00:08:32,083 >> TOMAS REIMERS: Yeah. 205 00:08:32,083 --> 00:08:32,969 Oleh itu, anda boleh menggunakan hex. 206 00:08:32,969 --> 00:08:34,490 Tetapi saya berfikir nama-bijak. 207 00:08:34,490 --> 00:08:35,385 Adakah tidak ada? 208 00:08:35,385 --> 00:08:37,260 ALLISON BUCHHOLTZ-AU: Anda boleh melakukan banyak juga. 209 00:08:37,260 --> 00:08:43,350 Cukup banyak seperti kebanyakan warna yang anda boleh name-- seperti, saya rasa salmon adalah satu. 210 00:08:43,350 --> 00:08:45,322 >> TOMAS REIMERS: Kami akan cuba salmon. 211 00:08:45,322 --> 00:08:47,530 ALLISON BUCHHOLTZ-AU Saya berfikir minuman keras manis adalah di sana. 212 00:08:47,530 --> 00:08:48,050 TOMAS REIMERS: Yeah. 213 00:08:48,050 --> 00:08:48,550 Lihat? 214 00:08:48,550 --> 00:08:50,080 Jadi, anda boleh mendapatkan cukup kreatif. 215 00:08:50,080 --> 00:08:52,246 >> ALLISON BUCHHOLTZ-AU: Anda boleh mendapatkan cukup kreatif. 216 00:08:52,246 --> 00:08:55,750 Seperti, jika anda boleh berfikir daripada nama warna, itu mungkin di sana. 217 00:08:55,750 --> 00:08:57,840 Jika anda benar-benar mahu denda terperinci, anda boleh pergi hex. 218 00:08:57,840 --> 00:08:58,673 >> TOMAS REIMERS: Yeah. 219 00:08:58,673 --> 00:08:59,390 Jadi perenambelasan. 220 00:08:59,390 --> 00:09:05,280 Jika anda semua masih ingat balik ini dari Serangga lama anda, imej Recover, 221 00:09:05,280 --> 00:09:08,300 anda semua terpaksa berhadapan dengan nilai-nilai hex. 222 00:09:08,300 --> 00:09:15,280 Dan jenis untuk menggulung apa yang, hex mempunyai tiga nilai yang disimpan di dalamnya. 223 00:09:15,280 --> 00:09:17,250 Jadi, dalam kumpulan dua kenaikan. 224 00:09:17,250 --> 00:09:19,300 Dua yang pertama mewakili nilai merah. 225 00:09:19,300 --> 00:09:22,420 Yang kedua mewakili nilai hijau. 226 00:09:22,420 --> 00:09:25,020 Dan yang terakhir adalah biru? 227 00:09:25,020 --> 00:09:30,050 >> Jadi FF berlaku untuk mewakili yang perenambelasan 255. 228 00:09:30,050 --> 00:09:35,480 Jadi, anda mempunyai 255 merah, 255 hijau, dan 0 untuk biru. 229 00:09:35,480 --> 00:09:37,670 Dan nilai-nilai adalah di antara 0 dan 255. 230 00:09:37,670 --> 00:09:38,350 >> PENONTON: Betul. 231 00:09:38,350 --> 00:09:41,472 Jadi pada dasarnya, kita boleh mencari internet untuk mana-mana warna yang kita mahu, 232 00:09:41,472 --> 00:09:43,912 dan mengenal pasti-diketahui sebenarnya warna kombo spektrum, 233 00:09:43,912 --> 00:09:45,130 dan kemudian kita boleh memasukkannya ke dalam? 234 00:09:45,130 --> 00:09:46,380 ALLISON BUCHHOLTZ-AU: Tepat. 235 00:09:46,380 --> 00:09:52,900 Jadi, anda mempunyai kawalan penuh cukup banyak lebih warna yang anda mahu dalam CSS. 236 00:09:52,900 --> 00:09:55,069 Adakah kita akan bercakap tentang imej latar belakang kemudian? 237 00:09:55,069 --> 00:09:56,110 Atau adakah kita mahu berbuat demikian? 238 00:09:56,110 --> 00:09:56,240 >> TOMAS REIMERS: Yeah. 239 00:09:56,240 --> 00:09:57,010 Sama sekali. 240 00:09:57,010 --> 00:10:00,830 Jadi pertama, hanya untuk menunjukkan bahawa merah dan hijau kuning. 241 00:10:00,830 --> 00:10:03,120 Dan jika anda memerlukan membantu mencari ini, anda 242 00:10:03,120 --> 00:10:05,575 boleh Google sesuatu seperti "warna pemetik." 243 00:10:05,575 --> 00:10:07,200 ALLISON BUCHHOLTZ-AU: Oh, ia begitu baik. 244 00:10:07,200 --> 00:10:09,090 Saya suka Warna Picker. 245 00:10:09,090 --> 00:10:11,360 >> TOMAS REIMERS: colorpicker.com adalah contoh yang baik. 246 00:10:11,360 --> 00:10:14,580 Dan di sini, anda akan melihat bahawa anda mempunyai warna Photoshop seperti pemetik penuh. 247 00:10:14,580 --> 00:10:14,920 >> ALLISON BUCHHOLTZ-AU: Mm-hm. 248 00:10:14,920 --> 00:10:16,980 Juga, perkara-perkara yang sejuk adalah anda boleh menjana skim warna 249 00:10:16,980 --> 00:10:18,896 supaya anda tidak perlu, seperti, bertempur warna. 250 00:10:18,896 --> 00:10:22,780 TOMAS REIMERS: Kemudian inilah nilai hex di sini. 251 00:10:22,780 --> 00:10:27,800 Jadi, anda sentiasa boleh mencari dalam talian pada dasarnya tempat untuk mendapatkan nilai hex dari. 252 00:10:27,800 --> 00:10:31,667 Ia tidak menyelesaikan daripada yang adil, seperti, kita melihat warna dunia dalam nombor. 253 00:10:31,667 --> 00:10:34,000 Ia lebih yang kita pergi ke dalam talian dan mendapati apa warna yang kita mahu, 254 00:10:34,000 --> 00:10:36,850 dan kemudian mengambil nombor ini. 255 00:10:36,850 --> 00:10:39,590 Kerana ia hanya benar-benar mudah cara untuk merujuk perkara di CS. 256 00:10:39,590 --> 00:10:40,350 >> ALLISON BUCHHOLTZ-AU: Dan kemudian ada also-- 257 00:10:40,350 --> 00:10:41,630 Saya lupa nama yang tepat dari laman web ini. 258 00:10:41,630 --> 00:10:43,838 Tetapi ada pasti, saya berfikir, sesuatu dari Adobe 259 00:10:43,838 --> 00:10:48,350 yang menjana skim warna untuk anda, yang benar-benar sejuk, kerana anda 260 00:10:48,350 --> 00:10:50,580 definitely-- itu kadang-kadang sukar untuk memikirkan, 261 00:10:50,580 --> 00:10:53,729 oh, jika saya mahu menggunakan warna ini, apa yang mungkin menjadi satu lagi berguna 262 00:10:53,729 --> 00:10:56,395 untuk digunakan di tempat lain di laman web saya untuk, seperti, membuat bagus dan padu. 263 00:10:56,395 --> 00:11:00,430 264 00:11:00,430 --> 00:11:04,260 >> TOMAS REIMERS: ini Allison bercakap tentang satu demi Adobe Kuler dipanggil, saya berfikir. 265 00:11:04,260 --> 00:11:04,885 Ia K-U-L-E-R. 266 00:11:04,885 --> 00:11:06,259 ALLISON BUCHHOLTZ-AU: Saya fikir begitu. 267 00:11:06,259 --> 00:11:07,610 Saya agak pasti itulah yang. 268 00:11:07,610 --> 00:11:11,050 >> TOMAS REIMERS: kegemaran saya mempunyai sentiasa Warna Designer. 269 00:11:11,050 --> 00:11:13,998 >> ALLISON BUCHHOLTZ-AU: Ooh. 270 00:11:13,998 --> 00:11:16,010 >> TOMAS REIMERS: Yang now-- 271 00:11:16,010 --> 00:11:16,860 >> ALLISON BUCHHOLTZ-AU: Ah, ini adalah indah. 272 00:11:16,860 --> 00:11:18,818 >> TOMAS REIMERS: Dan anda pada dasarnya boleh berkata, seperti, 273 00:11:18,818 --> 00:11:21,700 Saya mahu tiga warna bersebelahan antara satu sama lain. 274 00:11:21,700 --> 00:11:25,030 Kemudian mari kita buat sesuatu yang baik. 275 00:11:25,030 --> 00:11:29,210 Dan kemudian anda boleh mendapatkan contoh apa yang mungkin kelihatan seperti. 276 00:11:29,210 --> 00:11:32,470 Dan kemudian jika anda berlegar tetikus di atas mana-mana mereka, ia memberi anda nilai hex. 277 00:11:32,470 --> 00:11:35,010 >> Jadi, sebagai cara yang baik untuk memulakan berfikir tentang skim warna 278 00:11:35,010 --> 00:11:39,570 atau apa warna di laman web mungkin baik bersama-sama. 279 00:11:39,570 --> 00:11:45,655 Kerana yang boleh mengejutkan bukan sebagai mudah untuk memilih yang anda berfikir. 280 00:11:45,655 --> 00:11:48,280 Kemudian Perkara yang sejuk yang lain Saya selalu didapati mengenai laman ini 281 00:11:48,280 --> 00:11:51,480 adalah jika anda memukul Contoh IA AKAN menunjukkan apa yang laman contoh 282 00:11:51,480 --> 00:11:54,800 mungkin kelihatan seperti menggunakan skim warna. 283 00:11:54,800 --> 00:11:56,270 Anyway. 284 00:11:56,270 --> 00:11:57,863 >> Kembali ke CSS sebenar. 285 00:11:57,863 --> 00:12:01,112 ALLISON BUCHHOLTZ-AU: Jelas sekali, kita tahu rujukan ini mungkin berguna. 286 00:12:01,112 --> 00:12:03,195 TOMAS REIMERS: Tidak, mereka pasti boleh membantu. 287 00:12:03,195 --> 00:12:04,720 Jadi kedaulatan kedua, Allison? 288 00:12:04,720 --> 00:12:05,844 >> ALLISON BUCHHOLTZ-AU: Yeah. 289 00:12:05,844 --> 00:12:08,280 Peraturan kedua hanya sepadan dengan fon kami. 290 00:12:08,280 --> 00:12:11,520 Jadi berat fon adalah hanya jenis daripada- begitu berat akan 291 00:12:11,520 --> 00:12:15,220 menjadi jika anda mahu hanya, seperti, normal atau, seperti, fon nipis, 292 00:12:15,220 --> 00:12:17,251 atau dalam kes ini, seperti, berani. 293 00:12:17,251 --> 00:12:17,750 Saya terlupa. 294 00:12:17,750 --> 00:12:21,557 Apa yang jika anda mahu it-- ada satu yang lebih nipis daripada hanya, seperti, normal? 295 00:12:21,557 --> 00:12:24,140 TOMAS REIMERS: Saya tidak benar-benar tahu jika ada satu yang lebih nipis. 296 00:12:24,140 --> 00:12:24,680 ALLISON BUCHHOLTZ-AU: saya lupa. 297 00:12:24,680 --> 00:12:26,300 Jadi berat badan font kita biasanya hanya menggunakan untuk berani. 298 00:12:26,300 --> 00:12:29,010 Jika anda ingin mendapatkan benar-benar ke dalam itu, kami akan menunjukkan kepada anda. 299 00:12:29,010 --> 00:12:34,317 W3Schools mempunyai semua berbeza perkara yang boleh anda lakukan untuk fon. 300 00:12:34,317 --> 00:12:36,900 Tetapi pada dasarnya, jika anda pernah mahu untuk mengubah apa-apa tentang fon, 301 00:12:36,900 --> 00:12:39,330 ia sentiasa akan menjadi, seperti, font-sesuatu. 302 00:12:39,330 --> 00:12:43,450 Oleh itu, ia akan menjadi seperti, font-keluarga jika anda cuba menukar jenis sebenar. 303 00:12:43,450 --> 00:12:47,390 Ia akan menjadi gaya fon jika anda ingin ia seperti kursif, 304 00:12:47,390 --> 00:12:49,710 atau italik, atau barang kecil. 305 00:12:49,710 --> 00:12:53,570 Atau bahkan font-warna, jika kita mahu mengubahnya. 306 00:12:53,570 --> 00:12:55,621 >> TOMAS REIMERS: Yup. 307 00:12:55,621 --> 00:12:56,925 Jadi anda boleh menukar bahawa. 308 00:12:56,925 --> 00:12:59,360 Dan semacam hanya untuk recap sekarang, jadi anda boleh 309 00:12:59,360 --> 00:13:01,400 melihat bahawa kita mempunyai pemilih di sini. 310 00:13:01,400 --> 00:13:03,000 Kami mempunyai ini pendakap kerinting. 311 00:13:03,000 --> 00:13:06,735 Dan kemudian kita mempunyai peraturan dihalang oleh koma bertitik. 312 00:13:06,735 --> 00:13:08,100 Adakah ini masuk akal? 313 00:13:08,100 --> 00:13:09,130 Yeah? 314 00:13:09,130 --> 00:13:10,500 Cool. 315 00:13:10,500 --> 00:13:13,200 Jadi, jika yang good-- 316 00:13:13,200 --> 00:13:14,424 >> ALLISON BUCHHOLTZ-AU: Kembali. 317 00:13:14,424 --> 00:13:17,590 TOMAS REIMERS: Mari kita bercakap secara khusus mengenai jenis pemilih yang kita ada. 318 00:13:17,590 --> 00:13:19,790 'Sebab sekarang kita telah semacam hanya ditunjukkan tag. 319 00:13:19,790 --> 00:13:21,696 Tetapi anda semua dapat melihatnya munasabah. 320 00:13:21,696 --> 00:13:23,570 Katakanlah anda mempunyai dua perenggan pada halaman dan anda 321 00:13:23,570 --> 00:13:26,087 mahu menjadi mampu untuk gaya satu tetapi tidak yang lain, 322 00:13:26,087 --> 00:13:29,170 anda tidak hanya mahu mengehadkan diri anda perlu menggunakan HTML sebenar berbeza 323 00:13:29,170 --> 00:13:33,410 tag untuk memberi mereka gaya yang berbeza. 324 00:13:33,410 --> 00:13:35,995 >> Oleh itu, kita mempunyai tiga asas jenis pemilih. 325 00:13:35,995 --> 00:13:37,120 ALLISON BUCHHOLTZ-AU: Yeah. 326 00:13:37,120 --> 00:13:39,828 Oleh itu, kita mempunyai tag, yang adalah apa yang kita telah bercakap tentang sekarang. 327 00:13:39,828 --> 00:13:42,430 Jadi itulah jenis seperti badan atau p anda. 328 00:13:42,430 --> 00:13:46,280 Dan kemudian kita mempunyai kelas, iaitu apabila kita menentukan ia dalam fail CSS kami, 329 00:13:46,280 --> 00:13:49,907 ia sentiasa akan dot, apa sahaja anda ingin nama kelas anda untuk menjadi. 330 00:13:49,907 --> 00:13:51,490 Dan ini boleh memohon untuk pelbagai perkara. 331 00:13:51,490 --> 00:13:54,610 332 00:13:54,610 --> 00:13:57,610 >> Katakanlah anda mempunyai lima perenggan dan dua daripada tiga daripada mereka 333 00:13:57,610 --> 00:14:00,580 perlu gaya yang sama, anda akan memohon kelas yang kepadanya. 334 00:14:00,580 --> 00:14:03,040 Dan ini hanyalah cara kita melakukannya. 335 00:14:03,040 --> 00:14:05,600 Kami akan memberikan anda satu contoh di mana ini sebenarnya muncul. 336 00:14:05,600 --> 00:14:11,030 Tetapi jika anda mempunyai mungkin beberapa tag p, selepas itu, anda akan menulis, 337 00:14:11,030 --> 00:14:14,170 kelas sama dengan apa kelas anda ingin memohon kepadanya. 338 00:14:14,170 --> 00:14:19,280 Oleh itu apa sahaja pemilih kelas yang kita mahu terpakai bagi perenggan ini tertentu, 339 00:14:19,280 --> 00:14:21,300 kita hanya boleh menulis seperti ini. 340 00:14:21,300 --> 00:14:24,080 Sudah tentu, saya rasa contoh akan membuat ia lebih konkrit. 341 00:14:24,080 --> 00:14:27,270 >> Yang lain kita mempunyai adalah id, yang kita menunjukkan 342 00:14:27,270 --> 00:14:29,707 dengan hash, atau paun, atau hashtag. 343 00:14:29,707 --> 00:14:30,790 TOMAS REIMERS: Octothorpe. 344 00:14:30,790 --> 00:14:32,430 ALLISON BUCHHOLTZ-AU: Octothorpe. 345 00:14:32,430 --> 00:14:34,550 Yang bekerja, terlalu. 346 00:14:34,550 --> 00:14:36,640 Dan yang satu ini benar-benar harus menjadi unik. 347 00:14:36,640 --> 00:14:39,880 Mereka sepatutnya hanya terpakai kepada satu perkara pada halaman anda. 348 00:14:39,880 --> 00:14:43,820 Jadi sama ada itu perenggan yang tertentu, atau beberapa item dalam senarai, atau apa sahaja, 349 00:14:43,820 --> 00:14:45,090 ini perlu menjadi unik. 350 00:14:45,090 --> 00:14:48,730 Dan dengan cara yang sama bahawa kita hanya berkata, seperti, class = "class1 class2," 351 00:14:48,730 --> 00:14:51,577 ini hanya boleh menjadi id daripada apa yang kita ada. 352 00:14:51,577 --> 00:14:52,410 TOMAS REIMERS: Yeah. 353 00:14:52,410 --> 00:14:54,330 Jadi mari kita pasti bercakap mengenai contoh-contoh di sini. 354 00:14:54,330 --> 00:14:58,170 Dan saya hanya akan menyelam lurus ke dalam kod. 355 00:14:58,170 --> 00:15:02,090 Jadi mari kita lihat HTML kami. 356 00:15:02,090 --> 00:15:03,960 Demikianlah kita sekarang mempunyai satu perenggan. 357 00:15:03,960 --> 00:15:05,510 Ini adalah teks. 358 00:15:05,510 --> 00:15:09,151 Saya hanya akan mengubah suai ia. "Ini adalah teks 1." 359 00:15:09,151 --> 00:15:11,150 Dan kemudian kita akan mempunyai "Ini adalah teks 2." 360 00:15:11,150 --> 00:15:12,525 >> ALLISON BUCHHOLTZ-AU: Kedua satu. 361 00:15:12,525 --> 00:15:13,540 TOMAS REIMERS: Yup. 362 00:15:13,540 --> 00:15:16,810 Oleh itu, kita kini mempunyai "Ini adalah teks 2," betul? 363 00:15:16,810 --> 00:15:21,560 Dan kita akan lihat bahawa jika kita menambah nilai halaman, apa yang kita akan mendapati 364 00:15:21,560 --> 00:15:23,067 adalah kami gonna find-- 365 00:15:23,067 --> 00:15:24,150 ALLISON BUCHHOLTZ-AU: Ooh. 366 00:15:24,150 --> 00:15:24,983 TOMAS REIMERS: Yeah. 367 00:15:24,983 --> 00:15:27,570 Kami akan mencari "Ini adalah teks 1, "dan" Ini adalah teks 2. " 368 00:15:27,570 --> 00:15:28,650 >> ALLISON BUCHHOLTZ-AU: Dan warna kuning keluar indah. 369 00:15:28,650 --> 00:15:31,066 >> TOMAS REIMERS: Dan anda akan melihat pemilih kita sekarang, 370 00:15:31,066 --> 00:15:34,940 yang terpakai kepada p, atau perenggan, memberi kesan kepada kedua-dua mereka, 371 00:15:34,940 --> 00:15:38,700 kerana kedua-dua mereka memenuhi syarat mereka berdua yang p tag. 372 00:15:38,700 --> 00:15:40,360 Ini menjadikan jumlah akal. 373 00:15:40,360 --> 00:15:43,340 Jadi persoalannya adalah, baik, apa yang jika kita mahu hanya mendapatkan satu? 374 00:15:43,340 --> 00:15:46,350 Jadi sama seperti Allison telah berkata, kita mempunyai dua cara lain untuk berbuat demikian. 375 00:15:46,350 --> 00:15:47,320 Saya akan bermula dengan id. 376 00:15:47,320 --> 00:15:48,405 >> ALLISON BUCHHOLTZ-AU: Mari kita mulakan dengan id. 377 00:15:48,405 --> 00:15:50,405 >> TOMAS REIMERS: Dan kedua-dua ini adalah sifat-sifat. 378 00:15:50,405 --> 00:15:53,200 Jadi sifat-sifat wujud dalam HTML. 379 00:15:53,200 --> 00:15:55,600 Dan apa yang mereka adalah sesuatu yang anda menambah 380 00:15:55,600 --> 00:15:58,840 dalam tag yang berasingan daripada nama tag. 381 00:15:58,840 --> 00:16:01,301 Jadi, anda boleh mempunyai beberapa sifat-sifat. 382 00:16:01,301 --> 00:16:01,800 Yeah? 383 00:16:01,800 --> 00:16:03,950 >> ALLISON BUCHHOLTZ-AU: saya hanya akan berkata, dari contoh anda dari Serangga 7, 384 00:16:03,950 --> 00:16:06,650 jika mana-mana anda cuba untuk menyelaraskan perkara ke pusat, 385 00:16:06,650 --> 00:16:08,550 anda mungkin telah menggunakan "Teks align = pusat." 386 00:16:08,550 --> 00:16:10,550 Dan anda perasan ia mungkin sepatutnya berpusat 387 00:16:10,550 --> 00:16:12,650 teks anda atau bar navigasi anda. 388 00:16:12,650 --> 00:16:15,499 Jadi itu hanya juga sesuatu sifat yang anda mungkin biasa dengan. 389 00:16:15,499 --> 00:16:18,040 TOMAS REIMERS: Ada sekumpulan daripada sifat-sifat yang anda akan melihat. 390 00:16:18,040 --> 00:16:18,539 Yeah. 391 00:16:18,539 --> 00:16:21,250 Seperti rujukan yang baik untuk Serangga 7. 392 00:16:21,250 --> 00:16:23,150 Kami mempunyai id. 393 00:16:23,150 --> 00:16:25,080 Anda juga boleh mempunyai kelas, perkara-perkara seperti ini. 394 00:16:25,080 --> 00:16:27,250 Tag tunggal boleh mempunyai banyak sifat-sifat. 395 00:16:27,250 --> 00:16:33,140 Jadi bermula dengan id, mari kita berpura-pura kita ingin mempunyai id daripada- Saya tidak tahu. 396 00:16:33,140 --> 00:16:35,140 Kami akan memanggilnya khas, kerana yang satu ini, kami 397 00:16:35,140 --> 00:16:37,867 akan membuat berani, dan garis bawah, dan apa sahaja. 398 00:16:37,867 --> 00:16:39,950 ALLISON BUCHHOLTZ-AU: Ia gonna super khas. 399 00:16:39,950 --> 00:16:42,360 TOMAS REIMERS: Jadi ini satu, kita mempunyai id khas. 400 00:16:42,360 --> 00:16:48,140 Jadi cara untuk memilih itu, maka, adalah dalam main.css, bukannya mempunyai p tag, 401 00:16:48,140 --> 00:16:51,500 anda lakukan #special, OK? 402 00:16:51,500 --> 00:16:55,538 Dan bahawa memilih yang perkara dengan id khas. 403 00:16:55,538 --> 00:16:57,295 Adakah ini masuk akal untuk semua orang? 404 00:16:57,295 --> 00:16:57,920 PENONTON: Yeah. 405 00:16:57,920 --> 00:16:59,110 TOMAS REIMERS: Cool. 406 00:16:59,110 --> 00:17:04,440 Oleh sebab itu jika kita kembali, kami akan see-- Alamak. 407 00:17:04,440 --> 00:17:06,240 Yeah. 408 00:17:06,240 --> 00:17:09,460 Kita akan melihat bahawa ia hanya pilihan pelanggan satu dengan id khas. 409 00:17:09,460 --> 00:17:10,622 Yeah? 410 00:17:10,622 --> 00:17:11,900 Bunyi sejuk. 411 00:17:11,900 --> 00:17:12,570 Ya. 412 00:17:12,570 --> 00:17:15,456 >> PENONTON: Bolehkah sesuatu yang mempunyai sifat kedua-dua kelas dan id? 413 00:17:15,456 --> 00:17:16,359 >> TOMAS REIMERS: Ya. 414 00:17:16,359 --> 00:17:16,900 PENONTON: OK. 415 00:17:16,900 --> 00:17:20,887 Kemudian apa yang berlaku jika anda kemudian memberikan ia beberapa peraturan dalam CSS konflik itu? 416 00:17:20,887 --> 00:17:21,970 TOMAS REIMERS: Boleh. 417 00:17:21,970 --> 00:17:23,940 Kami pasti akan untuk bercakap tentang itu. 418 00:17:23,940 --> 00:17:31,890 Jadi apa yang anda telah mendapat di, anda juga boleh mempunyai kelas. 419 00:17:31,890 --> 00:17:36,380 Jadi mari kita berpura-pura saya tiga perenggan dan saya 420 00:17:36,380 --> 00:17:38,730 mahu gaya pertama dua orang tetapi tidak ketiga. 421 00:17:38,730 --> 00:17:42,850 Nah, idea pertama anda mungkin, baik, saya hanya boleh memberikan satu kedua id. 422 00:17:42,850 --> 00:17:45,590 Tetapi anda tidak boleh, kerana id, sama seperti Allison telah berkata, 423 00:17:45,590 --> 00:17:47,330 perlu menjadi unik. 424 00:17:47,330 --> 00:17:50,860 >> Jadi, daripada id, apa yang anda boleh digunakan ialah anda boleh menggunakan kelas. 425 00:17:50,860 --> 00:17:57,880 Dan class-- yang apa yang ia membolehkan anda lakukan adalah pada dasarnya berkata, 426 00:17:57,880 --> 00:17:59,610 ini adalah milik sebagai sebahagian daripada kumpulan. 427 00:17:59,610 --> 00:18:02,410 Dalam kes ini, kumpulan kami dipanggil Khas. 428 00:18:02,410 --> 00:18:06,500 Dan apa yang kita akan lakukan kemudian adalah kita akan say-- bukannya paun, 429 00:18:06,500 --> 00:18:08,070 kita akan menggunakan titik. 430 00:18:08,070 --> 00:18:08,740 OK? 431 00:18:08,740 --> 00:18:11,950 Dan perhatikan bahawa pound dan dot hanya wujud dalam fail CSS, 432 00:18:11,950 --> 00:18:12,797 tidak dalam HTML. 433 00:18:12,797 --> 00:18:13,880 ALLISON BUCHHOLTZ-AU: Ya. 434 00:18:13,880 --> 00:18:15,185 Perbezaan penting. 435 00:18:15,185 --> 00:18:17,510 >> TOMAS REIMERS: Saya mempunyai begitu banyak perjuangan, 436 00:18:17,510 --> 00:18:23,990 kerana saya meletakkan hash dalam HTML dan kemudian hanya berasa bodoh untuk masa yang lama. 437 00:18:23,990 --> 00:18:27,470 Lihat bagaimana ia memilih kedua-dua orang-orang dengan golongan itu? 438 00:18:27,470 --> 00:18:28,210 Cool. 439 00:18:28,210 --> 00:18:29,950 >> Sekarang, perkara yang boleh mempunyai pelbagai kelas. 440 00:18:29,950 --> 00:18:32,790 Katakan saya mahu membuat pertama dua mempunyai latar belakang kuning 441 00:18:32,790 --> 00:18:36,770 dan dua yang kedua mempunyai warna font biru. 442 00:18:36,770 --> 00:18:37,270 OK. 443 00:18:37,270 --> 00:18:39,735 Saya tidak benar-benar tahu mengapa Saya akan ingin melakukannya, tetapi saya boleh. 444 00:18:39,735 --> 00:18:42,401 >> ALLISON BUCHHOLTZ-AU: Mungkin tidak disyorkan untuk laman web anda. 445 00:18:42,401 --> 00:18:43,880 Tetapi untuk tujuan kita, ia akan lakukan. 446 00:18:43,880 --> 00:18:46,294 >> TOMAS REIMERS: Ini bukan skim warna yang baik. 447 00:18:46,294 --> 00:18:49,210 ALLISON BUCHHOLTZ-AU: Nah, kuning dan biru adalah warna sekolah tinggi saya. 448 00:18:49,210 --> 00:18:50,947 Saya tidak tahu, walaupun. 449 00:18:50,947 --> 00:18:53,530 TOMAS REIMERS: Allison yang tinggi sekolah mempunyai skim warna yang hebat. 450 00:18:53,530 --> 00:18:54,520 [Ketawa] 451 00:18:54,520 --> 00:18:59,120 Sebab itu apa yang kita boleh memanggil ini adalah Mari kita memanggil this-- jadi kami mempunyai Khas 452 00:18:59,120 --> 00:19:00,030 dan kami mempunyai Pretty. 453 00:19:00,030 --> 00:19:02,405 Saya cadangkan, untuk ini, anda menggunakan nama-nama yang lebih deskriptif. 454 00:19:02,405 --> 00:19:05,820 ALLISON BUCHHOLTZ-AU: Ya, saya akan panggilan ini, seperti, kuning atau biru. 455 00:19:05,820 --> 00:19:08,314 >> TOMAS REIMERS: Kami tidak benar-benar membuat sebuah laman web sebenar, 456 00:19:08,314 --> 00:19:09,730 itulah sebabnya kami tidak melakukannya. 457 00:19:09,730 --> 00:19:11,521 Tetapi jika anda benar-benar mempunyai laman web sebenar, anda 458 00:19:11,521 --> 00:19:16,220 mungkin mempunyai, seperti, tajuk artikel, kandungan artikel, perkataan pertama, 459 00:19:16,220 --> 00:19:21,920 perkara-perkara seperti itu, yang membenarkan anda untuk menjadi lebih deskriptif. 460 00:19:21,920 --> 00:19:23,550 Ini adalah benar-benar sama seperti pemboleh ubah. 461 00:19:23,550 --> 00:19:28,390 Mereka patut dinamakan dengan cara di mana anda boleh, like-- yeah, seperti. 462 00:19:28,390 --> 00:19:29,470 Perfect. 463 00:19:29,470 --> 00:19:30,480 >> Jadi warna latar belakang. 464 00:19:30,480 --> 00:19:35,920 Dan kemudian kita akan say-- jadi cara untuk menukar warna adalah hanya "warna." 465 00:19:35,920 --> 00:19:38,412 Dan kita akan membuat ia biru. 466 00:19:38,412 --> 00:19:40,150 Itu sejuk. 467 00:19:40,150 --> 00:19:42,640 Jadi sekarang kita mempunyai dua pertama mempunyai khas. 468 00:19:42,640 --> 00:19:45,972 Seterusnya yang akan mempunyai "class = cantik." 469 00:19:45,972 --> 00:19:49,180 ALLISON BUCHHOLTZ-AU: Dan kemudian anda akan ingin menambah "cukup" kepada orang tengah. 470 00:19:49,180 --> 00:19:49,971 TOMAS REIMERS: Yup. 471 00:19:49,971 --> 00:19:52,970 Dan kemudian dengan yang tengah, menambah "cukup," apa yang berlaku 472 00:19:52,970 --> 00:19:56,880 adalah anda hanya perlu ruang. 473 00:19:56,880 --> 00:19:59,800 Jadi sifat kelas adalah senarai terpisah ruang 474 00:19:59,800 --> 00:20:02,450 semua kelas yang berkenaan dengan tag itu. 475 00:20:02,450 --> 00:20:02,959 OK? 476 00:20:02,959 --> 00:20:05,750 Ia bukan seperti ini kepunyaan beberapa jenis kelas khas yang dipanggil 477 00:20:05,750 --> 00:20:07,180 "Khas, ruang, cukup." 478 00:20:07,180 --> 00:20:10,870 Ia tergolong dalam dua classes-- khas dan cantik. 479 00:20:10,870 --> 00:20:12,492 Ya? 480 00:20:12,492 --> 00:20:14,360 Cool. 481 00:20:14,360 --> 00:20:17,010 >> Dan kemudian jika dilihat pada apa yang berlaku, kami 482 00:20:17,010 --> 00:20:21,850 akan melihat bahawa salah satu yang pertama mempunyai latar belakang kuning, teks hitam. 483 00:20:21,850 --> 00:20:22,450 One-- Kedua 484 00:20:22,450 --> 00:20:26,160 >> ALLISON BUCHHOLTZ-AU: --has berani latar belakang kuning dengan teks biru. 485 00:20:26,160 --> 00:20:29,330 Dan terkini kami hanya mempunyai teks biru yang kita diberikan kepadanya. 486 00:20:29,330 --> 00:20:30,870 >> TOMAS REIMERS: Cool? 487 00:20:30,870 --> 00:20:32,491 Bagaimana pemilih bekerja? 488 00:20:32,491 --> 00:20:32,990 Awesome. 489 00:20:32,990 --> 00:20:34,720 >> ALLISON BUCHHOLTZ-AU: Adakah kita mahu bercakap mengenai konflik yang kini kemudian? 490 00:20:34,720 --> 00:20:35,780 >> TOMAS REIMERS: Jadi yeah. 491 00:20:35,780 --> 00:20:36,310 Sama sekali. 492 00:20:36,310 --> 00:20:38,380 Jadi apa yang berlaku jika anda mempunyai konflik, bukan? 493 00:20:38,380 --> 00:20:44,740 Mari kita berpura-pura yang pertama menubuhkan sesuatu like-- 494 00:20:44,740 --> 00:20:47,240 ALLISON BUCHHOLTZ-AU: Mungkin satu ini menukar latar belakang? 495 00:20:47,240 --> 00:20:48,090 TOMAS REIMERS: Yeah. 496 00:20:48,090 --> 00:20:51,699 Oleh itu, kita akan membuat "cantik" menukar latar belakang untuk salmon. 497 00:20:51,699 --> 00:20:54,740 ALLISON BUCHHOLTZ-AU: Hanya dengan semua warna yang besar hari ini, Tomas. 498 00:20:54,740 --> 00:20:55,573 TOMAS REIMERS: Yeah. 499 00:20:55,573 --> 00:20:58,200 Kerana saya mendapati saya boleh menggunakan salmon sebagai warna sebenar. 500 00:20:58,200 --> 00:21:00,270 Oleh itu, kita hanya akan berbuat demikian. 501 00:21:00,270 --> 00:21:01,770 Saya juga berfikir Sunset adalah warna sebenar. 502 00:21:01,770 --> 00:21:03,103 PENONTON: Sunset adalah warna sebenar? 503 00:21:03,103 --> 00:21:04,572 ALLISON BUCHHOLTZ-AU: Mari kita mencubanya. 504 00:21:04,572 --> 00:21:07,735 TOMAS REIMERS: Selepas demo ini hanya kerana sekiranya ia messes sehingga, 505 00:21:07,735 --> 00:21:08,943 Saya tidak mahu untuk debugging. 506 00:21:08,943 --> 00:21:11,580 Jadi kita tahu salmon adalah warna sebenar. 507 00:21:11,580 --> 00:21:15,626 Jadi mana-mana tekaan pada apa yang akan berlaku? 508 00:21:15,626 --> 00:21:17,522 >> ALLISON BUCHHOLTZ-AU: Apa-apa idea? 509 00:21:17,522 --> 00:21:20,002 >> PENONTON: [didengar]. 510 00:21:20,002 --> 00:21:20,920 >> TOMAS REIMERS: Yeah. 511 00:21:20,920 --> 00:21:22,150 Jadi, anda mendapat ia betul-betul tepat. 512 00:21:22,150 --> 00:21:24,930 Pada asasnya, ia mengambil masa yang peraturan lalu bahawa ia telah diberikan. 513 00:21:24,930 --> 00:21:27,860 >> ALLISON BUCHHOLTZ-AU: Jadi ini adalah mana melata itu berkuat kuasa. 514 00:21:27,860 --> 00:21:31,080 >> TOMAS REIMERS: Jadi ingat bagaimana kita mempunyai yang melata lembaran gaya? 515 00:21:31,080 --> 00:21:33,660 Jadi oleh itu, kita jenis bermakna bahawa kita telah mempunyai banyak peraturan 516 00:21:33,660 --> 00:21:37,115 yang dikenakan di atas satu sama lain, dan mereka juga boleh mengatasi satu sama lain. 517 00:21:37,115 --> 00:21:39,380 >> ALLISON BUCHHOLTZ-AU: Jadi apa sahaja di bahagian bawah 518 00:21:39,380 --> 00:21:41,540 akan mengatasi yang mengikut di bahagian atas. 519 00:21:41,540 --> 00:21:45,842 Anda boleh mempunyai kaedah-kaedah yang benar-benar meniadakan sesuatu terlebih dahulu. 520 00:21:45,842 --> 00:21:48,300 Itulah juga mengapa anda mahu menjadi berhati-hati apabila anda penggayaan, 521 00:21:48,300 --> 00:21:51,465 supaya anda tidak mewujudkan kaedah-kaedah yang anda hanya benar-benar mengatasi. 522 00:21:51,465 --> 00:21:53,340 >> TOMAS REIMERS: Atau mungkin anda adakah anda ingin menulis ganti peraturan. 523 00:21:53,340 --> 00:21:53,920 >> ALLISON BUCHHOLTZ-AU: Atau mungkin anda lakukan. 524 00:21:53,920 --> 00:21:54,300 Ya. 525 00:21:54,300 --> 00:21:57,175 >> TOMAS REIMERS: Berpura-pura anda mempunyai kelas yang terpakai kepada kebanyakan perkara, 526 00:21:57,175 --> 00:22:01,220 tetapi katakan anda hendak menukar warna latar belakang untuk merah dan fon 527 00:22:01,220 --> 00:22:03,140 berat untuk berani untuk paling perkara, tetapi untuk satu, 528 00:22:03,140 --> 00:22:06,098 anda hanya mahu warna latar belakang menjadi merah tetapi anda ingin semua yang lain 529 00:22:06,098 --> 00:22:09,990 hartanah, anda boleh melakukan sesuatu seperti "font-weight = normal," 530 00:22:09,990 --> 00:22:12,760 yang kemudian akan buat asal perubahan berani. 531 00:22:12,760 --> 00:22:14,480 Yeah? 532 00:22:14,480 --> 00:22:17,250 Sekali lagi, cara yang terbaik, saya fikir Allison berkata, hanya amalan. 533 00:22:17,250 --> 00:22:18,080 >> ALLISON BUCHHOLTZ-AU: Eksperimen. 534 00:22:18,080 --> 00:22:20,090 >> TOMAS REIMERS: Amalan, amalan, amalan dan eksperimen. 535 00:22:20,090 --> 00:22:22,950 Saya tahu ramai orang yang berfikir CSS adalah hanya banyak tekaan-dan-cek 536 00:22:22,950 --> 00:22:25,580 pada akhir hari, di mana jika yang anda mahu lakukan something-- seperti, 537 00:22:25,580 --> 00:22:27,663 anda mempunyai idea kasar, tetapi anda masih mungkin perlu 538 00:22:27,663 --> 00:22:31,390 untuk mencubanya memastikan anda tahu apa yang ia kelihatan seperti. 539 00:22:31,390 --> 00:22:34,482 >> PENONTON: Apabila anda memohon kelas, lebih daripada satu 540 00:22:34,482 --> 00:22:37,339 perenggan yang sama atau seksyen, adakah ia 541 00:22:37,339 --> 00:22:39,505 kira apa perintah yang anda boleh menaip mereka ke dalam sebut harga? 542 00:22:39,505 --> 00:22:40,992 >> TOMAS REIMERS: Tidak, tidak sama sekali. 543 00:22:40,992 --> 00:22:45,764 >> ALLISON BUCHHOLTZ-AU: Apa yang penting ialah perintah itu dalam lembaran gaya CSS anda. 544 00:22:45,764 --> 00:22:47,430 PENONTON: Bolehkah anda mengulangi soalan? 545 00:22:47,430 --> 00:22:50,680 TOMAS REIMERS: Oh. 546 00:22:50,680 --> 00:22:53,990 ALLISON BUCHHOLTZ-AU: Dalam kelas, apabila anda memberikan kelas 547 00:22:53,990 --> 00:22:56,964 untuk sesuatu dalam HTML, adakah itu perkara yang mereka perintah dalam? 548 00:22:56,964 --> 00:22:58,130 Tidak kira perintah itu. 549 00:22:58,130 --> 00:23:02,915 Apa yang penting ialah perintah pemilih dalam kelas CSS anda, 550 00:23:02,915 --> 00:23:04,306 dalam lembaran gaya anda. 551 00:23:04,306 --> 00:23:06,982 >> TOMAS REIMERS: Bunyi yang baik? 552 00:23:06,982 --> 00:23:08,532 >> ALLISON BUCHHOLTZ-AU: Lovely. 553 00:23:08,532 --> 00:23:11,539 >> TOMAS REIMERS: Kemudian kita akan terus supaya- 554 00:23:11,539 --> 00:23:13,330 ALLISON BUCHHOLTZ-AU: Apa yang kita ada akan datang? 555 00:23:13,330 --> 00:23:14,245 Saya terlupa. 556 00:23:14,245 --> 00:23:16,087 Oh, kita hanya perlu contoh. 557 00:23:16,087 --> 00:23:17,295 Tetapi kita telah sejenis dilakukan mereka. 558 00:23:17,295 --> 00:23:18,990 Kami telah melakukan contoh dengan cepat. 559 00:23:18,990 --> 00:23:20,540 >> TOMAS REIMERS: Kami dapat menggabungkan pemilih tidak lama lagi. 560 00:23:20,540 --> 00:23:22,790 >> ALLISON BUCHHOLTZ-AU: Oh, kita akan mendapat untuk menggabungkan pemilih. 561 00:23:22,790 --> 00:23:25,260 TOMAS REIMERS: Jadi beberapa contoh adalah kita mempunyai 562 00:23:25,260 --> 00:23:29,630 # Paun dog--, atau hashtag, atau octothorpe, atau apa sahaja 563 00:23:29,630 --> 00:23:32,050 anda mahu panggil bahawa- tajam. 564 00:23:32,050 --> 00:23:34,875 >> ALLISON BUCHHOLTZ-AU: anjing Sharp. 565 00:23:34,875 --> 00:23:36,470 >> TOMAS REIMERS: Kemudian anda mempunyai .pets. 566 00:23:36,470 --> 00:23:39,059 567 00:23:39,059 --> 00:23:41,600 Sesuatu yang mempunyai id anjing, terdapat hanya satu anjing pada halaman. 568 00:23:41,600 --> 00:23:43,870 Sesuatu yang mempunyai id kucing, terdapat hanya satu kucing. 569 00:23:43,870 --> 00:23:45,665 Mungkin terdapat banyak haiwan peliharaan di halaman. 570 00:23:45,665 --> 00:23:47,570 Itulah sebabnya kita memberikan yang kelas. 571 00:23:47,570 --> 00:23:48,740 Anda mempunyai satu contoh p. 572 00:23:48,740 --> 00:23:50,490 Dan kemudian jadi salah satu Contoh terakhir, yang 573 00:23:50,490 --> 00:23:53,790 adalah sesuatu yang kita tidak bercakap mengenai, adalah apa yang berlaku apabila anda menggabungkan mereka. 574 00:23:53,790 --> 00:23:54,580 Jadi p.pets. 575 00:23:54,580 --> 00:23:57,510 576 00:23:57,510 --> 00:24:02,950 >> Jadi untuk itu, mari kita kembali kepada kod dan memperkenalkan another-- yeah. 577 00:24:02,950 --> 00:24:04,290 Jadi kembali ke sini. 578 00:24:04,290 --> 00:24:04,850 >> ALLISON BUCHHOLTZ-AU Saya berasa seperti ini adalah really-- 579 00:24:04,850 --> 00:24:08,105 seperti hanya melihat melalui contoh adalah benar-benar cara untuk belajar ini. 580 00:24:08,105 --> 00:24:09,360 Jadi itulah apa yang kita lakukan. 581 00:24:09,360 --> 00:24:14,030 >> TOMAS REIMERS: Jadi mari kita berpura-pura kita hanya mahu untuk memilih teks 2, bukan? 582 00:24:14,030 --> 00:24:16,530 Oleh itu, kita pasti tidak boleh berbuat demikian dengan id. 583 00:24:16,530 --> 00:24:19,620 Nah, kita boleh berbuat demikian dengan id, tetapi ia tidak mempunyai id. 584 00:24:19,620 --> 00:24:22,490 Saya boleh menambah satu, tetapi mari kita berpura-pura bahawa saya tidak mahu menambah satu 585 00:24:22,490 --> 00:24:24,910 atau ia telah mempunyai sesuatu yang lain. 586 00:24:24,910 --> 00:24:26,516 Saya tidak boleh melakukannya dengan itu. 587 00:24:26,516 --> 00:24:28,870 Tag pasti tidak unik, bukan? 588 00:24:28,870 --> 00:24:30,670 Dan tidak adalah kelas. 589 00:24:30,670 --> 00:24:32,314 Tetapi anda boleh menggabungkan perkara-perkara ini. 590 00:24:32,314 --> 00:24:35,230 Katakan kita ingin melakukan sesuatu yang hanya terpakai kepada perkara-perkara yang 591 00:24:35,230 --> 00:24:39,420 mempunyai kelas khas dan yang mempunyai kelas yang cukup. 592 00:24:39,420 --> 00:24:48,150 >> Jadi apa yang boleh anda lakukan adalah dalam main.css, anda boleh berkata, mari kita pertama memadam ini. 593 00:24:48,150 --> 00:24:50,240 Anda boleh menggabungkan ini. 594 00:24:50,240 --> 00:24:51,430 Jadi, anda boleh melakukan .special. 595 00:24:51,430 --> 00:24:52,110 Tiada ruang. 596 00:24:52,110 --> 00:24:54,770 Hanya .special.pretty. 597 00:24:54,770 --> 00:25:00,550 Apa yang bermakna adalah sesuatu yang kedua-dua adalah khas dan cantik. 598 00:25:00,550 --> 00:25:01,900 Adakah ini masuk akal? 599 00:25:01,900 --> 00:25:04,190 Dan jika kita pergi di sini, apa yang anda akan melihat 600 00:25:04,190 --> 00:25:09,734 adalah peraturan ini hanya terpakai kepada Yang kedua, yang mempunyai kedua-dua mereka. 601 00:25:09,734 --> 00:25:11,400 Dan anda boleh melakukannya untuk banyak perkara. 602 00:25:11,400 --> 00:25:13,270 Anda boleh say-- mari kita berpura-pura saya hanya mahu 603 00:25:13,270 --> 00:25:18,300 untuk melakukan perkara-perkara yang mempunyai kelas yang cukup dan yang juga tag perenggan. 604 00:25:18,300 --> 00:25:19,920 Jadi p.pretty. 605 00:25:19,920 --> 00:25:23,585 Mari kita berpura-pura bahawa saya mempunyai sesuatu yang cukup pada badan tag. 606 00:25:23,585 --> 00:25:25,850 OK? 607 00:25:25,850 --> 00:25:28,490 Saya boleh menjalankan ini dan saya dapat melihat bahawa ia hanya 608 00:25:28,490 --> 00:25:32,720 akan memohon kepada perkara-perkara yang perenggan dengan kelas cantik. 609 00:25:32,720 --> 00:25:35,650 Dan anda boleh menggabungkan ini, pada dasarnya, seberapa banyak yang anda mahu. 610 00:25:35,650 --> 00:25:38,580 Jadi anda hanya boleh meletakkan mereka bersama-sama. 611 00:25:38,580 --> 00:25:39,604 Adakah ini masuk akal? 612 00:25:39,604 --> 00:25:41,770 ALLISON BUCHHOLTZ-AU: Jadi ini jenis adalah lebih berguna 613 00:25:41,770 --> 00:25:45,490 apabila, Tomas katakan sebelum ini, mungkin anda mempunyai laman web yang rumit, 614 00:25:45,490 --> 00:25:48,050 dan anda sudah mempunyai banyak peraturan-peraturan ini ditulis, 615 00:25:48,050 --> 00:25:51,170 dan anda hanya perlu menggabungkan dua dari sebelum. 616 00:25:51,170 --> 00:25:55,350 Seperti bukannya menulis keseluruhan pemilih baru dan berubah-ubah di sana, 617 00:25:55,350 --> 00:25:58,592 anda hanya boleh menggabungkan mereka di mana ia bertindih. 618 00:25:58,592 --> 00:26:00,670 >> TOMAS REIMERS: Atau anda mungkin mendapati out-- kadang-kadang 619 00:26:00,670 --> 00:26:04,290 ada satu kelas yang membuat warna fon ini seperti biru, 620 00:26:04,290 --> 00:26:06,740 dan ada kelas lain yang membuat biru latar belakang. 621 00:26:06,740 --> 00:26:07,840 Dan yang hanya tidak akan berfungsi. 622 00:26:07,840 --> 00:26:10,924 Jadi anda menulis kes khas, di mana, like-- tetapi jika ia mempunyai kedua-dua, apa yang anda 623 00:26:10,924 --> 00:26:13,548 akan lakukan ialah anda akan membuat satu ini teduh ini biru 624 00:26:13,548 --> 00:26:15,310 dan satu ini teduh ini lain biru. 625 00:26:15,310 --> 00:26:15,580 Betul? 626 00:26:15,580 --> 00:26:17,955 >> ALLISON BUCHHOLTZ-AU: Baik untuk orang-orang jenis pengecualian. 627 00:26:17,955 --> 00:26:21,220 TOMAS REIMERS: Jadi untuk berfikir tentang masalah 628 00:26:21,220 --> 00:26:25,000 yang mungkin timbul apabila anda menggabungkan mereka. 629 00:26:25,000 --> 00:26:27,020 Cool. 630 00:26:27,020 --> 00:26:29,692 Jadi kembali kepada persembahan kami. 631 00:26:29,692 --> 00:26:31,400 ALLISON BUCHHOLTZ-AU: Kami hampir di sana. 632 00:26:31,400 --> 00:26:34,022 TOMAS REIMERS: Dan ia telah berhenti menyambungkan. 633 00:26:34,022 --> 00:26:36,494 ALLISON BUCHHOLTZ-AU: Oh, tidak. 634 00:26:36,494 --> 00:26:39,125 ALLISON BUCHHOLTZ-AU: CS di pejabat, internet terbenam. 635 00:26:39,125 --> 00:26:40,360 Oh, ironi. 636 00:26:40,360 --> 00:26:45,620 >> TOMAS REIMERS: Jadi nasib baik, kita boleh membentangkan tanpa internet, saya rasa, 637 00:26:45,620 --> 00:26:47,380 kerana kita mempunyai semua slaid di sini. 638 00:26:47,380 --> 00:26:49,304 Jadi mari kita bercakap tentang hubungan tag. 639 00:26:49,304 --> 00:26:50,470 ALLISON BUCHHOLTZ-AU: Betul. 640 00:26:50,470 --> 00:26:52,660 Jadi, seperti hendak pergi kira apa Tomas berkata, 641 00:26:52,660 --> 00:26:54,180 ini adalah salah satu cara untuk melakukannya. 642 00:26:54,180 --> 00:26:57,840 Oleh itu, kita mempunyai beberapa ibu bapa pemilih dengan pemilih anak. 643 00:26:57,840 --> 00:27:02,815 Jadi dalam contoh ini di sini, kami mempunyai beberapa badan dengan navbar kelas, butang kelas. 644 00:27:02,815 --> 00:27:03,315 Ah. 645 00:27:03,315 --> 00:27:03,990 >> TOMAS REIMERS: Oh, maaf. 646 00:27:03,990 --> 00:27:06,180 >> ALLISON BUCHHOLTZ-AU: Dan pada dasarnya, apa ini bermakna 647 00:27:06,180 --> 00:27:11,070 adalah memilih semua anak-anak, seperti semua ini macam pemilih, 648 00:27:11,070 --> 00:27:13,040 dalam pemilih induk ini. 649 00:27:13,040 --> 00:27:16,004 Dan mereka adalah orang-orang sahaja ia pernah akan memohon untuk. 650 00:27:16,004 --> 00:27:17,755 Saya tidak tahu jika anda mempunyai cara yang lebih baik daripada- 651 00:27:17,755 --> 00:27:19,504 TOMAS REIMERS: Jadi saya meneka cara untuk berfikir 652 00:27:19,504 --> 00:27:22,440 kira-kira ini adalah ingat bagaimana sebelum kita jenis suka meletakkan mereka bersama-sama. 653 00:27:22,440 --> 00:27:26,340 Dan kemudian itu bererti satu unsur yang perlawanan semua ini. 654 00:27:26,340 --> 00:27:29,530 Apa ini mengatakan, saya mahu anda untuk dipadankan dengan semua 655 00:27:29,530 --> 00:27:33,220 dalam some-- saya mahu anda untuk mencari pemilih yang. 656 00:27:33,220 --> 00:27:35,670 Dan kemudian dalam masa itu, saya ingin anda untuk dipadankan dengan perkara-perkara baru. 657 00:27:35,670 --> 00:27:36,170 Betul? 658 00:27:36,170 --> 00:27:40,900 Jadi dalam CSS, itu semua tentang jenis dapat sepadan dengan barang-barang ini. 659 00:27:40,900 --> 00:27:43,050 Dan anda boleh cuba untuk dipadankan item dalam barang-barang lain. 660 00:27:43,050 --> 00:27:46,510 >> Jadi mari kita benar-benar melakukan contoh, dan kita berfikir bahawa akan menjelaskan. 661 00:27:46,510 --> 00:27:53,090 Jadi mari kita berpura-pura kita mempunyai khas, khas cantik, apa sahaja. 662 00:27:53,090 --> 00:27:55,690 Dan kemudian kita mempunyai pautan, OK? 663 00:27:55,690 --> 00:27:59,780 664 00:27:59,780 --> 00:28:02,370 Jadi ingat, satu pautan. 665 00:28:02,370 --> 00:28:03,900 Ia tidak akan ke mana-mana. 666 00:28:03,900 --> 00:28:11,500 Dan kita akan memberikan pautan kelas, saya rasa. 667 00:28:11,500 --> 00:28:13,335 Mari kita memberikan yang class-- memberikan saya idea. 668 00:28:13,335 --> 00:28:14,460 ALLISON BUCHHOLTZ-AU: Cool. 669 00:28:14,460 --> 00:28:16,420 TOMAS REIMERS: Coo-- mari kita ia pergi kelas cantik. 670 00:28:16,420 --> 00:28:16,930 Mengapa tidak? 671 00:28:16,930 --> 00:28:17,971 >> ALLISON BUCHHOLTZ-AU: OK. 672 00:28:17,971 --> 00:28:23,040 TOMAS REIMERS: Jadi perkara yang sekarang cukup 673 00:28:23,040 --> 00:28:26,000 akan membuat latar belakang biru, warna latar belakang salmon. 674 00:28:26,000 --> 00:28:27,969 Yang masuk akal. 675 00:28:27,969 --> 00:28:28,760 Dan jika kita lakukan this-- 676 00:28:28,760 --> 00:28:29,620 >> ALLISON BUCHHOLTZ-AU: Adakah anda mahu menambah teks 677 00:28:29,620 --> 00:28:31,078 jadi hyperlink sebenarnya muncul? 678 00:28:31,078 --> 00:28:35,088 TOMAS REIMERS: Itu akan menjadi panggilan yang baik. 679 00:28:35,088 --> 00:28:37,921 ALLISON BUCHHOLTZ-AU: 'Punca hak kini kami hanya gonna mendapatkan apa-apa. 680 00:28:37,921 --> 00:28:39,690 TOMAS REIMERS: Jadi ini adalah pautan. 681 00:28:39,690 --> 00:28:42,202 "Ini adalah pautan." 682 00:28:42,202 --> 00:28:45,820 Oh, dan ini akan menjadi pautan lain. 683 00:28:45,820 --> 00:28:47,280 Mari kita memberikan kelas "sejuk." 684 00:28:47,280 --> 00:28:50,295 Anda betul. 685 00:28:50,295 --> 00:28:50,795 Cool. 686 00:28:50,795 --> 00:28:53,590 687 00:28:53,590 --> 00:28:56,010 Jadi sekarang kita akan merebut ini. 688 00:28:56,010 --> 00:28:57,269 Kita akan membuang satu. 689 00:28:57,269 --> 00:28:59,060 Kami ada satu di tag khas, dan kita juga 690 00:28:59,060 --> 00:29:01,150 akan mempunyai satu di tag cantik. 691 00:29:01,150 --> 00:29:05,449 Dan sekarang apa yang kita akan lakukan ialah kita akan membuat cool-- 692 00:29:05,449 --> 00:29:06,490 apa yang kita mahu ia lakukan? 693 00:29:06,490 --> 00:29:10,347 694 00:29:10,347 --> 00:29:12,180 ALLISON BUCHHOLTZ-AU: Bolehkah kita membuat ia lebih besar? 695 00:29:12,180 --> 00:29:13,800 TOMAS REIMERS: Mari kita memberikan sempadan. 696 00:29:13,800 --> 00:29:14,840 ALLISON BUCHHOLTZ-AU: Kita boleh sempadan. 697 00:29:14,840 --> 00:29:15,673 TOMAS REIMERS: Yeah. 698 00:29:15,673 --> 00:29:18,560 Jadi, kita akan melakukan sesuatu seperti, sempadan is-- dan kami 699 00:29:18,560 --> 00:29:20,971 akan menjelaskan semua ini dalam satu saat. 700 00:29:20,971 --> 00:29:21,470 Untuk now-- 701 00:29:21,470 --> 00:29:24,592 >> ALLISON BUCHHOLTZ-AU: Untuk model kotak. 702 00:29:24,592 --> 00:29:27,300 TOMAS REIMERS: Tetapi buat masa ini, kami hanya akan memberikan sempadan. 703 00:29:27,300 --> 00:29:29,580 Jadi apa itu artinya anda akan melihat pautan ini. 704 00:29:29,580 --> 00:29:32,788 Dan anda akan melihat bahawa mereka mempunyai ini, seperti, sempadan hitam hodoh, yang 705 00:29:32,788 --> 00:29:33,820 sejuk. 706 00:29:33,820 --> 00:29:34,500 >> ALLISON BUCHHOLTZ-AU: Laman web kami begitu cantik. 707 00:29:34,500 --> 00:29:35,333 >> TOMAS REIMERS: Yeah. 708 00:29:35,333 --> 00:29:38,930 Laman web kami adalah hebat. 709 00:29:38,930 --> 00:29:41,585 Jadi kedua-dua adalah pautan, dan mereka muncul. 710 00:29:41,585 --> 00:29:44,160 Sekarang mari kita berpura-pura saya hanya mahu melakukan ini 711 00:29:44,160 --> 00:29:50,072 jika ia tidak berada di dalam sesuatu yang mempunyai latar belakang salmon. 712 00:29:50,072 --> 00:29:52,280 Jadi ingat bahawa satu ini mempunyai latar belakang salmon, 713 00:29:52,280 --> 00:29:54,000 kerana ia adalah kelas cantik. 714 00:29:54,000 --> 00:29:59,777 >> Tetapi kita mahu mengatakan bahawa hanya menyejukkan yang berada di dalam kelas khas, tidak di dalam kelas 715 00:29:59,777 --> 00:30:02,890 cantik, perlu ada sempadan itu. 716 00:30:02,890 --> 00:30:12,549 Well, apa yang boleh anda lakukan adalah anda boleh berkata, .special, ruang, .cool. 717 00:30:12,549 --> 00:30:15,590 Dan apa yang lakukan, apabila anda berfikir mengenainya, adalah ia pada dasarnya berkata, 718 00:30:15,590 --> 00:30:19,530 OK, saya mendapati semua yang sepadan khas. 719 00:30:19,530 --> 00:30:24,104 Kemudian dalam tag tersebut, cari kepadaku segala sesuatu yang sejuk. 720 00:30:24,104 --> 00:30:27,270 ALLISON BUCHHOLTZ-AU: Jadi cara lain yang mungkin baik untuk berfikir tentang perkara ini, 721 00:30:27,270 --> 00:30:29,810 membawanya kembali ke C, adalah seperti idea skop. 722 00:30:29,810 --> 00:30:34,020 Oleh itu, apabila anda mempunyai beberapa pemilih, seperti yang 723 00:30:34,020 --> 00:30:38,460 bahawa kita telah bekerja untuk sebelum ini, Laman web keseluruhan anda, semua HTML anda 724 00:30:38,460 --> 00:30:40,180 adalah dalam skop anda, bukan? 725 00:30:40,180 --> 00:30:43,090 Tetapi apabila kita mempunyai ini hubungan ibu bapa dan anak, 726 00:30:43,090 --> 00:30:47,130 ia seolah-olah anda menyempitkan mana anda sedang mencari untuk tempat tertentu, 727 00:30:47,130 --> 00:30:50,540 seolah-olah, seperti, kita cari dalam fungsi tertentu dan bukannya 728 00:30:50,540 --> 00:30:52,007 keseluruhan fail kami. 729 00:30:52,007 --> 00:30:55,090 PENONTON: Maka dengan itu dalam fikiran, akan ia telah mattered jika kita mempunyai changed-- 730 00:30:55,090 --> 00:30:56,423 ALLISON BUCHHOLTZ-AU: Perintah itu? 731 00:30:56,423 --> 00:30:59,320 PENONTON: Kelas --the dalam CSS untuk .cool, ruang, .special? 732 00:30:59,320 --> 00:31:01,153 ALLISON BUCHHOLTZ-AU: Ya, kerana itu yang 733 00:31:01,153 --> 00:31:04,420 akan berkata, skop kepada semua yang mempunyai sejuk, 734 00:31:04,420 --> 00:31:07,235 dan kemudian melihat apa yang has-- Maksud saya, seperti, dalam kes ini, 735 00:31:07,235 --> 00:31:08,860 Saya tidak fikir ia akan menukarnya. 736 00:31:08,860 --> 00:31:10,318 >> TOMAS REIMERS: Jika kita telah berkata apa? 737 00:31:10,318 --> 00:31:10,906 Maaf. 738 00:31:10,906 --> 00:31:12,660 >> ALLISON BUCHHOLTZ-AU: Jika kita skop ia sejuk dan kemudian 739 00:31:12,660 --> 00:31:14,550 mencari sesuatu daripada khas, ia akan menjadi yang sama, sebenarnya. 740 00:31:14,550 --> 00:31:16,260 >> TOMAS REIMERS: Jadi ia tidak akan menjadi. 741 00:31:16,260 --> 00:31:16,590 >> ALLISON BUCHHOLTZ-AU: Ia tidak akan? 742 00:31:16,590 --> 00:31:17,590 Oh, oh baik. 743 00:31:17,590 --> 00:31:18,090 Saya salah. 744 00:31:18,090 --> 00:31:21,480 >> TOMAS REIMERS: Jadi sebab itu itu different-- mistake-- biasa 745 00:31:21,480 --> 00:31:27,140 adalah bahawa sekarang hanya pautan yang mempunyai sejuk, kan? 746 00:31:27,140 --> 00:31:32,176 Saya rasa soalan saya kepada anda semua adalah, apa yang di halaman ini dipadankan dengan .cool? 747 00:31:32,176 --> 00:31:35,984 748 00:31:35,984 --> 00:31:38,340 Ada dua tanda di sini, bukan? 749 00:31:38,340 --> 00:31:39,770 Yang merupakan salah satu ini dan ini. 750 00:31:39,770 --> 00:31:40,590 Kedua-dua sepadan sejuk. 751 00:31:40,590 --> 00:31:42,200 Tiada apa-apa lain tidak. 752 00:31:42,200 --> 00:31:46,460 Jadi, jika anda berkata, .cool, ruang, .special, apa yang anda akan katakan adalah, 753 00:31:46,460 --> 00:31:48,824 dalam tag, apa yang istimewa? 754 00:31:48,824 --> 00:31:49,865 ALLISON BUCHHOLTZ-AU: Hm. 755 00:31:49,865 --> 00:31:51,800 Itulah yang it-- betul. 756 00:31:51,800 --> 00:31:52,310 Kerana ia seperti sesuatu yang hanya di sini. 757 00:31:52,310 --> 00:31:53,310 >> TOMAS REIMERS: Jadi ia memilih apa-apa. 758 00:31:53,310 --> 00:31:56,530 >> ALLISON BUCHHOLTZ-AU: Manakala dengan khas, kami dalam tag di sini. 759 00:31:56,530 --> 00:31:57,971 >> TOMAS REIMERS: Mereka dan orang-orang. 760 00:31:57,971 --> 00:31:58,512 PENONTON: OK. 761 00:31:58,512 --> 00:31:58,920 Maka orang-orang tag dari hadapan slash? 762 00:31:58,920 --> 00:31:59,740 >> TOMAS REIMERS: Ya. 763 00:31:59,740 --> 00:32:01,150 Adakah ini masuk akal? 764 00:32:01,150 --> 00:32:03,685 Bagaimana ia pada dasarnya cuba untuk menyempitkan skop. 765 00:32:03,685 --> 00:32:04,810 ALLISON BUCHHOLTZ-AU: Yeah. 766 00:32:04,810 --> 00:32:06,870 Saya rasa itulah mungkin yang cara paling mudah untuk berfikir mengenainya. 767 00:32:06,870 --> 00:32:09,270 >> TOMAS REIMERS: Oleh itu, kita dapati ini, dan kami mendapati kedua-dua ini dipadankan khas. 768 00:32:09,270 --> 00:32:11,400 Kemudian kami bertanya, dalam lelaki-lelaki ini, apa yang sejuk? 769 00:32:11,400 --> 00:32:12,941 Dan dalam satu ini, sejuk ini seseorang. 770 00:32:12,941 --> 00:32:14,500 Dalam masa satu ini, tiada apa yang sejuk. 771 00:32:14,500 --> 00:32:16,250 Jadi ini adalah satu-satunya tanda yang kekal. 772 00:32:16,250 --> 00:32:20,112 >> ALLISON BUCHHOLTZ-AU: Manakala sejuk hanya dalam masa ini yang ada tag. 773 00:32:20,112 --> 00:32:21,070 TOMAS REIMERS: Tepat. 774 00:32:21,070 --> 00:32:22,403 Dan apa yang khusus di dalam orang-orang? 775 00:32:22,403 --> 00:32:22,930 Tiada apa-apa. 776 00:32:22,930 --> 00:32:25,270 Kini, apa yang saya akan katakan adalah jika tidak ada ruang, 777 00:32:25,270 --> 00:32:29,880 anda bertanya apa yang keren dan special-- atau apa yang cantik dan istimewa, bukan? 778 00:32:29,880 --> 00:32:35,370 Jika anda mengatakan .special.pretty, itu yang sama seperti .pretty.special. 779 00:32:35,370 --> 00:32:39,220 >> Oleh kerana apa yang menghapuskan ruang adalah bertanya adalah, apabila anda mengatakan .special, 780 00:32:39,220 --> 00:32:40,970 anda bertanya, OK, mana yang khas? 781 00:32:40,970 --> 00:32:43,780 Kemudian orang-orang yang yang juga cantik, 782 00:32:43,780 --> 00:32:47,010 yang adalah sama, tatabahasa, seperti yang diminta, apa yang cukup, 783 00:32:47,010 --> 00:32:49,500 dan kemudian daripada mereka, apa yang juga khas? 784 00:32:49,500 --> 00:32:50,000 Betul? 785 00:32:50,000 --> 00:32:53,099 Ia adalah perbezaan apa yang di dalam apa yang. 786 00:32:53,099 --> 00:32:53,640 PENONTON: OK. 787 00:32:53,640 --> 00:32:54,473 TOMAS REIMERS: Yeah. 788 00:32:54,473 --> 00:32:56,670 789 00:32:56,670 --> 00:32:58,030 Awesome. 790 00:32:58,030 --> 00:33:00,426 Maka dengan itu dalam fikiran then-- 791 00:33:00,426 --> 00:33:01,800 >> ALLISON BUCHHOLTZ-AU: Saya rasa lepas kami perkara yang (IN FANCY BRITISH ACCENT) 792 00:33:01,800 --> 00:33:02,510 model kotak. 793 00:33:02,510 --> 00:33:05,992 >> TOMAS REIMERS: The box-- [tertawa kecil] Saya suka cara Allison mengatakan bahawa. 794 00:33:05,992 --> 00:33:06,950 Jadi perkara kotak model. 795 00:33:06,950 --> 00:33:09,644 >> ALLISON BUCHHOLTZ-AU: Hanya mempunyai kotak, saya akan menjadi model kotak anda. 796 00:33:09,644 --> 00:33:11,310 TOMAS REIMERS: Jadi mari kita bercakap tentang itu. 797 00:33:11,310 --> 00:33:14,070 Jadi sekarang kita telah menghabiskan banyak masa bercakap tentang pemilih. 798 00:33:14,070 --> 00:33:16,944 Pada masa ini, anda semua mungkin, seperti, tuan selectors-- anda tahu, 799 00:33:16,944 --> 00:33:21,510 bagaimana untuk betul-betul pilih kandungan yang anda ingin memanipulasi pada skrin anda. 800 00:33:21,510 --> 00:33:24,740 >> Jadi sekarang persoalannya ialah, bagaimana sebenarnya anda boleh memanipulasi ia? 801 00:33:24,740 --> 00:33:27,010 Jadi saya rasa yang paling asas cara untuk berfikir tentang itu 802 00:33:27,010 --> 00:33:30,294 adalah, baik, apa yang betul-betul adalah satu elemen dalam CSS? 803 00:33:30,294 --> 00:33:32,585 Kami telah menghabiskan banyak masa bercakap tentang, apakah tanda nama, 804 00:33:32,585 --> 00:33:36,140 atau apa yang paling asas perwakilan tag? 805 00:33:36,140 --> 00:33:39,870 806 00:33:39,870 --> 00:33:45,170 >> Cara yang baik untuk berfikir tentang iaitu, apa bentuk adalah salmon? 807 00:33:45,170 --> 00:33:47,295 Apa bentuk adalah, seperti, yang salmon berwarna latar belakang? 808 00:33:47,295 --> 00:33:47,880 >> PENONTON: Ia adalah segi empat tepat. 809 00:33:47,880 --> 00:33:49,040 >> TOMAS REIMERS: Ia adalah segi empat tepat, bukan? 810 00:33:49,040 --> 00:33:50,956 >> ALLISON BUCHHOLTZ-AU: Bukan persoalan helah. 811 00:33:50,956 --> 00:33:51,870 [Ketawa] 812 00:33:51,870 --> 00:33:54,670 >> TOMAS REIMERS: Tidak cuba untuk menipu anda semua ini lewat. 813 00:33:54,670 --> 00:33:57,510 Oleh itu, kita mempunyai segi empat tepat ini. 814 00:33:57,510 --> 00:33:59,140 Dan tag adalah p, kan? 815 00:33:59,140 --> 00:34:02,280 Supaya memberikan kita baik kepercayaan bahawa perenggan 816 00:34:02,280 --> 00:34:07,440 diwakili sebagai segi empat tepat, di kurangnya dalam fikiran penyemak imbas, yang 817 00:34:07,440 --> 00:34:08,715 ia adalah. 818 00:34:08,715 --> 00:34:11,423 >> ALLISON BUCHHOLTZ-AU: Maksud saya, pelayar biasanya segi empat tepat, 819 00:34:11,423 --> 00:34:13,440 jadi ia masuk akal. 820 00:34:13,440 --> 00:34:18,750 >> TOMAS REIMERS: Idea di sini adalah bahawa semua tag dalam CSS 821 00:34:18,750 --> 00:34:21,790 adalah seperti segi empat tepat. 822 00:34:21,790 --> 00:34:25,699 Dan setiap segi empat tepat mempunyai empat bahagian mengikut CSS, OK? 823 00:34:25,699 --> 00:34:27,830 Anda mempunyai kandungan yang sebenar. 824 00:34:27,830 --> 00:34:29,644 Itulah di mana teks yang terletak. 825 00:34:29,644 --> 00:34:30,470 >> ALLISON BUCHHOLTZ-AU: Mungkin gambar anda. 826 00:34:30,470 --> 00:34:31,303 >> TOMAS REIMERS: Yeah. 827 00:34:31,303 --> 00:34:33,860 Anda mempunyai padding, yang hanya beberapa jenis ruang putih. 828 00:34:33,860 --> 00:34:35,085 Kemudian anda mempunyai sempadan. 829 00:34:35,085 --> 00:34:37,710 Dan kemudian anda mempunyai margin yang ruang putih di luar itu. 830 00:34:37,710 --> 00:34:39,460 Supaya tidak masuk akal kepada sesiapa, jadi kami 831 00:34:39,460 --> 00:34:42,500 akan bercakap tentang itu untuk kali kedua. 832 00:34:42,500 --> 00:34:47,570 Jadi di sini, apa yang kita akan lakukan ini kita akan membuat beberapa divs, OK? 833 00:34:47,570 --> 00:34:48,420 Maafkan saya manakala I-- 834 00:34:48,420 --> 00:34:51,506 >> ALLISON BUCHHOLTZ-AU: Saya rasa seperti kita harus meletakkan gambar comel dalam. 835 00:34:51,506 --> 00:34:52,520 >> TOMAS REIMERS: Kami pasti sepatutnya. 836 00:34:52,520 --> 00:34:53,389 >> ALLISON BUCHHOLTZ-AU: Saya rasa seperti semua orang 837 00:34:53,389 --> 00:34:54,870 boleh mendapat manfaat daripada gambar comel, adalah semua. 838 00:34:54,870 --> 00:34:56,774 >> TOMAS REIMERS: Bolehkah kita semua manfaat dari a-- 839 00:34:56,774 --> 00:34:57,648 >> PENONTON: Ya, pasti. 840 00:34:57,648 --> 00:34:58,790 TOMAS REIMERS: OK, sejuk. 841 00:34:58,790 --> 00:35:02,254 Oleh itu, kita perlu meletakkan comel gambar di suatu tempat. 842 00:35:02,254 --> 00:35:05,295 ALLISON BUCHHOLTZ-AU: Saya rasa seperti bunny comel mungkin berguna sekarang. 843 00:35:05,295 --> 00:35:06,190 TOMAS REIMERS: Pasti. 844 00:35:06,190 --> 00:35:06,950 ALLISON BUCHHOLTZ-AU: Akhir minggu. 845 00:35:06,950 --> 00:35:07,390 Ada sesuatu adorab-- 846 00:35:07,390 --> 00:35:08,520 >> TOMAS REIMERS: Bagaimana pertarungan anak kucing? 847 00:35:08,520 --> 00:35:09,220 >> ALLISON BUCHHOLTZ-AU: Anak kucing A bekerja, terlalu. 848 00:35:09,220 --> 00:35:11,300 >> TOMAS REIMERS: Cool, kerana ada laman web untuk itu. 849 00:35:11,300 --> 00:35:12,300 Ia dipanggil PlaceKitten. 850 00:35:12,300 --> 00:35:14,719 ALLISON BUCHHOLTZ-AU: Itu yang besar. 851 00:35:14,719 --> 00:35:15,510 TOMAS REIMERS: Ya. 852 00:35:15,510 --> 00:35:18,040 ALLISON BUCHHOLTZ-AU: Hanya untuk, seperti, imej pemegang tempat di laman web anda. 853 00:35:18,040 --> 00:35:18,914 TOMAS REIMERS: Mm-hm. 854 00:35:18,914 --> 00:35:21,520 Terdapat juga PlacePuppy. 855 00:35:21,520 --> 00:35:22,832 Dan ada PlaceBacon. 856 00:35:22,832 --> 00:35:24,340 >> ALLISON BUCHHOLTZ-AU: PlaceBacon? 857 00:35:24,340 --> 00:35:25,350 Betul ke? 858 00:35:25,350 --> 00:35:28,190 >> TOMAS REIMERS: Oh, kita tidak mempunyai akses internet di sini. 859 00:35:28,190 --> 00:35:29,875 >> ALLISON BUCHHOLTZ-AU: [meminta pertolongan] 860 00:35:29,875 --> 00:35:30,375 Tragis. 861 00:35:30,375 --> 00:35:32,333 TOMAS REIMERS: Jika tidak, Saya akan menunjukkan kepada anda semua 862 00:35:32,333 --> 00:35:33,870 bagaimana untuk meletakkan gambar di laman web anda. 863 00:35:33,870 --> 00:35:36,370 Kami akan cuba untuk mendapatkan ini bekerja sebelum kita pergi. 864 00:35:36,370 --> 00:35:38,660 Tetapi buat masa ini, kami hanya akan bercakap dalam warna-warna itu. 865 00:35:38,660 --> 00:35:39,820 Kami mahu meletakkan gambar kittens-- 866 00:35:39,820 --> 00:35:40,210 >> ALLISON BUCHHOLTZ-AU: Kami lakukan. 867 00:35:40,210 --> 00:35:43,110 >> TOMAS REIMERS: --the internet ini selama masa itu. 868 00:35:43,110 --> 00:35:47,820 Jadi kita mempunyai dua divs, dan kami akan memberikan mereka dua id. 869 00:35:47,820 --> 00:35:51,380 870 00:35:51,380 --> 00:35:56,760 Kami akan memanggilnya "Pertama" dan "kedua." 871 00:35:56,760 --> 00:36:01,184 Jadi id = "pertama." 872 00:36:01,184 --> 00:36:02,850 Dan kita akan memberikan mereka dua warna. 873 00:36:02,850 --> 00:36:08,424 Jadi bagaimana kita memilih sesuatu dengan id "pertama"? 874 00:36:08,424 --> 00:36:09,840 ALLISON BUCHHOLTZ-AU: Dot atau hash? 875 00:36:09,840 --> 00:36:10,730 PENONTON: Sharp. 876 00:36:10,730 --> 00:36:12,940 TOMAS REIMERS: Sharp, sempurna. 877 00:36:12,940 --> 00:36:14,950 Sharp, hash, apa we-- 878 00:36:14,950 --> 00:36:15,680 >> ALLISON BUCHHOLTZ-AU: Banyak perkara yang memanggilnya. 879 00:36:15,680 --> 00:36:16,430 >> TOMAS REIMERS: OK. 880 00:36:16,430 --> 00:36:19,800 Kami akan menyelesaikan pada hashtag, dan itulah yang kita akan pergi dengan. 881 00:36:19,800 --> 00:36:20,300 OK? 882 00:36:20,300 --> 00:36:20,735 >> ALLISON BUCHHOLTZ-AU: Hashteg. 883 00:36:20,735 --> 00:36:22,340 >> TOMAS REIMERS: Jadi hashtag pertama. 884 00:36:22,340 --> 00:36:24,506 >> ALLISON BUCHHOLTZ-AU: Jadi anda boleh tweet yang seminar-- 885 00:36:24,506 --> 00:36:27,582 CSS hashtag, hashtag sejuk. 886 00:36:27,582 --> 00:36:29,040 TOMAS REIMERS: Hashteg Kehebatan. 887 00:36:29,040 --> 00:36:30,730 ALLISON BUCHHOLTZ-AU: Hashtag Kehebatan, ya. 888 00:36:30,730 --> 00:36:31,480 TOMAS REIMERS: OK. 889 00:36:31,480 --> 00:36:33,660 Oleh itu, kita mempunyai "pertama" dan "kedua." 890 00:36:33,660 --> 00:36:37,697 Jadi pertama, kita akan mempunyai warna latar belakang merah. 891 00:36:37,697 --> 00:36:39,030 ALLISON BUCHHOLTZ-AU: Uh, usus besar. 892 00:36:39,030 --> 00:36:40,281 TOMAS REIMERS: Yup. 893 00:36:40,281 --> 00:36:42,281 ALLISON BUCHHOLTZ-AU: Saya akan menjadi tempat-checker anda. 894 00:36:42,281 --> 00:36:43,960 TOMAS REIMERS: Allison ini mendapat saya. 895 00:36:43,960 --> 00:36:45,830 Latar Belakang-warna blue-- 896 00:36:45,830 --> 00:36:46,810 >> TOMAS REIMERS: Purple! 897 00:36:46,810 --> 00:36:47,726 >> TOMAS REIMERS: Ungu. 898 00:36:47,726 --> 00:36:48,830 ALLISON BUCHHOLTZ-AU: Ya. 899 00:36:48,830 --> 00:36:50,630 Warna kegemaran saya ungu ini, dan kita telah tidak digunakan lagi. 900 00:36:50,630 --> 00:36:51,546 >> TOMAS REIMERS: Violet. 901 00:36:51,546 --> 00:36:53,361 ALLISON BUCHHOLTZ-AU: Violet. 902 00:36:53,361 --> 00:36:53,860 Yang bekerja. 903 00:36:53,860 --> 00:36:56,482 904 00:36:56,482 --> 00:36:59,880 >> TOMAS REIMERS: Jadi kami akan mempunyai dua divs. 905 00:36:59,880 --> 00:37:01,654 Mereka akan menjadi betul-betul kosong. 906 00:37:01,654 --> 00:37:03,070 Kita mungkin akan mempunyai beberapa teks. 907 00:37:03,070 --> 00:37:05,580 908 00:37:05,580 --> 00:37:09,815 Jadi "pertama" akan menjadi "HELLO." 909 00:37:09,815 --> 00:37:10,940 Dan yang "kedua" akan say-- 910 00:37:10,940 --> 00:37:11,110 >> ALLISON BUCHHOLTZ-AU: Selamat tinggal. 911 00:37:11,110 --> 00:37:12,514 >> PENONTON: - "DUNIA." 912 00:37:12,514 --> 00:37:14,122 Hello, selamat tinggal. 913 00:37:14,122 --> 00:37:16,580 ALLISON BUCHHOLTZ-AU: saya melihat mereka dalam konsert minggu lain. 914 00:37:16,580 --> 00:37:17,705 TOMAS REIMERS: The Beatles? 915 00:37:17,705 --> 00:37:20,242 ALLISON BUCHHOLTZ-AU: Untuk sahih. 916 00:37:20,242 --> 00:37:21,200 Mereka bukan orang yang hebat. 917 00:37:21,200 --> 00:37:24,084 918 00:37:24,084 --> 00:37:24,750 Saya tidak suka ia. 919 00:37:24,750 --> 00:37:26,060 >> TOMAS REIMERS: Kami mempunyai "HELLO" dan "SELAMAT TINGGAL." 920 00:37:26,060 --> 00:37:29,102 Dan sekali lagi, CSS adalah hanya hebat, kerana ia mengiktiraf warna kami. 921 00:37:29,102 --> 00:37:30,810 Tidak perlu walaupun bimbang bahawa mereka wujud. 922 00:37:30,810 --> 00:37:33,194 Yang mereka lakukan. 923 00:37:33,194 --> 00:37:35,130 >> ALLISON BUCHHOLTZ-AU: Mereka wujud. 924 00:37:35,130 --> 00:37:39,560 >> TOMAS REIMERS: Jadi CSS saya rasa mempunyai 255 perkataan untuk bercakap tentang warna. 925 00:37:39,560 --> 00:37:42,986 Jika anda boleh berfikir warna di luar 255 orang-orang, seperti, saya akan terkesan. 926 00:37:42,986 --> 00:37:44,110 ALLISON BUCHHOLTZ-AU: Yeah. 927 00:37:44,110 --> 00:37:45,560 Saya rasa anda semua boleh mempunyai hanya datang selepas. 928 00:37:45,560 --> 00:37:47,727 >> TOMAS REIMERS: Jadi di sini, anda akan melihat kita mempunyai dua kotak 929 00:37:47,727 --> 00:37:49,143 betul-betul di atas satu sama lain, bukan? 930 00:37:49,143 --> 00:37:50,200 HELLO dan SELAMAT TINGGAL. 931 00:37:50,200 --> 00:37:51,460 >> ALLISON BUCHHOLTZ-AU: Tidak ada ruang di antaranya. 932 00:37:51,460 --> 00:37:53,390 Mereka hanya smooshed betul-betul di atas satu sama lain. 933 00:37:53,390 --> 00:37:55,973 >> TOMAS REIMERS: Jadi perkara pertama yang Saya rasa kita perlu bercakap tentang 934 00:37:55,973 --> 00:38:02,960 adalah mari kita juga say-- yeah. 935 00:38:02,960 --> 00:38:08,020 Jadi CSS mewakili mereka sebagai semacam kotak. 936 00:38:08,020 --> 00:38:10,100 Dan sebagai kotak, mereka mempunyai kandungan. 937 00:38:10,100 --> 00:38:14,540 Dan kandungan yang sekarang adalah semacam yang HELLO atau SELAMAT TINGGAL dan itu sahaja. 938 00:38:14,540 --> 00:38:15,040 OK? 939 00:38:15,040 --> 00:38:19,790 >> Jadi salah satu perkara pertama yang anda boleh lakukan adalah anda boleh menambah padding. 940 00:38:19,790 --> 00:38:25,610 Padding mengatakan berapa banyak ruang ia harus meninggalkan pada setiap sisi. 941 00:38:25,610 --> 00:38:29,200 Jadi katakan saya ingin katakan 10 piksel pada setiap sisi. 942 00:38:29,200 --> 00:38:31,234 Dan saya akan membedah bahawa dalam satu saat. 943 00:38:31,234 --> 00:38:33,150 ALLISON BUCHHOLTZ-AU: Semua perkara-perkara ini di sini 944 00:38:33,150 --> 00:38:36,980 akan menjadi sebahagian besar dalam piksel untuk sepanjang seminar tersebut. 945 00:38:36,980 --> 00:38:40,980 Anda akan melihat bahawa ia mempunyai sedikit ruang di sekitarnya, bukan? 946 00:38:40,980 --> 00:38:46,360 Jadi apa yang kamu tidak lihat di sini ialah ada seperti ini tidak kelihatan padding 947 00:38:46,360 --> 00:38:49,600 pada setiap sisi, yang berkata, seperti, OK, anda mempunyai kotak anda content-- 948 00:38:49,600 --> 00:38:51,680 >> ALLISON BUCHHOLTZ-AU: Adakah anda mahu hanya tarik elemen memeriksa? 949 00:38:51,680 --> 00:38:53,659 >> TOMAS REIMERS: Ya, itu adalah idea yang baik. 950 00:38:53,659 --> 00:38:56,700 ALLISON BUCHHOLTZ-AU: Juga, saya mendapati bahawa unsur memeriksa adalah cara yang baik 951 00:38:56,700 --> 00:39:01,280 untuk memikirkan jika ada sesuatu yang akan salah, sesuatu yang tidak dijangka berlaku, 952 00:39:01,280 --> 00:39:04,570 memeriksa tag dan melihat apa yang ia seperti ditulis ganti adalah membantu. 953 00:39:04,570 --> 00:39:05,940 >> TOMAS REIMERS: Jadi saya tidak pasti jika anda semua boleh lihat warna ini. 954 00:39:05,940 --> 00:39:06,470 Bolehkah anda? 955 00:39:06,470 --> 00:39:10,120 Anda akan melihat padding ini pada jenis kelebihan. 956 00:39:10,120 --> 00:39:13,410 Dan kemudian anda lihat sebenar kandungan dalam biru, bukan? 957 00:39:13,410 --> 00:39:16,820 Jadi itulah yang sangat asas-asas model kotak. 958 00:39:16,820 --> 00:39:17,674 Anda mempunyai kandungan. 959 00:39:17,674 --> 00:39:18,590 Kemudian anda mempunyai padding. 960 00:39:18,590 --> 00:39:20,440 >> PENONTON: Mengapa tidak anda hanya gunakan petak di dalam the-- 961 00:39:20,440 --> 00:39:21,606 >> ALLISON BUCHHOLTZ-AU: Betul. 962 00:39:21,606 --> 00:39:24,745 Kerana ia hanya memilih unsur sekarang. 963 00:39:24,745 --> 00:39:26,050 >> TOMAS REIMERS: Yup. 964 00:39:26,050 --> 00:39:27,060 Perkara-perkara lain. 965 00:39:27,060 --> 00:39:29,780 Jadi mari kita bercakap tentang yang perintah padding untuk kali kedua. 966 00:39:29,780 --> 00:39:36,380 Jadi dalam CSS, ukuran perlu mempunyai satu unit. 967 00:39:36,380 --> 00:39:39,740 Jadi pertama anda mempunyai jumlah yang. 968 00:39:39,740 --> 00:39:41,460 Jadi dalam kes ini, kami telah berkata 10. 969 00:39:41,460 --> 00:39:44,780 Dan kemudian yang seterusnya kami telah berkata adalah piksel, px. 970 00:39:44,780 --> 00:39:49,160 Orang lain yang anda mungkin ada adalah perkara seperti sentimeter, inci. 971 00:39:49,160 --> 00:39:51,367 Anda boleh melakukan perkara-perkara seperti, apa yang 10 inci? 972 00:39:51,367 --> 00:39:52,700 Dan ia akan menjadi tidak masuk akal. 973 00:39:52,700 --> 00:39:52,990 >> ALLISON BUCHHOLTZ-AU: Oh, budak. 974 00:39:52,990 --> 00:39:53,460 >> PENONTON: Whoa. 975 00:39:53,460 --> 00:39:54,460 >> TOMAS DAN ALLISON: Yeah. 976 00:39:54,460 --> 00:39:57,840 TOMAS REIMERS: Jadi itu sahaja padding. 977 00:39:57,840 --> 00:39:59,255 Saya akan kembali ke piksel. 978 00:39:59,255 --> 00:40:01,754 >> ALLISON BUCHHOLTZ-AU: Piksel cenderung untuk menjadi, seperti, standard itu. 979 00:40:01,754 --> 00:40:04,589 Apabila anda melihat banyak laman web, mereka kebanyakannya bekerja dalam piksel. 980 00:40:04,589 --> 00:40:07,755 TOMAS REIMERS: Jadi, anda akan melihat sama ada pixels---orang yang lain yang anda lihat 981 00:40:07,755 --> 00:40:13,952 adalah em, yang merupakan salah satu em adalah sama dengan ketinggian fon 982 00:40:13,952 --> 00:40:15,160 yang anda sedang gunakan. 983 00:40:15,160 --> 00:40:16,201 >> ALLISON BUCHHOLTZ-AU: Mm. 984 00:40:16,201 --> 00:40:17,574 985 00:40:17,574 --> 00:40:20,740 TOMAS REIMERS: Ia adalah cara yang baik untuk mengatakan, seperti, saya mahu ruang sebanyak fon saya 986 00:40:20,740 --> 00:40:21,514 adalah mengambil. 987 00:40:21,514 --> 00:40:23,180 ALLISON BUCHHOLTZ-AU: Tidak tahu. 988 00:40:23,180 --> 00:40:25,747 Anda belajar sesuatu yang baru setiap hari. 989 00:40:25,747 --> 00:40:27,955 TOMAS REIMERS: Terdapat banyak ukuran dalam CS. 990 00:40:27,955 --> 00:40:29,260 Saya cadangkan anda melihat mereka. 991 00:40:29,260 --> 00:40:32,122 Bagi semua kes anda, saya rasa piksel hendaklah mencukupi. 992 00:40:32,122 --> 00:40:33,830 Dan mereka juga apa yang anda akan melihat 993 00:40:33,830 --> 00:40:36,520 dalam kebanyakan contoh dilakukan dalam talian. 994 00:40:36,520 --> 00:40:38,320 Oleh itu, kita akan meninggalkannya di piksel. 995 00:40:38,320 --> 00:40:42,420 >> Anda boleh juga, saya perlu say-- jadi set padding semua paddings. 996 00:40:42,420 --> 00:40:49,789 Anda juga boleh melakukan sesuatu seperti "Padding-top" untuk hanya set-- 997 00:40:49,789 --> 00:40:52,080 ALLISON BUCHHOLTZ-AU: Mungkin kami akan kami "HELLO" kembali. 998 00:40:52,080 --> 00:40:55,480 TOMAS REIMERS: --to hanya menetapkan padding pada bahagian atas dan apa-apa lagi. 999 00:40:55,480 --> 00:40:59,560 Jadi empat arahan adalah padding-top, padding-bottom, padding-kiri, 1000 00:40:59,560 --> 00:41:00,310 dan padding-betul. 1001 00:41:00,310 --> 00:41:02,470 >> ALLISON BUCHHOLTZ-AU: Sama seperti yang anda inginkan untuk sebuah kotak. 1002 00:41:02,470 --> 00:41:03,530 >> TOMAS REIMERS: Yeah. 1003 00:41:03,530 --> 00:41:05,240 Tiada apa-apa terlalu gila di sana. 1004 00:41:05,240 --> 00:41:08,230 Adakah ini masuk akal? 1005 00:41:08,230 --> 00:41:11,990 Jadi yang padding. 1006 00:41:11,990 --> 00:41:14,110 Saya akan menetapkan semua yang paddings kembali ke 10. 1007 00:41:14,110 --> 00:41:17,010 Dan kemudian saya akan beralih kepada sempadan. 1008 00:41:17,010 --> 00:41:21,130 >> Jadi apa yang sempadan adalah adalah sempadan adalah satu perintah yang pelik. 1009 00:41:21,130 --> 00:41:24,450 Ia mengambil bentuk tiga benda dalam satu masa. 1010 00:41:24,450 --> 00:41:28,930 Jadi yang pertama adalah bagaimana besar anda mahu ia menjadi sebagai ukuran. 1011 00:41:28,930 --> 00:41:30,662 Sekali lagi, saya hanya menggunakan piksel. 1012 00:41:30,662 --> 00:41:32,620 Dan perkara terakhir yang saya perlu menambah ukuran 1013 00:41:32,620 --> 00:41:35,270 adalah satu perkara yang tidak memerlukan unit yang adalah 0. 1014 00:41:35,270 --> 00:41:37,390 Ini sebenarnya tidak betul untuk memberi 0 unit, 1015 00:41:37,390 --> 00:41:41,940 kerana 0 adalah 0 seluruh inci, piksel, sentimeter, apa sahaja. 1016 00:41:41,940 --> 00:41:43,960 Semuanya hanya bermakna 0, bukan? 1017 00:41:43,960 --> 00:41:46,710 Jadi pertama anda memberikan pengukuran. 1018 00:41:46,710 --> 00:41:48,650 >> Kemudian anda memberikan gaya. 1019 00:41:48,650 --> 00:41:49,869 Jadi, saya akan mengatakan "pepejal." 1020 00:41:49,869 --> 00:41:51,410 Dan kita akan bercakap tentang apa yang bermakna. 1021 00:41:51,410 --> 00:41:54,290 Dan kemudian akhir sekali, anda memberikan warna. 1022 00:41:54,290 --> 00:41:56,850 Jadi, saya akan mengatakan "hitam." 1023 00:41:56,850 --> 00:41:59,637 Dan semua ini adalah perkara-perkara yang kita kena kini dilihat sebelum ini, kecuali gaya, 1024 00:41:59,637 --> 00:42:00,720 tetapi kita akan bercakap tentang itu. 1025 00:42:00,720 --> 00:42:04,120 Jadi anda semua telah melihat ukuran, dan anda telah melihat warna. 1026 00:42:04,120 --> 00:42:10,410 Dan apa yang berlaku ialah kita mendapatkan ini sempadan bagus hitam di sekitarnya, bukan? 1027 00:42:10,410 --> 00:42:11,620 Kamu lihat bagaimana kita lakukan itu? 1028 00:42:11,620 --> 00:42:12,760 >> PENONTON: Yeah. 1029 00:42:12,760 --> 00:42:14,850 >> TOMAS REIMERS: Cool. 1030 00:42:14,850 --> 00:42:17,370 Jadi, apakah itu? 1031 00:42:17,370 --> 00:42:19,160 Jadi pertama sekali, ia adalah satu piksel. 1032 00:42:19,160 --> 00:42:20,880 Itu jelas cukup, kan? 1033 00:42:20,880 --> 00:42:23,254 Seperti, ia adalah salah satu piksel tebal. 1034 00:42:23,254 --> 00:42:26,170 Atau ia akan menjadi satu piksel, tetapi saya dizum dalam, jadi ia sedikit lebih 1035 00:42:26,170 --> 00:42:26,490 daripada itu. 1036 00:42:26,490 --> 00:42:27,967 >> ALLISON BUCHHOLTZ-AU: Dan kami mempunyai resolusi ini TV tidak masuk akal. 1037 00:42:27,967 --> 00:42:29,460 >> TOMAS REIMERS: Yeah. 1038 00:42:29,460 --> 00:42:33,640 Anda boleh membuat ia lebih besar, lebih kecil, apa sahaja. 1039 00:42:33,640 --> 00:42:35,630 Jadi di sini adalah satu sempadan dua piksel. 1040 00:42:35,630 --> 00:42:38,810 Anda akan melihat ia adalah dua kali lebih tebal. 1041 00:42:38,810 --> 00:42:40,172 Perkara seterusnya yang anda perlu adalah warna. 1042 00:42:40,172 --> 00:42:41,130 Bukan itu menarik. 1043 00:42:41,130 --> 00:42:42,710 Saya tidak akan bercakap tentang itu, benar-benar. 1044 00:42:42,710 --> 00:42:45,110 >> ALLISON BUCHHOLTZ-AU: Tetapi gaya mungkin hanya sedikit menarik. 1045 00:42:45,110 --> 00:42:45,980 >> TOMAS REIMERS: Yeah. 1046 00:42:45,980 --> 00:42:48,560 Jadi gaya, terdapat beberapa orang yang saya lihat digunakan biasanya. 1047 00:42:48,560 --> 00:42:55,690 Satu pertama pepejal, satu depan putus-putus, putus-putus dan yang terakhir ini. 1048 00:42:55,690 --> 00:42:59,290 Dan di sini dipenuhi. 1049 00:42:59,290 --> 00:43:02,980 Anda akan melihat bahawa mereka sekumpulan titik, bukan? 1050 00:43:02,980 --> 00:43:09,030 Cara yang baik untuk jenis mendapat sempadan bagus pergi, sengkang juga cukup popular. 1051 00:43:09,030 --> 00:43:11,580 1052 00:43:11,580 --> 00:43:13,600 >> ALLISON BUCHHOLTZ-AU: Kemudian sudah tentu, saya 1053 00:43:13,600 --> 00:43:16,660 pasti ada banyak lain gaya yang anda boleh mendapatkan. 1054 00:43:16,660 --> 00:43:20,000 Dan kita mempunyai satu set besar pautan di bahagian akhir untuk anda semua 1055 00:43:20,000 --> 00:43:23,470 untuk jenis membaca dengan teliti dan melihat CSS lebih sejuk. 1056 00:43:23,470 --> 00:43:25,954 >> TOMAS REIMERS: Kemudian perkara terakhir, kami 1057 00:43:25,954 --> 00:43:27,870 akan bercakap tentang model kotak cepat. 1058 00:43:27,870 --> 00:43:30,070 Oh, dan kemudian sempadan, sama seperti padding, 1059 00:43:30,070 --> 00:43:33,270 anda juga ada perkara seperti sempadan-kiri, sempadan-hak, sempadan-top, 1060 00:43:33,270 --> 00:43:37,590 sempadan-bawah, yang membolehkan anda untuk mendapatkan di sempadan tertentu. 1061 00:43:37,590 --> 00:43:40,650 Jadi di sini hanya sempadan kiri ditakrifkan. 1062 00:43:40,650 --> 00:43:43,060 Adakah ini masuk akal? 1063 00:43:43,060 --> 00:43:46,170 >> ALLISON BUCHHOLTZ-AU: Ia sejuk cara untuk menekankan perkara atau menambah 1064 00:43:46,170 --> 00:43:47,545 garisan antara unsur-unsur yang berbeza. 1065 00:43:47,545 --> 00:43:48,670 TOMAS REIMERS: Boleh. 1066 00:43:48,670 --> 00:43:50,940 Jadi itulah sempadan kami. 1067 00:43:50,940 --> 00:43:52,790 Dan margin yang terakhir ini. 1068 00:43:52,790 --> 00:43:55,892 Padding seperti margin ini kecuali ia tidak within-- 1069 00:43:55,892 --> 00:43:57,975 ALLISON BUCHHOLTZ-AU: Ia tidak seluruh elemen anda 1070 00:43:57,975 --> 00:44:00,840 tetapi sebenarnya sekitar keseluruhan kotak yang kita telah melihat. 1071 00:44:00,840 --> 00:44:02,770 >> TOMAS REIMERS: Yeah. 1072 00:44:02,770 --> 00:44:04,090 Allison berkata dengan sempurna. 1073 00:44:04,090 --> 00:44:07,550 Ia bukan, seperti, di dalam anda elemen, itu sekitar seluruh kotak. 1074 00:44:07,550 --> 00:44:10,900 Ini bermakna perkara-perkara seperti latar belakang tidak terpakai kepadanya. 1075 00:44:10,900 --> 00:44:13,550 Dan pada dasarnya berkata, seperti, saya tidak mahu apa-apa 1076 00:44:13,550 --> 00:44:15,230 di ruang ini banyak untuk saya. 1077 00:44:15,230 --> 00:44:17,470 Jadi seperti di sini kita mempunyai margin 10 piksel. 1078 00:44:17,470 --> 00:44:23,100 Jadi apa-apa dalam tempoh 10 piksel harus sebelah saya. 1079 00:44:23,100 --> 00:44:26,210 Itulah jenis yang ruang tetapi jenis tidak. 1080 00:44:26,210 --> 00:44:29,215 Jadi itulah yang sangat asas-asas model kotak. 1081 00:44:29,215 --> 00:44:30,090 Adakah ini masuk akal? 1082 00:44:30,090 --> 00:44:33,830 1083 00:44:33,830 --> 00:44:34,550 Sejuk, sejuk. 1084 00:44:34,550 --> 00:44:35,800 ALLISON BUCHHOLTZ-AU: Awesome. 1085 00:44:35,800 --> 00:44:37,890 Jadi sekarang saya rasa kami hanya mempunyai sumber yang sejuk kami 1086 00:44:37,890 --> 00:44:41,220 bahawa kami akan membawa anda guys melalui dengan cepat. 1087 00:44:41,220 --> 00:44:44,815 Dan kami akan actually-- baik, yang kita ada internet lagi? 1088 00:44:44,815 --> 00:44:47,860 >> TOMAS REIMERS: Mari kita melihat jika saya boleh membuka up-- 1089 00:44:47,860 --> 00:44:50,040 biar saya lihat jika saya boleh mendapatkan internet dengan cepat 1090 00:44:50,040 --> 00:44:53,317 manakala Allison bercakap tentang apa-apa Allison mahu bercakap mengenai. 1091 00:44:53,317 --> 00:44:55,150 ALLISON BUCHHOLTZ-AU: Jadi basically-- saya tidak 1092 00:44:55,150 --> 00:44:57,930 tahu apa lagi yang boleh saya katakan pada ketika ini. 1093 00:44:57,930 --> 00:45:01,340 Tetapi ini adalah beberapa sumber benar-benar baik. 1094 00:45:01,340 --> 00:45:04,629 Ini adalah orang-orang yang Tomas dan saya telah menggunakan 1095 00:45:04,629 --> 00:45:06,420 dan bahawa kita sebenarnya digunakan untuk prep untuk ini. 1096 00:45:06,420 --> 00:45:09,940 W3Schools adalah salah satu yang anda lelaki perlu lihat sebelum ini. 1097 00:45:09,940 --> 00:45:12,440 Kami mengesyorkan untuk banyak perkara dengan CSS. 1098 00:45:12,440 --> 00:45:15,060 Saya tahu saya mengesyorkan kepada seksyen saya sepanjang masa. 1099 00:45:15,060 --> 00:45:21,050 >> Salah satu perkara yang besar adalah bahawa ia membolehkan anda jenis kucar-kacir dengan CSS 1100 00:45:21,050 --> 00:45:23,830 dan melihat perubahan serta-merta dalam ini, 1101 00:45:23,830 --> 00:45:25,920 seperti, double-tetingkap melihat bahawa ia mempunyai. 1102 00:45:25,920 --> 00:45:29,980 Jadi anda tidak perlu bimbang tentang menubuhkan laman web anda sendiri, 1103 00:45:29,980 --> 00:45:33,090 atau menubuhkan vhost dalam anda perkakas tempatan dan warga tempatan, 1104 00:45:33,090 --> 00:45:34,980 dan mendapat semua barangan yang kerja. 1105 00:45:34,980 --> 00:45:36,830 Ia tertanam hak dalam halaman. 1106 00:45:36,830 --> 00:45:39,042 >> Dan ia mempunyai ini sedikit pengajaran yang anda boleh 1107 00:45:39,042 --> 00:45:40,750 melalui belajar lebih lanjut mengenai pemilih, 1108 00:45:40,750 --> 00:45:44,610 atau belajar tentang memanipulasi anda font, atau latar belakang, atau imej. 1109 00:45:44,610 --> 00:45:46,990 Dan anda mempunyai ini keputusan serta-merta bahawa anda 1110 00:45:46,990 --> 00:45:49,310 tidak perlu melakukan apa-apa kerja persediaan lain untuk. 1111 00:45:49,310 --> 00:45:51,060 Jadi saya suka W3Schools. 1112 00:45:51,060 --> 00:45:51,960 Ia adalah hebat. 1113 00:45:51,960 --> 00:45:52,670 Adakah ia berfungsi? 1114 00:45:52,670 --> 00:45:52,950 >> TOMAS REIMERS: Yeah. 1115 00:45:52,950 --> 00:45:53,720 Tidak, ia tidak. 1116 00:45:53,720 --> 00:45:55,636 Adakah anda mahu saya untuk mencuba dan mulakan semula komputer saya? 1117 00:45:55,636 --> 00:45:56,410 Atau adakah kita mahu supaya- 1118 00:45:56,410 --> 00:46:01,490 >> ALLISON BUCHHOLTZ-AU: Maksud saya, baik, ini juga akan berada dalam talian. 1119 00:46:01,490 --> 00:46:02,740 Semua slaid akan berada dalam talian. 1120 00:46:02,740 --> 00:46:05,470 Jadi saya hanya dinasihatkan melakukan ini. 1121 00:46:05,470 --> 00:46:07,880 >> Ini adalah besar kerana hanya seperti lembaran menipu. 1122 00:46:07,880 --> 00:46:10,690 Ia hanya semua asas yang menyuruh kamu mempunyai. 1123 00:46:10,690 --> 00:46:13,070 Ia hebat apabila anda pertama memulakan laman web anda. 1124 00:46:13,070 --> 00:46:15,080 Kerana mungkin anda tidak mahu masuk ke dalam semua 1125 00:46:15,080 --> 00:46:17,355 seluk sebenar cekal reka bentuk-berat barangan. 1126 00:46:17,355 --> 00:46:20,230 Anda hanya perlu memformat ia dengan cara yang yang jenis masuk akal dan kehendak 1127 00:46:20,230 --> 00:46:21,490 lakukan pada masa itu. 1128 00:46:21,490 --> 00:46:23,580 Dan jika anda benar-benar mahu untuk mendapatkan ke dalamnya, saya tahu 1129 00:46:23,580 --> 00:46:27,240 ini adalah, seperti, salah satu Rujukan kegemaran Tomas ini. 1130 00:46:27,240 --> 00:46:30,130 Kami menggunakannya untuk prep, dan itu hebat. 1131 00:46:30,130 --> 00:46:33,030 Ia Pemaju daripada Mozilla. 1132 00:46:33,030 --> 00:46:36,490 >> TOMAS REIMERS: Jadi Mozilla adalah orang-orang yang membuat Firefox. 1133 00:46:36,490 --> 00:46:40,290 Dan ia hanya pemaju mereka sendiri rujukan, yang saya fikir adalah hebat. 1134 00:46:40,290 --> 00:46:44,870 Dan ia mempunyai yang indah senarai sumber. 1135 00:46:44,870 --> 00:46:45,530 Oleh itu, kita have-- 1136 00:46:45,530 --> 00:46:48,060 >> ALLISON BUCHHOLTZ-AU: Dan kemudian nota terakhir 1137 00:46:48,060 --> 00:46:50,120 apabila anda cuba mereka bentuk laman web anda, 1138 00:46:50,120 --> 00:46:53,550 mendapat inspirasi daripada benda-benda yang anda fikir adalah cantik. 1139 00:46:53,550 --> 00:46:56,340 Memeriksa elemen, memeriksa kod sumber 1140 00:46:56,340 --> 00:46:59,370 boleh menjadi super berguna untuk cuba untuk memikirkan 1141 00:46:59,370 --> 00:47:02,080 bagaimana untuk gaya laman web anda sendiri. 1142 00:47:02,080 --> 00:47:04,540 >> Selalunya, saya rasa seperti yang terbaik cara, selain uji kaji, 1143 00:47:04,540 --> 00:47:06,290 hanya untuk melihat perkara-perkara yang cantik. 1144 00:47:06,290 --> 00:47:09,810 Saya mendapati ia benar-benar sukar untuk hanya jenis bentuk tindakan sendirian, 1145 00:47:09,810 --> 00:47:11,090 terutama pada mulanya. 1146 00:47:11,090 --> 00:47:14,740 Oleh itu, sila melihat laman bahawa anda menikmati lihat. 1147 00:47:14,740 --> 00:47:16,880 Memikirkan apa yang membuat mereka merayu kepada anda. 1148 00:47:16,880 --> 00:47:19,170 Dan kemudian berasa bebas untuk cuba meniru itu. 1149 00:47:19,170 --> 00:47:20,410 >> TOMAS REIMERS: Betul. 1150 00:47:20,410 --> 00:47:23,120 Malah seperti laman-laman web seperti ini, anda boleh melihat 1151 00:47:23,120 --> 00:47:25,460 ada pasti div di bahagian atas. 1152 00:47:25,460 --> 00:47:29,920 Dan kemudian anda mempunyai div lain dalam di sini, yang merupakan CSS Kehebatan. 1153 00:47:29,920 --> 00:47:32,480 Dan kemudian anda telah mempunyai banyak pautan di sini. 1154 00:47:32,480 --> 00:47:34,770 Jika anda benar-benar hanya memeriksa unsur-unsur, anda boleh menyusun daripada 1155 00:47:34,770 --> 00:47:38,520 mula melihat apa yang dilakukan laman web kelihatan seperti, dan bagaimana boleh saya 1156 00:47:38,520 --> 00:47:40,493 mencipta bahawa jika saya mahu. 1157 00:47:40,493 --> 00:47:41,890 Adakah ini masuk akal? 1158 00:47:41,890 --> 00:47:43,670 Oleh itu kita hanya mempunyai tiga minit. 1159 00:47:43,670 --> 00:47:46,380 Jadi soalan? 1160 00:47:46,380 --> 00:47:47,650 Mana-mana daripada mereka? 1161 00:47:47,650 --> 00:47:48,350 Ya. 1162 00:47:48,350 --> 00:47:50,780 >> PENONTON: Untuk warna segi empat tepat, bagaimana akan anda 1163 00:47:50,780 --> 00:47:53,499 have-- jika anda tidak mahu ia akan merentasi seluruh halaman, boleh 1164 00:47:53,499 --> 00:47:56,400 anda telah membuat ia pergi mencari hanya separuh halaman atau hanya teks ini? 1165 00:47:56,400 --> 00:47:59,660 >> TOMAS REIMERS: Ya, benar-benar. 1166 00:47:59,660 --> 00:48:02,780 Jadi biarlah saya melihat sebenarnya. 1167 00:48:02,780 --> 00:48:04,670 Saya mempunyai dua idea. 1168 00:48:04,670 --> 00:48:07,265 Jadi pertama sekali, anda juga boleh menggunakan persen. 1169 00:48:07,265 --> 00:48:08,140 >> PENONTON: Betul ke? 1170 00:48:08,140 --> 00:48:11,260 >> ALLISON BUCHHOLTZ-AU: Jadi sesuatu untuk mencari adalah kedudukan relatif. 1171 00:48:11,260 --> 00:48:13,385 Ini adalah sesuatu yang kita tidak mempunyai masa untuk masuk ke dalam, 1172 00:48:13,385 --> 00:48:16,392 tetapi ia sesuatu yang saya pasti mengesyorkan anda semua check-out. 1173 00:48:16,392 --> 00:48:17,580 >> TOMAS REIMERS: Jadi persen. 1174 00:48:17,580 --> 00:48:21,524 Dan melihat bagaimana kami berjaya hanya 50% daripada lebar? 1175 00:48:21,524 --> 00:48:24,190 ALLISON BUCHHOLTZ-AU: Jika anda sebenarnya mengetahui bilangan piksel, 1176 00:48:24,190 --> 00:48:25,780 anda boleh menjadi lebih tepat cara itu. 1177 00:48:25,780 --> 00:48:27,200 Anda boleh biola-main dengan itu. 1178 00:48:27,200 --> 00:48:27,700 Tetapi 50%. 1179 00:48:27,700 --> 00:48:31,970 Jika kita mengubah saiz pelayar kami, ia akan membuatnya lebih kecil. 1180 00:48:31,970 --> 00:48:35,250 >> TOMAS REIMERS: Nah, itu pada dasarnya 50% sekarang, saya fikir. 1181 00:48:35,250 --> 00:48:38,820 Ia adalah 50%, dan kemudian margin telah ditambah untuk itu. 1182 00:48:38,820 --> 00:48:40,100 CSS mempunyai banyak sifat-sifat. 1183 00:48:40,100 --> 00:48:43,195 Jadi sekarang ini adalah 50% daripada lebar halaman. 1184 00:48:43,195 --> 00:48:46,860 Tetapi ingat bahawa anda mempunyai 10 piksel diambil kira dari setiap sisi. 1185 00:48:46,860 --> 00:48:49,700 Jadi, jika anda adalah untuk bergerak itu terhadap pinggir kiri penyemak imbas, 1186 00:48:49,700 --> 00:48:51,550 maka ia akan kelihatan seperti 50%. 1187 00:48:51,550 --> 00:48:53,884 Sekali lagi, seperti saya katakan, CSS boleh menjadi banyak tekaan-dan-cek. 1188 00:48:53,884 --> 00:48:56,049 Seperti, anda berfikir ada sesuatu yang akan berkelakuan satu cara, 1189 00:48:56,049 --> 00:48:57,805 tetapi ia berkelakuan cara yang sama sekali berbeza. 1190 00:48:57,805 --> 00:48:59,420 >> ALLISON BUCHHOLTZ-AU: Dan anda hanya mendapat lebih bijak, 1191 00:48:59,420 --> 00:49:02,020 dan anda hanya mendapatkan yang lebih baik gerak hati untuk ia yang anda bergerak bersama-sama. 1192 00:49:02,020 --> 00:49:02,730 >> TOMAS REIMERS: Dan ia menjadi lebih teruk dan lebih teruk. 1193 00:49:02,730 --> 00:49:03,496 Jadi ia adalah benar-benar hanya perlumbaan. 1194 00:49:03,496 --> 00:49:05,454 >> ALLISON BUCHHOLTZ-AU: Itulah super menggalakkan. 1195 00:49:05,454 --> 00:49:07,070 Kami mahu mereka suka CSS. 1196 00:49:07,070 --> 00:49:08,810 >> TOMAS REIMERS: CSS adalah hebat. 1197 00:49:08,810 --> 00:49:10,354 Ingatlah bahawa. 1198 00:49:10,354 --> 00:49:11,020 Soalan-soalan lain? 1199 00:49:11,020 --> 00:49:14,297 >> ALLISON BUCHHOLTZ-AU: Perkara satu. 1200 00:49:14,297 --> 00:49:14,880 Apa-apa lagi? 1201 00:49:14,880 --> 00:49:15,140 Cool. 1202 00:49:15,140 --> 00:49:15,690 >> TOMAS REIMERS: Awesome. 1203 00:49:15,690 --> 00:49:18,523 >> ALLISON BUCHHOLTZ-AU: Nah, jika anda mempunyai sebarang soalan di kemudian hari, 1204 00:49:18,523 --> 00:49:20,919 kami sentiasa ada seperti biasa. 1205 00:49:20,919 --> 00:49:22,960 Anda mungkin akan melihat beberapa daripada kita untuk projek akhir 1206 00:49:22,960 --> 00:49:24,280 dan pasti di hackathon itu. 1207 00:49:24,280 --> 00:49:25,200 >> TOMAS REIMERS: Boleh. 1208 00:49:25,200 --> 00:49:25,720 Dan di pameran itu. 1209 00:49:25,720 --> 00:49:26,560 >> ALLISON BUCHHOLTZ-AU: Dan di pameran itu. 1210 00:49:26,560 --> 00:49:26,840 Oh. 1211 00:49:26,840 --> 00:49:28,130 >> TOMAS REIMERS: Nantikan melihat semua awesome-- anda 1212 00:49:28,130 --> 00:49:29,420 >> ALLISON BUCHHOLTZ-AU: Kami akan melihat semua laman web yang menggerunkan anda 1213 00:49:29,420 --> 00:49:30,572 yang akan menjadi cantik. 1214 00:49:30,572 --> 00:49:32,780 TOMAS REIMERS: Anda boleh sentiasa lihat, seperti, laman 1215 00:49:32,780 --> 00:49:36,234 yang mempunyai, seperti, CSS baik dan kemudian seperti orang-orang yang tidak mencuba untuk melakukan CSS. 1216 00:49:36,234 --> 00:49:39,150 ALLISON BUCHHOLTZ-AU: Juga, satu lagi perkara, satu lagi perkara untuk melihat ke dalam 1217 00:49:39,150 --> 00:49:40,445 adalah Bootstrap. 1218 00:49:40,445 --> 00:49:41,805 Jadi Bootstrap adalah besar. 1219 00:49:41,805 --> 00:49:42,240 >> TOMAS REIMERS: Google bahawa jika you-- 1220 00:49:42,240 --> 00:49:43,573 >> ALLISON BUCHHOLTZ-AU: Google itu. 1221 00:49:43,573 --> 00:49:44,340 Ia adalah hebat. 1222 00:49:44,340 --> 00:49:45,620 Anda akan menyukainya. 1223 00:49:45,620 --> 00:49:48,000 Sekarang bahawa anda mempunyai pemahaman asas CSS, 1224 00:49:48,000 --> 00:49:50,340 ia akan masuk akal lebih banyak. 1225 00:49:50,340 --> 00:49:50,890 Awesome. 1226 00:49:50,890 --> 00:49:51,480 Terima kasih, guys. 1227 00:49:51,480 --> 00:49:53,330 >> TOMAS REIMERS: Terima kasih banyak. 1228 00:49:53,330 --> 00:49:54,219