html+css基礎知識
阿新 • • 發佈：2019-02-06
設定css樣式 p{color:blue}p選擇器+宣告{ 屬性:值 }
html標籤選擇器<style>
span{}
#id{}
</style>
id選擇器只能在文件中使用一次，具有唯一性，類似身份證號碼
類選擇器 使用.識別符號<style>
.class{}
</style>
類選擇器可以使用多次
子選擇器 > <style>
.class>span{}
</style>
子選擇器作用於元素的第一代後代(例如 列表對 li 使用子選擇器 只對最外層 li 元素起作用)
空格選擇器
<style>
.class li{}
</style>
空格選擇器作用於元素所有後代(例如 列表對 li 使用空格選擇器 會對所有li元素產生作用)
通用選擇器 *
<style>
*{}
</style>
通用選擇器匹配html中所有標籤元素
偽選擇器
<style>
a:hover{}
</style>
偽選擇器允許給html不存在的標籤（標籤的某種狀態）設定樣式 ，例如 給<a></a>標籤設定滑鼠滑過的狀態來設定字型顏色
，到目前為止，可以相容所有瀏鑑器的“偽類選擇符”就是 a 標籤上使用 :hover 了
分組選擇器，
<style>
h1,span{}
</style>
分組選擇器可以為html中多個標籤元素設定同一個樣式
選擇器權值
p{color:red;}
.first{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
以上例子為同一個元素設定了兩種不同的樣式，最終顯示的是green
繼承權值最低，標籤的權值為1， 類選擇器的權值為10，ID選擇器的權值最高 為100，瀏覽器會根據權值來判斷使用哪種css樣式
當同一個元素有多個相同權值的css樣式，則處於最後面的css樣式會被應用
!important
p{color:red !important;}
#注意：!important要寫在分號的前面
p.first{color:green;}
本來是顯示green ，由於在樣式裡面新增!important(最高權值) ，所以顯示紅色
設定字型
body{font-family:"Microsoft Yahei";}#微軟雅黑
文字排版--字號，顏色
body{font-size:12px;color:#666}
文字排版--粗體
body{font-style:italic;}
文字排版--下劃線
body{text-decoreation:underline;}
文字排版--刪除線
body{text-decoration:line-through;}
段落排版--縮排
p{text-indent:2em}#縮排文字的兩倍大小
段落排版--行高
p{line-height:1.5em}
段落排版--中文字間距，字母間距
中文：p{letter-spacing:20px;} #如果letter-spacing設定英文，是設定字母間距
英文：p{word-spacing:20px;}#英文單詞間距（對中文無效）
段落排版--對齊
div{text-align:center}#left right
CSS使用方式
內聯式 直接把css程式碼寫在現有的html標籤中 <p style="color:red">這裡文字是紅色。</p>
嵌入式 把css程式碼樣式寫在 <style type="text/css"> </style>標籤之間
優先順序：內聯式 > 嵌入式 > 外部式
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內聯塊狀元素有：
<img>、<input>
元素分類--塊級元素
a{display:block;} #把內聯元素a轉換為塊狀元素
特點：每個塊級元素都從新的一行開始，並且其後的元素也另起一行。
元素的高度，寬度，行高以及頂邊和底邊距都可以設定
元素寬度在不設定的情況下，是它本身父容器的100%，除非設定一個寬度
元素分類--內聯元素
div{display:inline;} #把塊級元素div轉換為內聯元素
元素寬度就是它包含的文字或者圖片的寬度，不可改變
元素分類--內聯塊狀元素
div{display:inline-block;} #把塊級元素div轉換為內聯塊狀元素
盒子模型--邊框
縮寫：
div{
border: 2px solid #888
}
分開寫
div{
border-width:2px;
border-style:solid;
border-color:red;
}
border-style常見樣式有：dashed(虛線)|dotted(點線)|solid(實線)
border-width中的寬度也可以設定為：thin|medium|thick ,最常用的是畫素(px)
邊框設定有4個方向:border-bottom,border-top,border-left,border-right ,可以單獨設定。
盒子模型--寬度和高度
一個盒子的寬度=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界
左邊界：margin-left
左邊框：border-left
左填充：padding-left
內容寬度：width
右填充：padding-right
右邊界：border-right
右邊界：margin-right
盒子模型--填充
div{padding:20px 10px 10px 10px;} #順序為上，右，下，左，（順時針）
如果4個方向填充的寬度都一樣，則可以div{padding：10px;}
如果上下為10px，左右為20px，則可以div{padding:10px 20px;}
盒子模型--邊界
div{margin: 20px 10px 10px 10px;} # 順序為上，右，下，左,(順時針)
如果4個方向邊界的寬度都一樣，則可以div{margin:10px;}
如果上下為10px，左右為20px，則可以div{margin:10px 20px;}
maring 在邊框外 paddiing在邊框裡
CSS 佈局模型
在網頁中，元素有3種佈局模型
流動模型(Flow)
塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在預設狀態下，塊狀元素的寬度都為100%。
內聯元素都會在所處的包含元素內從左到右水平分佈顯示
浮動模型(Float)
設定元素浮動
div{
width:200px;
height:200px;
border:2px red solid;
float:left
}
<div id="div1"></div>
<div id="div2"></div>
設定float:left 可以使兩個塊級元素並列一行顯示 left是左浮動 right是向右浮動
層模型(Layer)
絕對定位(position:absolute)
div{
position:absolute;
left:20px;
top:100px;
}
#上述程式碼實現div元素相對於瀏覽器視窗向右移動20px，向下移動100px。偏移的方向和幅度由left right top bottom 屬性確定
相對定位(position:relative)
div{
position:relative;
left:20px;
top:100px;
}
#相對位置偏移前的位置保留不變，即div元素相對於以前的位置產生了偏移，但是div元素以前的位置還是保留著
固定定位(position:fixed)
#與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。
由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，
或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，
不會受文件流動影響，這與background-attachment:fixed?屬性功能相同。
Relative與Absolute組合使用
兩者結合使用可以讓元素不限於相對瀏覽器定位或者網頁視窗定位，而是可以靈活的相對於其他元素定
有以下規則：
1.參照定位的元素必須是相對定位元素的前輩元素
<div id="box1"> <!--參照定位的元素-->
<div id="box2">
相對參照元素進行定位
</div>
</div>
# box1是box2的父元素
2.參照定位的元素必須加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3.定位元素加入positon:absolute，就可以使用top right bottom left進行偏移定位
#box2
{
position:absolute;
top:30px;
left:30px;
}
這樣box2就可以相對於父元素box1定位了
字型縮寫
body{
font-size:italic; #斜體
font-variant:small-caps;#小型大寫字型
font-weight:bold;#粗體
font-size:12px;
line-height:1.5em;#行距
font-family:"宋體",sans-serif; #sans-serif就是無襯線字型 在font-family後面加上sans-serif是因為如果宋體不能顯示則顯示sans-serif字型
}
可以縮寫為
body{
font:italic small-caps bold 12px/1.5em "宋體",sans-serif;
}
#
1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用預設值。
2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。
長度值
比較常用到的是 px em %百分比，其實三種都是相對單位
1.px畫素
畫素指的是顯示器上的小點(css規範中假設"90畫素=1英寸")
2.em
就是本元素給定字型的font-size值，如果元素的font-size為14px，那麼1em=14px，如果font-size為18px，那麼1em=18px
p{font-size:12px;text-indent:2em;}
以上程式碼實現段落首行縮排24px(也就是2個字型的大小)
#注意 ，當給font-size設定單位為em是，此時計算的標準以p的父元素的font-size為基礎
<p>以這個<span>例子</span>為例。</p>
css：
p{font-size:14px}
span{font-size:0.8em;}
此時span中的字型大小就為14*0.8=11.2px
3.百分比
水平居中設定-行內元素
如果被設定元素為文字，圖片等行內元素時，水平居中是通過給父元素設定 text-align:center;
<body>
<div class="txtCenter">我想要在父容器中水平居中顯示。</div>
<style>
.txtCenter{
text-align:center;
}
</style>
水平居中設定-定寬塊狀元素
定寬塊狀元素：塊狀元素的寬度width為固定值
滿足定寬和塊狀兩個條件的元素可以設定左右margin值為auto來實現居中
<style>
div{
border:1px solid red;/*為了顯示居中效果明顯為 div 設定了邊框*/
width:200px;/*定寬*/
margin:20px auto;/* margin-left 與 margin-right 設定為 auto */
}
</style>
水平居中設定-不定寬塊狀元素
1.加入table標籤
為需要設定的居中的元素外面加入一個table標籤（包括<tbody><tr>td>>
2改變塊級元素的display為inline型別，然後用text-align:cencer；
3.通過給父元素設定float，然後給父元素position:relative和left：50%，子元素設定position:relative和lef（-50%）
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
假想UL層的父層（即div層）中間有條平分線將ul層的父層（div）平均分為兩份，
ul層的css程式碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；
而li層的css程式碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
垂直居中-父元素高度確定的單行文字
父元素高度確定的單行文字
line-height 行高 = 上行間距+font-size+下行間距
上行間距=下行間距=1/2 * 行間距
height為div高度，當height=line-height時，上行間距=下行間距 ，達到垂直居中
<div class="container">
hi,imooc!
</div>
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
垂直居中-父元素高度確定的多行文字
插入table（包括tbody，tr，td），同時設定vertical-align:middle;
css中有一個用於豎直居中的屬性vertical-align，在父元素設定此樣式時，會對inline-block型別的資源上都有用
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
因為td標籤預設情況下就設定了vertical-align:middle;所以我們不需要顯式的設定了
隱性改變display型別
有一個有趣的現象就是當為元素（不論之前是什麼型別元素，display:none 除外）設定以下 2 個句之一：
1. position : absolute
2. float : left 或 float:right
簡單來說，只要html程式碼中出現以上兩句之一，
元素的display顯示型別就會自動變為以 display:inline-block（塊狀元素）的方式顯示，
html標籤選擇器<style>
span{}
</style>
id選擇器 使用#識別符號<style>#id{}
</style>
id選擇器只能在文件中使用一次，具有唯一性，類似身份證號碼
類選擇器 使用.識別符號<style>
.class{}
</style>
類選擇器可以使用多次
子選擇器 > <style>
.class>span{}
</style>
子選擇器作用於元素的第一代後代(例如 列表對 li 使用子選擇器 只對最外層 li 元素起作用)
空格選擇器
<style>
.class li{}
</style>
空格選擇器作用於元素所有後代(例如 列表對 li 使用空格選擇器 會對所有li元素產生作用)
通用選擇器 *
<style>
*{}
</style>
通用選擇器匹配html中所有標籤元素
偽選擇器
<style>
a:hover{}
</style>
偽選擇器允許給html不存在的標籤（標籤的某種狀態）設定樣式 ，例如 給<a></a>標籤設定滑鼠滑過的狀態來設定字型顏色
，到目前為止，可以相容所有瀏鑑器的“偽類選擇符”就是 a 標籤上使用 :hover 了
分組選擇器，
<style>
h1,span{}
</style>
分組選擇器可以為html中多個標籤元素設定同一個樣式
選擇器權值
p{color:red;}
.first{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
以上例子為同一個元素設定了兩種不同的樣式，最終顯示的是green
繼承權值最低，標籤的權值為1， 類選擇器的權值為10，ID選擇器的權值最高 為100，瀏覽器會根據權值來判斷使用哪種css樣式
當同一個元素有多個相同權值的css樣式，則處於最後面的css樣式會被應用
!important
p{color:red !important;}
#注意：!important要寫在分號的前面
p.first{color:green;}
本來是顯示green ，由於在樣式裡面新增!important(最高權值) ，所以顯示紅色
設定字型
body{font-family:"Microsoft Yahei";}#微軟雅黑
文字排版--字號，顏色
body{font-size:12px;color:#666}
文字排版--粗體
body{font-weight:bold;}
body{font-style:italic;}
文字排版--下劃線
body{text-decoreation:underline;}
文字排版--刪除線
body{text-decoration:line-through;}
段落排版--縮排
p{text-indent:2em}#縮排文字的兩倍大小
段落排版--行高
p{line-height:1.5em}
段落排版--中文字間距，字母間距
中文：p{letter-spacing:20px;} #如果letter-spacing設定英文，是設定字母間距
英文：p{word-spacing:20px;}#英文單詞間距（對中文無效）
段落排版--對齊
div{text-align:center}#left right
CSS使用方式
內聯式 直接把css程式碼寫在現有的html標籤中 <p style="color:red">這裡文字是紅色。</p>
嵌入式 把css程式碼樣式寫在 <style type="text/css"> </style>標籤之間
外部式 把css程式碼寫在一個獨立的外部檔案中，
優先順序：內聯式 > 嵌入式 > 外部式
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
陰影效果：box-shadow：h-shadow v-shadow blur spread color inset
水平陰影 垂直陰影 模糊距離 陰影尺寸 顏色 內部陰影(預設外部)
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內聯塊狀元素有：
<img>、<input>
元素分類--塊級元素
a{display:block;} #把內聯元素a轉換為塊狀元素
特點：每個塊級元素都從新的一行開始，並且其後的元素也另起一行。
元素的高度，寬度，行高以及頂邊和底邊距都可以設定
元素寬度在不設定的情況下，是它本身父容器的100%，除非設定一個寬度
元素分類--內聯元素
div{display:inline;} #把塊級元素div轉換為內聯元素
特點：和其他元素在同一行上
元素的高度，寬度，行高以及頂邊和底邊距都不能設定元素寬度就是它包含的文字或者圖片的寬度，不可改變
元素分類--內聯塊狀元素
div{display:inline-block;} #把塊級元素div轉換為內聯塊狀元素
特點：和其他元素在同一行上
元素的高度，寬度，行高以及頂邊和底邊距都可以設定盒子模型--邊框
縮寫：
div{
border: 2px solid #888
}
分開寫
div{
border-width:2px;
border-style:solid;
border-color:red;
}
border-style常見樣式有：dashed(虛線)|dotted(點線)|solid(實線)
border-width中的寬度也可以設定為：thin|medium|thick ,最常用的是畫素(px)
邊框設定有4個方向:border-bottom,border-top,border-left,border-right ,可以單獨設定。
盒子模型--寬度和高度
一個盒子的寬度=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界
左邊界：margin-left
左邊框：border-left
左填充：padding-left
內容寬度：width
右填充：padding-right
右邊界：border-right
右邊界：margin-right
盒子模型--填充
div{padding:20px 10px 10px 10px;} #順序為上，右，下，左，（順時針）
如果4個方向填充的寬度都一樣，則可以div{padding：10px;}
如果上下為10px，左右為20px，則可以div{padding:10px 20px;}
盒子模型--邊界
div{margin: 20px 10px 10px 10px;} # 順序為上，右，下，左,(順時針)
如果4個方向邊界的寬度都一樣，則可以div{margin:10px;}
如果上下為10px，左右為20px，則可以div{margin:10px 20px;}
maring 在邊框外 paddiing在邊框裡
CSS 佈局模型
在網頁中，元素有3種佈局模型
流動模型(Flow)
塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在預設狀態下，塊狀元素的寬度都為100%。
內聯元素都會在所處的包含元素內從左到右水平分佈顯示
浮動模型(Float)
設定元素浮動
div{
width:200px;
height:200px;
border:2px red solid;
float:left
}
<div id="div1"></div>
<div id="div2"></div>
設定float:left 可以使兩個塊級元素並列一行顯示 left是左浮動 right是向右浮動
層模型(Layer)
絕對定位(position:absolute)
div{
position:absolute;
left:20px;
top:100px;
}
#上述程式碼實現div元素相對於瀏覽器視窗向右移動20px，向下移動100px。偏移的方向和幅度由left right top bottom 屬性確定
相對定位(position:relative)
div{
position:relative;
left:20px;
top:100px;
}
#相對位置偏移前的位置保留不變，即div元素相對於以前的位置產生了偏移，但是div元素以前的位置還是保留著
固定定位(position:fixed)
#與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。
由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，
或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，
不會受文件流動影響，這與background-attachment:fixed?屬性功能相同。
Relative與Absolute組合使用
兩者結合使用可以讓元素不限於相對瀏覽器定位或者網頁視窗定位，而是可以靈活的相對於其他元素定
有以下規則：
1.參照定位的元素必須是相對定位元素的前輩元素
<div id="box1"> <!--參照定位的元素-->
<div id="box2">
相對參照元素進行定位
</div>
</div>
# box1是box2的父元素
2.參照定位的元素必須加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3.定位元素加入positon:absolute，就可以使用top right bottom left進行偏移定位
#box2
{
position:absolute;
top:30px;
left:30px;
}
這樣box2就可以相對於父元素box1定位了
字型縮寫
body{
font-size:italic; #斜體
font-variant:small-caps;#小型大寫字型
font-weight:bold;#粗體
font-size:12px;
line-height:1.5em;#行距
font-family:"宋體",sans-serif; #sans-serif就是無襯線字型 在font-family後面加上sans-serif是因為如果宋體不能顯示則顯示sans-serif字型
}
可以縮寫為
body{
font:italic small-caps bold 12px/1.5em "宋體",sans-serif;
}
#
1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用預設值。
2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。
長度值
比較常用到的是 px em %百分比，其實三種都是相對單位
1.px畫素
畫素指的是顯示器上的小點(css規範中假設"90畫素=1英寸")
2.em
就是本元素給定字型的font-size值，如果元素的font-size為14px，那麼1em=14px，如果font-size為18px，那麼1em=18px
p{font-size:12px;text-indent:2em;}
以上程式碼實現段落首行縮排24px(也就是2個字型的大小)
#注意 ，當給font-size設定單位為em是，此時計算的標準以p的父元素的font-size為基礎
<p>以這個<span>例子</span>為例。</p>
css：
p{font-size:14px}
span{font-size:0.8em;}
此時span中的字型大小就為14*0.8=11.2px
3.百分比
p{font-size:12px;line-height:130%}
此時行距為字型的130%水平居中設定-行內元素
如果被設定元素為文字，圖片等行內元素時，水平居中是通過給父元素設定 text-align:center;
<body>
<div class="txtCenter">我想要在父容器中水平居中顯示。</div>
</body>
上述程式碼父元素是div 子元素時文字：我想要在父容器中水平居中顯示<style>
.txtCenter{
text-align:center;
}
</style>
水平居中設定-定寬塊狀元素
定寬塊狀元素：塊狀元素的寬度width為固定值
滿足定寬和塊狀兩個條件的元素可以設定左右margin值為auto來實現居中
<style>
div{
border:1px solid red;/*為了顯示居中效果明顯為 div 設定了邊框*/
width:200px;/*定寬*/
margin:20px auto;/* margin-left 與 margin-right 設定為 auto */
}
</style>
水平居中設定-不定寬塊狀元素
1.加入table標籤
為需要設定的居中的元素外面加入一個table標籤（包括<tbody><tr>td>>
2改變塊級元素的display為inline型別，然後用text-align:cencer；
3.通過給父元素設定float，然後給父元素position:relative和left：50%，子元素設定position:relative和lef（-50%）
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
假想UL層的父層（即div層）中間有條平分線將ul層的父層（div）平均分為兩份，
ul層的css程式碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；
而li層的css程式碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
垂直居中-父元素高度確定的單行文字
父元素高度確定的單行文字
line-height 行高 = 上行間距+font-size+下行間距
上行間距=下行間距=1/2 * 行間距
height為div高度，當height=line-height時，上行間距=下行間距 ，達到垂直居中
<div class="container">
hi,imooc!
</div>
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
垂直居中-父元素高度確定的多行文字
插入table（包括tbody，tr，td），同時設定vertical-align:middle;
css中有一個用於豎直居中的屬性vertical-align，在父元素設定此樣式時，會對inline-block型別的資源上都有用
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
因為td標籤預設情況下就設定了vertical-align:middle;所以我們不需要顯式的設定了
隱性改變display型別
有一個有趣的現象就是當為元素（不論之前是什麼型別元素，display:none 除外）設定以下 2 個句之一：
1. position : absolute
2. float : left 或 float:right
簡單來說，只要html程式碼中出現以上兩句之一，
元素的display顯示型別就會自動變為以 display:inline-block（塊狀元素）的方式顯示，
當然就可以設定元素的 width 和 height 了，且預設寬度不佔滿父元素。
推薦學習地址：https://www.imooc.com/