CSS簡(jiǎn)介
- 層疊樣式表（Cascading Style Sheets）
- css可以用來為網(wǎng)頁創(chuàng)建樣式表，通過樣式表可以對(duì)網(wǎng)頁進(jìn)行裝飾。
- 所謂層疊，可以將整個(gè)網(wǎng)頁想象成一層一層的結(jié)構(gòu)，層次高的將會(huì)覆蓋層次低的。
- css就可以分別為網(wǎng)頁的各個(gè)層次設(shè)置樣式。
CSS樣式
內(nèi)聯(lián)樣式
- 可以將CSS樣式編寫到元素的style屬性當(dāng)中
- 將樣式直接編寫到style屬性中，這種樣式我們稱之為內(nèi)聯(lián)樣式
- 內(nèi)聯(lián)樣式只對(duì)當(dāng)前的元素的內(nèi)容起作用，內(nèi)聯(lián)樣式不方便復(fù)用，不推薦使用。
- 內(nèi)聯(lián)樣式屬于結(jié)構(gòu)與表現(xiàn)耦合，不方便后期的維護(hù)，不推薦使用。
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>CSS</title>
</head>
<body>
<!--
內(nèi)聯(lián)樣式：
可以將CSS樣式編寫到元素的style屬性當(dāng)中
將樣式直接編寫到style屬性中，這種樣式我們稱之為內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式只對(duì)當(dāng)前的元素的內(nèi)容起作用，內(nèi)聯(lián)樣式不方便復(fù)用，不推薦使用。
內(nèi)聯(lián)樣式屬于結(jié)構(gòu)與表現(xiàn)耦合，不方便后期的維護(hù)，不推薦使用。
-->
<p style="color:red;font-size:20px;">劍氣縱橫三萬里，一劍光寒十九州</p>
</body>
</html>
內(nèi)部樣式
- 可以將CSS樣式編寫到head中的style標(biāo)簽里
- 將樣式表編寫的style標(biāo)簽中，然后通過css選擇器選中指定元素
- 然后可以同時(shí)為這些元素一起設(shè)置樣式，這樣可以進(jìn)一步的復(fù)用
- 將樣式表編寫在style標(biāo)簽中，也可以使表現(xiàn)和結(jié)構(gòu)進(jìn)一步分離它也是我們推薦的使用方式
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>CSS</title>
<!--
內(nèi)部樣式：
可以將CSS樣式編寫到head中的style標(biāo)簽里
將樣式表編寫的style標(biāo)簽中，然后通過css選擇器選中指定元素
然后可以同時(shí)為這些元素一起設(shè)置樣式，這樣可以進(jìn)一步的復(fù)用
將樣式表編寫在style標(biāo)簽中，也可以使表現(xiàn)和結(jié)構(gòu)進(jìn)一步分離它也是我們推薦的使用方式
-->
<style type="text/css">
p{
color:red;
font-size:20px;
}
</style>
</head>
<body>
<p>劍氣縱橫三萬里，一劍光寒十九州</p>
</body>
</html>
外部樣式
- 還可以將樣式表編寫到外部的css文件中，然后通過link標(biāo)簽來將外部的css文件引入到當(dāng)前頁面中
- 這樣外部文件中的css樣式表將會(huì)應(yīng)用到當(dāng)前頁面中
- 將css樣式統(tǒng)一編寫到外部的樣式表中，完全使結(jié)構(gòu)和表現(xiàn)分離，可以使樣式表在不同的頁面中使用
- 最大限度的使樣式可以進(jìn)行復(fù)用，將樣式統(tǒng)一寫在樣式表中，然后通過link標(biāo)簽引入，可以利用瀏覽器緩存加快用戶訪問的速度提高了用戶體驗(yàn)
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標(biāo)簽來將外部的css文件引入到當(dāng)前頁面中
這樣外部文件中的css樣式表將會(huì)應(yīng)用到當(dāng)前頁面中
將css樣式統(tǒng)一編寫到外部的樣式表中，完全使結(jié)構(gòu)和表現(xiàn)分離，可以使樣式表在不同的頁面中使用
最大限度的使樣式可以進(jìn)行復(fù)用，將樣式統(tǒng)一寫在樣式表中，然后通過link標(biāo)簽引入，可以利用瀏覽器緩存加快用戶訪問的速度提高了用戶體驗(yàn)
-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>劍氣縱橫三萬里，一劍光寒十九州</p>
</body>
</html>
CSS基本語法
注釋
css的注釋，作用和HTML注釋類似，只不過它必須編寫在style標(biāo)簽中，或者是css文件中
/* css的注釋，作用和HTML注釋類似，只不過它必須編寫在style標(biāo)簽中，或者是css文件中*/
語法
選擇器/聲明塊
選擇器/聲明塊
選擇器
通過選擇器可以選中頁面中指定的元素，并且將聲明塊的樣式應(yīng)用到選擇器對(duì)應(yīng)的元素上
聲明塊
- 聲明塊緊跟在選擇器的后邊，使用一對(duì) {} 括起來
- 聲明塊中實(shí)際就是一組一組的名值對(duì)結(jié)構(gòu)
- 這一組一組的名值對(duì)我們稱之為聲明
- 在一個(gè)聲明塊中科院寫多個(gè)聲明，多個(gè)聲明直接使用 ; 隔開
- 聲明的樣式名和樣式之間使用 : 來連接
常用選擇器
元素選擇器
- 作用：通過元素選擇器可以選擇頁面中的指定元素
- 語法：標(biāo)簽名{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用選擇器</title>
<style type="text/css">
/*為頁面中的所有p元素，設(shè)置一個(gè)字體為紅色*/
/*
* 元素選擇器
* - 作用：通過元素選擇器可以選擇頁面中的指定元素
* - 語法：
* 標(biāo)簽名{}
*/
p{
color: red;
}
h1{
color: red;
}
</style>
</head>
<body>
<h1>憫農(nóng)</h1>
<p>鋤禾日當(dāng)午</p>
<p>鋤禾日當(dāng)午</p>
</body>
</html>
id選擇器
- 作用：通過元素的id屬性值選中唯一的一個(gè)元素
- 語法：#id屬性值{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用選擇器</title>
<style type="text/css">
/*
* id選擇器
* - 通過元素的id屬性值選中唯一的一個(gè)元素
* - 語法：
* #id屬性值{}
*/
#p1{
font-size: 25px;
}
</head>
<body>
<h1>憫農(nóng)</h1>
<p>鋤禾日當(dāng)午</p>
<p>鋤禾日當(dāng)午</p>
<p id="p1">鋤禾日當(dāng)午</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>憫農(nóng)</h1>
<p>鋤禾日當(dāng)午</p>
<p>鋤禾日當(dāng)午</p>
<!--
我們可以為元素設(shè)置class屬性，class屬性和id屬性類似，只不過class屬性可以重復(fù)
擁有相同class屬性值的元素，我們說他們是一組元素
可以同時(shí)為一個(gè)元素設(shè)置多個(gè)class屬性值，多個(gè)值之間用空格隔開
-->
<p class="p2 hello">鋤禾日當(dāng)午</p>
<p class="p2">鋤禾日當(dāng)午</p>
<p class="p2">鋤禾日當(dāng)午</p>
</body>
</html>
選擇器分組
- 作用：通過選擇器分組可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素
- 語法：選擇器1,選擇器2,選擇器N{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用選擇器</title>
<style type="text/css">
/*
* 當(dāng)id為p1的元素，class為p2的元素，還有h1，同時(shí)設(shè)置背景顏色為黃色
*/
/*
* 選擇器分組
* - 通過選擇器分組可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素
* - 語法：
* 選擇器1,選擇器2,選擇器N{}
*/
#p1,.p2,h1{
background-color: yellow;
}
</style>
</head>
<body>
<h1>憫農(nóng)</h1>
<p>鋤禾日當(dāng)午</p>
<p>鋤禾日當(dāng)午</p>
<p id="p1">鋤禾日當(dāng)午</p>
<p class="p2 hello">鋤禾日當(dāng)午</p>
<p class="p2">鋤禾日當(dāng)午</p>
<p class="p2">鋤禾日當(dāng)午</p>
<p>鋤禾日當(dāng)午</p>
<p>鋤禾日當(dāng)午</p>
<p class="p3">鋤禾日當(dāng)午</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>憫農(nóng)</h1>
<p>鋤禾日當(dāng)午</p>
<p>鋤禾日當(dāng)午</p>
<p id="p1">鋤禾日當(dāng)午</p>
<p class="p2 hello">鋤禾日當(dāng)午</p>
<p class="p2">鋤禾日當(dāng)午</p>
<p class="p2">鋤禾日當(dāng)午</p>
<p>鋤禾日當(dāng)午</p>
<p>鋤禾日當(dāng)午</p>
<p class="p3">鋤禾日當(dāng)午</p>
<span class="p3">汗滴禾下土</span>
</body>
</html>
復(fù)合選擇器
- 作用：可以選擇同時(shí)滿足多個(gè)選擇器的元素
- 語法：選擇器1選擇器2選擇器N{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用選擇器</title>
<style type="text/css">
/*
* 為擁有class p3 span元素設(shè)置一個(gè)背景顏色為黃色
*/
/*
* 復(fù)合選擇器（交集選擇器）
* - 作用：
* - 可以選擇同時(shí)滿足多個(gè)選擇器的元素
* - 語法：
* - 選擇器1選擇器2選擇器N{}
*/
span.p3{
background-color: yellow;
}
/*
* 對(duì)于id選擇器來說，不建議使用復(fù)合選擇器
*/
p#p1{
background-color: red;
}
</style>
</head>
<body>
<h1>憫農(nóng)</h1>
<p>鋤禾日當(dāng)午</p>
<p>鋤禾日當(dāng)午</p>
<p id="p1">鋤禾日當(dāng)午</p>
<p class="p2 hello">鋤禾日當(dāng)午</p>
<p class="p2">鋤禾日當(dāng)午</p>
<p class="p2">鋤禾日當(dāng)午</p>
<p>鋤禾日當(dāng)午</p>
<p>鋤禾日當(dāng)午</p>
<p class="p3">鋤禾日當(dāng)午</p>
<span class="p3">汗滴禾下土</span>
</body>
</html>
后代元素選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 為div d1中的span設(shè)置一個(gè)顏色為綠色
* 后代元素選擇器
* - 作用：
* - 選中指定元素的指定后代元素
* - 語法：
* - 祖先元素 后代元素{}
*/
#d1 span{
color: green;
}
/*
* 選中id為d1的div中的p元素中的span元素
*/
#d1 p span{
font-size: 25px;
}
/*
* 選中div子元素span設(shè)置一個(gè)背景顏色為黃色
* 子元素選擇器：
* - 作用：
* - 選中指定父元素的指定子元素
* - 語法：
* 父元素 > 子元素
* IE6 及以下不支持子元素選擇器
*/
div > span{
background-color: yellow;
}
</style>
</head>
<body>
<!--
元素之間的關(guān)系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或間接包含后代的元素，父元素也是祖先元素
后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
-->
<div id="d1">
<span>我是div標(biāo)簽中的span</span>
<p>
<span>我是P標(biāo)簽中的span</span>
</p>
</div>
<div>
<span>我是body標(biāo)簽中的span</span>
</div>
</body>
</html>
偽類選擇器
有四個(gè)偽類可以讓你根據(jù)訪問者與該鏈接的交互方式，將鏈接設(shè)置成4種不同的狀態(tài)。
- 正常鏈接：
a:link
- 訪問過的鏈接：
a:visited(只能定義字體顏色)
- 鼠標(biāo)滑過的鏈接：
a:hover
- 正在點(diǎn)擊的鏈接：
a:active
- 獲取焦點(diǎn)：
:focus
- 指定元素前：
:before
- 指定元素后：
:after
- 選中指定元素：
::selection
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 偽類專門用來表示元素的一種特殊狀態(tài)
* 比如：訪問過的超鏈接、普通的超鏈接、獲取焦點(diǎn)的文本框
* 當(dāng)我們需要為處在這些特殊情況的元素設(shè)置樣式時(shí)，就可以使用偽類
*/
/*
* 為沒訪問過的鏈接設(shè)置顏色為綠色
* :link
* - 表示普通鏈接（沒訪問過的鏈接）
*/
a:link{
color: yellowgreen;
}
/*
* 為訪問過的鏈接設(shè)置顏色為紅色
* ：visited
* - 表示訪問過的鏈接
*
* 瀏覽器是通過歷史記錄來判斷一個(gè)鏈接是否訪問過
* 由于涉及到了用戶隱私問題，所以使用visited偽類只能設(shè)置字體的顏色。
*/
a:visited{
color: red;
}
/*
* :hover 表示鼠標(biāo)移入的狀態(tài)
*/
a:hover{
color:deepskyblue;
}
/*
* :active表示的是超鏈接被點(diǎn)擊的狀態(tài)
*/
a:active{
color:black;
}
/*
* :hover和:active也可以為其他元素設(shè)置
* IE6不支持超鏈接以外的元素設(shè)置:hover和:active
*/
p:hover{
background-color: yellow;
}
p:active{
background-color: orange;
}
/*
* 文本框獲取焦點(diǎn)以后，修改背景顏色為黃色
*/
input:focus{
background-color: red;
}
/*
* 為p標(biāo)簽中選中的內(nèi)容使用樣式
* 可以使用 ::selection偽類
* 注意，這個(gè)偽類在火狐中需要采用另一種方式編寫
*/
/*兼容大多數(shù)瀏覽器*/
P::selection{
background-color: dodgerblue;
}
/*兼容火狐瀏覽器的*/
P::-moz-selection{
background-color: dodgerblue;
}
</style>
</head>
<body>
<a class="abc" >這是一個(gè)訪問過的鏈接</a>
<br />
<br />
<a class="bcd" href="http:///www.baidu.com">這是一個(gè)沒訪問過的鏈接</a>
<p>我是一個(gè)段落</p>
<!--使用input可以創(chuàng)建一個(gè)文本輸入框-->
<input type="text" />
</body>
</html>
偽元素選擇器
- 首字母
:first-letter
- 首行
:first-line
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 使用偽元素來表示元素中一些特殊的位置
*/
/*
* 為p的第一個(gè)字符來設(shè)置一個(gè)特殊的樣式
*/
p:first-letter{
color: red;
font-size: 25px;
}
/*
* 為p中第一行來設(shè)置一個(gè)特殊樣式
*/
p:first-line{
background-color: yellow;
}
/*
* :before表示元素最前邊的部分
* 一般before都需要結(jié)合content這個(gè)樣式一起使用
* 通過content可以向before或after的位置添加一些內(nèi)容
*/
p:before{
content:"我會(huì)出現(xiàn)在整個(gè)段落最前面";
color:red;
}
/*
* :after表示段落最后面
*/
p:after{
content:"我會(huì)出現(xiàn)在整個(gè)段落最后面";
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元素，設(shè)置一個(gè)背景顏色為黃色
* 屬性選擇器
* - 作用：可以根據(jù)元素中的屬性或?qū)傩缘闹祦磉x取指定元素
* - 語法：
* [屬性名] 選取含有指定屬性的元素
* [屬性名="屬性值"] 選取含有指定屬性值的元素
* [屬性名^="屬性值"] 選取屬性值以指定內(nèi)容開頭的元素
* [屬性名$="屬性值"] 選取屬性值以指定內(nèi)容結(jié)尾的元素
* [屬性名*="屬性值"] 選取屬性值包含指定內(nèi)容的元素
*/
p[title]{
background-color: yellow;
}
/*
* 為title屬性值是hello的元素設(shè)置背景顏色為綠色
*/
p[title="hello"]{
background-color: green;
}
/*
* 為title屬性值以ab開頭的元素設(shè)置一個(gè)背景顏色為藍(lán)色
*/
p[title^="ab"]{
background-color: deepskyblue;
}
/*
* 為title屬性值以e結(jié)尾的元素設(shè)置一個(gè)背景顏色
*/
p[title$="e"]{
background-color: orange;
}
/*
* 為title屬性值包含e的元素設(shè)置一個(gè)背景顏色
*/
p[title*="e"]{
background-color: gray;
}
</style>
</head>
<body>
<!--
title屬性，這個(gè)屬性可以給任何標(biāo)簽指定
當(dāng)鼠標(biāo)移入到元素上時(shí)，元素中title屬性將會(huì)作為提示文字顯示
-->
<p title="hello">我是一個(gè)段落</p>
<p>我是一個(gè)段落</p>
<p title="abc">我是一個(gè)段落</p>
<p title="abdd">我是一個(gè)段落</p>
<p>我是一個(gè)段落</p>
<p title="cde">我是一個(gè)段落</p>
<p>我是一個(gè)段落</p>
<p title="我是title中的文字">我是一個(gè)段落</p>
</body>
</html>
子元素選擇器
- :first-child ：選擇第一個(gè)子標(biāo)簽
- :last-child：選擇最后一個(gè)子標(biāo)簽
- :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">
/*
* 為第一個(gè)p標(biāo)簽設(shè)置一個(gè)背景顏色為黃色
* :first-child 可以選中父元素的第一個(gè)子元素（不考慮父元素是誰）
* :last-child 可以選中最后一個(gè)子元素
* :nth-child() 可以選中任意位置的子元素
* 該選擇器后邊可以指定一個(gè)參數(shù)，指定要選中的第幾個(gè)子元素
* even表示偶數(shù)位置的子元素
* odd表示奇數(shù)位置的子元素
*/
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,是在當(dāng)前類型的子元素中排列
*/
p:first-of-type{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<div>
<p>我是DIV中的p標(biāo)簽</p>
</div>
<div>
<p>我是DIV中的p標(biāo)簽</p>
</div>
</body>
</html>
兄弟元素選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 為span后的一個(gè)p元素設(shè)置一個(gè)背景顏色為黃色
* 后一個(gè)兄弟元素選擇器
* 作用：可以選中一個(gè)元素緊挨著的指定的兄弟元素
* 語法：前一個(gè) + 后一個(gè)
*/
p + span{
background-color: deepskyblue;
}
/*
* 選中后邊的所有兄弟元素
* 語法：前一個(gè) ~ 后邊所有
*/
span ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一個(gè)P標(biāo)簽</p>
<p>我是一個(gè)P標(biāo)簽</p>
<p>我是一個(gè)P標(biāo)簽</p>
<span>我是一個(gè)span</span>
<p>我是一個(gè)P標(biāo)簽</p>
<p>我是一個(gè)P標(biāo)簽</p>
<p>我是一個(gè)P標(biāo)簽</p>
<p>我是一個(gè)P標(biāo)簽</p>
</body>
</html>
否定偽類選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 為所有的p元素設(shè)置一個(gè)背景顏色為黃色,除了class值為hello的
*
* 否定偽類
* 作用：可以從已選中的元素中剔除出其他元素
* 語法：
* :not(選擇器){}
*/
p:not(.hello){
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一個(gè)P標(biāo)簽</p>
<p>我是一個(gè)P標(biāo)簽</p>
<p>我是一個(gè)P標(biāo)簽</p>
<p>我是一個(gè)P標(biāo)簽</p>
<p class="hello">我是一個(gè)P標(biāo)簽</p>
<p>我是一個(gè)P標(biāo)簽</p>
<p>我是一個(gè)P標(biāo)簽</p>
<p>我是一個(gè)P標(biāo)簽</p>
</body>
</html>
a的偽類
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 設(shè)計(jì)到a標(biāo)簽的偽類一共有四個(gè)：
* :link
* :visited
* :hover
* :active
* 而這四個(gè)選擇器的優(yōu)先級(jí)是一樣的
* 為了各個(gè)樣式間互不干擾需要按 上述順序編寫
*/
a:link{
color: yellowgreen;
}
a:visited{
color: deepskyblue;
}
a:hover{
color: orange;
}
a:active{
color: gray;
}
</style>
</head>
<body>
<a >訪問過的鏈接</a>
<br /><br />
<a >沒訪問過的鏈接</a>
</body>
</html>
樣式的繼承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
font-size: 25px;
}
</style>
</head>
<body>
<!--
像兒子可以繼承父親的遺產(chǎn)一樣，在CSS中，祖先元素上的樣式，也會(huì)被他的后代元素所繼承
利用繼承，可以將一些基本的樣式設(shè)置給祖先元素，這樣所以的后代元素將自動(dòng)繼承這些樣式
但是并不是所以樣式都會(huì)被子元素所繼承，比如：背景相關(guān)的樣式、邊框相關(guān)的樣式、定位相關(guān)的樣式
-->
<p style="font-size: 25px;">
我是p標(biāo)簽中的文字
<span>
我是p元素中的span
</span>
</p>
<span>
我是p元素外的span
</span>
</body>
</html>
可以點(diǎn)擊 CSS background-color 屬性 查看都有什么實(shí)體
注意：css默認(rèn)背景是透明的所以會(huì)感覺繼承了背景顏色，實(shí)際上并未繼承
選擇器優(yōu)先級(jí)
<!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;
}
/*
* 使用不同的選擇器選擇同一個(gè)元素并且設(shè)置相同的樣式時(shí)
* 這時(shí)樣式之間產(chǎn)生了沖突
* 優(yōu)先級(jí)高的優(yōu)先顯示
*
* 優(yōu)先級(jí)的規(guī)則
* 內(nèi)聯(lián)樣式：優(yōu)先級(jí)1000
* id選擇器：優(yōu)先級(jí)100
* 類和偽類：優(yōu)先級(jí)10
* 元素選擇器：優(yōu)先級(jí)1
* 統(tǒng)配* ：優(yōu)先級(jí)0
* 繼承的樣式：沒有優(yōu)先級(jí)
*
* 當(dāng)選擇器中包含多種選擇器時(shí)，需要將多個(gè)選擇器的優(yōu)先級(jí)相加后再比較
* 但是注意，選擇器的優(yōu)先級(jí)計(jì)算不會(huì)超過他的最大的數(shù)量級(jí)
* 如果優(yōu)先級(jí)一樣，則使用靠后的樣式
*
* 并集選擇器的優(yōu)先級(jí)是單獨(dú)計(jì)算的
* 可在樣式的最后，添加一個(gè)!important，這個(gè)樣式將會(huì)獲得一個(gè)最高的優(yōu)先級(jí)，
* 將會(huì)優(yōu)先于所有樣式顯示，甚至超過內(nèi)聯(lián)樣式。但是在開發(fā)中盡量避免使用!important
*/
*{
font-stretch: 50px;
}
p{
font-size: 25px;
}
</style>
</head>
<body>
<p class="p1 p3" id="p2" style="background-color: deepskyblue;">
我是一個(gè)段落
<span>我是p標(biāo)簽中的span</span>
</p>
</body>
</html>
大小單位
- 像素 px
- 像素是我們?cè)诰W(wǎng)頁找那個(gè)使用最多的一個(gè)單位
- 一個(gè)像素就相當(dāng)于屏幕上的一個(gè)小店
- 我們的屏幕實(shí)際上就是由這些像素點(diǎn)構(gòu)成的
- 但是這些像素點(diǎn)是不能直接看見的
- 不同的顯示器一個(gè)像素的大小也不相同
- 顯示效果越好越清晰，像素就越小，反之像素就越大
- 百分比 %
- 也可以將單位設(shè)置為一個(gè)百分比的形式
- 這樣瀏覽器將會(huì)根據(jù)父元素的樣式計(jì)算該值
- 使用百分比的好處是，當(dāng)父元素的屬性值發(fā)生變化時(shí)
- 子元素也會(huì)按照比例發(fā)生改變
- 在我們創(chuàng)建一共自適應(yīng)的頁面時(shí)，經(jīng)常使用百分比做單位
- em:
- em和我們的百分比類似，它是相對(duì)于當(dāng)前元素的字體大小來計(jì)算的
- 1em = 1font-size
- 使用em時(shí)，當(dāng)字體大小發(fā)生改變時(shí)，em也會(huì)隨之改變
- 當(dāng)設(shè)置字體相關(guān)樣式時(shí)，經(jīng)常會(huì)使用em
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 長(zhǎng)度單位
* 像素 px
* - 像素是我們?cè)诰W(wǎng)頁找那個(gè)使用最多的一個(gè)單位
* 一個(gè)像素就相當(dāng)于屏幕上的一個(gè)小店
* 我們的屏幕實(shí)際上就是由這些像素點(diǎn)構(gòu)成的
* 但是這些像素點(diǎn)是不能直接看見的
* - 不同的顯示器一個(gè)像素的大小也不相同
* 顯示效果越好越清晰，像素就越小，反之像素就越大
* 百分比 %
* - 也可以將單位設(shè)置為一個(gè)百分比的形式
* 這樣瀏覽器將會(huì)根據(jù)父元素的樣式計(jì)算該值
* - 使用百分比的好處是，當(dāng)父元素的屬性值發(fā)生變化時(shí)
* 子元素也會(huì)按照比例發(fā)生改變
* - 在我們創(chuàng)建一共自適應(yīng)的頁面時(shí)，經(jīng)常使用百分比做單位
* em:
* - em和我們的百分比類似，它是相對(duì)于當(dāng)前元素的字體大小來計(jì)算的
* - 1em = 1font-size
* - 使用em時(shí)，當(dāng)字體大小發(fā)生改變時(shí)，em也會(huì)隨之改變
* - 當(dāng)設(shè)置字體相關(guān)樣式時(shí)，經(jīng)常會(huì)使用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
藍(lán)色：blue
綠色：green - 可以使用RGB值來表示不同的顏色
所謂RGB值指的是通過Red Green Blue三元色
通過這三種顏色不同的濃度，來表示不同的顏色
例子：rgb(紅色的濃度，綠色的濃度，藍(lán)色的濃度);
顏色的濃度需要一個(gè)0-255之間的值，255表示最大，0表示沒有- 濃度也可以采用一個(gè)百分?jǐn)?shù)來設(shè)置，需要一個(gè)0%-100%之間的數(shù)字
- 使用百分?jǐn)?shù)最后也是轉(zhuǎn)換為0-255之間的值
- 也可以使用十六進(jìn)制的rgb值來表示顏色，原理和上邊的RGB值一樣
只不過使用十六進(jìn)制數(shù)來表示，使用三組兩位的數(shù)組來表示一個(gè)顏色
每組表示一個(gè)顏色,第一組紅色，第二組綠色，第三組藍(lán)色
語法：#紅色綠色藍(lán)色
十六進(jìn)制：
0 1 2 3 4 5 6 7 8 9 a b c d e f
00 - ff- 00表示最小，相當(dāng)于rgb中的0
- ff表示最大，相當(dāng)于rgb中的255
例如：紅色：#ff0000
像這種兩位兩位重復(fù)的顏色，可以重寫
比如：#ff0000可以寫成#f00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
/*
* 顏色單位：
* 在CSS可以直接使用顏色單詞來表示不同的顏色
* 紅色：red
* 藍(lán)色：blue
* 綠色：green
* 可以使用RGB值來表示不同的顏色
* -所謂RGB值指的是通過Red Green Blue三元色
* 通過這三種顏色不同的濃度，來表示不同的顏色
* -例子：rgb(紅色的濃度，綠色的濃度，藍(lán)色的濃度);
* - 顏色的濃度需要一個(gè)0-255之間的值，255表示最大，0表示沒有
* - 濃度也可以采用一個(gè)百分?jǐn)?shù)來設(shè)置，需要一個(gè)0%-100%之間的數(shù)字
* 使用百分?jǐn)?shù)最后也是轉(zhuǎn)換為0-255之間的值
* 也可以使用十六進(jìn)制的rgb值來表示顏色，原理和上邊的RGB值一樣
* 只不過使用十六進(jìn)制數(shù)來表示，使用三組兩位的數(shù)組來表示一個(gè)顏色
* 每組表示一個(gè)顏色,第一組紅色，第二組綠色，第三組藍(lán)色
* 語法：#紅色綠色藍(lán)色
* 十六進(jìn)制：
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示最小，相當(dāng)于rgb中的0
* ff表示最大，相當(dāng)于rgb中的255
* 紅色：
* #ff0000
* 像這種兩位兩位重復(fù)的顏色，可以重寫
* 比如：#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 來設(shè)置文字的顏色
字體大小
font-size 設(shè)置的并不是文字本上的 大小
在頁面中，每個(gè)文字都是處于一個(gè)看不見的框中
我們?cè)O(shè)置的font-size實(shí)際上是設(shè)置的格的高度，并不是字體的大小
一般情況下文字都比這個(gè)格要小一些，也有時(shí)會(huì)比格大
根據(jù)字體的不同，顯示效果也不同
字體
通過 font-family 來指定文字的字體
當(dāng)采用某種字體，如果瀏覽器支持則使用該字體，如果字體不支持，則使用默認(rèn)字體
該樣式可以同時(shí)指定多個(gè)字體，多個(gè)字體之間使用,分開。
如果采用多個(gè)字體時(shí)，瀏覽器會(huì)優(yōu)先使用前邊的字體，如果前邊的不支持則采用下一個(gè)
瀏覽器使用的字體默認(rèn)就是計(jì)算機(jī)中的字體。如果計(jì)算機(jī)中有，則使用，沒有則不使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
/*設(shè)置字體顏色，使用color來設(shè)置文字的顏色*/
color: red;
/*設(shè)置文字的大小，瀏覽器一般默認(rèn)文字的大小都是16px*/
/*
* font-size設(shè)置的并不是文字本上的 大小
* 在頁面中，每個(gè)文字都是處于一個(gè)看不見的框中
* 我們?cè)O(shè)置的font-size實(shí)際上是設(shè)置的格的高度，并不是字體的大小
* 一般情況下文字都比這個(gè)格要小一些，也有時(shí)會(huì)比格大
* 根據(jù)字體的不同，顯示效果也不同
*/
font-size: 30px;
/*字體*/
/*
* 通過font-family來指定文字的字體
* 當(dāng)采用某種字體，如果瀏覽器支持則使用該字體
* 如果字體不支持，則使用默認(rèn)字體
* 該樣式可以同時(shí)指定多個(gè)字體，多個(gè)字體之間使用,分開，
* 如果采用多個(gè)字體時(shí)，瀏覽器會(huì)優(yōu)先使用前邊的字體，如果前邊的不支持則采用下一個(gè)
*
*/
/*
* 瀏覽器使用的字體默認(rèn)就是計(jì)算機(jī)中的字體
* 如果計(jì)算機(jī)中有，則使用，沒有則不使用
*/
font-family: arial, "微軟雅黑";
</style>
</head>
<body>
<p class="p1">
我是一個(gè)p標(biāo)簽 ABC123abc
</p>
</body>
</html>
字體分類
- serif（襯線字體）
- sans-serif（非襯線字體）
- monospace（等寬字體）
- cursive（草書字體）
- fantasy（虛幻字體）
可以將字體設(shè)置為這些大的分類。
當(dāng)設(shè)置為大的分類后，瀏覽器會(huì)自動(dòng)選擇指定的字體并應(yīng)用樣式。
一般會(huì)使字體大類指定為font-family里最后一個(gè)字體。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
在網(wǎng)頁中將字體分為5大類
* serif（襯線字體）
* sans-serif（非襯線字體）
* monospace（等寬字體）
* cursive（草書字體）
* fantasy（虛幻字體）
可以將字體設(shè)置為這些大的分類
當(dāng)設(shè)置為大的分類后，瀏覽器會(huì)自動(dòng)選擇指定的字體并應(yīng)用樣式
一般會(huì)使字體大類指定為font-family里最后一個(gè)字體
-->
<p style="font-size: 50px; font-family: serif;">襯線字體：我是一個(gè)P標(biāo)簽 ABCDEFG123456</p>
<p style="font-size: 50px; font-family: sans-serif;">非襯線字體：我是一個(gè)P標(biāo)簽 ABCDEFG123456</p>
<p style="font-size: 50px; font-family: monospace;">等寬字體：我是一個(gè)P標(biāo)簽 ABCDEFG123456</p>
<p style="font-size: 50px; font-family: cursive;">草書字體：我是一個(gè)P標(biāo)簽 ABCDEFG123456</p>
<p style="font-size: 50px; font-family: fantasy;">虛幻字體：我是一個(gè)P標(biāo)簽 ABCDEFG123456</p>
</body>
</html>
斜體
font-style可以設(shè)置字體的斜體
可選值：
normal : 默認(rèn)值，文字正常顯示
italic : 斜體
oblique：文字會(huì)以傾斜的效果顯示
注意：大部分瀏覽器都不會(huì)對(duì)傾斜和斜體做區(qū)分，也就是說我們?cè)O(shè)置italic和oblique它們的效果往往是一樣的，一般我們只用italic。
加粗
font-weight可以用來設(shè)置文本的加粗效果
可選值：
normal : 默認(rèn)值，文字正常顯示
bold ： 文字加粗顯示
該樣式也可以采用100-900這之間的9個(gè)值來表示
注意：由于用戶的計(jì)算機(jī)往往沒有這么多級(jí)別的字體，所以很難達(dá)到我們想要的效果
也就是200有可能比100粗，也有可能是一樣粗
大型小寫字母
font-variant可以用來設(shè)置小型大寫字母
可選值：
normal ： 默認(rèn)值 文字正常顯示
small-caps 文本以小型大寫字母顯示
小型大寫字母：
將所以的字母以大寫形式顯示，但是小寫字母大寫，字體的大小上比字母的大寫小一點(diǎn)
樣式font
- 使用該樣式可以同時(shí)設(shè)置字體相關(guān)的所有樣式
- 可以將字體的樣式的值，統(tǒng)一寫在font樣式中 不同值之間使用空格隔開
- 使用font設(shè)置字體樣式時(shí)，斜體 加粗 小型大寫字母 沒有順序要求 可寫可不寫
- 如果不寫則使用默認(rèn)值，但是要求文字大小和字體必須寫
- 字體必須是最后一個(gè)樣式，大小是倒數(shù)第二的樣式
- 實(shí)際上使用簡(jiǎn)寫屬性也會(huì)有一個(gè)比較好的性能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
color: red;
font-size: 30px;
font-family: "微軟雅黑";
/*
* font-style可以設(shè)置字體的斜體
* - 可選值：
* normal : 默認(rèn)值，文字正常顯示
* italic : 斜體
* oblique：文字會(huì)以傾斜的效果顯示
* - 大部分瀏覽器都不會(huì)對(duì)傾斜和斜體做區(qū)分
* 也就是說我們?cè)O(shè)置italic和oblique它們的效果往往是一樣的
* - 一般我們只用italic
*
*/
font-style: italic;
/*
* font-weight可以用來設(shè)置文本的加粗效果
* - 可選值：
* normal : 默認(rèn)值，文字正常顯示
* bold ： 文字加粗顯示
*
* 該樣式也可以采用100-900這之間的9個(gè)值
* 但是由于用戶的計(jì)算機(jī)往往沒有這么多級(jí)別的字體，所以很難達(dá)到我們想要的效果
* 也就是200有可能比100粗，也有可能是一樣粗
*/
font-weight: 600;
/*
* font-variant可以用來設(shè)置小型大寫字母
* - 可選值：
* normal ： 默認(rèn)值 文字正常顯示
* small-caps 文本以小型大寫字母顯示
*
* 小型大寫字母：
* 將所以的字母以大寫形式顯示，但是小寫字母大寫，字體的大小上比字母的大寫小一點(diǎn)
*/
font-variant: small-caps;
}
.p2{
font-size: 50px;
font-family: 華文彩云;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
.p3{
/*
* 在CSS中還為我們提供了一個(gè)樣式叫font
* 使用該樣式可以同時(shí)設(shè)置字體相關(guān)的所有樣式
* 可以將字體的樣式的值，統(tǒng)一寫在font樣式中 不同值之間使用空格隔開
*
* 使用font設(shè)置字體樣式時(shí)，斜體 加粗 小型大寫字母 沒有順序要求 可寫可不寫
* 如果不寫則使用默認(rèn)值，但是要求文字大小和字體必須寫
* 字體必須是最后一個(gè)樣式，大小是倒數(shù)第二的樣式
*
* 實(shí)際上使用簡(jiǎn)寫屬性也會(huì)有一個(gè)比較好的性能
*/
font:italic small-caps bold 60 px "微軟雅黑"
}
</style>
</head>
<body>
<p class="p1">我是一個(gè)P標(biāo)簽 ABCDefg123456</p>
<p class="p2">我是一個(gè)P標(biāo)簽 ABCDefg123456</p>
<p class="p3">我是一個(gè)P標(biāo)簽 ABCDefg123456</p>
</body>
</html>
行間距
- 在CSS中并沒有為我們提供一個(gè)直接設(shè)置行間距的方式
我們只能通過設(shè)置行高來間接設(shè)置行間距，行高越大間距越大
使用line-height來設(shè)置行高
行高類似于單線本，一行一行的，線與線之間的距離就是行距
網(wǎng)頁中的文字實(shí)際上也是寫在一個(gè)看不見的線中的，而文字默認(rèn)會(huì)在行間距中居中顯示
行間距 = 行高 - 字體大小 - 對(duì)于單行文本來說，可以將行高設(shè)置為和父元素的高度一致
這樣可以使單行文本在父元素中垂直居中 - 在font中也可以指定行高
在字體大小后可以調(diào)節(jié)/行高，來指定行高，該值是可選的，若不指定則會(huì)使用默認(rèn)值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 在CSS中并沒有為我們提供一個(gè)直接設(shè)置行間距的方式
* 我們只能通過設(shè)置行高來間接設(shè)置行間距，行高越大間距越大
* 使用line-height來設(shè)置行高
* 行高類似于單線本，一行一行的，線與線之間的距離就是行距
* 網(wǎng)頁中的文字實(shí)際上也是寫在一個(gè)看不見的線中的，而文字默認(rèn)會(huì)在行間距中居中顯示
*
* 行間距 = 行高 - 字體大小
*/
.p1{
/*
* 通過設(shè)置line-height可以間接的調(diào)整行高
* 可以接收的值：
* 1.直接接收一個(gè)大小
* 2.可以指定一個(gè)百分?jǐn)?shù)，則會(huì)相對(duì)于字體去計(jì)算行高
* 3.可以直接傳一個(gè)數(shù)值，則行高會(huì)設(shè)置字體大小相應(yīng)的倍數(shù)
*/
line-height: 40px;
/*line-height: 200%; */
/*line-height: 2; */
font-size: 25px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
* 對(duì)于單行文本來說，可以將行高設(shè)置為和父元素的高度一致
* 這樣可以使單行文本在父元素中垂直居中
*/
line-height: 200px;
}
.p2{
/*
* 在font中也可以指定行高
* 在字體大小后可以調(diào)節(jié)/行高，來指定行高，該值是可選的，若不指定則會(huì)使用默認(rèn)值
*
*/
font:30px/50px 微軟雅黑;
}
</style>
</head>
<body>
<p class="p1">我們是別人故事里的殤，如那凋落的葉，隨風(fēng)飄零，找不到方向。大帝路上，有我們的足跡，卻不在天堂，只是那一抹凄艷的紅，訴說著血的哀涼。馬踏星空，偉岸的身，驚艷的戰(zhàn)，射下神月，打破萬古神話，筑一曲帝路輝煌，成為絕唱。那是別人的榮光。彷徨，迷惘，我們?cè)诤畏?，掙扎，尋訪，帝路上一堆白骨注釋了我們的凄涼。</p>
<div class="box1">
<a href="#">我是一個(gè)超鏈接</a>
</div>
<p class="p2">我們是別人故事里的殤，如那凋落的葉，隨風(fēng)飄零，找不到方向。大帝路上，有我們的足跡，卻不在天堂，只是那一抹凄艷的紅，訴說著血的哀涼。馬踏星空，偉岸的身，驚艷的戰(zhàn)，射下神月，打破萬古神話，筑一曲帝路輝煌，成為絕唱。那是別人的榮光。彷徨，迷惘，我們?cè)诤畏?，掙扎，尋訪，帝路上一堆白骨注釋了我們的凄涼。</p
</body>
</html>
文本的大小寫
text-transform可以用來設(shè)置文本的大小寫
可選值：
none 默認(rèn)值 按原來樣式處理
capitalize 單詞首字母大寫 通過空格來識(shí)別單詞
uppercase 所有字母都大寫
lowercase 所有字母都小寫
文本的修飾
text-decoration可以用來設(shè)置文本的修飾
可選值：
none : 不添加任何修飾 正常顯示
underline : 為文本添加下劃線
overline : 為文本添加上劃線
line-through:為文本添加刪除線
注意：超鏈接默認(rèn)自帶下劃線，也就是超鏈接的text-decoration的默認(rèn)值是underline， 如果需要去除超鏈接的 下劃線需要將該樣式設(shè)置為none。
字符間距
letter-spacing可以指定字符間距
文本間距
word-spacing可以設(shè)置單詞直接的間距
其實(shí)就是單純的設(shè)置單詞之間空格的大小
文本對(duì)齊
text-align:用來設(shè)置文本對(duì)齊的方式
可選值：
left 默認(rèn)值 靠左對(duì)齊
right 文本靠右對(duì)齊
center 文本居中對(duì)齊
justify 兩邊對(duì)齊
通過調(diào)整文本之間空格大小，來達(dá)到一個(gè)兩端對(duì)齊的效果
首行縮進(jìn)
text-indent用來設(shè)置首行縮進(jìn)
當(dāng)給他一個(gè)正值時(shí)，會(huì)自動(dòng)向右側(cè)縮進(jìn)指定的像素
當(dāng)給他一個(gè)負(fù)值時(shí)，會(huì)自動(dòng)向左側(cè)移動(dòng)指定的距離
通過這種方法可以將一些不想顯示的文字給隱藏起來
這個(gè)一般都使用em作為單位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
/*
* text-transform可以用來設(shè)置文本的大小寫
* 可選值：
* none 默認(rèn)值 按原來樣式處理
* capitalize 單詞首字母大寫 通過空格來識(shí)別單詞
* uppercase 所有字母都大寫
* lowercase 所有字母都小寫
*/
text-transform: capitalize;
}
.p2{
/*
* text-decoration可以用來設(shè)置文本的修飾
* 可選值：
* none : 不添加任何修飾 正常顯示
* underline : 為文本添加下劃線
* overline : 為文本添加上劃線
* line-through:為文本添加刪除線
*/
text-decoration: overline;
}
a{
/*
* 超鏈接默認(rèn)自帶下劃線，也就是超鏈接的text-decoration的默認(rèn)值是underline
* 如果需要去除超鏈接的 下劃線需要將該樣式設(shè)置為none
*/
text-decoration: none;
}
.p3{
/*
* letter-spacing可以指定字符間距
*/
letter-spacing: 10px;
/*
* word-spacing可以設(shè)置單詞直接的間距
* 其實(shí)就是單純的設(shè)置單詞之間空格的大小
*/
word-spacing: 5px;
}
.p4{
/*
* text-align:用來設(shè)置文本對(duì)齊的方式
* 可選值：
* left 默認(rèn)值 靠左對(duì)齊
* right 文本靠右對(duì)齊
* center 文本居中對(duì)齊
* justify 兩邊對(duì)齊
* -通過調(diào)整文本之間空格大小，來達(dá)到一個(gè)兩端對(duì)齊的效果
*/
text-align: center;
}
.p5{
/*
* text-indent用來設(shè)置首行縮進(jìn)
* 當(dāng)給他一個(gè)正值時(shí)，會(huì)自動(dòng)向右側(cè)縮進(jìn)指定的像素
* 當(dāng)給他一個(gè)負(fù)值時(shí)，會(huì)自動(dòng)向左側(cè)移動(dòng)指定的距離
* 通過這種方法可以將一些不想顯示的文字給隱藏起來
* 這個(gè)一般都使用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">我是一個(gè)p標(biāo)簽</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">我們是別人故事里的殤，如那凋落的葉，隨風(fēng)飄零，找不到方向。大帝路上，有我們的足跡，卻不在天堂，只是那一抹凄艷的紅，訴說著血的哀涼。馬踏星空，偉岸的身，驚艷的戰(zhàn)，射下神月，打破萬古神話，筑一曲帝路輝煌，成為絕唱。那是別人的榮光。彷徨，迷惘，我們?cè)诤畏?，掙扎，尋訪，帝路上一堆白骨注釋了我們的凄涼。</p>
</body>
</html>
盒子模型
內(nèi)容區(qū)（content）
使用width設(shè)置盒子內(nèi)容區(qū)的寬度
使用height設(shè)置盒子內(nèi)容區(qū)的高度
邊框（border）
要為一個(gè)元素設(shè)置邊框必須指定三個(gè)樣式(缺一不可)
border-width：邊框的寬度
border-color：邊框的顏色
border-style：邊框的類型
none 默認(rèn)值 沒有邊框
solid 實(shí)線
dotted 點(diǎn)狀邊框
dashed 虛線
double 雙線
注意：可以分別指定四個(gè)邊框的寬度、顏色、類型
- 如果是四個(gè)值：上右下左，順時(shí)針的順序
- 如果指定三個(gè)值：上 左右 下
- 如果指定兩個(gè)值：上下 左右
- 如果一個(gè)值：四條邊都是這個(gè)值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
/*
* 使用width設(shè)置盒子內(nèi)容區(qū)的寬度
* 使用height設(shè)置盒子內(nèi)容區(qū)的高度
*
* width和height只是設(shè)置盒子內(nèi)容區(qū)的大小。而不是盒子的整個(gè)大小
* 盒子可見框的大小由內(nèi)容區(qū)，內(nèi)邊距和邊框共同決定
*/
width: 100px;
height: 100px;
/*
* 設(shè)置背景顏色
*/
background-color: yellow;
/*
* 為元素設(shè)置邊框
* 要為一個(gè)元素設(shè)置邊框必須指定三個(gè)樣式(缺一不可)
* border-width：邊框的寬度
* 可以分別指定四個(gè)邊框的寬度 ，上右下左，順時(shí)針的順序
* 如果指定三個(gè)值，上 左右 下
* 如果指定兩個(gè)值 上下 左右
* 如果一個(gè)值 四條邊都是這個(gè)值
* border-color: 邊框的顏色
* border-style: 邊框的樣式
*
* 除了border-width，CSS還提供了border-xxx-width
* xxx分別表示top right bottom left
* 專門設(shè)定指定的寬度
*/
border-width:10px 20px 30px 40px;
border-left-width: 40px;
border-color:red greenyellow orange deepskyblue;
/*
* 設(shè)置邊框的樣式
* 可選值
* none 默認(rèn)值 沒有邊框
* solid 實(shí)線
* dotted 點(diǎn)狀邊框
* dashed 虛線
* double 雙線
*/
border-style:solid dotted dashed double;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
邊框的簡(jiǎn)寫樣式
- border
- 邊框的簡(jiǎn)寫樣式，通過他可以同時(shí)設(shè)置四個(gè)便看到樣式，寬度，顏色， 而且沒有任何順序要求。
- 一旦指定就是同時(shí)指定四個(gè)邊同時(shí)指定
- border-top、border-right、border-bottom、border-left
可以單獨(dú)設(shè)置四個(gè)邊的樣式 規(guī)則和border一樣 只不過它只不過對(duì)一個(gè)邊生效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: yellow;
/*設(shè)置邊框*/
/*
* 大部分的瀏覽器中，邊框的寬度和顏色都是有默認(rèn)值，而邊框的樣式默認(rèn)值都是none
*/
border-width: 10px;
border-color: red;
border-style: solid;
/*
* border
* 邊框的簡(jiǎn)寫樣式，通過他可以同時(shí)設(shè)置四個(gè)便看到樣式，寬度，顏色
* 而且沒有任何順序要求
* 一旦指定就是同時(shí)指定四個(gè)邊同時(shí)指定
*
* border-top border-right border-bottom border-left
* 可以單獨(dú)設(shè)置四個(gè)邊的樣式 規(guī)則和border一樣 只不過它只不過對(duì)一個(gè)邊生效
*/
border:red solid 20px;
border-top: blue solid 10px;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
內(nèi)邊距（padding）
- 內(nèi)邊距（padding），指的是盒子的內(nèi)容區(qū)與盒子的邊之間的距離
- 一共有四個(gè)方向的內(nèi)邊距，可以通過：
padding-top
padding-right
padding-bottom
padding-left
來設(shè)置四個(gè)方向的內(nèi)邊距 - 內(nèi)邊距會(huì)影響盒子的可見框的大小，元素的背景會(huì)延伸到內(nèi)邊距。 盒子的大小由內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定。
盒子可見框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width
可見框的高度 = border-bottom-width + padding-bottom + height + padding-top + border-top-width
<!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;
/*
* 內(nèi)邊距（padding），指的是盒子的內(nèi)容區(qū)與盒子的邊之間的距離
* 一共有四個(gè)方向的內(nèi)邊距，可以通過：
* padding-top
* padding-right
* padding-bottom
* padding-left
* 來設(shè)置四個(gè)方向的內(nèi)邊距
*
* 內(nèi)邊距會(huì)影響盒子的可見框的大小，元素的背景會(huì)延伸到內(nèi)邊距
* 盒子的大小由內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定
* 盒子可見框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width
* 可見框的高度 = border-bottom-width + padding-bottom + height + padding-top + border-top-width
*/
/*設(shè)置上邊距*/
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
/*
* 使用padding可以同時(shí)設(shè)置四個(gè)邊框的樣式，規(guī)則和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）
- 外邊距指的是盒子與其他盒子之間的距離，他不會(huì)影響可見框的大小，而是影響盒子的位置
- 盒子有四個(gè)方向的外邊距
margin-top
margin-right
margin-bottom
matgin-left - margin還可以設(shè)置為auto，auto一般只設(shè)置給水平方向的margin。如果只指定左外邊距或右外邊距的margin為auto則會(huì)將外邊距設(shè)置為最大值。垂直方向外邊距如果設(shè)置auto，則外邊距默認(rèn)就是0。
如果將left和right同時(shí)設(shè)置為auto，則會(huì)將兩側(cè)的外邊距設(shè)置為相同的值，以示子元素在父元素中居中顯示 - 外邊距同樣可以使用屬性margin，可以同時(shí)設(shè)置四個(gè)方向
注意1：由于頁面中的元素都是靠左擺放的，所以當(dāng)我們?cè)O(shè)置上外邊距和左外邊距，會(huì)導(dǎo)致盒子自身的位置發(fā)生改變，而如果設(shè)置下邊距和右外邊距，會(huì)導(dǎo)致其他元素位置移動(dòng)
注意2：外邊距也可以指定為負(fù)值，如果外邊距設(shè)置的是負(fù)值，則元素反方向移動(dòng)
<!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;
/*
* 外邊距指的是盒子與其他盒子之間的距離
* 他不會(huì)影響可見框的大小，而是影響盒子的位置
* 盒子有四個(gè)方向的外邊距
* margin-top
* margin-right
* margin-bottom
* matgin-left
*
* 由于頁面中的元素都是靠左擺放的
* 所以當(dāng)我們?cè)O(shè)置上外邊距和左外邊距，會(huì)導(dǎo)致盒子自身的位置發(fā)生改變
* 而如果設(shè)置下邊距和右外邊距，會(huì)導(dǎo)致其他元素位置移動(dòng)
*/
/*
* 設(shè)置box1外邊距
*/
margin-top: 100px;
margin-left: 100px;
margin-bottom: 50px;
margin-right: 50px;
/*
* margin還可以設(shè)置為auto，auto一般只設(shè)置給水平方向的margin
* 如果只指定，左外邊距或右外邊距的margin為auto則會(huì)將外邊距設(shè)置為最大值
* 垂直方向外邊距如果設(shè)置auto，則外邊距默認(rèn)就是0
*
* 如果將left和right同時(shí)設(shè)置為auto，則會(huì)將兩側(cè)的外邊距設(shè)置為相同的值
* 以示子元素在父元素中居住
*/
margin-left: auto;
margin-right: auto;
/*
* 外邊距同樣可以使用屬性margin，可以同時(shí)設(shè)置四個(gè)方向
*/
margin:10px auto 30px auto
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 外邊距也可以指定為負(fù)值
* 如果外邊距設(shè)置的是負(fù)值，則元素反方向移動(dòng)
*/
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
垂直外邊距
- 在網(wǎng)頁中相鄰的垂直方向的外邊距會(huì)發(fā)生外邊距的重疊
- 所謂的外邊距重疊指的是兄弟元素之間的相鄰?fù)膺吘鄷?huì)取最大值而不是求和
- 如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會(huì)設(shè)置給父元素
重疊必須滿足兩個(gè)條件：連續(xù) 且 垂直
- 解決方法
1.連續(xù)
為box設(shè)置一個(gè)上邊框或下邊距
2.垂直
將box4的外邊距注銷
將box3高度減去100px，并設(shè)置內(nèi)邊距100px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 垂直外邊距的重疊
* - 在網(wǎng)頁中相鄰的垂直方向的外邊距會(huì)發(fā)生外邊距的重疊
* 所謂的外邊距重疊指的是兄弟元素之間的相鄰?fù)膺吘鄷?huì)取最大值而不是求和
* 如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會(huì)設(shè)置給父元素
*/
.box1{
width: 100px;
height:100px;
background-color: deepskyblue;
/*為上邊元素設(shè)置一個(gè)下外邊距*/
margin-bottom: 100px;
}
.box2{
width: 100px;
height:100px;
background-color: greenyellow;
/*為上邊元素設(shè)置一個(gè)下外邊距*/
margin-top: 100px;
}
.box3{
width: 200px;
height:100px;
background-color: deepskyblue;
/*為上邊元素設(shè)置一個(gè)下外邊距*/
margin-bottom: 100px;
/*方法1 連續(xù)
* 為box3設(shè)置一個(gè)上邊框或下邊距
* border-top: 1px red solid;
* padding-top:1px red solid;
*
* 方法二 垂直
* 將box4的外邊距注銷
* 將box3高度減去100px，并設(shè)置內(nèi)邊距100px
*/
padding-top: 100px;
}
.box4{
width: 100px;
height:100px;
background-color: greenyellow;
/*為里面元素設(shè)置一個(gè)下外邊距*/
/*margin-top: 100px;*/
}
</style>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
去除默認(rèn)樣式
- 瀏覽器為了在頁面中沒有樣式時(shí)，也可以有一個(gè)比較好的顯示效果
- 所以為很多的元素都設(shè)置了一些默認(rèn)的margin何padding
- 而它的這些默認(rèn)樣式，正常情況下我們是不需要使用的
- 所以我們往往在編寫樣式之前需要瀏覽器中的默認(rèn)的margin和padding統(tǒng)統(tǒng)的去掉
*{
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 瀏覽器為了在頁面中沒有樣式時(shí)，也可以有一個(gè)比較好的顯示效果
* 所以為很多的元素都設(shè)置了一些默認(rèn)的margin何padding
* 而它的這些默認(rèn)樣式，正常情況下我們是不需要使用的
*
* 所以我們往往在編寫樣式之前需要瀏覽器中的默認(rèn)的margin和padding統(tǒng)統(tǒng)的去掉
*/
/*去除默認(rèn)樣式*/
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: #00BFFF;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
</div>
<p>我是一個(gè)段落</p>
<p>我是一個(gè)段落</p>
<p>我是一個(gè)段落</p>
<p>我是一個(gè)段落</p>
<ul>
<li>列表</li>
<li>列表</li>
</ul>
</body>
</html>
內(nèi)聯(lián)元素的盒子模型
- 內(nèi)聯(lián)元素不能設(shè)置width和height
- 內(nèi)聯(lián)元素可以設(shè)置設(shè)置水平內(nèi)邊距和水平外邊距
- 內(nèi)聯(lián)元素可以設(shè)置設(shè)置垂直內(nèi)邊距，但是不會(huì)影響頁面布局
- 內(nèi)聯(lián)元素不支持垂直外邊距
- 內(nèi)聯(lián)元素可以設(shè)置設(shè)置邊框，但是不會(huì)影響頁面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
background-color: #00BFFF;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
#s1{
/*
* 內(nèi)容區(qū)、內(nèi)邊距、邊框、外邊距
*/
/*
* 內(nèi)聯(lián)元素不能設(shè)置width和height
*/
/*width: 100px;
height:100px;*/
/*
* 內(nèi)聯(lián)元素可以設(shè)置設(shè)置水平內(nèi)邊距
*/
padding-left: 100px;
padding-right: 100px;
/*
* 內(nèi)聯(lián)元素可以設(shè)置設(shè)置垂直內(nèi)邊距，但是不會(huì)影響頁面布局
*/
/*padding-top: 50px;
padding-bottom: 50px;
/*
* 內(nèi)聯(lián)元素可以設(shè)置設(shè)置邊框，但是不會(huì)影響頁面布局
*/
border:100px blue solid;
/*
* 水平外邊距
* 內(nèi)聯(lián)元素支持水平方向的外邊距
* 水平方向外邊距不會(huì)重疊而是求和
*/
margin-left: 100px;
margin-right: 100px;
/*
* 內(nèi)聯(lián)元素不支持垂直外邊距
*/
margin-bottom: 200px;
margin-top: 200px;
}
#s2{
margin-left: 100px;
}
</style>
</head>
<body>
<span id="s1">我是一個(gè)span</span>
<span id="s2">我是一個(gè)span</span>
<span>我是一個(gè)span</span>
<div class="box1">
</div>
</body>
</html>
display和visibility
通過display樣式可以修改元素的類型
可選值：
1.inline:可以將一個(gè)元素作為內(nèi)聯(lián)元素顯示
2.block：可以將一個(gè)元素設(shè)置塊元素顯示
3.inline-block:將一個(gè)元素轉(zhuǎn)換為行內(nèi)塊元素
一個(gè)元素既有行內(nèi)元素的特點(diǎn)又有行內(nèi)元素特點(diǎn)，既可以設(shè)置寬高，又不會(huì)獨(dú)占一行。
4.none:不顯示元素，并且元素不會(huì)再頁面中繼續(xù)占有位置可以用visibility來設(shè)置元素的隱藏和顯示的狀態(tài)
可選值：
1.visible 默認(rèn)值，元素默認(rèn)會(huì)在頁面中顯示
2.hidden 元素會(huì)隱藏不顯示
注意：
使用visibility:hidden;隱藏的元素雖然不會(huì)再頁面中顯示，但是它的位置會(huì)依然保持。
使用display:none;方式隱藏的元素，不會(huì)再頁面中顯示，并且不再占有頁面的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
background-color:#00BFFF ;
/*
* 將內(nèi)聯(lián)元素變成塊元素
* 通過display樣式可以修改元素的類型
* 可選值：
* inline:可以將一個(gè)元素作為內(nèi)聯(lián)元素顯示
* block：可以將一個(gè)元素設(shè)置塊元素顯示
* inline-block:將一個(gè)元素轉(zhuǎn)換為行內(nèi)塊元素
* -一個(gè)元素既有行內(nèi)元素的特點(diǎn)又有行內(nèi)元素特點(diǎn)
* 既可以設(shè)置寬高，又不會(huì)獨(dú)占一行
* none:不顯示元素，并且元素不會(huì)再頁面中繼續(xù)占有位置
*/
display: inline-block;
/*為其設(shè)置一個(gè)寬和高*/
width:500px;
height: 500px;
}
.box{
width: 100px;
height: 100px;
background-color: orange;
/*
* display:none;
* 使用此方式隱藏的元素，不會(huì)再頁面中顯示，并且不再占有頁面的位置
*/
/*display：none；*/
/*
* visibility
* - 可以用來設(shè)置元素的隱藏和顯示的狀態(tài)
* - 可選值
* visible 默認(rèn)值，元素默認(rèn)會(huì)在頁面中顯示
* hidden 元素會(huì)隱藏不顯示
*
* 使用visibility:hidden;隱藏的元素雖然不會(huì)再頁面中顯示
* 但是它的位置會(huì)依然保持
*/
visibility: hidden;
}
</style>
</head>
<body>
<div class="box"></div>
<a href="#">我是一個(gè)大大的超鏈接</a>
<span id="s1">
hello
</span>
</body>
</html>
