[MUSIC PLAYING] Allison Buchholtz-AU: Jadi kami pada dasarnya hanya akan untuk memberikan kumuh CSS, karena kita tahu bahwa itu tidak tercakup di semua bagian. Dan kita benar-benar ingin memastikan bahwa Anda orang memiliki alat ini yang Anda inginkan, karena memiliki kemampuan untuk membuat website Anda terlihat jauh lebih cantik. 

Dan jika Anda sedang membangun sebuah website, maka Anda mungkin ingin membuatnya cantik. Maksudku, kau tidak perlu, tapi saya sarankan itu. [TERTAWA] Jika Anda ingin pengguna untuk menggunakannya, Anda mungkin ingin membuatnya sedikit [tidak terdengar]. Jadi kita akan mencoba dan memberikan Anda hanya beberapa alat dasar dan pemahaman, sehingga ketika Anda pergi keluar dan Anda meneliti hal-hal tentang CSS, itu tidak menyelesaikan omong kosong, seperti CSS terkadang menjadi. 

TOMAS Reimers: Ya. Allison mengatakan cukup baik. Jadi saya kira hal pertama yang kita harus mulai dengan apa itu CSS? Jadi CSS mengagumkan. CSS-- 

Allison Buchholtz-AU: Itu nama seminar kami. 

TOMAS Reimers: Ya. Ini benar-benar penting bahwa Anda memahami bahwa saat itu. Jika Anda hanya mengambil satu hal, itu CSS jika mengagumkan. Dua CSS singkatan Cascading Style Sheets. Jadi pada intinya, CSS style sheet, yang berarti memungkinkan Anda untuk gaya halaman web. Dan kemudian apa artinya, itu adalah cara untuk menambahkan gaya ke website Anda. Jadi dengan gaya, kami berarti segalanya yang tidak structural-- sehingga hal-hal seperti warna, latar belakang gambar, perbatasan, seperti, padding, margin. Kita akan berbicara tentang apa yang semua itu berarti dalam sedikit. 

Jadi kami baru saja pergi ke depan dan membuka kedua mereka di gedit. Jadi ini adalah index.html. Dan ini adalah main.css. Jadi main.css tidak ada. Allison Buchholtz-AU: Tidak ada gaya sejauh ini. TOMAS Reimers: Tidak ada. Dan seperti yang Anda akan melihat, itu situs yang sangat jelek. Allison Buchholtz-AU: Ini hanya polos. TOMAS Reimers: Ya. Ya, itu tidak jelek, itu hanya minimalis. Dan maka di sini kita memiliki index.html. Dan untuk cepat rekap HTML, Allison, Anda ingin hanya berbicara tentang halaman? 

Allison Buchholtz-AU: Ya. Jadi jelas, kita memiliki HTML kami tag, yang hanya nama file HTML. Kami memiliki kepala kita di sini, dengan CSS Keangkeran, which-- jika Anda kembali. Itu dimana? 

TOMAS Reimers: Oh. Ya, Anda dapat melihat. Allison Buchholtz-AU: Dan perhatikan header adalah tab ini header yang tepat di sini. Dan kemudian "Hello, world!" aku s teks yang kita miliki hanya menampilkan di web Halaman yang is-- kembali. Bagian Belakang. Yang hanya di dalam tubuh kita sini-teks biasa. Juga, satu hal untuk perhatikan, jika Anda melihat di sini, Tomas beralih up ini dua dari slide kita. Jadi selama Anda memiliki semua tiga ini, kau baik-baik saja. Mereka bisa berada di urutan apapun yang mereka inginkan. Apa yang paling penting adalah bahwa Anda memiliki masing-masing tiga hal. 

TOMAS Reimers: Cool. Menambahkan jenis doc? Allison Buchholtz-AU: Ya. TOMAS Reimers: Ya. Keren. Allison Buchholtz-AU: Rupanya, mic saya tidak menyukai saya. TOMAS Reimers: Oh, memberi kita sec hanya sementara Allison switch keluar mic-nya. Jadi ya. Jadi kita memiliki halaman utama kami. Ini semacam unstyled. Kami tidak punya banyak. Kami hanya memiliki dasarnya teks. Kami memiliki style sheet. Kami memiliki judul. Jadi hanya telanjang-bertulang komponen membuat website. 

Jadi dari sana, mari kita berbicara tentang apa CSS dan apa yang tampak seperti dan semua itu. Jadi untuk itu-- Allison Buchholtz-AU: Kembali ke slide. TOMAS Reimers: Kembali ke slide. Dan Allison bisa mengambil alih. 

Allison Buchholtz-AU: Woo. OKE. Jadi dalam file CSS Anda, Anda akan memiliki banyak hal-hal ini disebut pemilih. Itu hanya akan menjadi dasar file CSS Anda. Ini hanya akan menjadi banyak dan banyak ini. Jadi pemilih. Ini hanya anatomi umum. Kita akan pergi melalui contoh, karena jika kalian tidak pernah menyaksikan bagian saya, saya merasa seperti hal-hal secara abstrak tidak benar-benar masuk akal. Selalu membantu untuk melihat contoh. 

Jadi kita memiliki beberapa pemilih. Itu akan menjadi beberapa pengidentifikasi untuk apa yang kita inginkan gaya untuk diterapkan ke. Dan kemudian kita bisa memiliki seperangkat aturan dan nilai-nilai. Jadi pemilih yang mungkin Anda lihat mungkin sesuatu seperti tubuh, atau paragraf dengan P, atau header, atau apa pun, apa pun yang Anda inginkan tag HTML Anda menjadi. 

Jadi dalam hal ini, kita memiliki tubuh. Dan kami memiliki beberapa aturan, yang ini sesuai apa gaya Anda berlaku. Jadi dalam hal ini, kita memiliki warna latar belakang dan berat font. Jadi ini akan mengubah latar belakang apa pun dalam setiap tag body file HTML kita. Dan itu akan memberikan itu nilai biru muda ini. 

Jadi itu akan membuat background biru muda. Dan kemudian apa-apa dalam tubuh akan memiliki berat huruf tebal. Jadi itu hanya akan berani semua teks kita. Dan ini adalah salah satu pemilih. Tapi Anda bisa memiliki sangat banyak dari ini. Dan seperti yang kita akan menunjukkan kemudian, sedikit lebih ke bagaimana bahwa pekerjaan dan lebih banyak contoh di sana. Apa pun yang Anda ingin menambahkan? 

TOMAS Reimers: No. Allison mendapatkannya. Kami hanya akan memotong sebuah Misalnya di sini di situs contoh kita. Jadi mari kita benar-benar mengambil ini. Ini sempurna. Jadi aku hanya akan copy dan paste yang langsung ke file yang main.css kami. Dan aku akan menyimpannya. Dan kemudian kita akan menjalankannya. Catatan Jadi samping, salah satu kebanyakan hal yang membuat frustrasi adalah jika Anda tidak menyimpan file, dan maka Anda, seperti, kembali halaman tersebut, dan seperti, mengapa tidak perubahan yang terjadi? Hal ini terjadi. Jadi di sini kita melihat bahwa kita membuat kami Website latar belakang biru muda dan beberapa tebal teks. 

Saya juga harus menyebutkan, jika Anda orang memiliki pertanyaan tentang apa pun kita lakukan, silahkan bebas untuk menghentikan kami dan meminta kami. Kami benar-benar bersedia ke lapangan pertanyaan. 

Allison Buchholtz-AU: Jelas, dengan CSS, semuanya dibangun pada dirinya sendiri. Jadi, jika satu hal tidak masuk akal sekarang, kita tidak ingin hal itu rawa Anda kemudian. 

TOMAS Reimers: Jadi mari kita jenis membedah ini. Jadi Anda ingin memulai dengan pemilih di sini? 

Allison Buchholtz-AU: Ya. Seperti yang saya katakan sebelumnya, tubuh hanya pemilih kami di sini. Jadi, jika kita kembali ke ah index-- kami. 

TOMAS Reimers: Yang saya hanya menutup. Beri aku satu detik. Jadi file, Open, index.html. Allison Buchholtz-AU: Cool. Jadi, jika Anda melihat di sini, kita memiliki tag tubuh ini, kan? Jadi pemilih hanya sesuai dengan tag yang kita bicarakan. Sehingga tubuh di sini. Jadi apa yang kita katakan adalah Segalanya bisa kita kembali? Saya berharap saya bisa hanya seperti menyentuh layar. Ini akan menjadi jauh lebih dingin. 

Jadi apa pun dalam mereka tag tubuh, yang kita lihat hanya, seperti, teks, dan tubuh secara umum mengacu, seperti, latar belakang. Jika Anda pernah ingin mengubah latar belakang, itu akan berada dalam tag body. Hanya memiliki aturan-aturan ini diterapkan kepada mereka. 

Jadi jika kita pergi ke index.html dan-- sebenarnya, dapat kita memiliki sesuatu di luar tubuh? Jika kita punya, seperti, footer atau sesuatu, itu tidak akan berlaku untuk ini. Tapi apa pun dalam tag tubuh tersebut akan akan terpengaruh oleh tubuh ini pemilih yang kami buat. Jadi, jika Anda mengetik sesuatu yang lain besar-- 

