詳解css行內樣式、內嵌樣式與外部引用樣式的使用方法-css教學-PHP中文網

詳解css行內樣式、內嵌樣式與外部引用樣式的使用方法

王林

發布： 2020-03-21 11:01:54

轉載

3425 人瀏覽過

詳解css行內樣式、內嵌樣式與外部引用樣式的使用方法

三中的使用方法的簡單實例如下：

行內樣式：

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>css行内样式</title>
</head>
<body>
<div style="width:100px;height:100px;background:red;"></div>>
 
</body>
</html>

登入後複製

（推薦教學：CSS教學 )

內嵌樣式：

<!!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>css内嵌样式</title>
</head>
<body>
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
<div id="div"></div>>
 
</body>
</html>

登入後複製

外部式：

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>css内嵌样式</title>
 <link rel="stylesheet" type="text/css" href="ccss.css">
</head>
<body>
<div id="div"></div>>
 
</body>
</html>

登入後複製

css檔：

#div{width:100px;height:100px;background:red;}

登入後複製

總結：

################################### ##行內樣式：就是程式碼寫在具體網頁中的一個元素內；例如：

######內嵌式：就是在< ;/head>前面寫；例如：######外部式：就是引用外部css檔案；例如：######相關影片教學推薦：###css影片教學#######

以上是詳解css行內樣式、內嵌樣式與外部引用樣式的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

詳解css行內樣式、內嵌樣式與外部引用樣式的使用方法