Rumah > Artikel > hujung hadapan web > Apakah gaya css?
Apakah gaya css?
- PHPzasal
- 2023-04-23 16:40:454624semak imbas
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>
2. Helaian gaya dalaman
Helaian gaya dalaman adalah untuk menambah teg
Kod contoh:
<head>
<style type="text/css">
p {color:red;font-size:16px;}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
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>
Tambahkan kod berikut dalam fail style.css:
p {
color:red;
font-size:16px;
} 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);
}
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!