[MUSIC PLAYING] 

Doug LLOYD: Jadi mari kita satu lagi Video untuk berbicara tentang satu bahasa lebih. Kali ini kita akan berbicara tentang CSS. Jadi CSS, yang merupakan kependekan Cascading Style Sheets, adalah bahasa lain yang kita gunakan ketika membangun website. Pikirkan tentang hal seperti ini. Jika HTML adalah apa yang kita gunakan untuk mengatur konten kami ingin menempatkan pada halaman kami, CSS adalah alat yang umumnya kita gunakan untuk menyesuaikan bagaimana website kita terlihat, dan bagaimana pengalaman pengguna yang benar-benar adalah, berinteraksi dengan situs kami. 

Mirip dengan HTML, CSS bukan bahasa pemrograman. Ia tidak memiliki logika. Ia tidak memiliki variabel. Ia tidak memiliki apapun yang mengalir hal terkait yang C tidak. Ini adalah bahasa styling. Dan sintaks cukup sederhana, dan hanya menggambarkan bagaimana unsur-unsur kami Halaman memiliki HTML tertentu elemen harus diubah. Untuk itu, jika Anda belum belum menonton video kami pada HTML, atau tidak terbiasa dengan HTML umumnya, Anda mungkin ingin melihat pada yang pertama, karena ini pembahasan CSS akan tergantung pada beberapa pengetahuan tentang HTML. 

Jadi di sini adalah benar-benar sederhana CSS stylesheet. Bahkan jika Anda sudah pernah diprogram dengan CSS sebelumnya, Aku cukup yakin Anda dapat mengetahui apa stylesheet ini tidak. Apa fungsinya? Nah, diterapkan pada tubuh web kami Halaman, segala sesuatu di antara tag tubuh pada HTML kita, dan itu menetapkan warna latar belakang halaman menjadi biru. Nah, itu adalah stylesheet yang sangat sederhana. Ini sebenarnya sangat manusiawi bahasa yang ramah, CSS. Jadi bahkan jika Anda belum pernah menggunakannya sebelumnya, Anda mungkin bisa menebak apa yang lakukan. Bahkan, jika kita dimuat halaman, di mana stylesheet ini tertanam entah bagaimana, warna latar belakang halaman kami akan biru, dan bukan putih standar. 

Jadi bagaimana kita membangun stylesheet? Yah pertama, kita harus mengidentifikasi pemilih. Dalam contoh terakhir, pemilih yang tubuh. Kemudian kami memiliki terbuka penjepit keriting, dan kami akan mulai mendefinisikan stylesheet untuk pemilih itu. Di antara kurung kurawal, kami hanya memiliki daftar pasangan nilai kunci. Pasangan nilai sebelumnya adalah warna latar belakang koma biru, tapi kita bisa berbuat lebih banyak dan lebih dari ini. Anda bisa memiliki beberapa hal menerapkan itu tag, bahwa tubuh pemilih. Masing-masing dari mereka dipisahkan oleh koma, dan kita sebut mereka masing-masing deklarasi, deklarasi CSS. Ketika kita sudah selesai dengan semua styling kami ingin berlaku untuk tag tertentu, kita hanya memiliki keriting menutup penjepit untuk mengakhiri stylesheet, dan kita sudah selesai mendefinisikan stylesheet untuk itu pemilih tertentu. 

Apa adalah beberapa properti CSS umum? Yah, mungkin Anda ingin menempatkan perbatasan sekitar sesuatu. Jadi Anda bisa mengatakan, perbatasan, yang akan menjadi kunci Anda, dan kemudian nilai-nilai Anda akan, apa gaya, warna, dan lebar Anda ingin menjadi. Jadi gaya bisa menjadi padat line, garis putus-putus, garis putus-putus, garis punggungan, yang akan menjadi garis bergelombang. Mungkin Anda ingin memilikinya biru atau hitam atau hijau. Mungkin Anda ingin menjadi 1 atau 2 atau 10 piksel lebar. Anda dapat menentukan semua hal-hal. Mungkin Anda ingin mengatur latar belakang warna halaman Anda dengan cara tertentu. Kita sudah melihat bahwa, pengaturan latar belakang tubuh menjadi biru. 

