[Bermain muzik] 

DOUG LLOYD: Jadi mari kita mengambil satu lagi video untuk bercakap tentang satu bahasa lagi. Kali ini kita akan bercakap tentang CSS. Jadi CSS, yang merupakan singkatan bagi Cascading Style Sheets, adalah satu lagi bahasa yang kita gunakan apabila membina laman web. Fikirkanlah seperti ini. Jika HTML adalah apa yang kita gunakan untuk menganjurkan kandungan kita mahu meletakkan di laman kami, CSS adalah alat yang kita biasanya menggunakan untuk menyesuaikan bagaimana laman web kami melihat, dan bagaimana pengalaman pengguna yang benar-benar adalah, berinteraksi dengan laman web kami. 

Sama seperti HTML, CSS adalah bukan bahasa pengaturcaraan. Ia tidak mempunyai logik. Ia tidak mempunyai pembolehubah. Ia tidak mempunyai apa-apa jenis yang mengalir perkara yang berkaitan yang C tidak. Ia adalah satu bahasa gaya. Dan sintaks yang agak mudah, dan hanya menggambarkan bagaimana unsur-unsur kami halaman mempunyai HTML tertentu unsur-unsur yang perlu diubah suai. Untuk itu, jika anda tidak mempunyai belum menonton video kami pada HTML, atau tidak biasa dengan HTML umumnya, anda mungkin mahu mengambil lihat yang pertama, kerana perbincangan ini CSS akan bergantung kepada pengetahuan HTML. 

Jadi di sini adalah benar-benar lembaran gaya CSS mudah. Walaupun anda tidak pernah diprogramkan dengan CSS sebelum ini, Saya agak pasti anda boleh memikirkan apa lembaran gaya ini tidak. Apa yang ia buat? Nah, digunakan untuk badan kita halaman, semua yang di antara tag badan pada HTML kami, dan ia menetapkan Warna latar belakang halaman itu untuk biru. Well, ia adalah satu lembaran gaya sangat mudah. Ia sebenarnya sangat manusia bahasa mesra, CSS. Jadi, walaupun anda tidak pernah digunakan sebelum ini, anda mungkin boleh meneka apa yang lakukan. Malah, jika kita dimuatkan halaman, di mana lembaran gaya ini telah tertanam entah bagaimana, warna latar belakang halaman kami akan menjadi biru, dan bukan putih standard. 

Jadi bagaimana kita membina lembaran gaya? Well pertama, kita perlu mengenalpasti pemilih. Dalam contoh yang lepas, pemilih itu adalah badan. Maka kita perlu terbuka kerinting, dan kami akan mula menentukan lembaran gaya untuk pemilih itu. Di antara pendakap kerinting, kita hanya mempunyai senarai pasangan nilai utama. Pasangan nilai sebelumnya adalah warna latar belakang koma bertitik biru, tetapi kita boleh melakukan lebih banyak dan lebih daripada ini. Anda boleh mempunyai pelbagai perkara yang memohon itu tag, bahawa badan pemilih. Setiap seorang dari mereka dipisahkan oleh koma bertitik, dan kita panggil mereka masing-masing perisytiharan, pengisytiharan CSS. Apabila kita selesai dengan semua kita penggayaan ingin memohon kepada tag yang tertentu, kita hanya mempunyai kerinting menutup memberanikan untuk menamatkan stylesheet, dan kami sudah selesai menentukan stylesheet bagi pemilih tersebut. 

Apakah ciri-ciri CSS biasa? Yah, mungkin anda ingin meletakkan sempadan di sekeliling sesuatu. Jadi, anda boleh berkata, sempadan, yang akan menjadi kunci anda, dan kemudian nilai-nilai anda akan menjadi, apa gaya, warna, dan lebar anda mahu ia menjadi. Jadi gaya boleh menjadi pepejal garis, garis putus-putus, garis putus-putus, garis rabung, yang akan menjadi garis berombak. Mungkin anda mahu untuk memilikinya menjadi biru atau hitam atau hijau. Mungkin anda mahu ia menjadi 1 atau 2 atau 10 piksel lebar. Anda boleh menentukan semua perkara-perkara. Mungkin anda mahu untuk menetapkan latar belakang warna halaman anda dengan cara yang tertentu. Kita sudah melihat bahawa, menetapkan latar belakang badan menjadi biru. 

