[Powered by Google Translate] [CSS] [Yusuf Ong - Universiti Harvard] [Ini adalah CS50. - CS50.TV] 

Hari ini kita akan bercakap tentang CSS atau Cascading Style Sheets. 

Jadi apa sebenarnya CSS? Nah, mari kita memecahkan CSS panjang ke dalam 2 bahagian: Dan Cascading Style Sheets. Cascading adalah sedikit lebih kompleks, dan ia adalah sesuatu yang kita akan buat di dalam video yang lain. Tetapi untuk permulaan, Style Sheets sangat membayangkan apa CSS tidak. Ia menambah gaya untuk HTML laman web, mengubah cara laman web estetika kelihatan. Ini bermakna segala-galanya daripada fon teks ke kedudukan kandungan pada halaman dengan lain-lain perkara yang sejuk seperti membuat sudut kotak bulat atau menambah bayang-bayang kepada teks. Anda juga boleh melakukan perkara-perkara gila seperti membuat perkara yang bernyawa pada skrin. 

Jadi bagaimana kita menggunakan CSS dengan HTML? Ambil laman web ini miskin hadapan saya hanya menulis. Jika Rob adalah untuk melihat di laman web ini sekarang, dia mungkin akan mengatakan sesuatu seperti, "Wow! Pengenalan saya kelihatan teruk. Joseph, anda pereka yang besar." "Menggunakan Times default font? Helvetica adalah jauh lebih baik." 

Jadi apa yang mungkin cara yang paling mudah untuk memohon gaya Rob mahu? The banyak cara yang paling jelas orang pada mulanya menulis CSS adalah untuk meletakkan apa yang kita panggil pengisytiharan gaya yang betul dalam elemen itu sendiri menggunakan sifat gaya HTML. Satu pengisytiharan gaya hanya terdiri daripada CSS harta elemen HTML, kita mahu menukar diikuti dengan kolon diikuti dengan nilai baru harta dan koma bernoktah di hujung. Sebagai contoh, katakan Rob mahu sempadan hitam di sekeliling pengenalan beliau. Kita mula-mula meletakkan sifat gaya pada div Rob di sini kemudian di dalam tanda petikan berganda meletakkan pengisytiharan CSS a: "Border: 1px hitam pepejal;" 1 pixel merujuk kepada lebar sempadan, pepejal yang merujuk kepada gaya sempadan, dan warna pada akhir menentukan apa warna sempadan adalah. 

Jika kita mahu pelbagai gaya pada elemen, menulis surat ini pengisytiharan dalam urutan. Sebagai contoh, jika Rob mahu teks pengepala dalam Helvetica dengan latar belakang biru dan lebih banyak ruang di seluruh teks, yang boleh kita lakukan ini: style = "font-family: Helvetica; latar belakang warna: biru; padding: 5px;" The koma lepas sebenarnya adalah pilihan, tetapi orang biasanya menyimpannya dalam demi konsisten itu. 

Kami akan menyimpan menjelaskan beberapa sejuk dan lebih kompleks hartanah CSS untuk video yang lain. Jika anda mempunyai sesuatu dalam fikiran, hanya Googling kesan yang anda mahu diikuti oleh CSS mungkin akan memberikan hasil yang cukup baik. Perkara yang sejuk adalah bahawa CSS adalah cukup luas, jadi kemungkinan adalah jika ada apa-apa yang anda mahu lakukan - di dalam sebab - CSS mungkin boleh melakukannya. Kami menyeru ini jenis gaya gaya sebaris. Gaya unsur, baik, sejajar dengan tag permulaan. 

Bagi orang yang benar-benar suka akan dianjurkan, anda mungkin mula mendapat sedikit kesal bagaimana kotor ini semua kelihatan. Bayangkan jika anda mempunyai untuk melakukan ini untuk setiap elemen pada halaman, ditambah sekarang HTML dan CSS semua mencampur adukkan dan berantakan. Kasar, bukan? Untuk memperbaiki ini, orang-orang akhirnya mula menangkap pada untuk memisahkan HTML markup mereka dari gaya CSS mereka dengan menggunakan sesuatu yang dinamakan pemilih CSS. Pemilih CSS digunakan untuk memilih unsur-unsur yang pengisytiharan digunakan. A pemilih digabungkan dengan senarai perisytiharan CSS sering dirujuk sebagai peraturan CSS. Peraturan ini akan diletakkan antara tag gaya HTML dibuka dan ditutup, sering di kepala dokumen itu. 