Kemudian Anda dapat menggunakan kata kunci, sehingga CSS memiliki warna tertentu yang dibangun ke dalamnya, biru, hijau, hitam, warna yang sangat sederhana kita tahu. Tapi Anda juga dapat menentukan hex warna yang Anda inginkan. Ingat bahwa warna dapat diidentifikasi oleh satu set tiga angka hex dari 0 sampai 255, rg dan b, yang merah, hijau, dan biru komponen. Dan sehingga kita dapat menentukan setiap warna yang kita inginkan dengan, daripada menggunakan biru atau hijau atau hitam, menggunakan pound dan kemudian enam digit hex, dan yang akan memberi kita warna enam digit. Jadi itulah warna latar belakang. 

Kami juga memiliki latar depan warna, yang biasanya akan menjadi teks halaman Anda. Dan Anda bisa melakukan itu sama dengan kata kunci dan atau enam digit hex. Jadi Anda dapat menentukan warna yang Anda inginkan untuk teks halaman Anda terhadap tertentu warna latar belakang, di atas. Anda juga dapat mengubah dan menangani dengan font, dan cara teks diberikan pada halaman. 

Sehingga Anda dapat mengubah ukuran font Anda. Anda dapat menggunakan kata-kata kunci, seperti ekstra, ekstra kecil, atau xx kecil, atau menengah, besar, dan sebagainya. Anda dapat menggunakan titik tetap, 10 titik, 12 titik, dan sebagainya. Anda dapat menggunakan persentase, 80%, 20%, di mana 100% adalah font default ukuran, yang biasanya akan menjadi sesuatu seperti 11 atau 12 poin. Atau Anda bahkan dapat mendasarkan off dari ukuran font terbaru. Jika Anda hanya menulis sesuatu dan Anda tahu apa yang Anda inginkan adalah untuk menjadi lebih kecil, tetapi Anda tidak tahu persis apa ukuran Anda ingin menjadi, baik, Anda bisa mengatakan, ukuran font yang lebih kecil. Dan itu akan mendasarkan off dari, hanya sampai di atas, itu ukuran font. Dan Anda bisa mendapatkan lebih kecil atau lebih besar. Jadi ada banyak yang berbeda cara untuk menentukan ukuran font. 

Anda juga dapat menentukan apa keluarga font yang Anda inginkan. Jika Anda memiliki tertentu Nama, ada cara di CSS-- kita tidak akan membicarakannya sini-untuk menentukan font yang sangat spesifik dan menanamkan ke halaman Anda. Anda juga dapat menggunakan nama generik. Ada banyak web font aman yang telah ditentukan dalam CSS. Dan jika Anda adalah pengguna Microsoft Kantor di 20 tahun terakhir, Anda mungkin akrab dengan banyak font yang aman web ini sudah, Times New Roman, Arial, Kurir Baru, Georgia, Tahoma, Verdana, dan sebagainya. Mereka semua dianggap web font aman. Dan sebenarnya, bagian dari alasan mereka datang untuk menjadi itu akan digunakan untuk membuat web-- setiap halaman telah akses ke default ini mengatur font dengan berbagai serif, dan semua ini hal font yang kita tidak akan masuk ke dalam, tetapi ini biasanya diakses di CSS Anda, bahkan jika Anda tidak jika menentukan font. Terakhir, Anda dapat menyelaraskan teks Anda, bukannya itu menjadi, secara default, selaras ke kiri, Anda bisa menyelaraskan ke kanan, atau Anda bisa menyelaraskan berpusat, atau dibenarkan sehingga memukul kedua margin. Jadi mereka adalah semua pilihan Anda dapat menggunakan untuk mengubah apa yang teks Anda terlihat seperti, dan bagaimana itu ditampilkan pada halaman Anda. 

