資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學樣式表可以實現哪些HTML無法實現的功能？
開發者可以使用CSS來描述網頁內容的呈現方式。樣式表包含CSS程式碼，我們將它與網頁連結起來，以更好地呈現網頁。
為什麼我們需要在HTML網頁中使用樣式表？
對於初學者來說，首先想到的問題是為什麼我們需要使用樣式表？我們能否不使用樣式表建立網頁？答案是肯定的。你可以不使用樣式表建立網頁。
HTML僅用於向網頁新增內容，它準備網頁的結構。我們需要描述網頁內容以更好地呈現並吸引訪問者，這可以透過CSS實現。
透過在樣式表中新增CSS程式碼，我們可以設定網頁的字型樣式、div元素樣式，以及建立網頁卡片等等。
語法
使用者應該遵循以下語法在樣式表中編寫CSS程式碼。
Selector {
/* CSS code */
}
在這裡，我們需要在CSS程式碼的宣告塊中編寫CSS選擇器和CSS程式碼。此外，使用者可以為多個HTML元素編寫CSS程式碼。
示例1（基本樣式）
在下面的示例中，我們演示瞭如何將樣式表與HTML內容一起使用。這裡，我們使用了嵌入式樣式表來更改HTML元素的表示。
這裡，我們建立了兩個div元素併為其設定樣式。使用者可以移除與div元素相關的樣式，並觀察其外觀。
<html>
<head>
<style>
body {background-color: aliceblue;}
.first {
height: 150px;
width: 300px;
font-size: 1.3rem;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
background-color: blueviolet;
}
.second {
height: 100px;
width: 400px;
font-size: 1.3rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: red;
margin: 10px;
background-color: green;
}
</style>
</head>
<body>
<h2>Using the <i> stylesheet </i> to apply basic styles to the webpage content </h2>
<div class = "first"> Hello! How are you? </div>
<div class = "second"> Welcome to the TutorialsPoint! </div>
</body>
</html>
示例2（動畫和過渡）
在下面的示例中，我們演示瞭如何使用樣式表向HTML元素新增動畫。我們建立了一個div元素並使用CSS對其進行樣式設定。
此外，我們還為動畫添加了“bounce”關鍵幀。在“bounce”關鍵幀中，我們更改元素的水平位置，使其具有動畫效果。
<html>
<head>
<style>
.animate {
width: 300px;
height: 300px;
background-color: burlywood;
border: 2px dotted olive;
border-radius: 10px;
animation: bounce 2s ease-in-out 0.1s infinite;
}
@keyframes bounce {
0% {transform: translateX(0px);}
40% {transform: translateX(30px);}
80% {transform: translateX(20px);}
90% {transform: translateX(15px);}
100% {transform: translateX(00px);}
}
</style>
</head>
<body>
<h2>Using the <i> stylesheet </i> to add animation to HTML content </h2>
<div class = "animate"> </div>
</body>
</html>
示例3（響應式設計）
在下面的示例中，我們演示瞭如何透過向HTML內容新增樣式表來建立響應式設計。這裡，我們為父元素設定了尺寸和一些基本樣式。此外，我們還為子div元素設定了尺寸。
之後，我們使用媒體查詢使網頁具有響應性。如果螢幕尺寸小於720畫素，我們將更改div元素的尺寸，使用者可以在輸出中觀察到這一點。
<html>
<head>
<style>
.parent {
width: 50%;
height: 70%;
background-color: blueviolet;
border: 2px dotted green;
border-radius: 12px;
margin: 0 auto;
}
.child {
width: 50%;
height: 50%;
background-color: yellow;
border-radius: 12px;
margin: 15% auto;
}
@media screen and (max-width: 720px) {
.parent { width: 100%; height: 70%;}
.child { width: 80%; height: 50%;}
}
</style>
</head>
<body>
<h2> Using the <i> stylesheet </i> to make a responsive design </h2>
<div class = "parent">
<div class = "child">
</div>
</div>
</body>
</html>
示例4（佈局控制）
在下面的示例中，我們演示瞭如何透過樣式表控制HTML元素的佈局。這裡，我們有一個“container” div元素，其寬度為螢幕總寬度的80%。此外，我們使用了“display: flex” CSS屬性。
對於“block1”元素，我們使用了“flex: 1”；對於“block2”元素，我們使用了“flex: 2” CSS屬性。這裡，使用者可以觀察到block1佔據33.33%的空間，而block2佔據66.67%的總空間。
<html>
<head>
<style>
.container {
width: 80%;
height: 300px;
display: flex;
border: 3px solid pink;
}
.block1 {
flex: 1;
background-color: blue;
}
.block2 {
flex: 2;
background-color: red;
}
</style>
</head>
<body>
<h2> Using the <i> stylesheet </i> to make responsive design </h2>
<div class = "container">
<div class = "block1"> </div>
<div class = "block2"> </div>
</div>
</body>
</html>
使用者學習了將樣式表與HTML一起使用的益處。我們可以更好地呈現HTML內容，而這僅使用普通的HTML是無法實現的。此外，我們還可以使用樣式表使網頁更具吸引力。
89 次瀏覽
