Menggayakan Kandungan Kami

Pengenalan kepada Penggayaan

Sejak beberapa minggu lalu, kami telah membincangkan cara mendapatkan semua maklumat yang anda perlukan ke halaman web. Walau bagaimanapun, jika anda telah mengikuti dan mengekod semasa anda pergi, anda mungkin perasan bahawa halaman anda tidak kelihatan sangat menarik. Mereka mungkin kelihatan agak teruk, sebenarnya…

Setakat ini, kami tidak menambah sebarang gaya pada halaman web kami. Gaya ialah peraturan yang kami berikan kepada penyemak imbas kami untuk memberitahunya bagaimana kami mahu elemen HTML kami kelihatan pada halaman. Kita boleh menukar saiz, fon, warna, kedudukan, penjajaran, dan banyak perkara lain! Tetapi bagaimana?

Menambah Gaya Pertama Kami

<p style="color: blue;">This text is blue now!</p>

Itu sahaja! Jika anda ingin tahu, salin dan tampalkannya ke dalam dokumen dan bukanya dalam penyemak imbas anda. Apa yang awak nampak? Teksnya berwarna biru sekarang! Bagus!

Jadi, apa yang berlaku di sini? Kami mengelilingi kandungan teks kami dengan elemen perenggan dan memberikan elemen perenggan itu atribut gaya. Perhatikan gaya= dalam pembukaan

tag. Dalam nilai atribut, kami menetapkan gaya warna kepada nilai biru: "warna: biru;".

Sekarang, ini bagus, tetapi bagaimana jika kita mahu memusatkan teks pada halaman?

<p style="color: blue; text-align: center;">This text is blue and centered!</p>

Apa yang perlu kami ubah ialah nilai dalam atribut gaya! berkuasa! Tetapi apa yang berlaku dalam atribut nilai itu? Kami tidak pernah melihat sintaks itu sebelum ini! Itu CSS! Tetapi tunggu, mengapa ada di sini jika kita menulis HTML?

Kami! Tetapi HTML tidak direka untuk penggayaan; ia direka untuk struktur dan semantik (yang akan kami bincangkan dalam siaran kemudian). Jika kita ingin menukar rupa halaman, kita perlu mengubah suai lembaran gaya. Secara lalai, penyemak imbas kami memutuskan cara untuk mentafsir maklumat dalam HTML kami menggunakan apa yang dipanggil "lembaran gaya ejen pengguna." Saiz dan warna fon yang anda lihat sehingga tahap ini adalah berdasarkan itu! Apabila kami menambahkan CSS pada atribut gaya kami, gaya yang telah kami tetapkan akan mengatasi helaian gaya ejen pengguna dan mana-mana gaya yang belum kami tentukan akan kembali ke helaian itu. CSS bermaksud Cascading Style Sheets, dan itulah sebabnya!

Ini bagus. Sekarang kita boleh menukar rupa halaman kita, kemungkinannya tidak berkesudahan. Tetapi bayangkan jika kita ingin mendapatkan lebih banyak adat:

<h1 style="font-size: 36px; 
    font-weight: 500; 
    text-align: center;
    text-decoration: underline;
    padding-bottom: 16px;
    color: #b0b1b2;
    opacity: 0.7;">Welcome to My Website!</h1>
<p style="font-size: 16px;
    font-weight: 300;
    text-align: left;
    padding-left: 100px;
    background-color: yellow;">I hope you're having a great day!</p>

Wah… itu banyak kod untuk hanya dua baris teks… dan sangat sukar untuk melihat dengan cepat apa yang sedang berlaku! Ini adalah masalah kerana jika anda cuba dan kembali untuk mengedit maklumat ini kemudian, anda akan mengambil masa lebih lama berbanding jika ia kelihatan seperti ini:

<h1>Welcome to My Website</h1>
<p>I hope you're having a great day!</p>

Bagaimana kita boleh menyelesaikan masalah ini?

Memperkenalkan CSS

Untuk memastikan HTML kami tidak berantakan, kami memindahkan semua gaya kami ke dalam fail .css! Untuk projek kecil, kami biasanya memanggil style.css ini. Selain hanya mengemas kod kami, mengalihkan gaya ke dalam fail baharu juga memenuhi konsep pengaturcaraan yang dipanggil pengasingan kebimbangan. Ini bermakna kami mahu kod kami dibahagikan kepada komponen fungsinya. Kod kami tidak sepatutnya cuba melakukan segala-galanya tetapi dipecahkan kepada bahagian yang lebih kecil yang melakukan satu perkara dengan baik!

Dalam contoh ini, daripada mempunyai satu fail yang menstruktur kandungan kami dan menggayakannya, kami mempunyai dua fail: satu yang menstruktur dan satu yang menggayakan. Kebimbangan terpisah! Jadi, apakah rupa ini?