TOMAS Reimers: Mari kita pulang itu. Jadi jika kita memiliki div-- sehingga itu hanya tag lain, Anda dapat memiliki. Aku akan menutupnya. Atau mari kita membuat paragraf. Jadi p singkatan ayat. Dan dalam ayat tersebut. Lalu saya katakan, "Ini adalah teks." Keren. Dan kemudian saya membuat aturan ini berlaku untuk paragraf bukan tubuh. Anda akan melihat bagaimana hal itu hanya berlaku untuk paragraf baru terbentuk, benar, tidak semuanya. Apakah itu masuk akal? 

Allison Buchholtz-AU: Jadi ini semua tubuh, tapi sekarang kami hanya pemilih sesuai dengan paragraf. Jadi kita hanya memiliki tebal dan biru untuk ayat tertentu, karena ini adalah satu-satunya hal yang yang tertutup dalam tag p. 

TOMAS Reimers: Apakah itu masuk akal semacam bagaimana hal merangkum hal-hal lain? Allison Buchholtz-AU: Juga, hanya mengatakan, seperti, salah satu cara terbaik untuk benar-benar merasa nyaman dengan CSS adalah untuk hanya melakukan hal-hal seperti ini, hanya mencobanya. Ini sangat sederhana untuk mengetik sesuatu keluar, tekan Refresh, dan melihat apa yang terjadi. Dan seperti kebanyakan CS, eksperimen dapat sering menyebabkan lebih baik pemahaman intuitif. Bahkan lebih dari kita hanya, seperti, berbicara dengan Anda. 

TOMAS Reimers: Absolutely 100% sepakat tentang hal itu. Jadi, jika kita kembali ke ini, mari kita mulai membedah apa kedua lakukan. Jadi kita memiliki dua aturan tentang hal ini. Jadi yang pertama adalah warna latar belakang. Dan Anda melihat bahwa kami telah mengaturnya sama dengan nilai, biru muda. 

Jadi dalam CSS, CSS adalah semacam yang sangat longgar tentang bagaimana Anda diperbolehkan untuk menentukan warna. Jadi Anda dapat menentukan nama mereka. Anda juga dapat melakukan sesuatu seperti "merah." Dan kemudian jika kita kembali ke ini, Anda akan melihat bahwa latar belakang merah. Anda juga bisa mendapatkan really-- Saya pikir Anda bisa mendapatkan cukup kreatif dengan ini, tidak bisa Anda? 

Allison Buchholtz-AU: I pikir Anda dapat menggunakan hex. Bukan? 

TOMAS Reimers: Ya. Jadi, Anda dapat menggunakan hex. Tapi aku nama-bijaksana berpikir. Apakah tidak ada? Allison Buchholtz-AU: Anda dapat melakukan beberapa. Cukup banyak seperti kebanyakan warna yang Anda dapat name-- seperti, saya pikir salmon adalah salah satu. 

TOMAS Reimers: Kami akan mencoba salmon. Allison Buchholtz-AU: I berpikir hijau kekuning-kuningan yang di sana. TOMAS Reimers: Ya. Lihat? Jadi Anda bisa mendapatkan cukup kreatif. 

Allison Buchholtz-AU: Anda bisa mendapatkan cukup kreatif. Seperti, jika Anda bisa memikirkan Nama warna, itu mungkin di sana. Jika Anda benar-benar ingin baik-baik saja detail, Anda dapat pergi hex. 

TOMAS Reimers: Ya. Jadi heksadesimal. Jika kalian ingat kembali ini dari PSET lama Anda, Gambar Recover, kalian harus berurusan dengan nilai-nilai hex tersebut. Dan semacam untuk rekap apa itu, hex memiliki tiga nilai yang tersimpan di dalamnya. Jadi itu dalam kelompok dua bertahap. Dua yang pertama merupakan nilai merah. Yang kedua merupakan nilai hijau. Dan yang terakhir adalah biru? 

Jadi FF terjadi untuk mewakili heksadesimal 255. Jadi Anda memiliki 255 merah, 255 hijau, dan 0 untuk biru. Dan nilai-nilai berkisar antara 0 dan 255. 

AUDIENCE: Benar. Jadi pada dasarnya, kita bisa mencari internet untuk setiap warna yang kita inginkan, dan mengidentifikasi-benar diketahui combo spektrum warna, dan kemudian kita bisa memasukkannya ke dalam? Allison Buchholtz-AU: Tepat. Jadi Anda memiliki cukup banyak kontrol penuh atas warna yang Anda inginkan dalam CSS. Apakah kita akan berbicara tentang gambar latar belakang nanti? Atau apakah kita ingin melakukan itu? 

TOMAS Reimers: Ya. Tentu saja. Jadi pertama, hanya untuk menunjukkan bahwa merah dan hijau kuning. Dan jika Anda membutuhkan beberapa bantuan untuk menemukan ini, Anda bisa Google sesuatu seperti "color picker." Allison Buchholtz-AU: Oh, itu begitu baik. Saya suka Color Picker. 

TOMAS Reimers: colorpicker.com adalah contoh yang baik. Dan di sini, Anda akan melihat bahwa Anda memiliki Photoshop seperti picker penuh warna. 

Allison Buchholtz-AU: Mm-hm. Juga, hal keren yang Anda dapat menghasilkan skema warna sehingga Anda tidak memiliki, seperti, bentrok warna. TOMAS Reimers: Dan kemudian inilah hex nilai di sini. Sehingga Anda selalu dapat menemukan secara online pada dasarnya tempat untuk mendapatkan nilai hex dari. Ini tidak memilah itu adil, seperti, kita melihat warna dunia dalam jumlah. Ini lebih kita online dan menemukan apa warna yang kita inginkan, dan kemudian mengambil nomor bawah. Karena itu hanya benar-benar mudah cara untuk referensi hal di CS. 

Allison Buchholtz-AU: Dan kemudian ada also-- Saya lupa nama yang tepat dari situs. Tapi pasti ada, saya berpikir, sesuatu dari Adobe yang menghasilkan skema warna untuk Anda, yang benar-benar keren, karena Anda definitely-- kadang-kadang sulit untuk mengetahui, oh, jika saya ingin menggunakan warna ini, apa yang mungkin menjadi salah satu yang berguna untuk digunakan di tempat lain di situs saya untuk, seperti, membuatnya bagus dan kohesif. 

TOMAS Reimers: Allison berbicara tentang satu per Adobe Kuler disebut, saya pikir. Ini K-U-L-E-R. Allison Buchholtz-AU: Saya kira begitu. Aku cukup yakin itu satu. 

TOMAS Reimers: Favorit saya selalu Skema Warna Designer. 

Allison Buchholtz-AU: Ooh. 

TOMAS Reimers: Yang sekarang-- 

Allison Buchholtz-AU: Ah, ini indah. 

TOMAS Reimers: Dan Anda pada dasarnya bisa mengatakan, seperti, Saya ingin tiga warna di samping satu sama lain. Dan kemudian mari kita lakukan sesuatu yang baik. Dan kemudian Anda bisa mendapatkan contoh apa yang mungkin terlihat seperti. Dan kemudian jika Anda membawa lebih dari salah satu mereka, memberikan Anda nilai hex. 

Jadi hanya sebagai cara yang baik untuk memulai berpikir tentang skema warna atau apa warna dalam website mungkin berjalan dengan baik bersama-sama. Karena itu bisa mengejutkan tidak mudah untuk memilih yang Anda pikirkan. Dan kemudian hal menarik lainnya Saya selalu menemukan tentang situs ini adalah jika anda menekan Contoh, itu akan menunjukkan apa situs contoh mungkin terlihat seperti menggunakan skema warna. Pokoknya. 

Kembali ke CSS yang sebenarnya. Allison Buchholtz-AU: Tapi jelas, kami tahu referensi ini mungkin berguna. TOMAS Reimers: Tidak, mereka pasti bisa membantu. Jadi aturan kedua, Allison? 

Allison Buchholtz-AU: Ya. Aturan kedua adalah sesuai dengan font yang kita. Jadi berat font yang hanya jenis of-- sehingga berat badan akan jika Anda ingin hanya, seperti, normal atau, seperti, font tipis, atau dalam hal ini, seperti, berani. Saya lupa. Apa jika Anda ingin itu-- ada yang lebih tipis dari sekedar, seperti, normal? TOMAS Reimers: Saya tidak benar-benar tahu apakah ada yang lebih tipis. Allison Buchholtz-AU: saya lupa. Berat sehingga font yang kita biasanya hanya digunakan untuk berani. Jika Anda ingin benar-benar menjadi itu, kita akan menunjukkan kepada Anda. W3Schools memiliki semua yang berbeda hal yang dapat Anda lakukan untuk font. Tapi pada dasarnya, jika Anda pernah ingin untuk mengubah apa-apa tentang font, itu selalu akan menjadi, seperti, font-sesuatu. Sehingga akan menjadi seperti, font-family jika Anda mencoba untuk mengubah jenis sebenarnya. Ini akan font-style jika Anda ingin membuatnya seperti kursif, atau miring, atau entah apa lagi. Atau bahkan font-warna, jika kami ingin mengubah itu. 

