[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 memecahkan CSS istilah ke dalam 2 bagian: Cascading Style Sheets dan. Cascading adalah sedikit lebih kompleks, dan itu sesuatu yang kita akan membahas dalam video lain. Tapi untuk pemula, Style Sheets petunjuk sangat banyak pada apa CSS tidak. Ia menambahkan gaya ke HTML dari suatu halaman web, mengubah bagaimana halaman web estetis terlihat. Ini berarti segala sesuatu dari font teks ke posisi konten pada halaman hal-hal menarik 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 hanya menulis. Jika Rob adalah untuk melihat situs ini sekarang, dia mungkin akan mengatakan sesuatu seperti, "Wow Perkenalan saya terlihat! Mengerikan. Joseph, Anda seorang desainer mengerikan." "Menggunakan default font Times, Helvetica adalah? Jauh lebih baik." 

Jadi apa yang mungkin menjadi cara paling sederhana untuk menerapkan styling Rob ingin? Yang banyak cara yang paling jelas dari orang awalnya menulis CSS adalah untuk menempatkan apa yang kita sebut deklarasi gaya yang tepat dalam elemen itu sendiri menggunakan atribut style HTML. Sebuah deklarasi gaya hanya terdiri dari properti CSS elemen HTML, kita ingin mengubah diikuti oleh titik dua diikuti oleh nilai baru dari properti dan titik koma di akhir. Sebagai contoh, katakanlah Rob menginginkan perbatasan hitam di sekitar pengantarnya. Kami pertama kali atribut style pada div Rob di sini kemudian di dalam tanda kutip ganda menempatkan deklarasi CSS: "Border: 1px solid hitam;" The pixel 1 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: blue; padding: 5px;" Titik koma terakhir ini sebenarnya opsional, tapi orang-orang biasanya menyimpan dalam demi konsistensi. 

Kita akan menghemat menjelaskan beberapa properti CSS lebih dingin dan lebih kompleks 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, sehingga kemungkinan besar jika ada sesuatu yang ingin Anda lakukan - dalam alasan - CSS mungkin bisa melakukannya. Kami menyebutnya semacam ini styling styling inline. Gaya elemen adalah, 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 hal ini untuk setiap elemen pada halaman, ditambah sekarang Anda HTML dan CSS semua bercampur dan berantakan. Gross, kan? Untuk memperbaiki hal ini, orang-orang akhirnya mulai penangkapan pada memisahkan mereka HTML markup dari styling CSS dengan menggunakan sesuatu yang disebut CSS penyeleksi. Penyeleksi CSS 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 membuka dan menutup tag HTML gaya, 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 kami. Selanjutnya, pemilih. Kita akan memulai dengan menggunakan salah satu pemilih sederhana, simbol hash, yang memilih elemen HTML dengan atribut ID nya. Dalam hal ini kita akan memilih div yang mewakili pengenalan Rob dengan mengetikkan simbol hash diikuti dengan ID div itu, rob. Sekarang deklarasi. Kami menambahkan kawat gigi membuka dan menutup dan menggeser deklarasi sebelumnya kami inline pada div Rob dalam kawat gigi ini, refresh, dan, dingin, Rob intro masih memiliki perbatasan hitam di sekitar itu minus keburukan inline berantakan. 

Sekarang, bagaimana jika kita ingin memilih dalam h1 dari intro Rob? Anda mungkin berpikir, "Mari kita menempatkan ID di atasnya dan kemudian memindahkan gaya kami sebelumnya." Yang bekerja, tetapi CSS memiliki cara lain untuk membiarkan Anda memilih elemen dengan menggunakan apa yang kita sebut combinators untuk campuran penyeleksi sederhana. Sebagai contoh, karakter whitespace 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 ketik # merampok, menambahkan spasi, dan mengikutinya dengan sebuah h1, lain pemilih sederhana yang disebut pemilih tag yang memilih jenis elemen seperti divs atau paragraf. Ruang menggabungkan 2 kami penyeleksi sederhana, menerapkan semua deklarasi CSS dan kurung kurawal untuk tag h1 yang hidup 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. Padahal, jika blok gaya mulai mendapatkan sedikit besar, Aku bahkan bisa menarik gaya ini keluar ke sebuah file yang berbeda sama sekali. 

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

Dalam kasus Anda bertanya-tanya, penyeleksi sederhana termasuk penyeleksi ID dan tag pemilih seperti yang kita hanya melihat serta kelas penyeleksi untuk memilih elemen dengan kelas tertentu, atribut penyeleksi untuk memilih elemen dengan atribut lain seperti type = "radio" untuk input tombol radio, dan pseudoselectors seperti melayang-layang dan fokus untuk menentukan gaya bila interaksi seperti mousing atas unsur 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 saudara 1 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 cepat dapat membuat sesuatu seperti ini terlihat seperti sesuatu seperti ini. 

Saya Yusuf, dan ini adalah CS50. 

[CS50.TV] 

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