Apakah gaya css?-Soal Jawab bahagian hadapan-php.cn

Apakah gaya css?

PHPz

Lepaskan： 2023-04-23 17:39:03

asal

4634 orang telah melayarinya

CSS (Cascading Style Sheet) ialah bahasa yang sangat penting dalam reka bentuk web, yang boleh mengawal gaya dan reka letak halaman web. Antaranya, gaya ialah elemen CSS yang paling asas, dan pelbagai gaya boleh ditambah pada elemen HTML. Terdapat terutamanya gaya CSS berikut:

1. Gaya sebaris

Gaya sebaris ialah cara untuk menambah gaya terus dalam teg HTML, dan sesuai untuk beberapa halaman web yang agak ringkas, seperti Asas gaya seperti warna teks, fon, saiz fon, dsb.

Kod contoh:

<p style="color:red;font-size:16px;">这是一个段落</p>

Salin selepas log masuk

2. Helaian gaya dalaman

Helaian gaya dalaman adalah untuk menambah teg tentukan keseluruhan gaya halaman HTML. Sesuai untuk definisi gaya keseluruhan tapak web.

Kod contoh:

<head>
  <style type="text/css">
    p {color:red;font-size:16px;}
  </style>
</head>
<body>
  <p>这是一个段落</p>
</body>

Salin selepas log masuk

3. Helaian gaya luaran

Helaian gaya luaran memautkan fail CSS luaran dalam dokumen HTML supaya berbilang halaman HTML boleh berkongsi CSS yang sama helaian gaya. Berkenaan dengan definisi keseluruhan gaya laman web dan mudah diubah suai.

Kod contoh:

Tambahkan kod berikut dalam fail HTML:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p>这是一个段落</p>
</body>

Salin selepas log masuk

Tambahkan kod berikut dalam fail style.css:

p {
  color:red;
  font-size:16px;
}

Salin selepas log masuk

4. Gaya lanjutan (CSS3)

CSS3 ialah versi CSS yang ditingkatkan, yang menambahkan banyak gaya lanjutan, seperti sudut bulat, bayang-bayang, kesan animasi, kecerunan, dsb. Gaya ini boleh menjadikan reka bentuk web lebih berwarna.

Kod contoh:

/* 圆角 */
div {
  border-radius:10px;
}

/* 阴影 */
div {
  box-shadow: 5px 5px 5px #ccc;
}

/* 动画效果 */
div:hover {
  animation: example 1s ease-in-out forwards;
}

@keyframes example {
  0%   {transform: scale(1);}
  100% {transform: scale(1.2);}
}

/* 渐变 */
div {
  background: linear-gradient(red, yellow);
}

Salin selepas log masuk

Di atas adalah jenis gaya biasa dalam CSS. Memahami jenis gaya yang berbeza dan senario penggunaannya sangat penting untuk pembangun bahagian hadapan. Dalam projek sebenar, pemilihan jenis gaya yang sesuai dengan betul boleh menjadikan kod kami lebih ringkas dan mudah diselenggara, dan ia juga boleh menjadikan reka bentuk web lebih cantik dan ringkas.

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