TOMAS Reimers: Yup. Jadi Anda bisa mengubah itu. Dan semacam hanya untuk rekap sekarang, sehingga Anda dapat melihat bahwa kita memiliki pemilih di sini. Kami memiliki ini kurung kurawal. Dan kemudian kita memiliki aturan dipisahkan dengan titik koma. Apakah itu masuk akal? Ya? Keren. Jadi jika itu good-- 

Allison Buchholtz-AU: Kembali. TOMAS Reimers: Mari kita bicara secara khusus tentang jenis selektor yang kita miliki. "Penyebab sekarang kita sudah semacam saja menunjukkan tag. Tapi kalian bisa melihatnya masuk akal. Katakanlah Anda memiliki dua paragraf pada halaman dan Anda ingin dapat gaya satu tetapi tidak yang lain, Anda tidak hanya ingin membatasi diri harus menggunakan HTML aktual yang berbeda tag untuk memberi mereka gaya yang berbeda. 

Jadi kami memiliki tiga dasar jenis pemilih. Allison Buchholtz-AU: Ya. Jadi kita memiliki tag, yang adalah apa yang kita sudah bicarakan sekarang. Jadi itulah jenis seperti tubuh atau p. Dan kemudian kita memiliki kelas, yaitu ketika kita mendefinisikannya dalam file CSS kami, itu selalu akan dot, apa pun Anda ingin nama kelas Anda untuk menjadi. Dan ini bisa berlaku untuk beberapa hal. 

Katakanlah Anda memiliki lima paragraf dan dua dari mereka bertiga perlu ditata sama, Anda akan menerapkan kelas untuk itu. Dan ini hanya cara kita melakukannya. Kami akan memberikan contoh di mana hal ini benar-benar muncul. Tetapi jika Anda memiliki mungkin beberapa tag p, setelah, Anda akan menulis, kelas sama kelas apa pun Anda ingin menerapkan untuk itu. Jadi, apa pun pemilih kelas yang kita inginkan untuk menerapkan ayat tertentu, kita hanya bisa menulis seperti ini. Tentu saja, saya pikir contoh akan membuatnya jauh lebih konkret. 

Yang lain yang kita miliki adalah id, yang kita nyatakan dengan hash, atau pound, atau hashtag. TOMAS Reimers: octothorpe. Allison Buchholtz-AU: octothorpe. Yang bekerja, juga. Dan yang satu ini harus benar-benar unik. Mereka hanya harus berlaku untuk satu hal pada halaman Anda. Jadi apakah itu sebuah paragraf tertentu, atau item dalam daftar, atau apa pun, ini harus unik. Dan dengan cara yang sama bahwa kita hanya mengatakan, seperti, class = "class1 class2," ini bisa menjadi id dari apa pun yang kita miliki. TOMAS Reimers: Ya. Jadi mari kita bicara pasti tentang contoh di sini. Dan aku hanya akan menyelam langsung kembali ke dalam kode. Jadi mari kita lihat HTML kita. Dan jadi kita sekarang memiliki satu paragraf. Ini adalah teks. Aku hanya akan memodifikasi saya t. "Ini adalah teks 1." Dan kemudian kita akan memiliki "Ini adalah teks 2." 

Allison Buchholtz-AU: satu Kedua. TOMAS Reimers: Yup. Jadi kita sekarang memiliki "Ini adalah teks 2," benar? Dan kita akan melihat bahwa jika kita ulang halaman, apa yang kita akan menemukan adalah kita akan find-- Allison Buchholtz-AU: Ooh. TOMAS Reimers: Ya. Kita akan menemukan "Ini adalah teks 1, "dan" Ini adalah teks 2. " 

Allison Buchholtz-AU: Dan Warna kuning keluar indah. 

TOMAS Reimers: Dan Anda akan melihat bahwa pemilih kita sekarang, yang berlaku untuk p itu, atau paragraf, mempengaruhi baik dari mereka, karena keduanya memenuhi Kondisi mereka berdua tag p. Itu masuk akal total. Jadi pertanyaannya adalah, baik, apa jika kita ingin hanya mendapatkan satu? Jadi persis seperti Allison mengatakan, kita memiliki dua cara lain untuk melakukan itu. Aku akan memulai dengan id. 

Allison Buchholtz-AU: Mari kita mulai dengan id. 

TOMAS Reimers: Dan kedua ini adalah atribut. Jadi atribut yang ada di HTML. Dan apa yang mereka adalah sesuatu yang Anda tambahkan dalam tag yang terpisah dari nama tag. Jadi, Anda dapat memiliki beberapa atribut. Ya? 

Allison Buchholtz-AU: aku hanya akan mengatakan, dari contoh Anda dari PSET 7, jika ada dari Anda mencoba untuk menyelaraskan hal ke pusat, Anda mungkin telah digunakan "Text align = center." Dan Anda melihat itu mungkin seharusnya berpusat teks atau bar navigasi Anda. Jadi itu hanya juga atribut Anda mungkin akrab dengan. TOMAS Reimers: Ada banyak yang dari atribut yang Anda akan melihat. Ya. Seperti referensi yang baik untuk PSET 7. Kami memiliki id. Anda juga dapat memiliki kelas, hal-hal seperti ini. Sebuah tag tunggal dapat memiliki banyak atribut. Jadi dimulai dengan id, mari kita berpura-pura kita ingin memiliki id of-- saya tidak tahu. Kita akan menyebutnya khusus, karena yang satu ini, kami akan membuat tebal, dan menggarisbawahi, dan apa pun. Allison Buchholtz-AU: Ini akan menjadi super khusus. TOMAS Reimers: Jadi ini satu, kami memiliki id khusus. Jadi cara untuk memilih itu, maka, adalah di main.css, daripada memiliki tag p, Anda #special, OK? Dan yang memilih Hal dengan id khusus. Apakah ini masuk akal bagi semua orang? AUDIENCE: Ya. TOMAS Reimers: Cool. Jadi sekarang jika kita kembali, kita akan see-- whoops. Ya. Kita akan melihat bahwa itu hanya menyeleksi satu dengan id khusus. Ya? Kedengarannya keren. Iya Nih. 

AUDIENCE: Dapatkah sesuatu memiliki atribut dari kedua kelas dan id? 

TOMAS Reimers: Ya. AUDIENCE: OK. Dan kemudian apa yang terjadi jika Anda kemudian memberikan itu beberapa aturan dalam CSS konflik itu? TOMAS Reimers: Tentu saja. Kami pasti akan untuk berbicara tentang itu. Jadi persis apa yang Anda dapatkan di, Anda juga dapat memiliki kelas. Jadi mari kita berpura-pura aku tiga paragraf dan saya ingin gaya pertama dua tapi tidak yang ketiga. Nah, ide pertama Anda mungkin, baik, saya hanya bisa memberikan yang kedua id. Tapi Anda tidak bisa, karena id, persis seperti Allison mengatakan, harus unik. 

Jadi, bukannya id, apa yang Anda dapat menggunakan adalah Anda dapat menggunakan kelas. Dan class-- sebuah apa memungkinkan Anda lakukan pada dasarnya mengatakan, ini milik sebagai bagian dari kelompok. Dalam hal ini, kelompok kami disebut Special. Dan apa yang akan kita lakukan adalah kita akan say-- daripada pound, kita akan menggunakan dot. OKE? Dan perhatikan bahwa pound dan dot hanya ada dalam file CSS, tidak dalam HTML. Allison Buchholtz-AU: Ya. Perbedaan penting. 

TOMAS Reimers: Saya memiliki memiliki begitu banyak perjuangan, karena saya menempatkan hash dalam HTML dan kemudian hanya merasa bodoh untuk waktu yang lama. Lihat bagaimana memilih kedua orang-orang dengan kelas itu? Keren. 

Sekarang, hal dapat memiliki beberapa kelas. Katakanlah saya ingin membuat yang pertama dua memiliki latar belakang kuning dan dua detik memiliki warna font biru. OKE. Saya tidak benar-benar tahu mengapa saya akan ingin melakukan itu, tapi aku bisa. 

Allison Buchholtz-AU: tidak Might direkomendasikan untuk website Anda. Tapi untuk tujuan kita, itu akan dilakukan. 

TOMAS Reimers: Ini bukan skema warna yang baik. Allison Buchholtz-AU: Nah, kuning dan biru adalah warna SMA saya. Saya tidak tahu, meskipun. TOMAS Reimers: Allison tinggi sekolah memiliki skema warna yang besar. [CANDA TAWA] Jadi apa yang bisa kita sebut ini mari sebut this-- jadi kita harus Khusus dan kami memiliki cukup. Saya sarankan, untuk ini, Anda menggunakan Nama jauh lebih deskriptif. Allison Buchholtz-AU: Ya, saya akan menyebutnya, seperti, kuning atau biru. 