Ia lebih mudah untuk melihat dengan contoh, jadi mari kita mulakan dengan mencipta satu peraturan CSS mudah. Pertama, mari kita meletakkan tanda gaya di bahagian kepala HTML kami. Seterusnya, pemilih. Kami akan bermula dengan menggunakan satu daripada pemilih yang paling mudah, simbol hash, yang memilih elemen HTML oleh sifat ID itu. Dalam kes ini kita akan memilih div yang mewakili pengenalan Rob dengan menaip simbol hash diikuti oleh ID div itu, merompak. Sekarang pengisytiharan. Kami menambah pendakap dibuka dan ditutup dan beralih pengisytiharan awal sebaris kami pada div Rob dalam ini pendakap, menyegarkan, dan, sejuk, Rob intro masih mempunyai sempadan hitam sekitarnya tolak keburukan sebaris kemas. 

Sekarang, bagaimana jika kita mahu memilih dalam h1 of intro Rob? Anda mungkin berfikir, "Mari kita meletakkan ID di atasnya dan kemudian bergerak gaya awal kami." Bahawa kerja-kerja, tetapi CSS mempunyai cara lain untuk membolehkan anda memilih elemen dengan menggunakan apa yang kita panggil combinators untuk campuran selectors mudah. Sebagai contoh, watak ruang putih boleh digunakan sebagai Combinator untuk menentukan semua keadaan 1 pemilih yang hidup di dalam pemilih lain. Itu bunyi banyak yang lebih rumit daripada ia sebenarnya adalah. Berikut adalah satu contoh. Kami akan menaip # merompak, menambah ruang, dan diikuti dengan satu h1, lain pemilih mudah dipanggil pemilih tag yang memilih jenis unsur seperti divs atau perenggan. Ruang yang menggabungkan 2 selectors mudah kami, menggunakan semua perisytiharan CSS dan pendakap kerinting kepada tag h1 yang hidup di dalam unsur dengan id = "merompak". Hanya untuk meyakinkan anda bahawa ia berfungsi, saya akan menukar warna font kepada putih, menyegarkan, dan, melihat, tajuk Rob kini putih. 

Semua kerja ini pergi untuk menunjukkan bahawa dengan menggunakan kaedah-kaedah dan bukannya gaya sebaris kita boleh mendapatkan kod lebih bersih. Malah, jika blok ini gaya mula mendapat sedikit besar, Saya juga boleh menarik ini gaya di luar ke dalam fail yang berbeza sama sekali. 

Untuk memasukkan fail baru ini sebagai CSS dalam dokumen ini, saya hanya akan gunakan pautan tag HTML. Di sini saya memberitahu bahawa saya menghubungkan dalam lembaran gaya luaran, sifat rel, dan menyatakan jalan untuk fail dengan sifat href saya. Sekarang markup HTML saya dan CSS yang dianjurkan dengan baik di dalam fail yang berasingan, yang hampir sentiasa cara pereka lebih suka bekerja dengan HTML dan CSS. 

Dalam kes anda tertanya-tanya, selectors mudah termasuk selectors ID dan pemilih tag seperti yang kita hanya melihat serta selectors kelas untuk memilih unsur-unsur dengan kelas tertentu, selectors sifat untuk memilih unsur-unsur dengan sifat-sifat lain seperti type = "radio" untuk input butang radio, dan pseudoselectors seperti berlegar dan memberi tumpuan untuk menentukan gaya apabila interaksi seperti ber-tetikus ria lebih elemen berlaku. 

The combinators biasa termasuk ruang putih untuk semua kanak-kanak dan koma untuk membezakan pemilih. Lain-lain mungkin anda hadapi termasuk arrow untuk kanak-kanak secara langsung sahaja, yang tilde untuk semua adik-beradik yang berlaku selepas unsur, dan tanda tambah untuk adik-beradik 1 yang datang selepas elemen. 

Dengan menggabungkan kedua-pemilih dan combinators, anda boleh meluaskan pelbagai gaya anda boleh mencapai pada laman web yang diberikan dan menulis CSS dengan lebih cekap. Dengan hanya beberapa baris CSS anda melihat saya menaip di sini, Saya cepat boleh membuat sesuatu seperti ini kelihatan seperti sesuatu yang seperti ini. 

Saya Yusuf, dan ini adalah CS50. 

[CS50.TV] 

Eh, di mana saya bermula? Biar saya melakukannya tanpa - [ketawa] Okay. Tambah - Biar saya menukar kata-kata itu. Aduh. Maaf.