Selektor Anda tidak harus tag saja. Sebelumnya kita melihat tag tubuh pemilih, dan pemilih tag memang terlihat seperti itu. Anda nama tag, dan kemudian Anda mendefinisikan stylesheet untuk tag itu. Tapi Anda juga bisa melakukan sesuatu disebut ID pemilih. ID pemilih terlihat sangat mirip. Tapi perhatikan, bahwa sekarang saya tidak menggunakan tag HTML, saya menggunakan, dalam hal ini, #unique, atau hash yang unik. Jika Anda ingat dari kami video pada HTML, kita berbicara tentang bagaimana tag dapat memiliki atribut. 

Dan salah satu atribut yang berlaku untuk hampir semua tag HTML, tapi kami tidak berbicara tentang hal itu, adalah sesuatu yang disebut tag ID. Jadi CSS khusus ini akan hanya berlaku untuk HTML tag yang memiliki ID yang sangat spesifik, bahwa Anda telah bernama. Jadi jika Anda memiliki suatu tempat dalam kode Anda, di suatu tempat dalam file HTML Anda, tag dan Anda tentukan sebagai atribut untuk tag itu, ID sama yang unik, ini stylesheet tertentu di sini hanya akan berlaku di antara bahwa tag dengan ID unik. 

Anda juga dapat melakukan sesuatu disebut pemilih kelas. Jadi selain memiliki ID atribut, Anda juga dapat menambahkan atribut class dengan tag HTML. Dan ketika Anda menggunakan atribut class, dapat diterapkan untuk beberapa tag. Jadi jika Anda memiliki beberapa hal yang yang serupa, mungkin Anda ingin mengatakan, tag terbuka bla, bla, bla, bla, kelas sama siswa. Dan kemudian tertentu stylesheet akan berlaku untuk setiap tag yang kelas siswa. Dalam hal ini, kami akan mengatur background warna kuning, dan kami akan mengatur opacity, yang adalah tag kami tidak berbicara tentang, tetapi hanya berkaitan dengan bagaimana transparan sesuatu adalah, 70%, dalam hal ini. 

Ada dua pilihan untuk menulis stylesheet. Anda dapat menulis mereka langsung ke dalam HTML dengan menempatkan stylesheet di antara tag gaya. Dan tag gaya masuk ke dalam dari tag kepala halaman web Anda. Cara mungkin lebih disukai untuk melakukan itu adalah untuk menulis file css terpisah, dan kemudian link ke Anda mendokumentasikan menggunakan link tag. Link tag, sekali lagi, adalah berbeda dari hyperlink, jika Anda ingat dari video kami HTML. Dan link tag adalah bagaimana kita menarik berkas terpisah. Ini semacam seperti setara dengan # include untuk pemrograman web. 

Jadi mari kita lihat table.HTML. Jika Anda ingat dari kami Video HTML, saya menunjukkan contoh yang sangat perkalian sederhana tabel yang tampak cukup jelek, dan mungkin ada cara untuk membuatnya lebih baik dengan CSS, untuk membuatnya benar-benar melihat lebih seperti perkalian tabel, atau sesuatu yang tidak hanya terjebak bersama-sama dengan ada pembagian yang sebenarnya antara baris dan kolom. Jadi mari kita kepala ke CS50 IDE, dan lihatlah bagaimana CSS dapat, semacam, tweak apa yang kita mulai dengan sebelumnya, dan membuat sesuatu jauh lebih baik. 