TOMAS Reimers: Kami tidak benar-benar membuat sebuah website yang nyata, itulah sebabnya mengapa kita tidak melakukan hal itu. Tetapi jika Anda benar-benar memiliki situs web yang nyata, Anda mungkin, seperti, artikel header, konten artikel, kata pertama, hal-hal seperti itu, yang memungkinkan Anda akan jauh lebih deskriptif. Ini benar-benar seperti variabel. Mereka harus diberi nama dengan cara di mana Anda bisa, like-- ya, seperti itu. Sempurna. 

Jadi warna latar belakang. Dan kemudian kita akan say-- sehingga cara untuk mengubah warna hanya "warna." Dan kita akan membuatnya biru. Keren. Jadi sekarang kita memiliki Dua yang pertama memiliki khusus. Berikutnya akan memiliki "class = cantik." Allison Buchholtz-AU: Dan kemudian Anda akan ingin menambahkan "cantik" ke tengah. TOMAS Reimers: Yup. Dan kemudian ke tengah satu, untuk menambahkan "cantik," apa yang terjadi adalah Anda hanya memiliki ruang. Jadi atribut class adalah daftar dipisahkan dengan spasi dari semua kelas yang berlaku untuk tag tersebut. OKE? Ini bukan seperti ini milik beberapa jenis kelas khusus yang disebut "Khusus, ruang, cantik." Ini milik dua classes-- khusus dan cantik. Iya Nih? Keren. 

Kemudian jika kita melihat apa yang terjadi, kami akan melihat bahwa pertama memiliki latar belakang kuning, teks hitam. Satu-- kedua 

Allison Buchholtz-AU: --has berani latar belakang kuning dengan teks biru. Dan yang terakhir kami hanya memiliki teks biru yang kita ditugaskan untuk itu. 

TOMAS Reimers: keren? Bagaimana penyeleksi bekerja? Mengagumkan. 

Allison Buchholtz-AU: Apakah kita ingin berbicara tentang konflik sekarang itu? 

TOMAS Reimers: Jadi ya. Tentu saja. Jadi apa yang terjadi jika Anda memiliki konflik, kan? Mari kita berpura-pura yang pertama set up sesuatu like-- Allison Buchholtz-AU: Mungkin yang satu ini mengubah latar belakang? TOMAS Reimers: Ya. Jadi kita akan membuat "cantik" mengubah latar belakang salmon. Allison Buchholtz-AU: Kau hanya dengan semua warna yang besar saat ini, Tomas. TOMAS Reimers: Ya. Karena aku tahu aku bisa menggunakan salmon sebagai warna yang nyata. Jadi kita hanya akan melakukan itu. Saya juga berpikir Sunset adalah warna yang nyata. AUDIENCE: Sunset adalah warna yang nyata? Allison Buchholtz-AU: Mari kita coba. TOMAS Reimers: Setelah demo ini hanya karena dalam kasus itu mengacaukan, Saya tidak ingin debugging. Jadi kita tahu salmon adalah warna yang nyata. Jadi setiap tebakan tentang apa yang akan terjadi? 

Allison Buchholtz-AU: Tahu? 

AUDIENCE: [tidak terdengar]. 

TOMAS Reimers: Ya. Jadi Anda mendapatkannya tepat. Pada dasarnya, dibutuhkan Aturan terakhir yang diberikan. 

Allison Buchholtz-AU: Jadi ini adalah di mana Cascading mulai berlaku. 

TOMAS Reimers: Jadi ingat bagaimana kita memiliki bahwa Cascading style sheet? Jadi dengan itu, kita semacam berarti bahwa kita memiliki banyak aturan yang berlaku di atas satu sama lain, dan mereka juga dapat menimpa satu sama lain. 

Allison Buchholtz-AU: Jadi apa yang di bagian bawah akan menimpa apa pun yang di atas. Anda bisa memiliki aturan yang benar-benar meniadakan sesuatu sebelumnya. Itu juga mengapa Anda ingin menjadi hati-hati bila Anda styling, sehingga Anda tidak membuat aturan yang Anda hanya benar-benar utama. 

TOMAS Reimers: Atau mungkin Anda ingin menimpa aturan. 

Allison Buchholtz-AU: Atau mungkin Anda lakukan. Iya Nih. 

TOMAS Reimers: Berpura-pura Anda memiliki kelas yang berlaku untuk banyak hal, tapi katakanlah Anda ingin mengubah latar belakang warna merah dan font berat berani untuk sebagian besar hal, tapi untuk satu, Anda hanya ingin warna latar belakang menjadi merah tetapi Anda ingin semua yang lain properti, Anda bisa melakukan sesuatu seperti "font-weight = normal," yang kemudian akan membatalkan perubahan yang berani. Ya? Sekali lagi, cara terbaik, saya pikir Allison mengatakan, hanya latihan. 

Allison Buchholtz-AU: Percobaan. 

TOMAS Reimers: Latihan, latihan, praktek, dan percobaan. Saya tahu banyak orang yang berpikir CSS hanya banyak menebak-dan-cek pada akhir hari, di mana jika Anda ingin melakukan something-- seperti, Anda memiliki gambaran kasar, namun Anda masih mungkin perlu untuk mencobanya untuk memastikan Anda tahu apa yang tampak seperti. 

AUDIENCE: Ketika Anda menerapkan kelas, lebih dari satu dengan ayat yang sama atau bagian, apakah itu peduli apa urutan Anda bisa ketik mereka ke dalam tanda kutip? 

TOMAS Reimers: Tidak, tidak sama sekali. 

Allison Buchholtz-AU: Yang penting adalah urutan dalam style sheet CSS Anda. AUDIENCE: Bisakah Anda mengulang pertanyaannya? TOMAS Reimers: Oh. Allison Buchholtz-AU: Dalam kelas, ketika Anda memberikan kelas sesuatu dalam HTML, tidak itu penting agar yang mereka berada di? Tidak peduli pesanan. Yang penting adalah urutan selektor kelas dalam CSS Anda, dalam style sheet. 

TOMAS Reimers: baik suara? 

Allison Buchholtz-AU: Lovely. 

TOMAS Reimers: Dan kemudian kita akan terus to-- Allison Buchholtz-AU: Apa yang kita miliki selanjutnya? Saya lupa. Oh, kita hanya perlu contoh. Tapi kita seperti dilakukan orang-orang. Kami telah melakukan contoh dengan cepat. 

TOMAS Reimers: Kita bisa menggabungkan pemilih segera. 

Allison Buchholtz-AU: Oh, kita bisa menggabungkan penyeleksi. TOMAS Reimers: Jadi beberapa contoh adalah kita memiliki # Dog-- pound, atau hashtag, atau octothorpe, atau apa pun Anda ingin menelepon itu-- tajam. 

Allison Buchholtz-AU: anjing Sharp. 

TOMAS Reimers: Maka Anda memiliki .pets. Sesuatu memiliki id anjing, hanya ada satu anjing di halaman. Sesuatu memiliki id dari kucing, hanya ada satu kucing. Mungkin ada banyak hewan peliharaan pada halaman. Itu sebabnya kami memberikan bahwa kelas. Anda memiliki contoh p. Dan kemudian jadi salah satu contoh terakhir, yang adalah sesuatu yang kita belum membicarakan, adalah apa yang terjadi ketika Anda menggabungkan mereka. Jadi p.pets. 

Jadi untuk itu, mari kita kembali ke kode dan memperkenalkan another-- ya. Jadi kembali ke sini. 

Allison Buchholtz-AU: I merasa seperti ini adalah really-- seperti hanya melihat melalui contoh benar-benar cara belajar ini. Jadi itulah yang kita lakukan. 

TOMAS Reimers: Jadi mari kita berpura-pura kita hanya ingin memilih teks 2, kan? Jadi kita pasti tidak bisa melakukannya dengan id. Nah, kita bisa melakukan itu dengan id, tetapi tidak memiliki id. Aku bisa menambahkan satu, tapi mari kita berpura-pura bahwa saya tidak ingin menambahkan satu atau sudah memiliki sesuatu yang lain. Saya tidak bisa melakukan itu dengan itu. Tag ini jelas tidak unik, kan? Dan juga bukan kelas. Tapi Anda dapat menggabungkan hal-hal ini. Katakanlah kita ingin melakukan sesuatu yang hanya berlaku untuk hal-hal yang memiliki kelas khusus dan yang memiliki kelas yang cantik. 

