cari

Rumah  >  Artikel  >  hujung hadapan web  >  Artikel yang memperkenalkan kaedah definisi CSS

Artikel yang memperkenalkan kaedah definisi CSS

PHPz
PHPzasal
2023-04-21 11:22:321079semak imbas
<p>CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk penggayaan halaman web. Ia mengawal penampilan dan susun atur halaman web dengan menentukan gaya. Artikel ini akan memperkenalkan cara untuk menentukan CSS.

Takrif CSS

Takrifan dalaman

<p>Dalam fail HTML, anda boleh menggunakan teg <head> dalam teg <style> untuk mentakrifkan gaya CSS Untuk gaya dalaman. 

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<p>Dalam contoh ini, kami mentakrifkan warna teks elemen <p> menjadi merah. Semua gaya CSS hendaklah ditulis dalam tag <style>.

Takrifan luaran

<p>Dalam fail HTML, anda juga boleh menggunakan helaian gaya luaran. Helaian gaya luaran ialah fail berasingan yang mengandungi gaya CSS, dengan akhiran .css. Ini boleh diperkenalkan ke dalam fail HTML menggunakan tag <link>. 

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<p>Kod ini memperkenalkan helaian gaya luaran style.css ke dalam dokumen HTML. Atribut href menentukan lokasi helaian gaya.

Takrifan sebaris

<p>Selain mentakrifkan gaya secara dalaman dan luaran, gaya juga boleh ditakrifkan sebaris dalam elemen HTML. Cara definisi ini dipanggil gaya sebaris. 

<p style="color: red;">Hello World!</p>
<p>Dalam contoh ini, kami mentakrifkan gaya warna untuk elemen style menggunakan atribut <p>.

Sintaks CSS

<p>Sintaks CSS terdiri daripada pemilih, atribut dan nilai. Kita boleh menggunakan pemilih untuk memilih elemen halaman dan kemudian menetapkan sifat dan nilainya.

Pemilih

<p>Pemilih ialah pengecam yang digunakan untuk memilih elemen. Berikut ialah beberapa jenis pemilih biasa:

  • Pemilih teg: Memilih semua elemen jenis teg ini dalam halaman, seperti p, div, a.
  • Pemilih Kelas: Pilih elemen dengan kelas yang sama dalam halaman, seperti .carousel.
  • Pemilih ID: Pilih elemen dengan ID yang sama dalam halaman, seperti #header.
  • Pemilih atribut: Pilih elemen berdasarkan nilai atributnya Contohnya, [type="text"] memilih semua elemen yang nilai jenisnya ialah teks.
  • Pemilih kelas pseudo: Tetapkan gaya untuk elemen dalam keadaan tertentu, seperti :hover, :active.

Sifat dan Nilai

<p>Sifat ialah ciri khusus gaya, seperti warna, saiz fon, pelapik, dsb. Nilai ialah gaya khusus yang digunakan pada atribut, seperti merah, 12pt, 20px, dsb.

<p>Berikut ialah beberapa sifat dan nilai biasa:

  • warna: Tetapkan warna teks, seperti color: red;.
  • keluarga fon: Tetapkan keluarga fon, seperti font-family: Arial, sans-serif;.
  • saiz fon: Tetapkan saiz fon, seperti font-size: 16px;.
  • warna latar belakang: Tetapkan warna latar belakang, seperti background-color: #f0f0f0;.
  • sempadan: Tetapkan sempadan, seperti border: 1px solid black;.
  • margin: Tetapkan jidar elemen, seperti margin: 10px;.
  • lapik: Tetapkan jidar dalaman elemen, seperti padding: 10px;.
  • lebar: Tetapkan lebar elemen, seperti width: 100px;.
  • tinggi: Tetapkan ketinggian elemen, seperti height: 100px;.

Contoh CSS

<p>Contoh berikut menunjukkan cara menetapkan sifat warna dan lebar pemilih ID: 

<head>
  <style>
    #header {
      background-color: #333333;
      color: #ffffff;
      width: 100%;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="header">
    <h1>Hello World!</h1>
  </div>
</body>
<p>Dalam contoh ini, kita mempunyai The elemen dengan ID header menetapkan warna latar belakang, warna teks, lebar dan penjajaran teks. Kami menggunakan pemilih teg untuk memilih elemen tajuk <h1>.

Ringkasan

<p>Artikel ini memperkenalkan kaedah definisi, sintaks, pemilih dan sifat CSS. Berbekalkan pengetahuan ini, anda boleh menggunakan CSS dengan mudah untuk mereka bentuk dan mengawal gaya serta reka letak halaman web anda. Apabila anda memerlukan lebih banyak bahan pembelajaran dan latihan tentang CSS, lihat tutorial dan sumber CSS dalam talian.

Atas ialah kandungan terperinci Artikel yang memperkenalkan kaedah definisi CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
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
Artikel sebelumnya：Bagaimana untuk menetapkan saiz pelayar cssArtikel seterusnya：Bagaimana untuk menetapkan saiz pelayar css

Artikel berkaitan

Lihat lagi