cari

Rumah  >  Artikel  >  hujung hadapan web  >  Cara menggunakan css

Cara menggunakan css

WBOY
WBOYasal
2023-05-29 09:42:37730semak imbas

CSS (Cascading Style Sheets) ialah bahasa helaian gaya yang digunakan untuk dokumen HTML (Hypertext Markup Language). CSS boleh menjadikan penampilan halaman web lebih cantik dan jelas, serta meningkatkan kebolehbacaan dan kebolehselenggaraan halaman web.

Helaian gaya CSS biasanya merangkumi tiga bahagian: pemilih, atribut dan nilai. Pemilih menentukan elemen HTML yang akan digunakan gaya, atribut mentakrifkan gaya yang akan digunakan pada elemen dan nilai menentukan nilai khusus atribut.

Mari kita ketahui lebih lanjut tentang cara menggunakan CSS.

  1. Buat helaian gaya CSS

Pertama, kita perlu mencipta helaian gaya CSS untuk dokumen HTML. Biasanya, kami menyimpan helaian gaya CSS dalam fail .css yang berasingan dan memperkenalkannya melalui teg 261f5faa98205db566fb261e4276ef68 dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e

Contohnya: 

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
  1. Pemilih

Pemilih ialah pengecam yang menentukan elemen HTML yang digunakan oleh peraturan CSS. Pemilih biasa termasuk:

  • Pemilih nama teg: Gunakan nama teg elemen HTML untuk menentukan elemen. Contohnya: p, h1, div, dsb.
  • Pemilih kelas: bermula dengan ".", diikuti dengan nama kelas. Contohnya: .class1, .class2.
  • Pemilih ID: bermula dengan "#", diikuti dengan nama ID. Contohnya: #id1, #id2.
  • Pemilih atribut: Tentukan elemen berdasarkan atribut elemen HTML. Contohnya: [attribute], [attribute=value], dsb.
  • Pemilih kelas pseudo: digunakan untuk menentukan keadaan elemen khas tertentu. Contohnya: :hover, :focus, dsb.

Contoh: 

/* 标签名选择器 */
p {
  color: blue;
}

/* 类选择器 */
.red {
  color: red;
}

/* ID选择器 */
#green {
  color: green;
}

/* 属性选择器 */
[class="yellow"] {
  color: yellow;
}

/* 伪类选择器 */
a:hover {
  color: purple;
}
  1. atribut Atribut

menentukan gaya elemen HTML yang digunakan oleh peraturan CSS. Atribut biasa termasuk:

  • warna: warna teks.
  • warna latar belakang: warna latar belakang.
  • saiz fon: saiz fon.
  • fon-keluarga: jenis fon.
  • berat fon: berat fon.
  • penjajaran teks: Penjajaran teks.
  • margin: jidar luar.
  • lapik: pelapik.
  • sempadan: sempadan.

Contoh: 

/* 文本颜色 */
p {
  color: blue;
}

/* 背景颜色 */
body {
  background-color: #eee;
}

