[Powered by Google Translate] [CSS] [Joseph 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 istilah CSS ke dalam 2 bahagian: Cascading dan Style Sheets. Melata adalah sedikit lebih kompleks, dan ia adalah sesuatu yang kita akan meliputi dalam video lain. Tetapi untuk permulaan, sangat banyak petunjuk pada apa yang tidak CSS Style Sheets. Ia menambah gaya kepada HTML laman web, berubah bagaimana laman web estetik kelihatan. Ini bermakna segala-galanya dari font teks untuk kedudukan kandungan pada halaman kepada lain-lain perkara yang sejuk seperti membuat penjuru kotak bulat atau menambah bayang-bayang kepada teks. Anda juga boleh melakukan perkara gila seperti membuat perkara bernyawa pada skrin. 

Jadi bagaimana kita menggunakan CSS dengan HTML? Ambil laman ini miskin hadapan saya hanya menulis. Jika Rob untuk melihat laman ini sekarang, dia mungkin akan mengatakan sesuatu seperti, "Wow! Pengenalan saya kelihatan amat dahsyat. Joseph, anda pereka buruk." "Menggunakan fon lalai Times? Helvetica adalah jauh lebih baik." 

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

Jika kita mahu pelbagai gaya pada elemen, tulis pengisytiharan ini dalam urutan. Sebagai contoh, jika Rob mahu teks pengepala di Helvetica dengan latar belakang biru dan lebih banyak ruang di sekeliling teks, kita boleh lakukan ini: style = "font-family: Helvetica; warna-background: biru; padding: 5px;" Koma bernoktah lepas sebenarnya adalah pilihan, tetapi orang biasanya memastikan ia dalam untuk demi konsisten. 

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

Bagi orang yang benar-benar suka akan dianjurkan, anda mungkin mula mendapat sedikit kesal melihat betapa berantakan ini semua kelihatan. Bayangkan jika anda terpaksa melakukan ini bagi setiap elemen pada halaman, ditambah sekarang HTML dan CSS anda semua mencampur adukkan dan berantakan. Kasar, betul? Untuk memperbaiki ini, rakyat akhirnya mula menangkap pada untuk memisahkan mereka markup HTML dari gaya CSS mereka dengan menggunakan sesuatu yang dipanggil selectors CSS. Selectors CSS digunakan untuk memilih unsur-unsur yang deklarasi digunakan. Seorang pemilih yang digabungkan dengan senarai pengisytiharan CSS sering dirujuk sebagai peraturan CSS. Peraturan ini akan diletakkan antara tag gaya terbuka dan dekat HTML, selalunya dalam kepala dokumen itu. 

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

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

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

Untuk memasukkan fail ini baru sebagai CSS dalam dokumen ini, saya hanya akan menggunakan tag link HTML. Di sini saya memberitahu bahawa saya menghubungkan dalam lembaran gaya luaran, sifat rel, dan menentukan laluan ke fail dengan sifat href saya. Sekarang markup HTML saya dan CSS yang dianjurkan baik 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 tag selectors dan seperti orang-orang kita hanya melihat selectors serta kelas untuk memilih unsur-unsur dengan kelas tertentu, selectors atribut untuk memilih elemen oleh ciri-ciri lain seperti jenis = "radio" untuk input butang radio, dan pseudoselectors seperti berlegar dan tumpuan untuk menyatakan gaya apabila interaksi suka ber-tetikus ria atas elemen berlaku. 

Combinators biasa termasuk ruang kosong untuk semua kanak-kanak dan koma untuk membezakan selectors. Lain mungkin anda hadapi termasuk anak panah untuk kanak-kanak yang langsung sahaja, tilde untuk semua adik-beradik yang berlaku selepas elemen, dan tanda tambah untuk adik-beradik 1 yang datang serta-merta selepas unsur. 

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

Saya Yusuf, dan ini adalah CS50. 

[CS50.TV] 

Eh, di mana saya bermula? Biarkan saya berbuat demikian tanpa - [Ketawa] Okay. Tambah - Biar saya menukar kata-kata itu. Ooh. Maaf.