Rumah  >  Artikel  >  hujung hadapan web  >  Apakah peranan gaya css dalam html

Apakah peranan gaya css dalam html

藏色散人
藏色散人asal
2023-02-02 10:31:272477semak 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 peranan gaya css dalam html

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 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1

Format 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 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927

4.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!

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