Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah peranan gaya css dalam html

Apakah peranan gaya css dalam html

藏色散人
Lepaskan: 2023-02-02 10:31:27
asal
2499 orang telah melayarinya

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

Format satu:

saiz fon: Tetapkan saiz fon
<style  type="text/css">
选择器(关键词) {属性1:属性值1;属性2:属性值2...}
</style>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk
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..."></结束标签>
Salin selepas log masuk

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

4.3 Bagaimana untuk mengaitkan fail html dengan helaian gaya luaran? Kesemuanya diletakkan dalam

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>
Salin selepas log masuk

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan