1.CSS
- CSS的作用在于在HTML的基礎上(決定網頁的內容和結構)對網頁進行排版布局 對網頁中的元素提供樣式 使得網頁顯得更加精美
- CSS全稱是cascading style sheets 即層疊樣式表
- CSS樣式的書寫格式：樣式名: 樣式值
- 例如：color: red
- 建議:之后進行空格
- CSS樣式應用到html元素的三種方法
- 內聯樣式(inline style)
- 所謂內聯 其實就是將樣式內置到標簽中的意思
- 文檔樣式表(document style sheet)
- 所謂文檔 其實就是將樣式內置到文檔中的意思
- 外部樣式表(external style sheet)
- 所謂外部 其實就是將樣式內置到外部的一個單獨的css文件中
- 內聯樣式(inline style)
2.內聯樣式
- 實現：將CSS樣式作為元素的style屬性值
- 例如：
<div style="color: blue; background-color: red;">文字內容</div> - 多個CSS樣式在屬性值中以;進行隔開 而且建議每個CSS樣式之后都加上;
- 例如：
3.文檔樣式表
- 實現：將CSS樣式內置head元素的style元素中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">div {color: blue;background-color: yellow;}</style>
</head>
<body>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
</body>
</html>
- style元素中type屬性的默認值為text/css 可省略
- 利用文檔樣式表 可以統一設置、修改多個元素的相同樣式
4.外部樣式表
-
實現：將樣式單獨寫在css文件中 然后在當前網頁的head元素中用link元素對css文件進行引用
-
利用外部樣式表 可以解決同時設置多個網頁中公共部分樣式時 頻繁使用文檔樣式表的弊端
-
rel屬性不可或缺 他表示鏈接者和被鏈接者之間的關系
-
而且一般rel一旦確定的話 那么相應的type屬性也會隨之確定 兩者是一一對應的關系 所以可以省略type
-
注意：css文件中的屬性值可能出現中文 為了避免中文亂碼 所以我們需要在css文件中設置一下編碼方式和瀏覽器的一致 設置的格式為：@charset “xxx”;
style.css
@charset "UTF-8";
div {color: red;background-color: blue;
}
page_01.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
</body>
</html>
page_02.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
<div>文字內容</div>
</body>
</html>
5.三個樣式的應用場景
內聯樣式：CSS樣式作用于單個元素上
文檔樣式表：CSS樣式作用于同一個文檔中的若干個元素上(解決頻繁使用內聯樣式表的弊端)
外部樣式表：CSS樣式作用于多個文檔中的公共部分(解決頻繁使用文檔樣式表的弊端)
6.@import指令
-
利用該指令 我們可以實現link元素導入外部樣式表一樣的功能
-
該指令屬于CSS語法 所以需要內置到三種樣式之中
-
以下演示了導入多張外部樣式表的不同方式
- 我們可以通過多個link元素來導入多張外部樣式表
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/style2.css"> </head> <body> <!-- div為紅體藍底的樣式 --> <div>我是div</div> <!--p為紫體橙底的樣式--> <p>我是p</p> </body> </html>- 我們可以通過多個@import來導入多張外部樣式表
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>@import "css/style.css";@import "css/style2.css";</style> </head> <body> <!-- div為紅體藍底的樣式 --> <div>我是div</div> <!--p為紫體橙底的樣式--> <p>我是p</p> </body> </html>- 我們可以通過將多張樣式表的內容集成到一張樣式表中 然后通過link/@import的方式導入一張樣式表即可
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>@import "css/style3.css";</style> </head> <body> <!-- div為紅體藍底的樣式 --> <div>我是div</div> <!--p為紫體橙底的樣式--> <p>我是p</p> </body> </html><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style3.css"> </head> <body> <!-- div為紅體藍底的樣式 --> <div>我是div</div> <!--p為紫體橙底的樣式--> <p>我是p</p> </body> </html> -
一般在開發過程當中 @import不使用 大部分情況都是用的是link元素來導入外部樣式表
7.細節
- 外部樣式表、文檔樣式表比內聯樣式多了一個’表’字？原因在于內聯樣式只作用于一個元素 而外部樣式表/文檔樣式表可以作用于多個元素上
- 如下圖所示 為多個元素設置多個樣式 這就形成了一張樣式表
8.CSS的注釋
- CSS的注釋方式和HTML不一樣 其格式為：/* 注釋內容 */
- 示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>strong {/* 這是一個注釋 */color: green;background: pink;}</style> </head> <body> <strong>我是strong</strong> </body> </html> - 注意：不要在CSS環境中使用其他的注釋 比如：HTML注釋(<!-- -->) 這樣會導致CSS的作用效果失效
- 示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style><!-- 這是一個注釋 -->strong {/* 這是一個注釋 */color: green;background: pink;}</style> </head> <body> <strong>我是strong</strong> </body> </html>
9.HTML和CSS的編寫建議
- 建議內容/結構和樣式分離
- 不要通過html標簽的屬性去設置樣式
- 不推薦以下寫法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title></head> <body bgcolor="orange"></body> </html>- 推薦以下寫法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body {background-color: orange;}</style> </head> <body></body> </html> - 在沒有CSS的年代 都是利用font標簽為html元素設置樣式的 而CSS的出現 就是為了解放html設置元素 所以更加不建議通過html去設置樣式
- 你可以發現 在h5標準下 font標簽是不建議使用的(deprecated 即廢棄)
10.設置網頁圖標
- 我們可以通過link元素設置網頁圖標 并且網頁圖標僅支持.ico、.png格式的圖片 rel也要設置正確(rel一旦設置 type也就隨之確定 所以可省略)
- 示例(自定義網頁圖標為京東圖標)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="icon" href="https://www.jd.com/favicon.ico"> </head> <body></body> </html>
11.最常用的CSS屬性
- color：前景色(含義：覆蓋在背景之上的顏色 包括文本顏色、下劃線顏色以及邊框顏色等等)
- background-color：背景色
- width：寬度
- height：高度
- font-size：文字大小
12.span元素
在默認情況下 span包含的文本和普通文本沒有區別
span元素用于區分特殊文本和普通文本 用于顯示一些關鍵字
