1. 程式人生 > >CSS學習——CSS的簡介和使用

CSS學習——CSS的簡介和使用

前言

在學習web開發的時候,我們一定會學習到css,那麼什麼是css呢?下面分享我知道的css的簡介和使用。

CSS

CSS定義

css是指層疊樣式 (Cascading Style Sheets),用來修飾網頁結構。

CSS的使用

1.在html網頁中,加入style標籤,在這個style標籤裡面寫css程式碼。例項如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*css程式碼*/
			#box{
				color: red;
			}
		</style>
	</head>
	<body>
		<!--通過自定義名字來產生關聯-->
		<div id="box">這是一個盒子</div>
	</body>
</html>

效果圖: 在這裡插入圖片描述 2.可以通過直接把style裡面的程式碼放到一個單獨的檔案中,通過link標籤去引入: css檔案

#box2{
	color: blue;
}

html檔案

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--這種方式的好處:讓html程式碼和css程式碼分離 方便維護-->
		<link rel="stylesheet" type="text/css" href="style/index.css"/>
	</head>
	<body>
		<!--通過自定義名字來產生關聯-->
		<div id="box2">這是一個盒子</div>
	</body>
</html>

效果圖 在這裡插入圖片描述 3.直接在html開始標籤的style屬性裡面去寫css程式碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="color: green;">這是一個盒子3</div>
	</body>
</html>

效果圖 在這裡插入圖片描述