Jadi apa yang dapat Anda lakukan adalah di main.css, Anda dapat mengatakan, mari kita pertama menghapus ini. Anda dapat menggabungkan. Sehingga Anda dapat melakukan .special. Tidak ada ruang. Hanya .special.pretty. Apa itu artinya adalah sesuatu yang baik khusus dan cantik. Apakah itu masuk akal? Dan jika kita pergi ke sini, apa yang Anda akan melihat adalah aturan ini hanya berlaku untuk kedua, yang memiliki kedua orang. Dan Anda dapat melakukannya untuk banyak hal. Anda dapat say-- mari berpura-pura aku hanya ingin melakukan hal-hal yang memiliki kelas yang cantik dan yang juga tag paragraf. Jadi p.pretty. Mari kita berpura-pura bahwa saya telah sesuatu yang cantik di tag body. OKE? Saya bisa menjalankan ini dan saya dapat melihat bahwa itu hanya akan berlaku untuk hal-hal yang paragraf dengan class cantik. Dan Anda dapat menggabungkan ini, pada dasarnya, sebanyak yang Anda inginkan. Jadi Anda hanya dapat menempatkan mereka bersama-sama. Apakah itu masuk akal? Allison Buchholtz-AU: Jadi ini jenis yang lebih berguna ketika, Tomas mengatakan sebelumnya, mungkin Anda memiliki situs web yang sangat rumit, dan Anda sudah memiliki banyak aturan ini ditulis, dan Anda hanya perlu menggabungkan dua dari sebelumnya. Seperti alih-alih menulis keseluruhan pemilih baru dan mengubah sana, Anda hanya dapat menggabungkan mereka di mana tumpang tindih. 

TOMAS Reimers: Atau Anda mungkin menemukan out-- kadang-kadang ada satu kelas yang membuat warna font seperti biru, dan ada kelas lain yang membuat latar belakang biru. Dan itu tidak akan berhasil. Jadi Anda menulis kasus khusus, di mana, like-- tetapi jika memiliki keduanya, apa yang Anda akan lakukan adalah Anda akan membuat satu ini warna biru ini dan yang satu ini warna lain ini biru. Yang Tepat? 

Allison Buchholtz-AU: Baik bagi mereka jenis pengecualian. TOMAS Reimers: Jadi untuk berpikir tentang masalah yang mungkin muncul ketika Anda menggabungkan mereka. Keren. Jadi kembali ke presentasi kami. Allison Buchholtz-AU: Kita sudah hampir sampai. TOMAS Reimers: Dan telah berhenti menghubungkan. Allison Buchholtz-AU: Oh, tidak. Allison Buchholtz-AU: CS di kantor, internet turun. Oh, ironi. 

TOMAS Reimers: Jadi untungnya, kita bisa hadir tanpa internet, saya kira, karena kita memiliki semua slide di sini. Jadi mari kita bicara tentang Hubungan tag. Allison Buchholtz-AU: Benar. Jadi hanya semacam terjadi off dari apa yang dikatakan Tomas, ini adalah cara lain untuk melakukannya. Jadi kita memiliki beberapa orang tua Pemilih dengan pemilih anak. Jadi, dalam contoh ini di sini, kami memiliki beberapa tubuh dengan navbar kelas, tombol kelas. Ah. 

TOMAS Reimers: Oh, maaf. 

Allison Buchholtz-AU: Dan Pada dasarnya, apa artinya ini adalah memilih semua anak-anak, seperti semua hal-pemilih, dalam pemilih tua ini. Dan mereka adalah satu-satunya itu pernah akan berlaku untuk. Saya tidak tahu apakah Anda memiliki cara yang lebih baik of-- TOMAS Reimers: Jadi saya menebak jalan untuk berpikir tentang ini mengingat sebelumnya bagaimana kita semacam suka menempatkan mereka bersama-sama. Dan maka itu berarti satu elemen yang cocok dengan semua ini. Apa yang dikatakan adalah, saya ingin Anda untuk mencocokkan segalanya dalam some-- saya ingin Anda untuk menemukan pemilih. Dan kemudian dalam itu, saya ingin Anda untuk mencocokkan hal-hal baru. Yang Tepat? Jadi dalam CSS, itu semua tentang jenis bisa mencocokkan barang-barang ini. Dan Anda dapat mencoba untuk mencocokkan item dalam barang-barang lainnya. 

Jadi mari kita benar-benar melakukan contoh, dan kami berpikir bahwa akan memperjelas. Jadi mari kita berpura-pura kita memiliki khusus, khusus cukup, apa pun. Dan kemudian kita memiliki link, OK? Jadi ingat, adalah link. Ini tidak akan pergi ke mana pun. Dan kita akan memberikan link kelas, saya kira. Mari kita berikan class-- memberikan saya ide. Allison Buchholtz-AU: Cool. TOMAS Reimers: Coo-- mari pergi itu kelas cantik. Kenapa tidak? 

Allison Buchholtz-AU: OK. TOMAS Reimers: Jadi hal yang benar sekarang cukup akan membuat latar belakang biru, warna latar belakang dari salmon. Itu masuk akal. Dan jika kita lakukan this-- 

Allison Buchholtz-AU: Apakah Anda ingin menambahkan teks sehingga hyperlink benar-benar muncul? TOMAS Reimers: Itu akan menjadi panggilan yang baik. Allison Buchholtz-AU: Karena hak sekarang kita hanya gonna mendapatkan apa-apa. TOMAS Reimers: Jadi ini adalah link. "Ini adalah link." Oh, dan ini akan menjadi link lain. Mari kita kelas "keren." Anda benar. Keren. Jadi sekarang kita akan ambil ini. Kita akan membuang satu. Kami memiliki satu di tag khusus, dan kami juga akan memiliki satu dalam tag cantik. Dan sekarang apa yang kita akan lakukan adalah kita akan membuat cool-- apa yang kita ingin lakukan? Allison Buchholtz-AU: Bisakah kita membuatnya lebih besar? TOMAS Reimers: Mari kita memberikan perbatasan. Allison Buchholtz-AU: Kita bisa perbatasan. TOMAS Reimers: Ya. Jadi kita akan melakukan sesuatu seperti, perbatasan is-- dan kami akan menjelaskan ini semua dalam satu detik. Untuk sekarang-- 

Allison Buchholtz-AU: Untuk model kotak. TOMAS Reimers: Tapi untuk saat ini, kami hanya akan memberikan perbatasan. Jadi apa itu artinya Anda akan melihat link ini. Dan Anda akan melihat bahwa mereka memiliki ini, seperti, batas hitam jelek, yang dingin. 

Allison Buchholtz-AU: Website kami begitu cantik. 

TOMAS Reimers: Ya. Website kami adalah mengagumkan. Jadi kedua adalah link, dan mereka muncul. Sekarang mari kita berpura-pura hanya ingin melakukan ini jika itu tidak dalam sesuatu yang memiliki latar belakang salmon. Jadi ingat bahwa satu ini memiliki latar belakang salmon, karena itu kelas cantik. 

Tapi kami ingin mengatakan bahwa hanya mendinginkan yang berada di kelas khusus, bukan di kelas cantik, harus memiliki perbatasan itu. Nah, apa yang dapat Anda lakukan adalah Anda bisa mengatakan, .special, ruang, .cool. Dan apa yang dilakukannya, ketika Anda berpikir tentang hal itu, itu pada dasarnya yang mengatakan, OK, menemukan saya semuanya yang cocok khusus. Kemudian dalam tag tersebut, menemukan saya segala sesuatu yang keren. Allison Buchholtz-AU: Jadi cara lain yang mungkin baik untuk berpikir tentang hal ini, membawanya kembali ke C, adalah seperti ide lingkup. Jadi, ketika Anda memiliki beberapa pemilih, seperti yang bahwa kita telah bekerja untuk sebelum ini, Halaman web seluruh Anda, semua HTML berada dalam lingkup Anda, kan? Tapi ketika kita memiliki ini hubungan orangtua-anak, seolah-olah Anda mempersempit mana Anda ingin suatu tempat tertentu, seolah-olah, seperti, kita cari dalam fungsi tertentu, bukan seluruh file kita. AUDIENCE: Maka dengan itu dalam pikiran, akan itu penting jika kita memiliki changed-- Allison Buchholtz-AU: Urutan? AUDIENCE: --the kelas dalam CSS untuk .cool, ruang, .special? Allison Buchholtz-AU: Ya, karena itulah akan mengatakan, ruang lingkup ke segala sesuatu yang memiliki dingin, dan kemudian melihat apa has-- Maksudku, seperti, dalam hal ini, Saya tidak berpikir itu akan mengubah itu. 

TOMAS Reimers: Jika kita mengatakan apa? Mohon Maaf. 

Allison Buchholtz-AU: Jika kita lingkup untuk mendinginkan dan kemudian mencari hal-hal khusus, itu akan menjadi sama, sebenarnya. 

TOMAS Reimers: Jadi tidak akan. 

Allison Buchholtz-AU: Ini tidak? Oh, oh baik. Saya salah. 

TOMAS Reimers: Jadi alasan itu different-- kesalahan-umum adalah bahwa sekarang hanya link memiliki keren, kan? Saya kira pertanyaan saya kepada kalian adalah, apa di halaman ini cocok dengan .cool? Ada dua tag di sini, kan? Yang satu ini dan yang satu ini. Keduanya cocok keren. Tidak ada yang lain tidak. Jadi jika Anda berkata, .cool, ruang, .special, apa yang akan Anda katakan adalah, dalam tag ini, apa yang spesial? Allison Buchholtz-AU: Hm. Itulah yang itu-- benar. Karena itu seperti hanya sesuatu di sini. 

