CSS簡介
- 層疊樣式表（Cascading Style Sheets）
- css可以用來爲網頁創建樣式表，通過樣式表可以對網頁進行裝飾。
- 所謂層疊，可以將整個網頁想象成一層一層的結構，層次高的將會覆蓋層次低的。
- css就可以分別爲網頁的各個層次設置樣式。
CSS樣式
內聯樣式
- 可以將CSS樣式編寫到元素的style屬性當中
- 將樣式直接編寫到style屬性中，這種樣式我們稱之爲內聯樣式
- 內聯樣式只對當前的元素的內容起作用，內聯樣式不方便複用，不推薦使用。
- 內聯樣式屬於結構與表現耦合，不方便後期的維護，不推薦使用。
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>CSS</title>
</head>
<body>
<!--
內聯樣式：
可以將CSS樣式編寫到元素的style屬性當中
將樣式直接編寫到style屬性中，這種樣式我們稱之爲內聯樣式
內聯樣式只對當前的元素的內容起作用，內聯樣式不方便複用，不推薦使用。
內聯樣式屬於結構與表現耦合，不方便後期的維護，不推薦使用。
-->
<p style="color:red;font-size:20px;">劍氣縱橫三萬裏，一劍光寒十九州</p>
</body>
</html>
內部樣式
- 可以將CSS樣式編寫到head中的style標籤裏
- 將樣式表編寫的style標籤中，然後通過css選擇器選中指定元素
- 然後可以同時爲這些元素一起設置樣式，這樣可以進一步的複用
- 將樣式表編寫在style標籤中，也可以使表現和結構進一步分離它也是我們推薦的使用方式
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>CSS</title>
<!--
內部樣式：
可以將CSS樣式編寫到head中的style標籤裏
將樣式表編寫的style標籤中，然後通過css選擇器選中指定元素
然後可以同時爲這些元素一起設置樣式，這樣可以進一步的複用
將樣式表編寫在style標籤中，也可以使表現和結構進一步分離它也是我們推薦的使用方式
-->
<style type="text/css">
p{
color:red;
font-size:20px;
}
</style>
</head>
<body>
<p>劍氣縱橫三萬裏，一劍光寒十九州</p>
</body>
</html>
外部樣式
- 還可以將樣式表編寫到外部的css文件中，然後通過link標籤來將外部的css文件引入到當前頁面中
- 這樣外部文件中的css樣式表將會應用到當前頁面中
- 將css樣式統一編寫到外部的樣式表中，完全使結構和表現分離，可以使樣式表在不同的頁面中使用
- 最大限度的使樣式可以進行復用，將樣式統一寫在樣式表中，然後通過link標籤引入，可以利用瀏覽器緩存加快用戶訪問的速度提高了用戶體驗
css文件：style.css
p{
color:red;
font-size:20px;
}
html文件：demo.html
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>CSS</title>
<!--
還可以將樣式表編寫到外部的css文件中，然後通過link標籤來將外部的css文件引入到當前頁面中
這樣外部文件中的css樣式表將會應用到當前頁面中
將css樣式統一編寫到外部的樣式表中，完全使結構和表現分離，可以使樣式表在不同的頁面中使用
最大限度的使樣式可以進行復用，將樣式統一寫在樣式表中，然後通過link標籤引入，可以利用瀏覽器緩存加快用戶訪問的速度提高了用戶體驗
-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>劍氣縱橫三萬裏，一劍光寒十九州</p>
</body>
</html>
CSS基本語法
註釋
css的註釋，作用和HTML註釋類似，只不過它必須編寫在style標籤中，或者是css文件中
/* css的註釋，作用和HTML註釋類似，只不過它必須編寫在style標籤中，或者是css文件中*/
語法
選擇器/聲明塊
選擇器
通過選擇器可以選中頁面中指定的元素，並且將聲明塊的樣式應用到選擇器對應的元素上
聲明塊
- 聲明塊緊跟在選擇器的後邊，使用一對 {} 括起來
- 聲明塊中實際就是一組一組的名值對結構
- 這一組一組的名值對我們稱之爲聲明
- 在一個聲明塊中科院寫多個聲明，多個聲明直接使用 ; 隔開
- 聲明的樣式名和樣式之間使用 : 來連接
常用選擇器
元素選擇器
- 作用：通過元素選擇器可以選擇頁面中的指定元素
- 語法：標籤名{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用選擇器</title>
<style type="text/css">
/*爲頁面中的所有p元素，設置一個字體爲紅色*/
/*
* 元素選擇器
* - 作用：通過元素選擇器可以選擇頁面中的指定元素
* - 語法：
* 標籤名{}
*/
p{
color: red;
}
h1{
color: red;
}
</style>
</head>
<body>
<h1>憫農</h1>
<p>鋤禾日當午</p>
<p>鋤禾日當午</p>
</body>
</html>
id選擇器
- 作用：通過元素的id屬性值選中唯一的一個元素
- 語法：#id屬性值{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用選擇器</title>
<style type="text/css">
/*
* id選擇器
* - 通過元素的id屬性值選中唯一的一個元素
* - 語法：
* #id屬性值{}
*/
#p1{
font-size: 25px;
}
</head>
<body>
<h1>憫農</h1>
<p>鋤禾日當午</p>
<p>鋤禾日當午</p>
<p id="p1">鋤禾日當午</p>
</body>
</html>
class選擇器
- 作用： 通過元素的class屬性值選中一組元素
- 語法：.class屬性值{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用選擇器</title>
<style type="text/css">
/*
* class選擇器
* - 通過元素的class屬性值選中一組元素
* - 語法：
* .class屬性值{}
*/
.p2{
font-size: 15px;
}
.hello{
font-size: 35px
}
</style>
</head>
<body>
<h1>憫農</h1>
<p>鋤禾日當午</p>
<p>鋤禾日當午</p>
<!--
我們可以爲元素設置class屬性，class屬性和id屬性類似，只不過class屬性可以重複
擁有相同class屬性值的元素，我們說他們是一組元素
可以同時爲一個元素設置多個class屬性值，多個值之間用空格隔開
-->
<p class="p2 hello">鋤禾日當午</p>
<p class="p2">鋤禾日當午</p>
<p class="p2">鋤禾日當午</p>
</body>
</html>
選擇器分組
- 作用：通過選擇器分組可以同時選中多個選擇器對應的元素
- 語法：選擇器1,選擇器2,選擇器N{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用選擇器</title>
<style type="text/css">
/*
* 當id爲p1的元素，class爲p2的元素，還有h1，同時設置背景顏色爲黃色
*/
/*
* 選擇器分組
* - 通過選擇器分組可以同時選中多個選擇器對應的元素
* - 語法：
* 選擇器1,選擇器2,選擇器N{}
*/
#p1,.p2,h1{
background-color: yellow;
}
</style>
</head>
<body>
<h1>憫農</h1>
<p>鋤禾日當午</p>
<p>鋤禾日當午</p>
<p id="p1">鋤禾日當午</p>
<p class="p2 hello">鋤禾日當午</p>
<p class="p2">鋤禾日當午</p>
<p class="p2">鋤禾日當午</p>
<p>鋤禾日當午</p>
<p>鋤禾日當午</p>
<p class="p3">鋤禾日當午</p>
<span class="p3">汗滴禾下土</span>
</body>
</html>
通配選擇器
- 作用：選中頁面中的所有元素
- 語法：*{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用選擇器</title>
<style type="text/css">
/*
* 通配選擇器
* - 他可以用來選中頁面中的所有元素
* - 語法：
* *{}
*/
*{
color: deepskyblue;
}
</style>
</head>
<body>
<h1>憫農</h1>
<p>鋤禾日當午</p>
<p>鋤禾日當午</p>
<p id="p1">鋤禾日當午</p>
<p class="p2 hello">鋤禾日當午</p>
<p class="p2">鋤禾日當午</p>
<p class="p2">鋤禾日當午</p>
<p>鋤禾日當午</p>
<p>鋤禾日當午</p>
<p class="p3">鋤禾日當午</p>
<span class="p3">汗滴禾下土</span>
</body>
</html>
複合選擇器
- 作用：可以選擇同時滿足多個選擇器的元素
- 語法：選擇器1選擇器2選擇器N{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用選擇器</title>
<style type="text/css">
/*
* 爲擁有class p3 span元素設置一個背景顏色爲黃色
*/
/*
* 複合選擇器（交集選擇器）
* - 作用：
* - 可以選擇同時滿足多個選擇器的元素
* - 語法：
* - 選擇器1選擇器2選擇器N{}
*/
span.p3{
background-color: yellow;
}
/*
* 對於id選擇器來說，不建議使用複合選擇器
*/
p#p1{
background-color: red;
}
</style>
</head>
<body>
<h1>憫農</h1>
<p>鋤禾日當午</p>
<p>鋤禾日當午</p>
<p id="p1">鋤禾日當午</p>
<p class="p2 hello">鋤禾日當午</p>
<p class="p2">鋤禾日當午</p>
<p class="p2">鋤禾日當午</p>
<p>鋤禾日當午</p>
<p>鋤禾日當午</p>
<p class="p3">鋤禾日當午</p>
<span class="p3">汗滴禾下土</span>
</body>
</html>
後代元素選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 爲div d1中的span設置一個顏色爲綠色
* 後代元素選擇器
* - 作用：
* - 選中指定元素的指定後代元素
* - 語法：
* - 祖先元素 後代元素{}
*/
#d1 span{
color: green;
}
/*
* 選中id爲d1的div中的p元素中的span元素
*/
#d1 p span{
font-size: 25px;
}
/*
* 選中div子元素span設置一個背景顏色爲黃色
* 子元素選擇器：
* - 作用：
* - 選中指定父元素的指定子元素
* - 語法：
* 父元素 > 子元素
* IE6 及以下不支持子元素選擇器
*/
div > span{
background-color: yellow;
}
</style>
</head>
<body>
<!--
元素之間的關係
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或間接包含後代的元素，父元素也是祖先元素
後代元素：直接或間接被祖先元素包含的元素，子元素也是後代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
-->
<div id="d1">
<span>我是div標籤中的span</span>
<p>
<span>我是P標籤中的span</span>
</p>
</div>
<div>
<span>我是body標籤中的span</span>
</div>
</body>
</html>
僞類選擇器
有四個僞類可以讓你根據訪問者與該鏈接的交互方式，將鏈接設置成4種不同的狀態。
- 正常鏈接：
a:link
- 訪問過的鏈接：
a:visited(只能定義字體顏色)
- 鼠標滑過的鏈接：
a:hover
- 正在點擊的鏈接：
a:active
- 獲取焦點：
:focus
- 指定元素前：
:before
- 指定元素後：
:after
- 選中指定元素：
::selection
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 僞類專門用來表示元素的一種特殊狀態
* 比如：訪問過的超鏈接、普通的超鏈接、獲取焦點的文本框
* 當我們需要爲處在這些特殊情況的元素設置樣式時，就可以使用僞類
*/
/*
* 爲沒訪問過的鏈接設置顏色爲綠色
* :link
* - 表示普通鏈接（沒訪問過的鏈接）
*/
a:link{
color: yellowgreen;
}
/*
* 爲訪問過的鏈接設置顏色爲紅色
* ：visited
* - 表示訪問過的鏈接
*
* 瀏覽器是通過歷史記錄來判斷一個鏈接是否訪問過
* 由於涉及到了用戶隱私問題，所以使用visited僞類只能設置字體的顏色。
*/
a:visited{
color: red;
}
/*
* :hover 表示鼠標移入的狀態
*/
a:hover{
color:deepskyblue;
}
/*
* :active表示的是超鏈接被點擊的狀態
*/
a:active{
color:black;
}
/*
* :hover和:active也可以爲其他元素設置
* IE6不支持超鏈接以外的元素設置:hover和:active
*/
p:hover{
background-color: yellow;
}
p:active{
background-color: orange;
}
/*
* 文本框獲取焦點以後，修改背景顏色爲黃色
*/
input:focus{
background-color: red;
}
/*
* 爲p標籤中選中的內容使用樣式
* 可以使用 ::selection僞類
* 注意，這個僞類在火狐中需要採用另一種方式編寫
*/
/*兼容大多數瀏覽器*/
P::selection{
background-color: dodgerblue;
}
/*兼容火狐瀏覽器的*/
P::-moz-selection{
background-color: dodgerblue;
}
</style>
</head>
<body>
<a class="abc" href="http://www.baidu.com">這是一個訪問過的鏈接</a>
<br />
<br />
<a class="bcd" href="http:///www.baidu.com">這是一個沒訪問過的鏈接</a>
<p>我是一個段落</p>
<!--使用input可以創建一個文本輸入框-->
<input type="text" />
</body>
</html>
僞元素選擇器
- 首字母
:first-letter
- 首行
:first-line
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 使用僞元素來表示元素中一些特殊的位置
*/
/*
* 爲p的第一個字符來設置一個特殊的樣式
*/
p:first-letter{
color: red;
font-size: 25px;
}
/*
* 爲p中第一行來設置一個特殊樣式
*/
p:first-line{
background-color: yellow;
}
/*
* :before表示元素最前邊的部分
* 一般before都需要結合content這個樣式一起使用
* 通過content可以向before或after的位置添加一些內容
*/
p:before{
content:"我會出現在整個段落最前面";
color:red;
}
/*
* :after表示段落最後面
*/
p:after{
content:"我會出現在整個段落最後面";
color:green;
}
</style>
</head>
<body>
<p>
第一段<br />
第二段
</p>
</body>
</html>
屬性選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 爲所有具體title屬性的p元素，設置一個背景顏色爲黃色
* 屬性選擇器
* - 作用：可以根據元素中的屬性或屬性的值來選取指定元素
* - 語法：
* [屬性名] 選取含有指定屬性的元素
* [屬性名="屬性值"] 選取含有指定屬性值的元素
* [屬性名^="屬性值"] 選取屬性值以指定內容開頭的元素
* [屬性名$="屬性值"] 選取屬性值以指定內容結尾的元素
* [屬性名*="屬性值"] 選取屬性值包含指定內容的元素
*/
p[title]{
background-color: yellow;
}
/*
* 爲title屬性值是hello的元素設置背景顏色爲綠色
*/
p[title="hello"]{
background-color: green;
}
/*
* 爲title屬性值以ab開頭的元素設置一個背景顏色爲藍色
*/
p[title^="ab"]{
background-color: deepskyblue;
}
/*
* 爲title屬性值以e結尾的元素設置一個背景顏色
*/
p[title$="e"]{
background-color: orange;
}
/*
* 爲title屬性值包含e的元素設置一個背景顏色
*/
p[title*="e"]{
background-color: gray;
}
</style>
</head>
<body>
<!--
title屬性，這個屬性可以給任何標籤指定
當鼠標移入到元素上時，元素中title屬性將會作爲提示文字顯示
-->
<p title="hello">我是一個段落</p>
<p>我是一個段落</p>
<p title="abc">我是一個段落</p>
<p title="abdd">我是一個段落</p>
<p>我是一個段落</p>
<p title="cde">我是一個段落</p>
<p>我是一個段落</p>
<p title="我是title中的文字">我是一個段落</p>
</body>
</html>
子元素選擇器
- :first-child ：選擇第一個子標籤
- :last-child：選擇最後一個子標籤
- :nth-child：選擇指定位置的子元素
- :first-of-type
- :last-of-type
- :nth-of-type ：選擇指定類型的子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 爲第一個p標籤設置一個背景顏色爲黃色
* :first-child 可以選中父元素的第一個子元素（不考慮父元素是誰）
* :last-child 可以選中最後一個子元素
* :nth-child() 可以選中任意位置的子元素
* 該選擇器後邊可以指定一個參數，指定要選中的第幾個子元素
* even表示偶數位置的子元素
* odd表示奇數位置的子元素
*/
body > p:first-child{
background-color: yellow;
}
p:last-child{
background-color: orange;
}
p:nth-child(even){
background-color: deepskyblue
}
/*
* :first-of-type
* :last-of-type
* :nth-of-type
* 和：first-child這些非常類似
* 只不過child，是在所有的子元素中排列
* 而type,是在當前類型的子元素中排列
*/
p:first-of-type{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一個p標籤</p>
<p>我是一個p標籤</p>
<p>我是一個p標籤</p>
<p>我是一個p標籤</p>
<p>我是一個p標籤</p>
<div>
<p>我是DIV中的p標籤</p>
</div>
<div>
<p>我是DIV中的p標籤</p>
</div>
</body>
</html>
兄弟元素選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 爲span後的一個p元素設置一個背景顏色爲黃色
* 後一個兄弟元素選擇器
* 作用：可以選中一個元素緊挨着的指定的兄弟元素
* 語法：前一個 + 後一個
*/
p + span{
background-color: deepskyblue;
}
/*
* 選中後邊的所有兄弟元素
* 語法：前一個 ~ 後邊所有
*/
span ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一個P標籤</p>
<p>我是一個P標籤</p>
<p>我是一個P標籤</p>
<span>我是一個span</span>
<p>我是一個P標籤</p>
<p>我是一個P標籤</p>
<p>我是一個P標籤</p>
<p>我是一個P標籤</p>
</body>
</html>
否定僞類選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 爲所有的p元素設置一個背景顏色爲黃色,除了class值爲hello的
*
* 否定僞類
* 作用：可以從已選中的元素中剔除出其他元素
* 語法：
* :not(選擇器){}
*/
p:not(.hello){
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一個P標籤</p>
<p>我是一個P標籤</p>
<p>我是一個P標籤</p>
<p>我是一個P標籤</p>
<p class="hello">我是一個P標籤</p>
<p>我是一個P標籤</p>
<p>我是一個P標籤</p>
<p>我是一個P標籤</p>
</body>
</html>
a的僞類
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 設計到a標籤的僞類一共有四個：
* :link
* :visited
* :hover
* :active
* 而這四個選擇器的優先級是一樣的
* 爲了各個樣式間互不干擾需要按 上述順序編寫
*/
a:link{
color: yellowgreen;
}
a:visited{
color: deepskyblue;
}
a:hover{
color: orange;
}
a:active{
color: gray;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">訪問過的鏈接</a>
<br /><br />
<a href="http://www.qq.com">沒訪問過的鏈接</a>
</body>
</html>
樣式的繼承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
font-size: 25px;
}
</style>
</head>
<body>
<!--
像兒子可以繼承父親的遺產一樣，在CSS中，祖先元素上的樣式，也會被他的後代元素所繼承
利用繼承，可以將一些基本的樣式設置給祖先元素，這樣所以的後代元素將自動繼承這些樣式
但是並不是所以樣式都會被子元素所繼承，比如：背景相關的樣式、邊框相關的樣式、定位相關的樣式
-->
<p style="font-size: 25px;">
我是p標籤中的文字
<span>
我是p元素中的span
</span>
</p>
<span>
我是p元素外的span
</span>
</body>
</html>
可以點擊 CSS background-color 屬性 查看都有什麼實體
注意：css默認背景是透明的所以會感覺繼承了背景顏色，實際上並未繼承
選擇器優先級
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
background-color: yellow !important;
}
p{
background-color: greenyellow;
}
#p2{
background-color: deepskyblue;
}
p#p2{
background-color: red;
}
.p1{
color: yellow;
}
.p3{
color: green;
}
/*
* 使用不同的選擇器選擇同一個元素並且設置相同的樣式時
* 這時樣式之間產生了衝突
* 優先級高的優先顯示
*
* 優先級的規則
* 內聯樣式：優先級1000
* id選擇器：優先級100
* 類和僞類：優先級10
* 元素選擇器：優先級1
* 統配* ：優先級0
* 繼承的樣式：沒有優先級
*
* 當選擇器中包含多種選擇器時，需要將多個選擇器的優先級相加後再比較
* 但是注意，選擇器的優先級計算不會超過他的最大的數量級
* 如果優先級一樣，則使用靠後的樣式
*
* 並集選擇器的優先級是單獨計算的
* 可在樣式的最後，添加一個!important，這個樣式將會獲得一個最高的優先級，
* 將會優先於所有樣式顯示，甚至超過內聯樣式。但是在開發中儘量避免使用!important
*/
*{
font-stretch: 50px;
}
p{
font-size: 25px;
}
</style>
</head>
<body>
<p class="p1 p3" id="p2" style="background-color: deepskyblue;">
我是一個段落
<span>我是p標籤中的span</span>
</p>
</body>
</html>
大小單位
- 像素 px
- 像素是我們在網頁找那個使用最多的一個單位
- 一個像素就相當於屏幕上的一個小店
- 我們的屏幕實際上就是由這些像素點構成的
- 但是這些像素點是不能直接看見的
- 不同的顯示器一個像素的大小也不相同
- 顯示效果越好越清晰，像素就越小，反之像素就越大
- 百分比 %
- 也可以將單位設置爲一個百分比的形式
- 這樣瀏覽器將會根據父元素的樣式計算該值
- 使用百分比的好處是，當父元素的屬性值發生變化時
- 子元素也會按照比例發生改變
- 在我們創建一共自適應的頁面時，經常使用百分比做單位
- em:
- em和我們的百分比類似，它是相對於當前元素的字體大小來計算的
- 1em = 1font-size
- 使用em時，當字體大小發生改變時，em也會隨之改變
- 當設置字體相關樣式時，經常會使用em
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 長度單位
* 像素 px
* - 像素是我們在網頁找那個使用最多的一個單位
* 一個像素就相當於屏幕上的一個小店
* 我們的屏幕實際上就是由這些像素點構成的
* 但是這些像素點是不能直接看見的
* - 不同的顯示器一個像素的大小也不相同
* 顯示效果越好越清晰，像素就越小，反之像素就越大
* 百分比 %
* - 也可以將單位設置爲一個百分比的形式
* 這樣瀏覽器將會根據父元素的樣式計算該值
* - 使用百分比的好處是，當父元素的屬性值發生變化時
* 子元素也會按照比例發生改變
* - 在我們創建一共自適應的頁面時，經常使用百分比做單位
* em:
* - em和我們的百分比類似，它是相對於當前元素的字體大小來計算的
* - 1em = 1font-size
* - 使用em時，當字體大小發生改變時，em也會隨之改變
* - 當設置字體相關樣式時，經常會使用em
*/
.box{
width: 100px;
height: 100px;
background-color: red;
}
.box1{
font-size: 100px;
width: 2em;
height: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>
顏色單位
顏色單位：
- 在CSS可以直接使用顏色單詞來表示不同的顏色
紅色：red
藍色：blue
綠色：green - 可以使用RGB值來表示不同的顏色
所謂RGB值指的是通過Red Green Blue三元色
通過這三種顏色不同的濃度，來表示不同的顏色
例子：rgb(紅色的濃度，綠色的濃度，藍色的濃度);
顏色的濃度需要一個0-255之間的值，255表示最大，0表示沒有- 濃度也可以採用一個百分數來設置，需要一個0%-100%之間的數字
- 使用百分數最後也是轉換爲0-255之間的值
- 也可以使用十六進制的rgb值來表示顏色，原理和上邊的RGB值一樣
只不過使用十六進制數來表示，使用三組兩位的數組來表示一個顏色
每組表示一個顏色,第一組紅色，第二組綠色，第三組藍色
語法：#紅色綠色藍色
十六進制：
0 1 2 3 4 5 6 7 8 9 a b c d e f
00 - ff- 00表示最小，相當於rgb中的0
- ff表示最大，相當於rgb中的255
例如：紅色：#ff0000
像這種兩位兩位重複的顏色，可以重寫
比如：#ff0000可以寫成#f00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
/*
* 顏色單位：
* 在CSS可以直接使用顏色單詞來表示不同的顏色
* 紅色：red
* 藍色：blue
* 綠色：green
* 可以使用RGB值來表示不同的顏色
* -所謂RGB值指的是通過Red Green Blue三元色
* 通過這三種顏色不同的濃度，來表示不同的顏色
* -例子：rgb(紅色的濃度，綠色的濃度，藍色的濃度);
* - 顏色的濃度需要一個0-255之間的值，255表示最大，0表示沒有
* - 濃度也可以採用一個百分數來設置，需要一個0%-100%之間的數字
* 使用百分數最後也是轉換爲0-255之間的值
* 也可以使用十六進制的rgb值來表示顏色，原理和上邊的RGB值一樣
* 只不過使用十六進制數來表示，使用三組兩位的數組來表示一個顏色
* 每組表示一個顏色,第一組紅色，第二組綠色，第三組藍色
* 語法：#紅色綠色藍色
* 十六進制：
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示最小，相當於rgb中的0
* ff表示最大，相當於rgb中的255
* 紅色：
* #ff0000
* 像這種兩位兩位重複的顏色，可以重寫
* 比如：#ff0000可以寫成#f00
*/
/* background-color: rgb(0,255,0);
* background-color: rgb(0%,100%,0%);
*/
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
文本樣式
字體顏色
使用 color 來設置文字的顏色
字體大小
font-size 設置的並不是文字本上的 大小
在頁面中，每個文字都是處於一個看不見的框中
我們設置的font-size實際上是設置的格的高度，並不是字體的大小
一般情況下文字都比這個格要小一些，也有時會比格大
根據字體的不同，顯示效果也不同
字體
通過 font-family 來指定文字的字體
當採用某種字體，如果瀏覽器支持則使用該字體，如果字體不支持，則使用默認字體
該樣式可以同時指定多個字體，多個字體之間使用,分開。
如果採用多個字體時，瀏覽器會優先使用前邊的字體，如果前邊的不支持則採用下一個
瀏覽器使用的字體默認就是計算機中的字體。如果計算機中有，則使用，沒有則不使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
/*設置字體顏色，使用color來設置文字的顏色*/
color: red;
/*設置文字的大小，瀏覽器一般默認文字的大小都是16px*/
/*
* font-size設置的並不是文字本上的 大小
* 在頁面中，每個文字都是處於一個看不見的框中
* 我們設置的font-size實際上是設置的格的高度，並不是字體的大小
* 一般情況下文字都比這個格要小一些，也有時會比格大
* 根據字體的不同，顯示效果也不同
*/
font-size: 30px;
/*字體*/
/*
* 通過font-family來指定文字的字體
* 當採用某種字體，如果瀏覽器支持則使用該字體
* 如果字體不支持，則使用默認字體
* 該樣式可以同時指定多個字體，多個字體之間使用,分開，
* 如果採用多個字體時，瀏覽器會優先使用前邊的字體，如果前邊的不支持則採用下一個
*
*/
/*
* 瀏覽器使用的字體默認就是計算機中的字體
* 如果計算機中有，則使用，沒有則不使用
*/
font-family: arial, "微軟雅黑";
</style>
</head>
<body>
<p class="p1">
我是一個p標籤 ABC123abc
</p>
</body>
</html>
字體分類
- serif（襯線字體）
- sans-serif（非襯線字體）
- monospace（等寬字體）
- cursive（草書字體）
- fantasy（虛幻字體）
可以將字體設置爲這些大的分類。
當設置爲大的分類後，瀏覽器會自動選擇指定的字體並應用樣式。
一般會使字體大類指定爲font-family裏最後一個字體。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
在網頁中將字體分爲5大類
* serif（襯線字體）
* sans-serif（非襯線字體）
* monospace（等寬字體）
* cursive（草書字體）
* fantasy（虛幻字體）
可以將字體設置爲這些大的分類
當設置爲大的分類後，瀏覽器會自動選擇指定的字體並應用樣式
一般會使字體大類指定爲font-family裏最後一個字體
-->
<p style="font-size: 50px; font-family: serif;">襯線字體：我是一個P標籤 ABCDEFG123456</p>
<p style="font-size: 50px; font-family: sans-serif;">非襯線字體：我是一個P標籤 ABCDEFG123456</p>
<p style="font-size: 50px; font-family: monospace;">等寬字體：我是一個P標籤 ABCDEFG123456</p>
<p style="font-size: 50px; font-family: cursive;">草書字體：我是一個P標籤 ABCDEFG123456</p>
<p style="font-size: 50px; font-family: fantasy;">虛幻字體：我是一個P標籤 ABCDEFG123456</p>
</body>
</html>
斜體
font-style可以設置字體的斜體
可選值：
normal : 默認值，文字正常顯示
italic : 斜體
oblique：文字會以傾斜的效果顯示
注意：大部分瀏覽器都不會對傾斜和斜體做區分，也就是說我們設置italic和oblique它們的效果往往是一樣的，一般我們只用italic。
加粗
font-weight可以用來設置文本的加粗效果
可選值：
normal : 默認值，文字正常顯示
bold ： 文字加粗顯示
該樣式也可以採用100-900這之間的9個值來表示
注意：由於用戶的計算機往往沒有這麼多級別的字體，所以很難達到我們想要的效果
也就是200有可能比100粗，也有可能是一樣粗
大型小寫字母
font-variant可以用來設置小型大寫字母
可選值：
normal ： 默認值 文字正常顯示
small-caps 文本以小型大寫字母顯示
小型大寫字母：
將所以的字母以大寫形式顯示，但是小寫字母大寫，字體的大小上比字母的大寫小一點
樣式font
- 使用該樣式可以同時設置字體相關的所有樣式
- 可以將字體的樣式的值，統一寫在font樣式中 不同值之間使用空格隔開
- 使用font設置字體樣式時，斜體 加粗 小型大寫字母 沒有順序要求 可寫可不寫
- 如果不寫則使用默認值，但是要求文字大小和字體必須寫
- 字體必須是最後一個樣式，大小是倒數第二的樣式
- 實際上使用簡寫屬性也會有一個比較好的性能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
color: red;
font-size: 30px;
font-family: "微軟雅黑";
/*
* font-style可以設置字體的斜體
* - 可選值：
* normal : 默認值，文字正常顯示
* italic : 斜體
* oblique：文字會以傾斜的效果顯示
* - 大部分瀏覽器都不會對傾斜和斜體做區分
* 也就是說我們設置italic和oblique它們的效果往往是一樣的
* - 一般我們只用italic
*
*/
font-style: italic;
/*
* font-weight可以用來設置文本的加粗效果
* - 可選值：
* normal : 默認值，文字正常顯示
* bold ： 文字加粗顯示
*
* 該樣式也可以採用100-900這之間的9個值
* 但是由於用戶的計算機往往沒有這麼多級別的字體，所以很難達到我們想要的效果
* 也就是200有可能比100粗，也有可能是一樣粗
*/
font-weight: 600;
/*
* font-variant可以用來設置小型大寫字母
* - 可選值：
* normal ： 默認值 文字正常顯示
* small-caps 文本以小型大寫字母顯示
*
* 小型大寫字母：
* 將所以的字母以大寫形式顯示，但是小寫字母大寫，字體的大小上比字母的大寫小一點
*/
font-variant: small-caps;
}
.p2{
font-size: 50px;
font-family: 華文彩雲;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
.p3{
/*
* 在CSS中還爲我們提供了一個樣式叫font
* 使用該樣式可以同時設置字體相關的所有樣式
* 可以將字體的樣式的值，統一寫在font樣式中 不同值之間使用空格隔開
*
* 使用font設置字體樣式時，斜體 加粗 小型大寫字母 沒有順序要求 可寫可不寫
* 如果不寫則使用默認值，但是要求文字大小和字體必須寫
* 字體必須是最後一個樣式，大小是倒數第二的樣式
*
* 實際上使用簡寫屬性也會有一個比較好的性能
*/
font:italic small-caps bold 60 px "微軟雅黑"
}
</style>
</head>
<body>
<p class="p1">我是一個P標籤 ABCDefg123456</p>
<p class="p2">我是一個P標籤 ABCDefg123456</p>
<p class="p3">我是一個P標籤 ABCDefg123456</p>
</body>
</html>
行間距
- 在CSS中並沒有爲我們提供一個直接設置行間距的方式
我們只能通過設置行高來間接設置行間距，行高越大間距越大
使用line-height來設置行高
行高類似於單線本，一行一行的，線與線之間的距離就是行距
網頁中的文字實際上也是寫在一個看不見的線中的，而文字默認會在行間距中居中顯示
行間距 = 行高 - 字體大小 - 對於單行文本來說，可以將行高設置爲和父元素的高度一致
這樣可以使單行文本在父元素中垂直居中 - 在font中也可以指定行高
在字體大小後可以調節/行高，來指定行高，該值是可選的，若不指定則會使用默認值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 在CSS中並沒有爲我們提供一個直接設置行間距的方式
* 我們只能通過設置行高來間接設置行間距，行高越大間距越大
* 使用line-height來設置行高
* 行高類似於單線本，一行一行的，線與線之間的距離就是行距
* 網頁中的文字實際上也是寫在一個看不見的線中的，而文字默認會在行間距中居中顯示
*
* 行間距 = 行高 - 字體大小
*/
.p1{
/*
* 通過設置line-height可以間接的調整行高
* 可以接收的值：
* 1.直接接收一個大小
* 2.可以指定一個百分數，則會相對於字體去計算行高
* 3.可以直接傳一個數值，則行高會設置字體大小相應的倍數
*/
line-height: 40px;
/*line-height: 200%; */
/*line-height: 2; */
font-size: 25px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
* 對於單行文本來說，可以將行高設置爲和父元素的高度一致
* 這樣可以使單行文本在父元素中垂直居中
*/
line-height: 200px;
}
.p2{
/*
* 在font中也可以指定行高
* 在字體大小後可以調節/行高，來指定行高，該值是可選的，若不指定則會使用默認值
*
*/
font:30px/50px 微軟雅黑;
}
</style>
</head>
<body>
<p class="p1">我們是別人故事裏的殤，如那凋落的葉，隨風飄零，找不到方向。大帝路上，有我們的足跡，卻不在天堂，只是那一抹悽豔的紅，訴說着血的哀涼。馬踏星空，偉岸的身，驚豔的戰，射下神月，打破萬古神話，築一曲帝路輝煌，成爲絕唱。那是別人的榮光。彷徨，迷惘，我們在何方，掙扎，尋訪，帝路上一堆白骨註釋了我們的淒涼。</p>
<div class="box1">
<a href="#">我是一個超鏈接</a>
</div>
<p class="p2">我們是別人故事裏的殤，如那凋落的葉，隨風飄零，找不到方向。大帝路上，有我們的足跡，卻不在天堂，只是那一抹悽豔的紅，訴說着血的哀涼。馬踏星空，偉岸的身，驚豔的戰，射下神月，打破萬古神話，築一曲帝路輝煌，成爲絕唱。那是別人的榮光。彷徨，迷惘，我們在何方，掙扎，尋訪，帝路上一堆白骨註釋了我們的淒涼。</p
</body>
</html>
文本的大小寫
text-transform可以用來設置文本的大小寫
可選值：
none 默認值 按原來樣式處理
capitalize 單詞首字母大寫 通過空格來識別單詞
uppercase 所有字母都大寫
lowercase 所有字母都小寫
文本的修飾
text-decoration可以用來設置文本的修飾
可選值：
none : 不添加任何修飾 正常顯示
underline : 爲文本添加下劃線
overline : 爲文本添加上劃線
line-through:爲文本添加刪除線
注意：超鏈接默認自帶下劃線，也就是超鏈接的text-decoration的默認值是underline， 如果需要去除超鏈接的 下劃線需要將該樣式設置爲none。
字符間距
letter-spacing可以指定字符間距
文本間距
word-spacing可以設置單詞直接的間距
其實就是單純的設置單詞之間空格的大小
文本對齊
text-align:用來設置文本對齊的方式
可選值：
left 默認值 靠左對齊
right 文本靠右對齊
center 文本居中對齊
justify 兩邊對齊
通過調整文本之間空格大小，來達到一個兩端對齊的效果
首行縮進
text-indent用來設置首行縮進
當給他一個正值時，會自動向右側縮進指定的像素
當給他一個負值時，會自動向左側移動指定的距離
通過這種方法可以將一些不想顯示的文字給隱藏起來
這個一般都使用em作爲單位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
/*
* text-transform可以用來設置文本的大小寫
* 可選值：
* none 默認值 按原來樣式處理
* capitalize 單詞首字母大寫 通過空格來識別單詞
* uppercase 所有字母都大寫
* lowercase 所有字母都小寫
*/
text-transform: capitalize;
}
.p2{
/*
* text-decoration可以用來設置文本的修飾
* 可選值：
* none : 不添加任何修飾 正常顯示
* underline : 爲文本添加下劃線
* overline : 爲文本添加上劃線
* line-through:爲文本添加刪除線
*/
text-decoration: overline;
}
a{
/*
* 超鏈接默認自帶下劃線，也就是超鏈接的text-decoration的默認值是underline
* 如果需要去除超鏈接的 下劃線需要將該樣式設置爲none
*/
text-decoration: none;
}
.p3{
/*
* letter-spacing可以指定字符間距
*/
letter-spacing: 10px;
/*
* word-spacing可以設置單詞直接的間距
* 其實就是單純的設置單詞之間空格的大小
*/
word-spacing: 5px;
}
.p4{
/*
* text-align:用來設置文本對齊的方式
* 可選值：
* left 默認值 靠左對齊
* right 文本靠右對齊
* center 文本居中對齊
* justify 兩邊對齊
* -通過調整文本之間空格大小，來達到一個兩端對齊的效果
*/
text-align: center;
}
.p5{
/*
* text-indent用來設置首行縮進
* 當給他一個正值時，會自動向右側縮進指定的像素
* 當給他一個負值時，會自動向左側移動指定的距離
* 通過這種方法可以將一些不想顯示的文字給隱藏起來
* 這個一般都使用em作爲單位
*/
text-indent: 2em;
}
</style>
</head>
<body>
<p class="p1">don't understand the God who'd let us meet if we could never be together.When they ask me what I liked the best,I'll tell them "It was you".I would rather have had one breath of her hair,one kiss of her mouth,one touch of her hand than an eternity without it.I have a feeling there's something bigger out there.Bigger than we and bigger than you.I wait all day just hoping for one more minute with you.</p>
<p class="p2">我是一個p標籤</p>
<a href="#">我是超鏈接</a>
<p class="p3">don't understand the God who'd let us meet if we could never be together.When they ask me what I liked the best,I'll tell them "It was you".I would rather have had one breath of her hair,one kiss of her mouth,one touch of her hand than an eternity without it.I have a feeling there's something bigger out there.Bigger than we and bigger than you.I wait all day just hoping for one more minute with you.</p>
<p class="p4">don't understand the God who'd let us meet if we could never be together.When they ask me what I liked the best,I'll tell them "It was you".I would rather have had one breath of her hair,one kiss of her mouth,one touch of her hand than an eternity without it.I have a feeling there's something bigger out there.Bigger than we and bigger than you.I wait all day just hoping for one more minute with you.</p>
<p class="p5">我們是別人故事裏的殤，如那凋落的葉，隨風飄零，找不到方向。大帝路上，有我們的足跡，卻不在天堂，只是那一抹悽豔的紅，訴說着血的哀涼。馬踏星空，偉岸的身，驚豔的戰，射下神月，打破萬古神話，築一曲帝路輝煌，成爲絕唱。那是別人的榮光。彷徨，迷惘，我們在何方，掙扎，尋訪，帝路上一堆白骨註釋了我們的淒涼。</p>
</body>
</html>
盒子模型
內容區（content）
使用width設置盒子內容區的寬度
使用height設置盒子內容區的高度
邊框（border）
要爲一個元素設置邊框必須指定三個樣式(缺一不可)
border-width：邊框的寬度
border-color：邊框的顏色
border-style：邊框的類型
none 默認值 沒有邊框
solid 實線
dotted 點狀邊框
dashed 虛線
double 雙線
注意：可以分別指定四個邊框的寬度、顏色、類型
- 如果是四個值：上右下左，順時針的順序
- 如果指定三個值：上 左右 下
- 如果指定兩個值：上下 左右
- 如果一個值：四條邊都是這個值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
/*
* 使用width設置盒子內容區的寬度
* 使用height設置盒子內容區的高度
*
* width和height只是設置盒子內容區的大小。而不是盒子的整個大小
* 盒子可見框的大小由內容區，內邊距和邊框共同決定
*/
width: 100px;
height: 100px;
/*
* 設置背景顏色
*/
background-color: yellow;
/*
* 爲元素設置邊框
* 要爲一個元素設置邊框必須指定三個樣式(缺一不可)
* border-width：邊框的寬度
* 可以分別指定四個邊框的寬度 ，上右下左，順時針的順序
* 如果指定三個值，上 左右 下
* 如果指定兩個值 上下 左右
* 如果一個值 四條邊都是這個值
* border-color: 邊框的顏色
* border-style: 邊框的樣式
*
* 除了border-width，CSS還提供了border-xxx-width
* xxx分別表示top right bottom left
* 專門設定指定的寬度
*/
border-width:10px 20px 30px 40px;
border-left-width: 40px;
border-color:red greenyellow orange deepskyblue;
/*
* 設置邊框的樣式
* 可選值
* none 默認值 沒有邊框
* solid 實線
* dotted 點狀邊框
* dashed 虛線
* double 雙線
*/
border-style:solid dotted dashed double;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
邊框的簡寫樣式
- border
- 邊框的簡寫樣式，通過他可以同時設置四個便看到樣式，寬度，顏色， 而且沒有任何順序要求。
- 一旦指定就是同時指定四個邊同時指定
- border-top、border-right、border-bottom、border-left
可以單獨設置四個邊的樣式 規則和border一樣 只不過它只不過對一個邊生效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: yellow;
/*設置邊框*/
/*
* 大部分的瀏覽器中，邊框的寬度和顏色都是有默認值，而邊框的樣式默認值都是none
*/
border-width: 10px;
border-color: red;
border-style: solid;
/*
* border
* 邊框的簡寫樣式，通過他可以同時設置四個便看到樣式，寬度，顏色
* 而且沒有任何順序要求
* 一旦指定就是同時指定四個邊同時指定
*
* border-top border-right border-bottom border-left
* 可以單獨設置四個邊的樣式 規則和border一樣 只不過它只不過對一個邊生效
*/
border:red solid 20px;
border-top: blue solid 10px;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
內邊距（padding）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width:200px;
height: 200px;
background-color:#bfa;
border:red 10px solid;
/*
* 內邊距（padding），指的是盒子的內容區與盒子的邊之間的距離
* 一共有四個方向的內邊距，可以通過：
* padding-top
* padding-right
* padding-bottom
* padding-left
* 來設置四個方向的內邊距
*
* 內邊距會影響盒子的可見框的大小，元素的背景會延伸到內邊距
* 盒子的大小由內容區、內邊距和邊框共同決定
* 盒子可見框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width
* 可見框的高度 = border-bottom-width + padding-bottom + height + padding-top + border-top-width
*/
/*設置上邊距*/
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
/*
* 使用padding可以同時設置四個邊框的樣式，規則和border-width一致
*/
padding:100px 200px 300px 400px
}
.box2{
width: 100%;
height: 100%;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
外邊距（margin）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #00BFFF;
border: 10px red solid;
/*
* 外邊距指的是盒子與其他盒子之間的距離
* 他不會影響可見框的大小，而是影響盒子的位置
* 盒子有四個方向的外邊距
* margin-top
* margin-right
* margin-bottom
* matgin-left
*
* 由於頁面中的元素都是靠左擺放的
* 所以當我們設置上外邊距和左外邊距，會導致盒子自身的位置發生改變
* 而如果設置下邊距和右外邊距，會導致其他元素位置移動
*/
/*
* 設置box1外邊距
*/
margin-top: 100px;
margin-left: 100px;
margin-bottom: 50px;
margin-right: 50px;
/*
* margin還可以設置爲auto，auto一般只設置給水平方向的margin
* 如果只指定，左外邊距或右外邊距的margin爲auto則會將外邊距設置爲最大值
* 垂直方向外邊距如果設置auto，則外邊距默認就是0
*
* 如果將left和right同時設置爲auto，則會將兩側的外邊距設置爲相同的值
* 以示子元素在父元素中居住
*/
margin-left: auto;
margin-right: auto;
/*
* 外邊距同樣可以使用屬性margin，可以同時設置四個方向
*/
margin:10px auto 30px auto
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 外邊距也可以指定爲負值
* 如果外邊距設置的是負值，則元素反方向移動
*/
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>