[Powered by Google Translate] [CSS] [Joseph Ong - Universitas Harvard] [Ini adalah CS50. - CS50.TV] 

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

Jadi apa sebenarnya CSS? Nah, mari kita istirahat istilah CSS ke dalam 2 bagian: Cascading Style Sheets dan. Cascading adalah sedikit lebih kompleks, dan itu sesuatu yang akan kita bahas pada video lain. Tapi untuk pemula, Style Sheets sangat banyak petunjuk pada apa CSS tidak. Ia menambahkan gaya ke HTML dari suatu halaman web, mengubah cara halaman web estetis terlihat. Ini berarti segala sesuatu dari font teks ke posisi konten pada halaman untuk hal-hal keren lainnya seperti membuat sudut kotak bulat atau menambahkan bayangan untuk teks. Anda bahkan dapat melakukan hal-hal gila seperti membuat sesuatu bernyawa di layar. 

Jadi bagaimana kita menggunakan CSS dengan HTML? Ambil situs ini miskin tampak saya baru saja menulis. Jika Rob adalah untuk melihat situs ini sekarang, dia mungkin akan mengatakan sesuatu seperti, "Wow! Pengenalan saya terlihat mengerikan. Joseph, Anda seorang desainer mengerikan." "Menggunakan default font Times? Helvetica jauh lebih baik." 

Jadi apa yang mungkin menjadi cara paling sederhana untuk menerapkan styling Rob ingin? Yang paling jelas cara banyak orang awalnya menulis CSS adalah untuk menempatkan apa yang kita sebut deklarasi gaya yang tepat dalam elemen itu sendiri menggunakan gaya atribut HTML. Sebuah deklarasi gaya hanya terdiri dari CSS properti elemen HTML yang ingin kita ubah diikuti oleh titik dua diikuti oleh nilai baru properti dan titik koma di akhir. Sebagai contoh, katakanlah Rob menginginkan perbatasan hitam di sekitar pengantarnya. Kami pertama kali atribut style pada div Rob sini kemudian di dalam tanda kutip ganda menempatkan deklarasi CSS: "Border: 1px solid hitam;" The 1 pixel mengacu pada lebar perbatasan, padat mengacu pada gaya perbatasan, dan warna pada akhirnya menentukan apa warna perbatasan adalah. 

Jika kita ingin beberapa gaya pada elemen, menulis deklarasi ini secara berurutan. Misalnya, jika Rob ingin teks sundulannya di Helvetica dengan latar belakang biru dan lebih banyak ruang di sekitar teks, kita bisa melakukan ini: style = "font-family: Helvetica, background-color: biru; padding: 5px;" Titik koma terakhir ini sebenarnya opsional, tapi orang-orang biasanya menyimpan dalam demi konsistensi. 

Kami akan menyimpan menjelaskan beberapa dingin dan lebih kompleks CSS properti untuk video lain. Jika Anda memiliki sesuatu dalam pikiran, hanya Googling efek yang Anda inginkan diikuti oleh CSS mungkin akan memberikan hasil yang cukup bagus. Yang keren adalah bahwa CSS cukup luas, jadi kemungkinan besar jika ada sesuatu yang ingin Anda lakukan - dalam alasan - CSS mungkin dapat melakukannya. Kami menyebutnya semacam ini styling styling inline. Unsur gaya, baik, sejalan dengan tag awal. 

Bagi orang-orang yang benar-benar ingin diatur, Anda mungkin mulai mendapatkan sedikit kesal melihat betapa berantakan ini semua terlihat. Bayangkan jika Anda harus melakukan ini untuk setiap elemen pada halaman, ditambah sekarang HTML dan CSS semua bercampur dan berantakan. Gross, kan? Untuk memperbaiki hal ini, orang-orang akhirnya mulai penangkapan pada memisahkan markup HTML mereka dari styling CSS dengan menggunakan sesuatu yang disebut CSS penyeleksi. CSS penyeleksi digunakan untuk memilih elemen yang deklarasi diterapkan. Sebuah pemilih dikombinasikan dengan daftar deklarasi CSS sering disebut sebagai aturan CSS. Aturan-aturan ini akan menempatkan antara tag gaya HTML membuka dan menutup, sering di kepala dokumen. 