h1 {
  font-size: 36px; 
  font-weight: 500; 
  text-align: center;
  text-decoration: underline;
  padding-bottom: 16px;
  color: #b0b1b2;
  opacity: 0.7;
}

p {
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  padding-left: 100px;
  background-color: yellow;
}

Ah, lebih baik! Sekarang, fail HTML kami tidak berselerak dengan semua gaya ini! Apa yang anda lihat di atas ialah dua set peraturan CSS. Set peraturan terdiri daripada pemilih dan dua kurungan kerinting yang mengandungi semua maklumat tentang cara menggayakan pemilih. Dalam contoh ini, dua pemilih yang kita lihat ialah h1 dan p. Ini bermakna semua gaya yang disenaraikan di sini akan digunakan pada mana-mana HTML

atau

elemen, masing-masing!

Kami boleh melakukan ini untuk sebarang jenis elemen! Sebenarnya, terdapat banyak cara kami boleh memilih objek dengan Pemilih CSS, tetapi kami akan menyimpannya selama seminggu lagi. Buat masa ini, ketahui sahaja bahawa jika anda menaip jenis elemen, anda boleh menambah gaya dalam pendakap kerinting!

Kami telah menentukan beberapa gaya, tetapi bagaimanakah kami memastikan penyemak imbas kami mengetahui fail mana yang hendak digunakan?

Elemen Pautan

Pertama elemen yang akan kita pelajari ialah unsur. Terdapat beberapa kes penggunaan untuknya, tetapi untuk tujuan kami, kami akan menggunakannya untuk memautkan style.css kami ke index.html kami. Dalam erti kata lain, elemen ini memberitahu pelayar kami lembaran gaya yang hendak digunakan untuk halaman tersebut. Dalam amalan, ia akan kelihatan seperti ini:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link href="./style.css" rel="stylesheet"/>
  </head>
  <body>
    ...
  </body>
</html>

Dan itu sahaja! Style.css kami dipautkan ke dokumen HTML kami dan gaya akan digunakan.

Mari pecahkan elemen pautan ini. Pertama, ia adalah elemen penutup sendiri, jadi kami tidak memerlukan teg penutup dan ia tidak mengambil sebarang kandungan di dalamnya. Terdapat dua atribut yang diperlukan untuk elemen ini: href dan rel. Ini diperlukan kerana elemen memautkan sumber luaran ke dokumen HTML. Jadi, kita perlu memberitahu pelayar kita 1) di mana sumber itu dan 2) untuk apa sumber itu digunakan. The href, yang bermaksud "rujukan hiperteks," menentukan tempat, manakala rel, atau hubungan, menentukan penggunaan!

Perlu ambil perhatian bahawa dengan atribut href, laluan yang anda berikan boleh menjadi sama ada mutlak atau relatif. Ini bermakna anda boleh memberikan lokasi laluan fail daripada direktori akar, cth., /Users/username/Documents/project/style.css (mutlak). Atau anda boleh melakukannya berbanding dengan lokasi fail yang anda sedang kerjakan, seperti yang dilakukan di atas. ./ sebelum nama fail menunjukkan bahawa penyemak imbas harus melihat dalam folder (atau direktori) yang sama dengan fail HTML untuk style.css. Anda juga boleh menambah URL di sini; banyak rangkaian penghantaran kandungan membenarkan anda menggunakan helaian gaya pra-dibuat, yang akan anda sambungkan menggunakan elemen juga!

Cabaran

Baiklah, kami telah membincangkan banyak perkara hari ini. Kini tiba masanya untuk mempraktikkannya. Ambil halaman Perihal Saya yang anda buat dalam cabaran minggu lepas dan ke fail baharu yang dipanggil style.css. (Pastikan anda meletakkannya dalam folder yang sama dengan fail HTML anda!)

Kemudian, cipta gaya untuk setiap elemen anda. Main-main dengan gaya berbeza yang boleh anda tetapkan sehingga halaman Perihal Saya anda kelihatan lebih menarik! (Nota: Anda juga boleh menyasarkan elemen dan !)

Untuk senarai lengkap gaya yang anda boleh gunakan, lihat Rangkaian Pembangun Mozilla. Mereka menganjurkan dokumentasi lengkap untuk bahasa pembangunan web: HTML, CSS dan JS! Berikut adalah pautan ke tapak mereka. Gunakan senarai sifat di bawah "Rujukan" dalam bar sisi untuk melihat perkara yang mungkin!

Jumpa minggu hadapan!

Atas ialah kandungan terperinci Menggayakan Kandungan Kami. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!