Cara menggunakan css-Soal Jawab bahagian hadapan-php.cn

Cara menggunakan css

WBOY

Lepaskan： 2023-05-29 09:42:37

asal

742 orang telah melayarinya

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.

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 dalam teg

Contohnya:

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

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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>

Salin selepas log masuk

Helaian Gaya Luaran

Memautkan helaian gaya CSS ke dokumen HTML menggunakan teg 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.

Salin selepas log masuk

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

.blue {
  color: blue;
}

.green {
  color: green;
}

Salin selepas log masuk

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

Contoh:

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!