TOMAS Reimers: Jadi memilih apa-apa. 

Allison Buchholtz-AU: Bahwa khusus, kami dalam tag ini di sini. 

TOMAS Reimers: Mereka dan orang-orang. AUDIENCE: OK. Jadi tag dari maju slash? 

TOMAS Reimers: Ya. Apakah itu masuk akal? Bagaimana itu pada dasarnya mencoba untuk mempersempit ruang lingkup. Allison Buchholtz-AU: Ya. Saya pikir itu mungkin Cara termudah untuk berpikir tentang hal itu. 

TOMAS Reimers: Jadi kami menemukan ini, dan kami menemukan ini baik cocok khusus. Dan kemudian kita bertanya, dalam orang-orang ini, apa yang keren? Dan dalam satu ini, keren yang satu ini. Dalam satu ini, tidak ada yang keren. Jadi ini adalah satu-satunya tag yang tersisa. 

Allison Buchholtz-AU: Bahwa keren hanya dalam satu tag ini ada. TOMAS Reimers: Tepat. Dan apa yang khusus dalam mereka? Tidak Ada. Sekarang, apa yang akan saya katakan adalah jika tidak ada ruang, Anda meminta apa yang keren dan special-- atau apa cantik dan istimewa, kan? Jika Anda mengatakan .special.pretty, itu sama seperti .pretty.special. 

Karena apa menghapus ruang adalah minta adalah, ketika Anda mengatakan .special, Anda bertanya, OK, mana yang istimewa? Dan kemudian orang-orang yang yang juga cantik, yang sama, gramatikal, sebagai bertanya, apa yang cantik, dan kemudian dari mereka, apa yang juga istimewa? Yang Tepat? Ini adalah perbedaan apa dalam apa yang ada. AUDIENCE: OK. TOMAS Reimers: Ya. Mengagumkan. Maka dengan itu dalam pikiran then-- 

Allison Buchholtz-AU: Saya pikir terakhir kami hal ini (IN FANCY BRITISH ACCENT) model kotak. 

TOMAS Reimers: The box-- [terkekeh] Aku suka cara Allison mengatakan bahwa. Jadi hal model kotak. 

Allison Buchholtz-AU: Hanya memiliki kotak, saya akan model kotak Anda. TOMAS Reimers: Jadi mari kita bicara tentang itu. Jadi sekarang kita telah menghabiskan banyak waktu berbicara tentang penyeleksi. Sekarang, kalian mungkin, seperti, master selectors-- Anda tahu, bagaimana tepatnya memilih konten yang Anda ingin memanipulasi pada layar Anda. 

Jadi sekarang pertanyaannya adalah, bagaimana tepatnya bisa Anda memanipulasinya? Jadi saya kira yang paling dasar cara untuk berpikir tentang hal itu adalah, baik, apa sebenarnya merupakan elemen dalam CSS? Kami telah menghabiskan banyak waktu bicarakan, apa yang tag, atau apa yang paling dasar representasi tag? 

Cara yang baik untuk berpikir tentang yaitu, apa bentuknya salmon? Bentuk apa, seperti, yang salmon berwarna latar belakang? 

AUDIENCE: Ini persegi panjang. 

TOMAS Reimers: Ini persegi panjang, kan? 

Allison Buchholtz-AU: Bukan pertanyaan jebakan. [CANDA TAWA] 

TOMAS Reimers: Tidak mencoba untuk menipu kalian ini terlambat. Jadi kita harus persegi panjang ini. Dan tag adalah p, kan? Sehingga memberi kita baik keyakinan bahwa ayat direpresentasikan sebagai persegi panjang, di setidaknya dalam pikiran browser, yang ini adalah. 

Allison Buchholtz-AU: Maksudku, browser biasanya persegi panjang, sehingga masuk akal. 

TOMAS Reimers: Idenya di sini adalah bahwa semua tag dalam CSS direpresentasikan sebagai persegi panjang. Dan setiap persegi panjang memiliki empat bagian menurut CSS, OK? Anda memiliki konten yang sebenarnya. Di situlah teks terletak. 

Allison Buchholtz-AU: Mungkin gambar Anda. 

TOMAS Reimers: Ya. Anda memiliki padding, yaitu hanya beberapa jenis spasi. Kemudian Anda memiliki perbatasan. Dan kemudian Anda memiliki margin, yang adalah ruang putih di luar itu. Sehingga tidak masuk akal kepada siapa pun, jadi kita akan berbicara tentang itu untuk kedua. Jadi di sini, apa yang akan kita lakukan adalah kita akan membuat beberapa divs, OK? Maaf sementara Aku-- 

Allison Buchholtz-AU: Saya merasa seperti kita harus memasang foto lucu di. 

TOMAS Reimers: Kami pasti harus. 

Allison Buchholtz-AU: Aku merasa seperti orang bisa mendapatkan keuntungan dari lucu gambar, semua. 

TOMAS Reimers: Bisakah kita semua manfaat dari a-- 

AUDIENCE: Ya, tentu. TOMAS Reimers: OK, keren. Jadi kita harus meletakkan lucu gambar di suatu tempat. Allison Buchholtz-AU: Saya merasa seperti lucu kelinci mungkin berguna sekarang. TOMAS Reimers: Tentu. Allison Buchholtz-AU: Akhir minggu. Memiliki sesuatu adorab-- 

TOMAS Reimers: Bagaimana pertarungan anak kucing? 

Allison Buchholtz-AU: Sebuah kucing bekerja, juga. 

TOMAS Reimers: Cool, karena ada sebuah situs untuk itu. Ini disebut PlaceKitten. Allison Buchholtz-AU: Itu bagus. TOMAS Reimers: Ya. Allison Buchholtz-AU: Hanya untuk, seperti, gambar placeholder dalam situs web Anda. TOMAS Reimers: Mm-hm. Ada juga PlacePuppy. Dan ada PlaceBacon. 

Allison Buchholtz-AU: PlaceBacon? Masa Sih? 

TOMAS Reimers: Oh, kami tidak memiliki akses internet di sini. 

Allison Buchholtz-AU: [erangan] Tragis. TOMAS Reimers: Jika tidak, Saya akan menunjukkan kalian bagaimana untuk menempatkan gambar dalam website Anda. Kami akan mencoba untuk mendapatkan ini bekerja sebelum kita harus pergi. Tapi untuk saat ini, kami hanya akan berbicara dalam warna kemudian. Kami ingin menempatkan gambar kittens-- 

Allison Buchholtz-AU: Kami melakukan. 

TOMAS Reimers: --the internet yang turun untuk saat ini menjadi. Jadi kita memiliki dua divs, dan kami akan memberi mereka dua id. Kita akan menyebutnya "Pertama" dan "kedua." Jadi id = "pertama." Dan kami akan memberi mereka dua warna. Jadi bagaimana kita memilih sesuatu dengan id dari "pertama"? Allison Buchholtz-AU: Dot atau hash? AUDIENCE: Sharp. TOMAS Reimers: Sharp, sempurna. Sharp, hash, we-- apapun 

Allison Buchholtz-AU: Banyak hal untuk menyebutnya. 

TOMAS Reimers: OK. Kita akan menetap di hashtag, dan itulah yang akan kita pergi bersama. OKE? 

Allison Buchholtz-AU: Hashtag. 

TOMAS Reimers: Jadi hashtag pertama. 

Allison Buchholtz-AU: Jadi Anda dapat tweet seminar-- hashtag CSS, hashtag keren. TOMAS Reimers: Hashtag Keangkeran. Allison Buchholtz-AU: Hashtag Awesomeness, ya. TOMAS Reimers: OK. Jadi kita memiliki "pertama" dan "kedua." Jadi pertama, kita akan memiliki warna latar belakang merah. Allison Buchholtz-AU: Uh, usus. TOMAS Reimers: Yup. Allison Buchholtz-AU: Aku akan menjadi tempat-checker Anda. TOMAS Reimers: Allison punya saya. Background-warna blue-- 

TOMAS Reimers: Ungu! 

TOMAS Reimers: Ungu. Allison Buchholtz-AU: Ya. Purple warna favorit saya, dan kita belum menggunakannya belum. 

TOMAS Reimers: Violet. Allison Buchholtz-AU: Violet. Yang bekerja. 

TOMAS Reimers: Jadi kita akan memiliki dua divs. Mereka akan menjadi benar-benar kosong. Kita mungkin harus memiliki beberapa teks. Jadi "pertama" akan menjadi "HELLO." Dan "kedua" akan say-- 

Allison Buchholtz-AU: Selamat tinggal. 

AUDIENCE: - "WORLD." Halo, selamat tinggal. Allison Buchholtz-AU: Saya melihat mereka dalam konser minggu. TOMAS Reimers: The Beatles? Allison Buchholtz-AU: Untuk real. Mereka tidak terlalu bagus. Aku tidak suka itu. 

TOMAS Reimers: Kami memiliki "HELLO" dan "GOODBYE." Dan lagi, CSS just awesome, karena mengakui warna kami. Tidak perlu bahkan khawatir bahwa mereka ada. Mereka melakukan. 

