在HTML文档内引入CSS
通過CSS可以為HTML頁面添加豐富的效果,下面就來說說把CSS添加到HTML頁面中的方式,讓二者連接起來。
一、link標簽——外部樣式表
示例:
<link href="css/test.css" rel="stylesheet" type="text/css" />?
(一)link標簽的位置
link標簽只能出現在<head></head>之間,它在<head></head>之間可出現無數次。
比如:
<head> <link href="1.css" rel="stylesheet" type="text/css" /> <link href="2.css" rel="stylesheet" type="text/css" /> <link href="3.css" rel="stylesheet" type="text/css" /> </head>?
(二)link標簽的屬性
?
1.href
href屬性定義外部資源(也就是樣式表)的位置,href屬性的值可以是相對URL,也可以是絕對URL。
相對URL:
<link href="css/outer.css" rel="stylesheet" type="text/css" />
絕對URL:
<link href="http://www.w3school.com.cn/html/csstest1.css" rel="stylesheet" type="text/css" />
?
2.rel
rel屬性定義外部文檔 與 當前文檔的 關系,由于外部文檔是當前文檔的樣式表,所以rel屬性的值為stylesheet。
?
3.type和media
type屬性定義外部文檔的MIME類型,其值是text/css。
media屬性定義外部樣式表要用在何種媒體上。media屬性涉及到媒體查詢,這個知識點目前還不熟悉,暫時掛起。
?
二、style標簽——文檔樣式表
通過style標記可以添加文檔樣式表,文檔樣式表中的樣式只在當前HTML文檔生效。
示例:
<style type="text/css"> *{margin: 0; padding:0;} p{ background-color: aqua; } </style>?
(一)style標簽的位置
style標簽需要出現在head標簽內。
?
(二)style標簽的type屬性
style標簽的type屬性,其值是text/css,代表樣式表的 MIME 類型是CSS。
?
三、HTML標簽的style屬性——內聯樣式
CSS樣式也可以通過HTML標簽的style屬性來設置,但這些標簽必須是出現在<body></body>內部的標簽,比如titile、head就不能添加。
如:
<p style="background: lime;">style屬性——內聯樣式</p>?
轉載于:https://www.cnblogs.com/o0-o-0o/p/7718456.html
總結
以上是生活随笔為你收集整理的在HTML文档内引入CSS的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: bzoj1833: [ZJOI2010]
- 下一篇: python初步学习-查看文档及数据类型