Kemudian anda boleh menggunakan kata kunci, supaya CSS mempunyai warna-warna tertentu yang dibina ke dalamnya, biru, hijau, hitam, warna yang sangat mudah kita ketahui. Tetapi anda juga boleh menyatakan apa-apa warna hex yang anda suka. Ingat bahawa warna boleh dikenal pasti oleh satu set tiga nombor hex 0-255, rg dan b, merah, hijau, dan biru komponen. Dan supaya kita boleh menentukan mana-mana warna kita mahu dengan, bukannya 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 mempunyai latar depan warna, yang biasanya akan menjadi teks halaman anda. Dan anda begitu juga boleh berbuat demikian dengan kata kunci dan atau enam digit hex. Jadi, anda boleh menentukan apa-apa warna yang anda mahu teks halaman anda terhadap yang tertentu warna latar belakang, sehingga di atas. Anda juga boleh berubah dan menangani dengan fon, dan cara teks dituliskan pada halaman. 

Jadi anda boleh menukar saiz fon anda. Anda boleh menggunakan kata kunci, seperti tambahan, tambahan kecil, atau xx kecil, atau sederhana, besar, dan sebagainya. Anda boleh menggunakan titik tetap, 10 mata, 12 mata, dan sebagainya. Anda boleh menggunakan peratusan, 80%, 20%, di mana 100% adalah fon piawai saiz, yang biasanya akan menjadi sesuatu seperti 11 atau 12 mata. Atau anda juga boleh mendasarkannya off saiz fon yang terkini. Jika anda hanya menulis sesuatu dan anda tahu apa yang anda perlu adalah untuk ia menjadi lebih kecil, tetapi anda tidak tahu apa saiz yang anda mahu ia menjadi, baik, anda boleh hanya berkata, saiz fon yang lebih kecil. Dan ia akan mendasarkan off dari, hanya sehingga atas, ia saiz font. Dan anda boleh mendapatkan lebih kecil atau lebih besar. Jadi ada banyak yang berbeza cara-cara untuk menentukan saiz font. 

Anda juga boleh menentukan apa font yang anda mahu. Jika anda mempunyai tertentu nama, ada cara di CSS-- kita tidak akan bercakap mengenainya sini-- untuk menentukan font yang sangat khusus dan membenamkan ke dalam halaman anda. Anda juga boleh menggunakan nama-nama generik. Ada banyak web fon selamat yang pra-ditakrifkan dalam CSS. Dan jika anda adalah pengguna Microsoft Pejabat dalam tempoh 20 tahun yang lalu, anda mungkin biasa dengan banyak ini web fon selamat sudah, Times New Roman, Arial, Kurier baru, Georgia, Tahoma, Verdana, dan sebagainya. Semua orang-orang yang dianggap web fon selamat. Dan sebenarnya, sebahagian daripada Sebab-sebab mereka telah menjadi telah digunakan untuk membuat web-- setiap halaman akses kepada lalai ini telah menetapkan fon dengan pelbagai serifs, dan semua ini barangan font kami tidak akan masuk ke dalam, tetapi ini biasanya diakses dalam CSS anda, walaupun anda tidak melakukan jika tidak menentukan fon. Akhir sekali, anda boleh menjajarkan teks anda, bukan ia yang, secara lalai, sejajar ke kiri, anda boleh menyelaraskan ke kanan, atau anda boleh menyelaraskan berpusat, atau wajar supaya ia memukul kedua-dua margin. Jadi mereka adalah semua pilihan yang anda boleh menggunakan untuk mengubah apa yang teks anda kelihatan seperti, dan bagaimana ia dipaparkan pada halaman anda. 