Jadi kita di CS50 IDE sekarang, dan jika asing, kami akan berhenti di ini tabel halaman HTML. Table.HTML dasarnya hanya mendefinisikan isi dari multiple-- itu seharusnya menjadi meja perkalian empat oleh empat. Ini cukup sederhana. Dan kita akan berpikir bahwa itu akan terlihat terorganisir cukup baik. Namun pada kenyataannya, ketika kita melihat halaman ini, kita melihat bahwa itu semacam jelek, kan? Jelas kita memiliki baris dan kolom sini. Ada semacam pemisahan. Tapi itu bukan berarti pemisahan. Kami tidak benar-benar mendapatkan terlalu banyak informasi di sini. Dan tidak ada pemisahan antara baris dan kolom dalam hal aturan horizontal atau vertikal. Kita mungkin bisa membuat ini terlihat sedikit lebih baik. Jadi mari kita coba. Jadi aku akan menutup tab ini di sini. Dan aku akan menutup table.HTML saya, dan saya memiliki versi lain disini disebut table2.HTML. Kami akan membuka bahwa sampai. Badan halaman ini lebih kurang sama, tapi aku sudah berubah sedikit di atas. Dan aku akan gulir ke atas sini. Perhatikan bahwa saat ini, aku menggunakan tag gaya tertanam. Aku telah membuka tag gaya, dan aku sekarang mendefinisikan stylesheet CSS hanya di dalam itu. Saya memiliki stylesheet yang mengatakan, tabel. Itu tag pemilih saya. Saya tidak menggunakan dot atau hash, yang akan saya lakukan jika saya adalah menggunakan ID atau pemilih kelas. Aku punya tabel di sini-tag selector. Gaya ini akan berlaku untuk setiap tag tabel. Rupanya aku ingin menempatkan satu satu pixel lebar, perbatasan biru solid, dalam meja saya. Kedengarannya seperti itu akan mungkin membantu situasi, kan? Kita akan memiliki hal terlihat jauh lebih baik. Jadi ini baik-baik saja. Gaya, saya baru saja tertanam stylesheet saya di sini. Ini tentu sebuah cara diterima untuk melakukannya. Mari kita lihat apa ini terlihat seperti. Jadi aku akan kembali ke sini, dan Saya akan akan preview table2.HTML saya. Nah, itu tidak cukup apa yang saya inginkan, tapi itu adalah persis apa yang kita minta. Kami mengatakan bahwa gaya ini adalah akan berlaku untuk meja kami. Meja kami sekarang memiliki satu pixel lebar, perbatasan biru solid di sekitarnya. Kami tidak benar-benar mendapatkan di sel tabel. Kami hanya mendapatkan di meja. Jadi CSS bekerja. Ini telah menerapkan stylesheet ke meja kami. Tetapi tidak cukup melakukan apa yang kita ingin lakukan. Bagaimana kita bisa melakukan apa yang ingin kita untuk melakukan? 

Nah, mari kita lihat satu lagi versi ini di table3.HTML. Jadi aku hanya akan menutup tab ini. Aku akan kembali ke sini untuk saya mengajukan pohon, dan membuka table3.HTML. Sekali lagi, itu akan terlihat cantik serupa di sini di awal. Tapi perhatikan, saat ini, daripada menggunakan stylesheet tertanam tepat di sana, Aku akan menghubungkan dalam stylesheet menggunakan link tag. Jadi aku rupanya menghubungkan dalam stylesheet disebut tables.CSS, dan baik ini sama dengan stylesheet hanya means-- baik, apa file ini relatif terhadap apa yang Aku doing-- adalah stylesheet bahwa aku menggunakan untuk halaman saya. Jadi jika saya benar-benar ingin melihat apa yang Saya lakukan dengan CSS di sini, Aku harus pergi terbuka yang table.CSS mengajukan juga. Jadi kita akan kembali ke sini lagi ke pohon file kita. Ada table.CSS. Kami akan pop terbuka. Sekarang kita melihat sedikit dari CSS. Rupanya, saya memiliki beberapa hal terjadi di sini. Saya tampaknya ingin menempatkan lima pixel lebar, perbatasan merah solid, sekitar meja saya. Kita sudah tahu bahwa itu akan untuk hanya pergi di perimeter. Kami melihat bahwa dalam table2.HTML. Dengan setiap baris, saya rupanya ingin menentukan bahwa tinggi baris adalah 50 piksel tinggi. Jadi untuk setiap baris, ingat itulah yang tag tr tidak, Saya membuat 50 piksel tinggi. 

