Rumah > Artikel > hujung hadapan web > Apakah peranan gaya css dalam html
Apakah peranan gaya css dalam html
- 藏色散人asal
- 2023-02-02 10:31:272491semak imbas
Fungsi gaya CSS dalam HTML adalah untuk memisahkan dan mengurus kandungan halaman dan kesan pengubahsuaian, dan kesan pengubahsuaian yang berbeza boleh ditambah melalui CSS untuk teg HTML, kesan halaman yang terhasil adalah agak mudah pengubahsuaian, kesan halaman yang lebih pelbagai masih memerlukan bantuan helaian gaya CSS.
Apakah fungsi gaya css dalam html?
Peranan helaian gaya CSS dalam HTML
1 Untuk teg HTML, kesan halaman yang terhasil adalah agak mudah Walaupun terdapat pengubahsuaian pada atribut, kesan halaman yang lebih pelbagai masih memerlukan bantuan helaian gaya CSS. Penggunaan helaian gaya boleh memisahkan dan mengurus kandungan halaman dan kesan pengubahsuaian (html menjana halaman dan kandungan yang berkaitan, dan css digunakan untuk menambah kesan pengubahsuaian yang berbeza)
2. Aplikasi helaian gaya CSS Satu ( helaian gaya dalaman): diletakkan dalam 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1Format satu:
saiz fon: Tetapkan saiz fon<style type="text/css">
选择器(关键词) {属性1:属性值1;属性2:属性值2...}
</style> font-family: Tetapkan gaya fon
Format 2:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
p {color:red;font-size: 35px;font-family: "微软雅黑";}
h3 {color: pink;}
</style>
</head>
<body>这是我的第一句话。
这是我的第二句话
这是我的第三句话
<h1>我是标题标签H1</h1>
<h2>我是标题标签H2</h2>
<h3>我是标题标签H3</h3>
</body>
</html>Banyak kali, sesetengah label memerlukan kesan gaya yang sama, jadi anda boleh menetapkan gaya Sebagai operasi kongsi, anda boleh terus memetiknya selagi tag memerlukannya.
Rujukan teg:<style type="text/css">
.类名 {属性1:属性值1;属性2:属性值2...}
</style>bcadd9001e68d28db434cc74b5bc17a5db4bcbf0db2a2b36a94ffaac9d7281e2
Soalan: Apabila teg, kedua-duanya Ada ialah penggunaan gaya pemilih dan rujukan gaya kelas Apakah keputusan akhir?
Atribut bahagian yang berbeza digabungkan; atribut bahagian yang sama tertakluk kepada gaya kelas
Tetapan atribut latar belakang dalam helaian gaya CSS:| 文本属性 | 说 明 |
|---|---|
| font-size | 字体大小 |
| font-family | 字体类型 |
| font-style | 字体样式(风格) |
| color | 设置或检索文本的颜色 |
| text-align | 文本对齐 |
Warna latar belakang : warna latar belakang
Imej latar belakang: imej latar belakang
Tetapkan kaedah jubin imej latar belakang: ulang latar belakang:
jubin ulang-x sepanjang paksi X
jubin ulang-y di sepanjang paksi Y
tiada ulangan Gunakan imej sebenar untuk menduduki kedudukan latar belakang
sebaran ulang ke seluruh halaman
Imej latar belakang berada dalam Semasa memuatkan, anda perlu menggunakan url()---> 🎜>
3. Gaya CSS Aplikasi jadual dua (helaian gaya sebaris)3.1 Gambaran Keseluruhan: Helaian gaya hanya akan mempunyai kesan pengubahsuaian pada kandungan baris tertentu atau benamkan gaya helaian ke dalam baris tertentu (di dalam teg tertentu)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
.testcss {color: green;font-size: 25px;font-family: "微软雅黑";}
.test1 {color: yellow;}
.tet4 {background-image:url(img/tupian03.jpg);background-repeat: repeat-y;}
</style>
</head>
<body class="test4">
我是第一个段落文字
我是第二个段落文字
我是斜体标签i
我是第二个斜体标签i
我是删除线标签del
</body>
</html>3.2 Format: Anggap gaya sebagai atribut Saya ialah kandungan perenggan pertama
Saya kandungan perenggan kedua
Saya adalah kandungan tag yang besar
<开始标签 style="属性1:属性值1;属性2:属性值2..."></结束标签>
4.1 Aplikasi helaian gaya CSS tiga (helaian gaya luaran)
4.1 Gambaran Keseluruhan. : Letakkan pengisytiharan helaian gaya daripada fail html bersarang, tetapi diletakkan dalam fail css yang berasingan. Dalam erti kata sebenar, fail html dan fail css dipisahkan secara berasingan Jika fail html memerlukan gaya, kaitkan sahaja. Format 4.2: Buat fail css yang berasingan, salin kandungan dalam teg c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f2659274.3 Bagaimana untuk mengaitkan fail html dengan helaian gaya luaran? Kesemuanya diletakkan dalam 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1
Kaedah 1:Pembelajaran yang disyorkan: "
tutorial video css"
<link href="写上引用的外部css文件" rel="stylesheet" type="text/css" /> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css</title> <link href="css/外部css.css" rel="stylesheet" type="text/css" /> </head> <body> 我是段落一 <h1 >我是标题标签h1</h1> <h2 class="test5">我是标题标签h2</h2> </body> </html>
Atas ialah kandungan terperinci Apakah peranan gaya css dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!