Pemilih-Mu tidak perlu klik sahaja. Kami sebelum ini melihat tag badan pemilih, dan pemilih tag tidak kelihatan begitu sahaja. Anda nama tag, dan kemudian anda menentukan lembaran gaya untuk tag itu. Tetapi anda juga boleh melakukan sesuatu dipanggil pemilih ID. Pemilih ID kelihatan agak sama. Tetapi notis, yang sekarang saya tidak menggunakan tag HTML, saya menggunakan, dalam kes ini, #unique, atau hash unik. Jika anda ingat dari kami video mengenai HTML, kita bercakap tentang bagaimana tag boleh mempunyai sifat-sifat. 

Dan satu sifat yang boleh digunakan untuk cukup banyak semua tag HTML, tetapi kita tidak bercakap mengenainya, adalah sesuatu yang dinamakan tag ID. Jadi CSS khusus ini akan terpakai hanya bagi tag HTML yang mempunyai ID yang sangat khusus, yang anda telah dinamakan. Jadi, jika anda mempunyai tempat dalam kod anda, di suatu tempat dalam fail HTML anda, tag dan anda nyatakan sebagai sifat tag itu, ID sama unik, ini lembaran gaya tertentu di sini hanya akan digunakan di antara bahawa tag dengan ID yang unik. 

Anda juga boleh melakukan sesuatu dipanggil pemilih kelas. Jadi di samping mempunyai ID sifat-sifat, anda juga boleh menambah atribut kelas untuk tag HTML. Dan apabila anda menggunakan atribut kelas, ia boleh digunakan untuk pelbagai tag. Jadi jika anda mempunyai beberapa perkara yang adalah sama, mungkin anda mahu katakan, tag terbuka blah, blah, blah, blah, kelas sama pelajar. Dan kemudian tertentu lembaran gaya akan memohon kepada setiap tag yang kelas adalah pelajar. Dalam kes ini, kita akan menetapkan warna latar belakang kepada kuning, dan kita akan menetapkan opacity, yang adalah tag kami tidak bercakap tentang, tetapi hanya berkaitan dengan bagaimana telus sesuatu itu, kepada 70%, dalam kes ini. 

Ada dua pilihan untuk menulis lembaran gaya. Anda boleh menulis mereka terus ke dalam HTML anda dengan meletakkan lembaran gaya di antara tag gaya. Dan orang-orang tag gaya pergi di dalam tag kepala laman web anda. Cara yang mungkin lebih pilihan untuk melakukan ia adalah untuk menulis fail Css yang berasingan, dan kemudian menghubungkannya ke dalam anda dokumen menggunakan tag link. Tag Link, sekali lagi, adalah berbeza daripada hyperlink, jika anda ingat dari video kami HTML. Dan tag link adalah bagaimana kita tarik dalam fail berasingan. Ia jenis seperti bersamaan yang #include untuk pengaturcaraan web. 

Oleh itu, mari kita lihat pada table.HTML. Jika anda ingat dari kami Video HTML, saya menunjukkan satu contoh yang sangat pendaraban mudah jadual yang kelihatan cukup hodoh, dan mungkin ada cara untuk menjadikannya lebih baik dengan CSS, untuk membuat ia benar-benar melihat lebih seperti pendaraban meja, atau sesuatu yang tidak hanya melekat tanpa bahagian yang sebenar antara baris dan lajur. Jadi mari kita menuju ke CS50 IDE, dan melihat bagaimana CSS boleh, jenis, tweak apa yang kita bermula dengan sebelum ini, dan menjadikannya sesuatu yang lebih baik. 