Ini jauh lebih mudah untuk melihat dengan contoh, jadi mari kita mulai dengan membuat aturan CSS sederhana. Pertama, mari kita menempatkan tag gaya di bagian kepala HTML kita. Selanjutnya, pemilih. Kita akan memulai dengan menggunakan salah satu penyeleksi sederhana, simbol hash, yang memilih elemen HTML dengan ID atribut. Dalam hal ini kita akan memilih div yang merupakan pengenalan Rob dengan mengetikkan simbol hash diikuti dengan ID div itu, rob. Sekarang deklarasi. Kami menambahkan kawat gigi membuka dan menutup dan menggeser deklarasi inline sebelumnya kami pada div Rob dalam kawat gigi ini, refresh, dan, keren, Rob intro masih memiliki perbatasan hitam di sekitar itu minus inline keburukan berantakan. 

Sekarang, bagaimana jika kita ingin memilih di dalam h1 intro Rob? Anda mungkin berpikir, "Mari kita menempatkan ID di atasnya dan kemudian memindahkan gaya kami sebelumnya." Yang bekerja, tapi CSS memiliki cara lain untuk membiarkan Anda memilih elemen dengan menggunakan apa yang kita sebut combinators untuk mencampur penyeleksi sederhana. Misalnya, karakter spasi dapat digunakan sebagai combinator untuk menentukan semua contoh dari 1 pemilih yang hidup dalam pemilih lain. Kedengarannya jauh lebih rumit daripada yang sebenarnya. Berikut ini adalah contoh. Kami akan mengetik # merampok, menambahkan spasi, dan mengikutinya dengan h1, Selector sederhana lain yang disebut pemilih tag yang memilih jenis unsur seperti divs atau paragraf. Ruang menggabungkan 2 penyeleksi kami sederhana, menerapkan semua deklarasi CSS dan kurung kurawal untuk tag h1 yang hidup di dalam elemen dengan id = "rob". Hanya untuk meyakinkan Anda bahwa ia bekerja, saya akan mengubah warna font menjadi putih, refresh, dan, lihat, sundulan Rob sekarang putih. 

Semua pekerjaan ini pergi untuk menunjukkan bahwa dengan menggunakan aturan bukan gaya inline kita bisa mendapatkan kode jauh lebih bersih. Bahkan, jika gaya ini blok mulai mendapatkan sedikit besar, Aku bahkan dapat menarik gaya ini keluar ke file yang berbeda sama sekali. 

Untuk menyertakan file baru sebagai CSS dalam dokumen ini saya hanya akan menggunakan link tag HTML. Di sini saya mengatakan bahwa saya menghubungkan dalam style sheet eksternal, atribut rel, dan menentukan path ke file dengan atribut href saya. Sekarang markup HTML saya dan CSS diatur dengan baik dalam file yang terpisah, yang hampir selalu cara desainer lebih memilih bekerja dengan HTML dan CSS. 

Dalam kasus Anda bertanya-tanya, pemilih sederhana termasuk selektor ID dan tag penyeleksi seperti yang telah kita lihat serta penyeleksi kelas untuk memilih elemen dengan kelas tertentu, penyeleksi atribut untuk memilih elemen dengan atribut lain seperti type = "radio" untuk input tombol radio, dan pseudoselectors seperti hover dan fokus untuk menentukan gaya bila interaksi seperti mousing atas elemen terjadi. 

Para combinators umum termasuk spasi untuk semua anak dan koma untuk membedakan penyeleksi. Lain yang mungkin Anda temui termasuk panah untuk anak-anak langsung saja, tilde untuk semua saudara yang terjadi setelah elemen, dan tanda plus untuk 1 saudara yang datang segera setelah elemen. 

Dengan menggabungkan penyeleksi dan combinators, Anda dapat memperluas jangkauan styling Anda dapat mencapai pada suatu halaman web dan menulis CSS lebih efisien. Dengan hanya beberapa baris CSS Anda melihat saya ketik di sini, Saya dapat dengan cepat membuat sesuatu seperti ini terlihat seperti sesuatu seperti ini. 

Aku Yusuf, dan ini adalah CS50. 

[CS50.TV] 

Eh, di mana saya mulai? Biarkan aku melakukan itu tanpa - [tertawa] Oke. Tambahkan - Biarkan aku mengubah kata-kata itu. Ooh. Maaf.