Allison Buchholtz-AU: Mereka ada. 

TOMAS Reimers: Jadi CSS saya pikir memiliki 255 kata untuk berbicara tentang warna. Jika Anda dapat memikirkan warna luar mereka 255, seperti, aku akan terkesan. Allison Buchholtz-AU: Ya. Saya pikir kalian mungkin memiliki saja datang tepat setelah. 

TOMAS Reimers: Jadi di sini, Anda akan melihat kami memiliki dua kotak tepat di atas satu sama lain, kan? HELLO GOODBYE dan. 

Allison Buchholtz-AU: Tidak ada ruang di antara. Mereka hanya smooshed tepat di atas satu sama lain. 

TOMAS Reimers: Jadi hal pertama Saya kira kita harus berbicara tentang adalah mari kita juga say-- ya. Jadi CSS mewakili mereka sebagai semacam kotak. Dan kotak, mereka memiliki konten. Dan konten saat ini adalah semacam yang HELLO GOODBYE atau dan hanya itu. OKE? 

Jadi salah satu hal pertama yang Anda dapat Anda lakukan adalah Anda dapat menambahkan padding. Padding mengatakan berapa banyak ruang itu harus meninggalkan di setiap sisi. Jadi katakanlah saya ingin mengatakan 10 piksel di setiap sisi. Dan saya akan membedah bahwa dalam satu detik. Allison Buchholtz-AU: Semua hal-hal ini di sini akan menjadi sebagian besar dalam piksel untuk sisa seminar. Anda akan melihat bahwa ia memiliki beberapa ruang di sekitarnya, kan? Jadi apa yang tidak Anda lihat di sini adalah ada semacam ini terlihat padding di setiap sisi, yang mengatakan, seperti, OK, Anda memiliki kotak Anda content-- 

Allison Buchholtz-AU: Apakah Anda ingin hanya naikkan memeriksa elemen? 

TOMAS Reimers: Ya, itu ide yang baik. Allison Buchholtz-AU: Juga, saya menemukan bahwa memeriksa elemen adalah cara yang baik untuk mencari tahu apakah ada sesuatu yang terjadi salah, sesuatu yang tidak terduga terjadi, memeriksa tag dan melihat apa yang itu seperti ditimpa sangat membantu. 

TOMAS Reimers: Jadi saya tidak yakin jika kalian bisa melihat warna ini. Bisakah Anda? Anda akan melihat bantalan ini pada jenis tepi. Dan kemudian Anda melihat yang sebenarnya konten dengan warna biru, kan? Jadi itulah yang sangat Dasar-dasar dari model kotak. Anda memiliki konten. Maka Anda memiliki padding. 

AUDIENCE: Mengapa Anda tidak hanya menggunakan kotak dalam the-- 

Allison Buchholtz-AU: Benar. Karena itu hanya memilih elemen sekarang. 

TOMAS Reimers: Yup. Hal-hal lain. Jadi mari kita bicara tentang itu perintah bantalan untuk kedua. Jadi dalam CSS, pengukuran perlu memiliki unit. Jadi pertama Anda memiliki jumlah ini. Jadi dalam hal ini, kita katakan 10. Dan kemudian yang berikutnya kita katakan adalah piksel, px. Yang lain yang mungkin Anda miliki adalah hal-hal seperti sentimeter, inci. Anda dapat melakukan hal-hal seperti, apa yang 10 inci? Dan itu akan menjadi konyol. 

Allison Buchholtz-AU: Oh, boy. 

AUDIENCE: Whoa. 

TOMAS DAN ALLISON: Ya. TOMAS Reimers: Jadi itu semua padding. Aku akan kembali ke piksel. 

Allison Buchholtz-AU: Pixel cenderung, seperti, standar. Ketika Anda melihat banyak situs, mereka kebanyakan bekerja dalam piksel. TOMAS Reimers: Jadi Anda akan melihat baik pixels-- yang lain yang Anda lihat adalah em, yang merupakan salah satu em sama dengan ketinggian font yang Anda gunakan saat ini. 

Allison Buchholtz-AU: Mm. TOMAS Reimers: Ini adalah cara yang baik untuk mengatakan, seperti, aku ingin ruang sebanyak huruf saya adalah mengambil. Allison Buchholtz-AU: Tidak tahu itu. Anda belajar sesuatu yang baru setiap hari. TOMAS Reimers: Ada banyak pengukuran di CS. Saya sarankan Anda melihat mereka. Untuk semua kasus Anda, saya pikir piksel harus memadai. Dan mereka juga apa Anda akan melihat di sebagian besar contoh dilakukan secara online. Jadi kita akan berhenti di piksel. 

Anda juga bisa, saya harus say-- jadi bantalan set semua bantalan. Anda juga dapat melakukan sesuatu seperti "Padding-top" hanya set-- Allison Buchholtz-AU: Mungkin kita akan mendapatkan kita "HELLO" kembali. TOMAS Reimers: -to hanya mengatur padding di bagian atas dan tidak ada yang lain. Jadi empat perintah yang padding-top, padding-bottom, padding-kiri, dan padding-right. 

Allison Buchholtz-AU: Sama seperti Anda harapkan untuk sebuah kotak. 

TOMAS Reimers: Ya. Tidak ada yang terlalu gila di sana. Apakah itu masuk akal? Jadi itu adalah padding. Aku akan mengatur semua yang paddings kembali ke 10. Dan kemudian aku akan pindah ke perbatasan. 

Jadi apa perbatasan adalah perbatasan adalah perintah yang aneh. Dibutuhkan semacam tiga hal sekaligus. Jadi yang pertama adalah seberapa besar Anda ingin menjadi sebagai pengukuran. Sekali lagi, aku hanya menggunakan piksel. Dan hal terakhir yang saya harus menambah pengukuran adalah satu hal yang tidak perlu unit adalah 0. Ini sebenarnya tidak benar untuk memberikan 0 unit, karena 0 adalah 0 di inci, piksel, sentimeter, apa pun. Itu semua hanya berarti 0, kan? Jadi pertama Anda memberikan pengukuran. 

Kemudian Anda memberikan gaya. Jadi aku akan mengatakan "solid." Dan kita akan bicara tentang apa artinya. Dan kemudian terakhir, Anda memberikan warna. Jadi aku akan mengatakan "hitam." Dan ini adalah segala sesuatu yang kita sudah sekarang lihat sebelumnya, kecuali untuk gaya, tapi kami akan berbicara tentang itu. Jadi kalian telah melihat pengukuran, dan Anda telah melihat warna. Dan apa yang terjadi adalah kita ini border hitam yang bagus di sekitar itu, kan? Kalian melihat bagaimana kita melakukan itu? 

AUDIENCE: Ya. 

TOMAS Reimers: Cool. Jadi apa itu? Jadi pertama-tama, itu salah satu pixel. Itu jelas cukup, kan? Seperti, itu salah satu pixel tebal. Atau akan menjadi salah satu pixel, tapi aku diperbesar, jadi sedikit lebih dari itu. 

Allison Buchholtz-AU: Dan kami memiliki ini TV resolusi konyol. 

TOMAS Reimers: Ya. Anda dapat membuatnya lebih besar, lebih kecil, apapun. Jadi, inilah perbatasan dua-pixel. Anda akan melihat itu dua kali lebih tebal. Hal berikutnya yang Anda miliki adalah warna. Itu tidak menarik. Saya tidak akan berbicara tentang itu, benar-benar. 

Allison Buchholtz-AU: Tapi gaya mungkin hanya sedikit yang menarik. 

TOMAS Reimers: Ya. Jadi gaya, ada beberapa yang yang saya lihat digunakan umumnya. Padat, selanjutnya pertama seseorang putus-putus, dan putus-putus yang lalu. Dan di sini dihiasi. Anda akan melihat bahwa mereka sekelompok titik, kan? Cara yang baik untuk jenis mendapatkan perbatasan bagus akan, strip juga cukup populer. 

Allison Buchholtz-AU: Dan tentu saja, aku yakin ada banyak lainnya gaya yang bisa Anda dapatkan. Dan kami memiliki satu set besar link pada akhir untuk kalian untuk jenis membaca dengan teliti dan melihat lebih keren CSS. 

TOMAS Reimers: Dan kemudian hal terakhir, kami akan berbicara tentang model kotak dengan cepat. Oh, dan kemudian perbatasan, persis seperti padding, Anda juga memiliki hal-hal seperti border-left, border-kanan, border-top, border-bottom, yang memungkinkan Anda untuk mendapatkan perbatasan tertentu. Jadi di sini hanya perbatasan kiri-didefinisikan. Apakah itu masuk akal? 

Allison Buchholtz-AU: Ini sejuk cara untuk menekankan hal-hal atau menambahkan garis antara unsur-unsur yang berbeda. TOMAS Reimers: Tentu saja. Jadi itulah perbatasan kita. Dan marjin yang lalu. Seperti padding Margin yang kecuali itu tidak within-- Allison Buchholtz-AU: Ini tidak sekitar elemen Anda tetapi sebenarnya sekitar seluruh yang kotak yang kita telah melihat. 

