Rumah > Artikel > hujung hadapan web > Cara menggunakan css

Cara menggunakan css

WBOYasal: 2023-05-21 11:25:38591semak imbas

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk mentakrifkan gaya halaman web Ia digunakan bersama HTML untuk membina halaman web. CSS mengawal penampilan dan kedudukan elemen HTML untuk mencantikkan halaman web dan meningkatkan pengalaman pengguna.

Dalam artikel ini, kami akan memperkenalkan asas CSS dan cara menggunakan CSS untuk menukar gaya elemen HTML.

Asas CSS

CSS terdiri daripada pemilih dan pengisytiharan. Pemilih digunakan untuk memilih elemen HTML yang mana gaya harus digunakan, manakala pengisytiharan menentukan gaya yang akan digunakan pada elemen yang dipilih.

Pemilih

Berikut ialah beberapa pemilih biasa:

Pemilih Elemen : Dengan menyatakan nama elemen HTML Pilih elemen, contohnya:
```
p {
color: red;
}
```
Ini akan memilih semua e388a4556c0f65e1904146cc1a846bee elemen dalam dokumen dan menetapkan warnanya kepada merah.
Pemilih Kelas : Memilih elemen dengan menentukan nama kelas, contohnya:
```
.my-class {
background-color: yellow;
}
```
Ini akan memilih semua elemen dengan class="my- class" dan tetapkan warna latar belakangnya kepada kuning.
Pemilih ID : Memilih satu elemen dengan menentukan id, contohnya:
```
#my-id {
font-size: 20px;
}
```
Ini akan memilih elemen dengan id="my -id" dan tetapkan saiz fonnya kepada 20 piksel.
Pemilih atribut : Memilih elemen dengan menyatakan atributnya, contohnya:
```
a[href="https://www.google.com"] {
color: blue;
}
```
Ini akan memilih semua elemen, tetapkan warnanya kepada biru.
Pseudo-class dan pseudo-element : Pilih elemen dengan menyatakan keadaan atau kedudukannya, contohnya:
```
a:hover {
text-decoration: underline;
}
```
Ini akan memilih semua
Elemen, gariskan teksnya pada tetikus.

Pengisytiharan

Pengisytiharan ialah sebahagian daripada peraturan CSS dan setiap pengisytiharan terdiri daripada atribut dan nilai. Atribut menentukan gaya yang akan digunakan dan nilai menentukan nilai khusus atribut. Contohnya:

p {
  color: red;
}

Dalam peraturan ini, "warna" ialah atribut dan "merah" ialah nilainya. Ini akan memilih semua e388a4556c0f65e1904146cc1a846bee elemen dalam dokumen dan menetapkan warnanya kepada merah.

Cara menggunakan CSS

CSS boleh digunakan pada dokumen HTML dalam tiga cara: helaian gaya dalaman, helaian gaya luaran dan gaya sebaris. Kami akan melihat setiap tiga kaedah ini secara berasingan.

Helaian gaya dalaman

Helaian gaya dalaman merujuk kepada peraturan CSS yang terkandung dalam teg c9ccee2e6ea535a969eb3f532ad9fe89 dan dibenamkan dalam bahagian 93f0f5c25f18dab9d176bd4f6de5d30e Contohnya:

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This text will be red.</p>
</body>
</html>

Dalam contoh ini, peraturan CSS disertakan dalam teg c9ccee2e6ea535a969eb3f532ad9fe89

Helaian gaya luaran

Helaian gaya luaran ialah fail CSS berasingan yang dirujuk dalam dokumen HTML melalui pautan ke fail ini. Contohnya:

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>This text will have the styles defined in style.css.</p>
</body>
</html>

Dalam contoh ini, kami memaut ke fail CSS yang dipanggil "style.css" dan mentakrifkan semua gaya yang kami mahu gunakan dalam fail ini. Ini akan menjejaskan setiap elemen dalam HTML, selagi dokumen itu dikaitkan dengan fail CSS.

Gaya sebaris

Gaya sebaris merujuk kepada membenamkan gaya CSS secara langsung dalam elemen HTML. Contohnya:

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
</head>
<body>
  <p style="color: red;">This text will be red.</p>
</body>
</html>

Dalam contoh ini, gaya CSS ditulis terus dalam atribut "gaya" elemen e388a4556c0f65e1904146cc1a846bee Ini hanya akan menjejaskan elemen dengan atribut "gaya" itu.

Sifat Gaya CSS

CSS mempunyai banyak sifat gaya yang tersedia. Di sini kami menyenaraikan beberapa yang paling biasa digunakan:

warna: warna fon.
saiz fon: saiz fon.
text-align: penjajaran teks.
warna latar belakang: warna latar belakang.
sempadan: Sempadan elemen.
lapik: Pelapik elemen.
margin: jidar unsur.

Sifat ini hanyalah sebahagian daripada banyak sifat yang tersedia dengan CSS. Seperti JavaScript dan bahasa pengaturcaraan lain, CSS mempunyai sintaks dan peraturannya sendiri. Untuk butiran lanjut, lihat spesifikasi dan dokumentasi CSS.

Kesimpulan

CSS ialah bahasa yang fleksibel dan berkuasa yang membolehkan pembangun mengawal penampilan dan kedudukan elemen HTML dengan mudah. Artikel ini menerangkan asas CSS dan cara menggunakannya untuk mengawal penggayaan dalam dokumen HTML. CSS mempunyai pelbagai bidang aplikasi, termasuk reka bentuk web responsif, keserasian merentas pelayar dan pelaksanaan pengalaman pengguna tertentu. Walaupun anda mungkin memerlukan lebih banyak pengalaman CSS untuk menyesuaikan tapak web anda dengan sempurna, menguasai asas CSS adalah permulaan yang baik.

Atas ialah kandungan terperinci Cara menggunakan 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：css melebihi paparan bahagianArtikel seterusnya：css melebihi paparan bahagian

Artikel berkaitan

Lihat lagi