Oleh itu, kita berada dalam CS50 IDE sekarang, dan jika yang tidak dikenali, kita akan tarik dalam ini jadual yang laman HTML. Table.HTML pada dasarnya hanya mentakrifkan kandungan daripada multiple-- ia sepatutnya menjadi meja empat oleh empat pendaraban. Ia agak mudah. Dan kita akan berfikir bahawa ia akan kelihatan cantik teratur. Tetapi yang sebenarnya, apabila kita pratonton halaman ini, kita melihat bahawa ia adalah jenis hodoh, bukan? Jelas sekali kita ada baris dan lajur di sini. Terdapat beberapa jenis pemisahan. Tetapi ia bukan satu pemisahan bermakna. Kita sebenarnya tidak mendapat terlalu banyak maklumat di sini. Dan tidak ada pemisahan antara baris dan lajur dari segi peraturan mendatar atau menegak. Kita mungkin boleh membuat ini kelihatan sedikit lebih baik. Jadi mari kita cuba. Jadi, saya akan menutup tab ini di sini. Dan saya akan menutup table.HTML saya, dan saya mempunyai satu lagi versi sini dipanggil table2.HTML. Kami akan membuka bahawa sehingga. Mayat halaman adalah cukup banyak yang sama, tetapi saya telah berubah yang sedikit di bahagian atas. Dan saya akan tatal ke atas di sini. Perhatikan bahawa kali ini, saya menggunakan tag gaya terbenam. Saya telah membuka tag gaya, dan saya sekarang menentukan helaian gaya CSS hanya di dalam daripadanya. Saya mempunyai lembaran gaya yang mengatakan, meja. Itulah pemilih tag saya. Saya tidak menggunakan titik atau hash, yang saya akan lakukan jika saya adalah menggunakan ID atau pemilih kelas. Saya mempunyai jadual sini-- pemilih tag. Gaya ini akan terpakai bagi tiap-tiap tag jadual. Rupa-rupanya saya mahu meletakkan satu pixel luas, sempadan biru pepejal, dalam jadual saya. Yang berbunyi seperti ia akan mungkin membantu keadaan, bukan? Kita akan mempunyai perkara yang kelihatan lebih baik. Jadi ini adalah baik. Segi gaya, saya baru sahaja tertanam lembaran gaya saya di sini. Ia sudah tentu yang cara yang boleh diterima untuk melakukannya. Mari kita lihat apa ini kelihatan seperti. Jadi saya akan kembali ke bawah di sini, dan Saya akan akan pratonton table2.HTML saya. Nah, itu tidak cukup apa yang saya mahu, tetapi ia adalah apa yang kita minta. Kami berkata bahawa gaya ini adalah akan memohon ke meja kami. Meja kami kini mempunyai satu piksel luas, sempadan biru pepejal di sekitarnya. Kita sebenarnya tidak mendapat pada sel jadual. Kami hanya mendapat di meja. Jadi CSS bekerja. Ia telah menggunakan lembaran gaya ke meja kami. Tetapi tidak cukup melakukan apa yang kita mahu ia lakukan. Bagaimana kita dapat lakukan apa yang kita mahu ia lakukan? 

Nah, mari kita lihat pada satu lagi versi ini dalam table3.HTML. Jadi saya hanya akan menutup tab ini. Saya akan kembali ke sini untuk saya memfailkan pokok, dan membuka table3.HTML. Sekali lagi, ia akan kelihatan cantik sama di sini pada permulaan. Tetapi notis, kali ini, dan bukannya menggunakan helaian gaya tertanam betul-betul di sana, Saya akan menghubungkan dalam lembaran gaya menggunakan tag pautan. Jadi saya nampaknya menghubungkan dalam lembaran gaya dipanggil tables.CSS, dan baik ini sama lembaran gaya hanya ertinya- baik, apa yang fail ini berbanding dengan apa yang Saya doing-- adalah lembaran gaya yang saya menggunakan untuk halaman saya. Jadi, jika saya benar-benar mahu melihat apa yang Yang saya lakukan dengan CSS di sini, Saya perlu pergi terbuka yang memfailkan table.CSS juga. Oleh itu, kita akan kembali ke sini sekali lagi untuk pokok fail kami. Ada table.CSS. Kami akan pop terbuka. Sekarang kita lihat sedikit CSS. Rupa-rupanya, saya mempunyai pasangan perkara yang berlaku di sini. Saya nampaknya mahu meletakkan lima pixel luas, pepejal sempadan merah, di meja saya. Kita sudah tahu bahawa perkara yang berlaku untuk hanya pergi pada perimeter. Kita melihat bahawa dalam table2.HTML. Dengan setiap berturut-turut, saya nampaknya ingin menentukan bahawa ketinggian baris itu adalah 50 piksel tinggi. Jadi bagi setiap baris, ingat itulah yang tr tag tidak, Saya menjadikannya 50 piksel tinggi. 