TOMAS Reimers: Ya. Allison mengatakan sempurna. Ini tidak, seperti, di dalam Anda elemen, itu sekitar seluruh kotak. Itu berarti hal-hal seperti background tidak berlaku untuk itu. Dan pada dasarnya mengatakan, seperti, aku tidak ingin apa-apa dalam banyak ruang ini untuk saya. Jadi seperti di sini kita memiliki margin 10 pixel. Jadi tidak ada dalam 10 piksel harus sampingku. Itu jenis yang ruang tapi agak tidak. Jadi itulah yang sangat Dasar-dasar dari model kotak. Apakah itu masuk akal? Keren keren. Allison Buchholtz-AU: Awesome. Jadi sekarang saya pikir kita hanya memiliki sumber daya keren bahwa kita akan membawa kalian melalui sangat cepat. Dan kami akan actually-- baik, kita memiliki internet belum? 

TOMAS Reimers: Mari melihat apakah saya bisa membuka up-- biarkan aku hanya melihat apakah aku bisa mendapatkan internet cepat sementara Allison berbicara tentang apa pun Allison ingin berbicara tentang. Allison Buchholtz-AU: Jadi basically-- saya tidak tahu apa lagi yang bisa saya katakan pada saat ini. Tapi ini adalah beberapa sumber daya benar-benar baik. Ini adalah orang-orang yang Tomas dan saya telah menggunakan dan bahwa kita benar-benar digunakan untuk persiapan untuk ini. W3Schools adalah salah satu yang Anda orang harus lihat sebelumnya. Kami sarankan untuk banyak hal dengan CSS. Aku tahu aku merekomendasikan hal ini kepada Bagian saya sepanjang waktu. 

Salah satu hal besar adalah bahwa hal itu memungkinkan Anda untuk jenis main-main dengan CSS dan melihat perubahan instan dalam hal ini, seperti, dua jendela melihat bahwa ia memiliki. Jadi Anda tidak perlu khawatir tentang menyiapkan halaman web Anda sendiri, atau menata vhost di Anda alat lokal dan host lokal, dan mendapatkan semua hal kerja. Hal ini tertanam tepat di dalam halaman. 

Dan memiliki kecil ini pelajaran yang bisa melalui belajar lebih lanjut tentang pemilih, atau belajar tentang memanipulasi Anda font, atau latar belakang, atau gambar. Dan Anda memiliki ini Hasil seketika bahwa Anda tidak perlu melakukan pekerjaan persiapan lainnya untuk. Jadi aku mencintai W3Schools. Ini luar biasa. Apakah bekerja? 

TOMAS Reimers: Ya. Tidak, itu tidak. Apakah Anda ingin saya untuk mencoba dan restart komputer saya? Atau apakah kita ingin to-- 

Allison Buchholtz-AU: Maksudku, baik, hal ini juga akan online. Semua slide akan online. Jadi saya hanya sangat merekomendasikan melakukan ini. 

Ini bagus karena hanya seperti contekan. Hanya saja semua dasar perintah yang Anda miliki. Ini bagus ketika Anda pertama kali memulai website Anda. Karena mungkin Anda tidak ingin masuk ke semua seluk beluk nyata desain-berat barang. Anda hanya perlu untuk memformat dengan cara semacam masuk akal dan kehendak lakukan untuk saat ini. Dan jika Anda benar-benar ingin untuk masuk ke dalamnya, saya tahu ini, seperti, salah satu Referensi favorit tomas itu. Kami menggunakannya untuk persiapan, dan itu luar biasa. Ini adalah Developer dari Mozilla. 

TOMAS Reimers: Jadi Mozilla adalah orang yang membuat Firefox. Dan itu hanya pengembang sendiri referensi, yang saya pikir mengagumkan. Dan memiliki indah daftar sumber daya. Jadi kita have-- 

Allison Buchholtz-AU: Dan kemudian catatan terakhir adalah ketika Anda mencoba untuk desain website Anda, menarik inspirasi dari hal-hal yang menurut Anda cukup. Memeriksa elemen, memeriksa kode sumber bisa super membantu untuk mencoba untuk mencari tahu bagaimana gaya situs web Anda sendiri. 

Seringkali, aku merasa seperti yang terbaik cara, selain eksperimen, hanya untuk melihat hal-hal yang cukup. Saya merasa benar-benar sulit untuk hanya jenis desain hal pada Anda sendiri, terutama di awal. Jadi silahkan lihat di website bahwa Anda menikmati melihat. Mencari tahu apa yang membuat mereka menarik bagi Anda. Dan maka jangan ragu untuk mencoba dan meniru itu. 

TOMAS Reimers: Benar. Bahkan seperti website seperti ini, Anda bisa melihat ada pasti div di atas. Dan kemudian Anda memiliki div lain dalam di sini, yaitu CSS Keangkeran. Dan kemudian Anda memiliki banyak link di sini. Jika Anda benar-benar hanya memeriksa elemen, Anda bisa menyortir dari mulai melihat apa yang website terlihat seperti, dan bagaimana saya bisa menciptakan bahwa jika saya ingin. Apakah itu masuk akal? Jadi kita hanya memiliki tiga menit tersisa. Jadi pertanyaan? Salah satu dari mereka? Iya Nih. 

AUDIENCE: Untuk warna persegi panjang, bagaimana akan Anda have-- jika Anda tidak ingin akan di seluruh halaman, bisa Anda telah membuat pergi ke seberang hanya setengah halaman atau hanya teks? 

TOMAS Reimers: Ya, benar-benar. Jadi biarkan aku melihat sebenarnya. Aku punya dua ide. Jadi pertama-tama, Anda juga dapat menggunakan persen. 

AUDIENCE: Benarkah? 

Allison Buchholtz-AU: Jadi sesuatu untuk mencari adalah posisi relatif. Ini adalah sesuatu yang kita tidak punya waktu untuk masuk ke dalam, tapi itu sesuatu yang saya pasti merekomendasikan kalian memeriksa. 

TOMAS Reimers: persen Jadi. Dan melihat bagaimana kami berhasil hanya 50% dari lebar? Allison Buchholtz-AU: Jika Anda benar-benar tahu jumlah piksel, Anda dapat lebih tepat seperti itu. Anda dapat bermain dengan itu. Tapi 50%. Jika kita mengubah ukuran browser kita, itu akan membuatnya lebih kecil. 

TOMAS Reimers: Yah, itu pada dasarnya 50% sekarang, saya pikir. Ini 50%, dan kemudian margin telah ditambahkan ke itu. CSS memiliki banyak kebiasaan. Jadi sekarang ini 50% dari lebar halaman. Tapi ingat bahwa Anda memiliki 10 piksel lepas landas dari masing-masing pihak. Jadi jika Anda adalah untuk memindahkan bahwa terhadap tepi kiri browser, maka akan terlihat seperti 50%. Sekali lagi, seperti saya katakan, CSS dapat akan banyak menebak-dan-cek. Seperti, Anda berpikir ada sesuatu yang akan berperilaku salah satu cara, tapi berperilaku dengan cara yang sama sekali berbeda. 

Allison Buchholtz-AU: Dan Anda hanya mendapatkan lebih cerdas, dan Anda hanya mendapatkan yang lebih baik intuisi untuk itu saat Anda bergerak bersama. 

TOMAS Reimers: Dan semakin buruk dan buruk. Jadi itu benar-benar hanya sebuah perlombaan. 

Allison Buchholtz-AU: Itu super menggembirakan. Kami ingin mereka seperti CSS. 

TOMAS Reimers: CSS mengagumkan. Ingat itu. Pertanyaan lain? 

Allison Buchholtz-AU: Satu hal. Ada yang lain? Keren. 

TOMAS Reimers: Awesome. 

Allison Buchholtz-AU: Nah, jika Anda orang memiliki pertanyaan di kemudian hari, kami selalu tersedia seperti biasa. Anda mungkin akan melihat beberapa dari kami untuk proyek akhir dan pasti di hackathon tersebut. 

TOMAS Reimers: Tentu saja. Dan di pameran tersebut. 

Allison Buchholtz-AU: Dan di pameran tersebut. Oh. 

TOMAS Reimers: Nantikan melihat semua awesome-- Anda 

Allison Buchholtz-AU: Kita lihat semua website Anda mengagumkan yang akan menjadi cantik. TOMAS Reimers: Anda selalu dapat lihat, seperti, situs yang memiliki, seperti, baik CSS dan kemudian seperti orang yang tidak mencoba untuk melakukan CSS. Allison Buchholtz-AU: Juga, lain hal, satu hal lagi untuk melihat ke dalam adalah Bootstrap. Jadi Bootstrap besar. 

TOMAS Reimers: Google bahwa jika you-- 

Allison Buchholtz-AU: Google itu. Ini luar biasa. Anda akan menyukainya. Dan sekarang Anda memiliki pemahaman dasar CSS, itu akan membuat lebih banyak akal. Mengagumkan. Terima kasih, guys. 

TOMAS Reimers: Terima kasih banyak.