CSS文件是一種能夠為網頁添加樣式的文件,它可以控制網頁的布局、顏色、字體、大小等等。通過CSS文件,我們可以為網頁添加各種各樣的樣式,使得網頁更加美觀、易讀。
/* 以下是CSS文件中可能包含的代碼示例 */
/* 布局樣式 */
body {
margin: 0;
padding: 0;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
.header {
height: 80px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 80px;
}
.main {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 40px 0;
}
/* 文本樣式 */
h1 {
font-size: 48px;
color: #333;
margin: 20px 0;
}
p {
font-size: 18px;
line-height: 1.5;
color: #666;
}
/* 鏈接樣式 */
a {
color: #3399cc;
text-decoration: none;
}
a:hover {
color: #006699;
text-decoration: underline;
}
/* 圖片樣式 */
.image {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
/* 響應式樣式 */
@media screen and (max-width: 768px) {
.main {
flex-direction: column;
align-items: flex-start;
}
.image {
margin-bottom: 0;
}
}
上面代碼示例展示了CSS文件中可能包含的樣式,可以看到,CSS文件中的樣式不僅包括網頁的布局,還包括文字、鏈接、圖片等的樣式。此外,CSS文件還可以為網頁添加響應式樣式,使得網頁在不同大小的屏幕上都具有良好的顯示效果。