Rumah > hujung hadapan web > tutorial css > Pengenalan kepada CSS

Pengenalan kepada CSS

WBOY
Lepaskan: 2024-08-21 06:36:32
asal
988 orang telah melayarinya

Introduction to CSS

Kuliah 1: Pengenalan kepada CSS

Selamat datang ke kuliah pertama "Asas kepada Kecemerlangan" - perjalanan anda untuk menguasai CSS bermula di sini!


Apakah itu CSS?

CSS, atau Cascading Style Sheets, ialah bahasa yang digunakan untuk menerangkan pembentangan halaman web. Walaupun HTML menyediakan struktur dan kandungan, CSS ialah perkara yang menjadikan halaman web kelihatan menarik dan mesra pengguna. Ia mengawal reka letak, warna, fon, jarak dan banyak lagi.

Mengapa CSS Penting?

  • Pemisahan Kebimbangan: CSS membolehkan anda mengasingkan kandungan (HTML) daripada pembentangan (CSS), menjadikan kod anda lebih bersih dan lebih mudah diselenggara.
  • Ketekalan: Anda boleh menggunakan penggayaan yang konsisten merentas berbilang halaman web dengan memautkan satu fail CSS.
  • Reka Bentuk Responsif: CSS adalah penting untuk mencipta tapak web yang kelihatan baik pada semua peranti, daripada desktop hingga telefon pintar.

Sintaks CSS Asas

CSS terdiri daripada peraturan yang menyasarkan elemen HTML. Setiap peraturan terdiri daripada pemilih dan blok pengisytiharan.

selector {
  property: value;
}
Salin selepas log masuk
  • Pemilih: Menyasarkan elemen HTML yang anda mahu gayakan.
  • Harta: Aspek elemen yang ingin anda ubah (cth., warna, saiz fon).
  • Nilai: Nilai khusus yang anda mahu gunakan pada harta itu.
Contoh:

Katakan anda mahu menukar warna semua

elemen kepada biru.

HTML:

<h1>Hello, World!</h1>
Salin selepas log masuk

CSS:

h1 {
  color: blue;
}
Salin selepas log masuk

Peraturan mudah ini akan mengubah teks dalam semua

elemen kepada biru.

Menambah CSS pada HTML

Terdapat tiga cara utama untuk menambahkan CSS pada dokumen HTML anda:

  1. CSS Sebaris: Terus dalam elemen HTML.
   <h1 style="color: blue;">Hello, World!</h1>
Salin selepas log masuk
  1. CSS Dalaman: Dalam tag dalam bahagian dokumen HTML anda.
   <head>
     <style>
       h1 {
         color: blue;
       }
     </style>
   </head>
Salin selepas log masuk
  1. CSS Luaran: Memautkan ke fail CSS luaran daripada dokumen HTML anda.
   <head>
     <link rel="stylesheet" href="styles.css">
   </head>
Salin selepas log masuk

styles.css:

   h1 {
     color: blue;
   }
Salin selepas log masuk

Amalkan Senaman

  • Buat fail HTML dengan beberapa elemen berbeza seperti

    ,

    dan

    .

  • Gunakan warna, saiz fon dan warna latar belakang yang berbeza pada elemen ini menggunakan ketiga-tiga kaedah: CSS sebaris, dalaman dan luaran.
  • Percubaan dengan sifat yang berbeza untuk melihat cara ia mempengaruhi penampilan unsur anda.

Seterusnya: Dalam kuliah seterusnya, kami akan menyelami Pemilih dan Sifat dan mempelajari cara menyasarkan dan menggayakan elemen berbeza pada halaman web anda. Nantikan!


Kuliah pertama ini memperkenalkan asas CSS, menerangkan apa itu, sebab ia penting dan cara menulis peraturan CSS yang mudah. Contoh yang diberikan mudah diikuti dan latihan menggalakkan pelajar berlatih dan meneroka sendiri.

ikuti saya di LinkedIn

Ridoy Hasan

Atas ialah kandungan terperinci Pengenalan kepada CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan