CSS檔案是什么

css檔案簡單來說就是一種后綴名為".css"的文本檔案
它的作用簡單來說就是把css代碼和html代碼分離開，同時一個css檔案可以把很多修飾作用包裝在一起，方便很多html檔案使用，減少代碼的重復量

上張圖：

這就是CSS檔案↓

在這里插入圖片描述

接下來說說CSS檔案怎么用

CSS檔案怎么用

怎么創建CSS檔案

直接創建一個后綴為".css"的檔案即可↓

在這里插入圖片描述

怎么使用CSS檔案

首先我們先創建一個html檔案寫一些內容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		這句不加任何修飾的話是為了對比顏色和大小的
		<h1>修飾一級標題</h1>
		<h2>二級標題不被修飾</h2>
		<p>p標簽的內容也會被修飾</p>
	</body>
</html>

例如這樣的↑，如果我們不用css檔案修飾h標簽或p標簽時，我們是直接在head里寫個style然后加上我們想要的修飾
也就是這樣↓：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			h1{
				color: red;
			}
			p{
				color: blue;
				font-size: 50px;
			}
			
		</style>
		<title></title>
	</head>
	<body>
		這句不加任何修飾的話是為了對比顏色和大小的
		<h1>修飾一級標題</h1>
		<h2>二級標題不被修飾</h2>
		<p>p標簽的內容也會被修飾</p>
	</body>
</html>

接下來我們用css檔案來修飾

首先我們把style里面的內容放到我們剛才創建的css檔案里
我寫的檔案名是“style.css”

css代碼：

h1{
	color: red;
}
p{
	color: blue;
	font-size: 50px;
}

然后我們在html檔案里呼叫創建的css檔案
陳述句這樣寫↓

		<link rel="stylesheet" href="../css/style.css" type="text/css">

href=“css檔案位置”

html代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/style.css" type="text/css">
	</head>
	<body>
		這句不加任何修飾的話是為了對比顏色和大小的
		<h1>修飾一級標題</h1>
		<h2>二級標題不被修飾</h2>
		<p>p標簽的內容也會被修飾</p>
	</body>
</html>

效果截圖：
在這里插入圖片描述
創作不易，看完如果對你有幫助，感謝點贊支持！
如果你是電腦端，看見右下角的“一鍵三連”了嗎，沒錯點它[哈哈]

在這里插入圖片描述
加油！

共同努力！

Keafmd

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/195760.html

標籤：python

上一篇：《零基礎看得懂的C語言入門教程》——（十）C語言的指標原來是這樣

下一篇：Spring沒學好，作業、面試都難搞！深入“玩玩”Spring！