Terakhir, saya memiliki komentar ini. Dan ini adalah bagaimana kita membuat komentar dalam CSS. Ini sangat mirip dengan merebut blok komentar sintaks bintang slash. Semua teks yang Anda inginkan. Tidak ada slash slash meskipun dalam CSS. Untuk komentar inline pendek, kita memiliki menggunakan format tertentu ini di sini. Sepertinya aku melakukan banyak hal dalam tag td saya. Ingat tag td, atau meja data, yang benar-benar hanya kolom dalam baris kami, dan tampaknya untuk setiap bagian dari data di meja saya, saya ingin untuk mengatur warna latar belakang hitam, warna menjadi putih, warna warna foreground. Jadi ini akan menjadi teks halaman saya. Saya ingin font besar, 22 titik font, dan saya ingin untuk menjadi keluarga font, Georgia. Jadi aku tidak akan memiliki font default. Aku akan menentukan Georgia, yang adalah salah satu web font aman yang telah kita lihat sebelumnya. Saya ingin teks saya disejajarkan terpusat, di tengah-tengah kotak, Saya tidak ingin ditinggal selaras atau kanan sejajar. Dan aku ingin lebar kolom saya menjadi 50 piksel lebar juga. Mari kita lihat apa ini tampak seperti, dan melihat apakah ini mungkin perbaikan. Jadi aku akan pergi ke table3.HTML, yang recall, termasuk table.CSS sebagai link, dan kami akan melihat dulu itu. Itu jauh lebih baik, kan? Ini sebenarnya mulai terlihat banyak lebih seperti tabel perkalian. Saya memiliki perbatasan merah sekitar meja saya tapi sekarang Saya juga telah menetapkan bahwa setiap baris adalah 50 piksel lebar, atau itu 50 piksel tall-- alasan me-- setiap kolom adalah 50 piksel lebar. Data dalam setiap kolom, dan hanya data, memiliki latar belakang hitam. Jadi itu sebabnya mereka garis putih yang ada. Karena ruang di antara semua sel-sel, itu bukan perbatasan di dan dari dirinya sendiri, itu hanya Aku hanya mengisi sel, yang sebenarnya membuat perbatasan meja, yang rupanya ada selama ini, itu adalah garis putih hanya tipis. Sekarang mereka terlihat. Sekarang mereka pop off pada layar. Dan jadi ini adalah sangat sederhana stylesheet yang saya diterapkan, dan sekarang meja saya banyak terlihat lebih seperti meja empat oleh empat perkalian, bukannya berantakan hanya campur aduk, di mana semuanya jelas baris dan kolom, tapi tidak super terorganisir. Kami benar-benar hanya menggaruk permukaan dari apa yang dapat Anda lakukan dengan CSS sini. Untungnya dokumentasi CSS adalah cukup sederhana. Anda akan menggunakan beberapa nya atribut, cukup sering. Yang kita bicarakan sebelumnya dalam video ini. Ada beberapa yang Anda mungkin tidak akan menggunakan semua. Dan itu baik-baik saja, juga. Tapi hanya tahu, bahwa ada banyak dokumentasi di luar sana. Jadi bahkan jika kita tidak menutupi segala sesuatu, Anda tentu tidak meninggalkan Anda sendiri. Tapi CSS adalah benar-benar menyenangkan untuk bereksperimen dengan. Dan saya akan sangat mendorong Anda untuk bermain-main dengan halaman web Anda, dan melihat bagaimana Anda dapat membuat mereka melihat dan merasa untuk meningkatkan pengguna pengalaman mengunjungi halaman Anda. Aku Doug Lloyd. Ini adalah CS50.