Akhir sekali, saya mempunyai komen ini. Dan ini adalah bagaimana kita membuat komen dalam CSS. Ia hampir sama dengan merampas blok Komen sintaks slash bintang. Semua teks yang anda mahu. Tidak ada slash slash walaupun dalam CSS. Untuk komen sebaris pendek, kami mempunyai menggunakan format ini tertentu di sini. Ia kelihatan seperti saya melakukan banyak perkara dalam tag td saya. Ingat tag td, atau meja data, yang benar-benar hanya ruangan bahagian dalam baris kami, dan nampaknya untuk setiap bahagian data dalam jadual saya, saya ingin untuk menetapkan warna latar belakang untuk menjadi hitam, warna menjadi putih, warna adalah warna latar depan. Jadi ini akan menjadi teks halaman saya. Saya hendak font besar, 22 menunjukkan fon, dan saya mahu ia menjadi keluarga fon, Georgia. Jadi, saya tidak akan mempunyai fon lalai. Saya akan nyatakan Georgia, yang adalah salah satu web fon selamat yang kita lihat sebelum ini. Saya mahu teks saya untuk diselaraskan tengah-tengah, di pertengahan kotak, Saya tidak mahu ia dibiarkan selaras atau kanan sejajar. Dan saya mahu lebar lajur saya menjadi 50 piksel lebar juga. Mari kita lihat pada apa ini kelihatan seperti, dan lihat jika ini adalah mungkin peningkatan. Jadi, saya akan pergi ke table3.HTML, yang ingat, termasuk table.CSS sebagai pautan, dan kami akan periksa. Itu lebih baik, bukan? Ini sebenarnya mula kelihatan banyak lebih seperti jadual pendaraban. Saya mempunyai sempadan merah di meja saya tetapi sekarang Saya juga telah dinyatakan bahawa setiap baris adalah 50 piksel lebar, atau ia 50 piksel tall-- alasan me-- setiap lajur ialah 50 piksel lebar. Data dalam setiap lajur, dan hanya data, mempunyai latar belakang hitam. Jadi itulah sebabnya mereka garis putih berada di sana. Oleh kerana ruang dalam antara semua sel-sel, ia bukan satu sempadan di dan dengan sendirinya, ia hanya Saya hanya mengisi sel-sel, yang sebenarnya menjadikan sempadan meja, yang nampaknya wujud selama ini, ia adalah garis putih hanya nipis. Kini mereka kelihatan. Kini mereka meninggal pada skrin. Dan jadi ini adalah sangat mudah lembaran gaya yang saya telah digunakan, dan kini meja saya kelihatan lebih banyak seperti meja empat oleh empat pendaraban, bukannya keadaan kucar-kacir hanya campur aduk, di mana semuanya jelas baris dan lajur, tetapi tidak super diatur dengan baik. Kami benar-benar hanya menggaru permukaan daripada apa yang anda boleh lakukan dengan CSS di sini. Mujurlah dokumentasi CSS adalah agak mudah. Anda akan menggunakan beberapa yang sifat-sifat, agak kerap. Orang-orang yang kita bercakap tentang awal dalam video ini. Terdapat beberapa bahawa anda mungkin tidak akan menggunakan semua. Dan itulah denda juga. Tetapi hanya tahu, bahawa ada banyak dokumentasi di luar sana. Jadi, walaupun kita tidak meliputi segala-galanya, anda pasti tidak ketinggalan pada anda sendiri. Tetapi CSS adalah benar-benar menyeronokkan untuk bereksperimen dengan. Dan saya amat menggalakkan anda untuk bermain-main dengan laman web anda, dan lihat bagaimana anda boleh membuat mereka melihat dan merasa untuk meningkatkan pengguna pengalaman melawat halaman anda. Saya Doug Lloyd. Ini adalah CS50.