/* 字体大小、字体类型、字体粗细 */
h1 {
  font-size: 32px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* 文本对齐方式 */
div {
  text-align: center;
}

/* 外边距、内边距 */
.box {
  margin: 10px;
  padding: 20px;
}

/* 边框 */
.img {
  border: 1px solid black;
}
  1. Nilai

Nilai ialah nilai khusus atribut. Julat nilai yang mungkin untuk harta tanah bergantung pada jenis harta itu. Contohnya, warna boleh menggunakan nama warna yang dipratentukan (seperti "merah", "biru", dll.) atau menggunakan nilai perenambelasan atau RGB (seperti "#ff0000", "rgb(255,0,0)", dsb. ).

Contoh: 

/* 颜色 */
p {
  color: blue;
}

/* 背景颜色 */
body {
  background-color: #eee;
}

/* 字体大小、字体类型、字体粗细 */
h1 {
  font-size: 32px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* 文本对齐方式 */
div {
  text-align: center;
}

/* 外边距、内边距 */
.box {
  margin: 10px;
  padding: 20px;
}

/* 边框 */
.img {
  border: 1px solid black;
}
  1. Warisan

Gaya dalam CSS boleh diwarisi. Sebagai contoh, kita boleh menetapkan atribut fon untuk semua perenggan dalam dokumen HTML, dan nilai atribut ini boleh diwarisi secara automatik oleh teks yang terkandung dalam setiap perenggan.

Contoh: 

/* 字体 */
body {
  font-family: Arial, sans-serif;
}
  1. Cascading

Cascading berlaku apabila berbilang peraturan CSS digunakan pada elemen HTML yang sama. Ini bermakna beberapa peraturan mempunyai keutamaan yang lebih tinggi dan lebih diutamakan daripada peraturan lain. Prinsip melata yang digunakan dalam CSS ialah:

  • Kekhususan gaya: Ringkasnya, ia adalah kerumitan pemilih.
  • Tertib fail: peraturan kemudiannya mengatasi peraturan terdahulu.

Contoh: 

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 优先级为1，文件顺序为1 */
    p {
      color: red;
    }
  </style>
  <style>
    /* 优先级为10，文件顺序为2 */
    .green {
      color: green;
    }
  </style>
  <style>
    /* 优先级为100，文件顺序为3 */
    #blue {
      color: blue;
    }
  </style>
</head>
<body>
  <p class="green" id="blue">This text is blue.</p>
</body>
</html>
  1. Helaian Gaya Luaran

Memautkan helaian gaya CSS ke dokumen HTML menggunakan teg 261f5faa98205db566fb261e4276ef68 umumnya dianggap sebagai amalan terbaik. Melakukannya mempunyai faedah berikut:

  • Boleh dicache: Penyemak imbas boleh cache helaian gaya CSS supaya ia boleh dimuatkan pada masa akan datang.
  • Kebolehselenggaraan: Gaya boleh diedit dan diselenggara dalam fail berasingan.
  • Serasi merentas penyemak imbas: Dengan menggunakan helaian gaya luaran, anda boleh memastikan ketekalan gaya merentas penyemak imbas yang berbeza.
  • Kebolehgunaan: Gaya yang sama boleh digunakan pada berbilang halaman untuk memastikan konsistensi.

Contoh: 



<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

  
This text is red.

  
This text is blue.

  
This text is green.



/* style.css */
.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}
  1. Lembaran gaya dalaman

Kadangkala, menyimpan helaian gaya CSS ke dalam dokumen HTML boleh meningkatkan kelajuan pemuatan halaman. Jika helaian gaya hanya digunakan pada halaman semasa, anda boleh meletakkan helaian gaya dalam teg 11c3ce0c461c5f3456e141a9a29adefa

Contoh: 

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 内部样式表 */
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This text is red.</p>
</body>
</html>
  1. Gaya Sebaris

Gaya Sebaris ialah cara menggunakan peraturan CSS secara terus pada elemen HTML. Gunakan atribut "gaya" dalam teg HTML sebagai tempat untuk memasukkan CSS.

Contoh: 

<!DOCTYPE html>
<html>
<head>
  <title>Inline Style Example</title>
</head>
<body>
  <p style="color: red; font-size: 20px;">This text is red and 20px font size.</p>
</body>
</html>
  1. Model Kotak CSS

Model kotak CSS ialah kaedah mencipta dan meletakkan kotak dalam dokumen HTML. Kotak ialah kawasan segi empat tepat bagi elemen HTML yang boleh mengandungi elemen HTML lain.

Model kotak CSS terdiri daripada bahagian berikut:

  • Kandungan
  • Padding
  • Sempadan
  • Margin

Contoh:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      padding: 20px;
      border: 10px solid black;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="box">This is a box.</div>
</body>
</html>

Ringkasan

CSS ialah bahagian penting dalam membuat halaman web Dengan menggunakan CSS, kami boleh mengawal gaya dan reka letak elemen HTML dengan mudah. Kita boleh mentakrifkan peraturan CSS menggunakan pemilih, sifat, nilai, warisan, melata, helaian gaya luaran, helaian gaya dalaman dan gaya sebaris, serta kotak cipta dan susun atur menggunakan model kotak CSS. Mahir dalam penggunaan CSS bukan sahaja boleh meningkatkan kecekapan pembangunan web, tetapi juga mencipta laman web yang kelihatan lebih baik, lebih mudah dibaca dan lebih mudah diselenggara.

Atas ialah kandungan terperinci Cara menggunakan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html 标识符 继承 Attribute 选择器 样式表 外边距 内边距 margin padding border 伪类 background
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：apa itu cssArtikel seterusnya：apa itu css

Artikel berkaitan

Lihat lagi