CSS全面介紹
一、css基本介紹
CSS全稱Cascading Style Sheet層疊樣式表，是專用用來為HTML標籤新增樣式的。
# 註釋
/*單行註釋*/
/*
多行註釋
多行註釋
*/
通常我們在寫css樣式的時候也會用註釋來劃定樣式區域(因為HTML程式碼多所以對呀的css程式碼也會很多)
/*這是部落格園首頁的css樣式檔案*/
/*頂部導航條樣式*/
...
/*左側選單欄樣式*/
...
/*右側選單欄樣式*/
...
二、css基本語法
選擇器 {
屬性1:值1;
屬性2:值2;
屬性3:值3;
屬性4:值4;
}
三、css四種引入方式
# 行內式
<p style="color：red">你好<p>
# 嵌入式
<head>
<sttyle>
p {
color：red;
}
</sttyle>
</head>
# 外鏈式
<link rel="stylesheet" herf="css/mycss.css">
# 匯入式
<head>
<style>
/*形式一：*/
@import "css/mystyle.css";
/*形式二：*/
@import url("css/mystyle.css");
</style>
</head>
四、css選擇器
1、基本選擇器
<id選擇器>
<class選擇器>
<標籤選擇器>
<通配選擇器>
<style>
#d1 {
color：red;
} 找到id是d1的標籤
.p1 {
color：red;
} 找到class值裡面包含p1的標籤
div {
background-color：red;
} 找到所有的div標籤
* {
color：red；
} 將html頁面上所有的標籤全部找到!
</style>
2、組合選擇器
<後代選擇器>
<兒子選擇器>
<毗鄰選擇器>
<弟弟選擇器>
<style>
div span {
color: red;
}
div>span {
color: red;
}
div+span {
color: red;
} 同級別緊挨著的下面的第一個
div~span {
color: red;
} 同級別下面所有的
</style>
3、屬性選擇器
1、含有某個屬性
2、含有某個屬性並且有某個值
3、含有某個屬性並且有某個值的某個標籤
<!--屬性選擇器是以[]為標誌的-->
<style>
[username] {
color: blue;
} 將所有含有屬性名是username的標籤背景色改為藍色
[username='niuniu'] {
color: blue;
} 找到所有屬性名是username並且屬性值是niuniu的標籤,背景色改為藍色
iniput[username='niuniu'] {
background-color:blue;
} 找到所有屬性名是username並且屬性值是niuniu的input標籤,背景色改為藍色
[^]:以什麼為開頭匹配[username^=n]
[$]:以什麼為結尾匹配[username$=u]
[*]:包含匹配[username*=i]
</style>
4、交集與並集選擇器
<style>
中間有空格，表示包含的關係
div .box1 {
color: red;
}
逗號表示的同級別的或者的關係
div,h1 {
color: red;
}
</style>
5、序列選擇器
<style>
--同級別的第一個標籤得是p才生效
p:first-child {
color: red;
}
--同級別的最後一個標籤得是p才生效
p:last-child{
color: red;
}
--同級別的第3個標籤得是p才生效
p:nth-child(3) {
color: red;
}
--同級別的，同類的，第一個標籤得是p才生效
p:first-of-type{
color: red;
}
--同級別的，同類的，最後一個標籤得是p才生效
p:last-of-type{
color: red;
}
--同級別的，同類的，第3個標籤得是p才生效
p:nth-of-type(3){
color: red;
}
--同級別的只有一個標籤的，得是p才生效
p:only-child {
color: red;
}
--同級別的，同類的，只有一個標籤的，得是p才生效
p:only-of-type {
color: red;
}
</style>
五、偽類選擇器
<style>
a:link {
color: red;
} 點選前
a:hover {
color: blue;
} 懸浮
a:active {
color: yellow;
} 點選不鬆開
a:visited {
color: green;
} 點選後
input:foucs {
background-color: pink;
outline: none;
} input框獲取焦點
p {
color: darkgray;
font-size: 48px;
}
p:hover {
color: white;
}
</style>
六、偽元素選擇器
<style>
p:first-letter {
font-size: 50px;
color: orange;
}
p:before {
content: '你好呀';
color: blue;
}
p:after {
content: '再見嘍';
color: yellow;
}
</style>
ps:before和after通常都是用來清除浮動帶來的影響:父標籤塌陷的問題(後面馬上講)
七、css的三大特性
1、繼承
#1、定義：給某一個元素設定一些屬性，該元素的後代也可以使用，這個我們就稱之為繼承性
#2、注意：
1、只有以color、font-、text-、line-開頭的屬性才可以繼承
2、a標籤的文字顏色和下劃線是不能繼承別人的
3、h標籤的文字大小是不能繼承別人的，會變大，但是會在原來字型大小的基礎上變大
ps:開啟瀏覽器審查元素可以看到一些inherited from。。。的屬性
#3、應用場景：
通常基於繼承性統一設定網頁的文字顏色，字型，文字大小等樣式
2、層疊
#1、定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理衝突的一種能力，即如果有多個選擇器選中了同一個標籤那麼會有覆蓋效果
#2、注意：
1、層疊性只有在多個選擇器選中了同一個標籤，然後設定了相同的屬性，才會發生層疊性
ps：通過谷歌瀏覽器可以檢視到，一些屬性被劃掉了
3、優先順序
#1、定義：當多個選擇器選中同一個標籤，並且給同一個標籤設定相同的屬性時，如何層疊就由優先順序來確定
#2、優先順序
整體優先順序從高到底：行內樣式>嵌入樣式>外部樣式
行內樣式並不推薦使用，所以我們以嵌入為例來介紹優先順序
1、大前提：直接選中 > 間接選中(即繼承而來的)
2、如果都是間接選中，那麼誰離目標標籤比較近，就聽誰的
3、如果都是直接選中，並且都是同型別的選擇器，那麼就是誰寫的在後面就聽誰的
4、如果都是直接選中，並且是不同型別的選擇器，那麼就會按照選擇器的優先順序來層疊
id > 類 > 標籤 > 萬用字元(也算直接選中) > 繼承 > 瀏覽器預設（即沒有設定任何屬性）
5、優先順序之!important
.p1 {
color: red !important;
font-size: 20px !important;
}
#1、作用：還有一種不講道理的!important方式來強制指定的屬性的優先順序提升為最高，但是不推薦使用。因為大量使用!!important的程式碼是無法維護的。
#2、注意：
1、!important只能用於直接選中，不能用於間接選中
2、!important只能用於提升被指定的屬性的優先順序，其他屬性的優先順序不會被提升
3、!important必須寫在屬性值分號的前面
6、權重計算
#1、強調
如果都是直接選中，並且混雜了一系列其他的選擇器一起使用時，則需要通過計算機權重來判定優先順序
#2、計算方式
#1、id數多的優先順序高
#2、id數相同，則判定類數多的優先順序高
#3、id數、class數均相同，則判定標籤數多的優先順序高
#4、若id數、class數、標籤數均相同，則無需繼續往下計算了，誰寫在後面誰的優先順序高
css屬性相關
width屬性可以為元素設定寬度。
height屬性可以為元素設定高度。
塊級標籤才能設定寬度，行內標籤的寬度由內容來決定。
一、字型屬性
<style>
p {
font-weight: normal; 預設
font-weight: bord; 粗體
font-weight: lighter; 細體
font-weight: 100~900; 設定數值
font-weight: inherit; 繼承父元素字型的值
}
p {
font-style: normal; 預設
font-style: italic; 斜體
}
p {
font-size: 1px;
font-size: inherit;
}
p {
font-family: 字型家族
}
p {
font: bolder italic 3px '隸書' 支援簡寫
}
p {
color: red;
color: rgb(0, 0, 0);
color: rgba(0,0,0,0.5);
color: #0000ff;
}
</style>
二、文字屬性
<style>
div {
text-align: left right center justify; 文字水平方向對齊方式
text-decoration: none underline overline line-through inherit; 文字裝飾
text-indent: 2px; 文字首行縮排
line-height: 10px; 文字的行高
}
</style>
三、背景屬性
<!--塊級標籤、行內塊級標籤有寬高，行內標籤沒有-->
<style>
div {
background-color: red;
background-img: url("檔案路徑、URL地址");
background-size: 100px 100px / 100% 100%;
background-repeat: repeat/ no-repeat/ repeat-x/ repeat-y;
background-position: center center/ 50% 50%/ 30px 50px;
background-attachment: scroll/ fixed; 預設值，圖片隨滾動條滾動/ 不滾動
background: inherit;
支援簡寫
}
</style>
<!--背景圖片和插入圖片的區別
#1、
背景圖片僅僅只是一個裝飾，不會佔用位置，
插入圖片會佔用位置
#2、
背景圖片有定位屬性，可以很方便地控制圖片的位置，
而插入圖片則不可以
#3、
插入圖片語義比背景圖片的語義要強，所以在企業開發中如果你的圖片
想被搜尋引擎收錄，那麼推薦使用插入圖片
-->
ps:rgba只能給背景圖片設定透明度，opacity則是給整個標籤加上透明度
四、盒子模型
<!--
HTML文件中的每個元素都被比喻成矩形盒子， 盒子模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內填充），content（內容區域），如果把一個盒子比喻成一個壁掛相片，那麼
#外邊距margin ===== 一個相框與另外一個相框之間的距離
#邊框border ====== 邊框指的就是相框
#內邊距padding ===== 內容/相片與邊框的距離
#寬度width/高度height ===== 指定可以存放內容/相片的區域
提示：可以通過谷歌開發者工具檢視盒子的各部分屬性
#如圖所示：
-->
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-VdE2xa9Z-1600860480031)(E:\Python脫產班日記\0917css屬性介紹\assets\1036857-20180510224701794-1434317444.png)]
1、盒子模型的寬度和高度
#1、內容的寬度和高度
通過標籤的width和height屬性設定
#2、元素/盒子模型的寬度和高度
寬度= 左邊框 + 左內邊距 + width(內容的寬) + 右內邊距 + 右邊框高度
高度= 。。。。
#3、元素/盒子模型空間的寬度和高度
寬度= 左外邊距 + 左邊框 + 左內邊距 + width(內容的寬) + 右內邊距 + 右邊框高度 + 右外邊距
高度= 。。。。
<style>
* {
margin: 0 ;
padding: 0 ;
}
div {
display: inline-block;
weight: 100px;
height: 100px;
border-width: 1px 2px 3px 4px; 上 右 下 左
border-style: solid dotted dashed double;
border-radius: 50%;
border-radius: 25% 50%; 橢圓
padding: 10px; 內邊距
box-sizing: border-box; 避免因為盒子的內邊距變動，導致盒子大小變形
margin: 10px; 外邊距，水平方向上會疊加，垂直和方向上取較大的值
word-break: break-all; 防止文字溢位
}
</style>
text-align center；只能讓盒子中儲存的文字、圖片水平居中
如果想讓盒子自己相對於父元素水平居中，需要用到
margin: 0 auto;
2、行內標籤和塊標籤
"""
在HTML中HTML將所有標籤分為兩類，分別是容器級和文字級
在CSS中CSS也將所有標籤分為兩類，分別是容器級是塊級元素和行內元素
#1、HTML中容器級與文字級
容器級標籤：可以巢狀其他的所有標籤
div、h、ul>li、ol>li、dl>dt+dd
文字級標籤：只能巢狀文字、圖片、超連結
span、p、buis、strong、em、ins、del
#2、CSS中塊級與行內
塊級：塊級元素會獨佔一行，所有的容器類標籤都是塊級，文字標籤中的p標籤也是塊級
div、h、ul、ol、dl、li、dt、dd 還有標籤p
行內：行內元素不會獨佔一行，所有除了p標籤以外的文字標籤都是行內
span、buis、strong、em、ins、del
#3、塊級元素與行內元素的區別
1、塊級元素block
獨佔一行
可以設定寬高
若沒有設定寬度，那麼預設和父元素一樣寬（比如下例中的div的父元素是body，預設div的寬就是body的寬）
若沒有設定寬高，那麼就按照設定的來顯示
2、行內元素inline
不會獨佔一行
不可以設定寬高
盒子寬高預設和內容一樣
3、行內塊級元素inline-block
不會獨佔一行
可以設定寬高
"""
"""
佈局都是用塊級元素，而行內元素是控制內容顯示的。
1、div標籤
一般用於配合css完成網頁的基本佈局
2、span標籤
一般用於配合css修改網頁中的一些區域性資訊，比如一行文字我們只為一部分加顏色<p>我是<span>egon</span></p>
3、div和span有什麼區別？
div一般用於排版，而span一般用於區域性文字的樣式
1、站在HTML的角度：div是一個塊級元素、獨佔一行，而span是一個行內元素、不會單獨佔一行
2、站在CSS的角度：div是一個容器級標籤，而span是一個文字級標籤
"""
3、css顯示模式轉換
<style>
div {
display: none/ block/ inline/ inline-block; 隱藏不佔位
visibility: hidden; 隱藏佔位
}
</style>
CSS頁面佈局
一、頁面佈局的方式
1、標準流
2、浮動流
3、定位流
二、標準流
# 1、標準流是瀏覽器預設的排版方式
# 2、標準流的排版方式有兩種，垂直和水平
三、浮動流
1、什麼是脫離文件流
"""
標籤懸浮起來，可以理解為Z座標增大，不再受到平面的制約，可以設定大小，原來所在的文件位置空了出來，會被垂直方向上的其他標籤佔據。
懸浮以後，只能一直向左或者向右，直到遇到另一個標籤停下，無法設定具體的位置，意味著此，如果改標籤有父標籤，之前設定的margin: 0 auto(自動居中)將會失效。
"""
2、什麼是半脫離文件流
"""
標籤浮動後的位置取決於他之前在文件中的位置：
1、同一方向上，誰先浮動，誰在前面
2、不同方向上，左浮動找左浮動，右浮動找右浮動
"""
3、浮動元素貼靠問題
<--
當父元素的寬度足夠顯示所有元素時，浮動的元素就會並列顯示
當父元素的寬度不足夠顯示所有元素時，浮動的元素就貼前一個元素，如果還不夠，就會再貼前一個元素直到貼到父元素左邊，此時無論是否寬度足夠都會在這一行顯示了
沒有浮動的文字、圖片、超連結等元素會給浮動的元素讓位置，並圍繞在浮動元素的周圍
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動貼靠</title>
<style>
.d1 {
width: 500px;
height: 500px;
background-color: red;
}
.d2 {
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.d3 {並列的情況
width: 300px;
height: 300px;
background-color: green;
float: left;
}
.d3 {貼靠的額情況
width: 400px;
height: 400px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
</html>
4、浮動造成父標籤塌陷的問題
1、父標籤如果沒有設定大小，則其大小取決於子標籤的額大小
2、如果字標籤浮動，則父標籤再次回到沒有大小的狀態
-->
<!--
1、給父標籤設定大小(不靈活)
=================================================================================
2、清除浮動方式二：
clear : none | left | right | both
注意：clear這個屬性必須設定在塊級、並且不浮動的元素中
取值：
none : 預設值。允許兩邊都可以有浮動物件
left : 不允許左邊有浮動物件
right : 不允許右邊有浮動物件
both : 不允許左右有浮動物件
把握住兩點：
1、元素是從上到下、從左到右依次載入的。
2、clear: left;對自身起作用，而不會影響其他元素。一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據這一點解決父級塌陷問題。
=================================================================================
3、清除浮動的方式三：隔牆法
外牆法
在兩個盒子中間新增一個額外的塊級元素
給這個額外新增的塊級元素設定clear：both；屬性
注意：
外牆法它可以讓第二個盒子使用margin-top屬性
外牆法不可以讓第一個盒子使用margin-bottom屬性，所以我們通常用牆的高度作margin的替代品
內牆法
在第一個盒子中所有子元素最後新增一個額外的塊級元素
給這個額外新增的塊級元素設定clear：both；屬性
注意：
內牆法它可以讓第二個盒子使用margin-top屬性
內牆法可以讓第一個盒子使用margin-bottom屬性
內牆法與外牆法的區別？
1、外牆法不可以撐起第一個盒子的高度，而內牆可以
2、在企業開發中清除浮動，內牆法與外牆法都不常用，因為新增一個無用的牆
在前端開發中推崇結構與樣式分離，而隔牆法需要新增大量的沒有意義的空標籤div
=================================================================================
4、偽元素+clear
#通用寫法
.clearfix {
*zoom:1 <----相容ie6,否則偽類選擇器只能在谷歌瀏覽器中生效，其餘沒用
}
.clearfix:before,.clearfix:after {
content: " ";
display: table
}
.clearfix:after {
clear: both
}
整段程式碼就相當於在浮動元素前、後面跟了個寬高為0的空table，然後設定它clear:both來達到清除浮動的效果。
之所以用它，是因為，你不必在html檔案中寫入大量無意義的空標籤，又能清除浮動。
=================================================================================
5、清除浮動的方式五：
overflow:hidden，但其實它除了清除浮動還有其他方面的用途
#1、可以將超出標籤範圍的內容裁剪掉
#2、清除浮動
#3、可以通過overflow：hidden，讓裡面的盒子設定margin-top屬性後，外面的盒子不被頂下來，這樣就不用為外邊的盒子新增邊框了
一、css定位
1、相對定位（relative）
div {
position: relative;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
}
相對定位是相對於原始的位置定位的，沒有脫離文件流，同一方向上的屬性只能出現一個，若果設定了margin屬性，則是相對於原始的位置做出改動
2、絕對定位(absolute)
1、預設情況下，都是以body作為參考
2、絕對定位脫離了文件流
3、如果父級標籤中有已經定位過得標籤(相對、絕對、固定)，則以該標籤為準，有多個父級標籤都定位過得前提下，以最近的為準，進行絕對定位
4、如果一個絕對定位的元素是以body作為參考點, 那麼其實是以網頁首屏的寬度和高度作為參考點, 而不是以整個網頁的寬度和高度作為參考點，該標籤會隨著頁面的滾動而滾動
5、一個絕對定位的標籤會忽略父級標籤的padding屬性
6、絕對定位後，margin：0 auto；不在生效，但是可以是使用以下方法居中
left: 50%;
margin-left: -元素寬度的一半px；
3、固定定位(fixed)
1、固定定位相對於瀏覽器當前頁面固定，不隨滾動條移動
2、固定定位脫離文件流
4、z-index
1、類似於z軸座標，越大，離使用者越近，前提是必須要定位
2、覆蓋效果取決於父標籤的z-index值大小，如果都一樣，在比較子標籤的，都相同的情況下，後面的覆蓋前面的
相關文章
- css介紹CSS
- CSS 建立介紹CSS
- 全面介紹JavaScript陣列方法JavaScript陣列
- 全面介紹 Lotus Quickr Portal 管理UI
- ASCII編碼的全面介紹ASCII
- CSS 文字格式介紹CSS
- CSS 簡單介紹CSS
- CSS counters 深度介紹CSS
- css url()用法介紹CSS
- css vm用法介紹CSS
- css簡單介紹CSS
- CSS3 介紹CSSS3
- 全面介紹 Linux 許可權Linux
- Oracle 10g Scheduler 全面介紹Oracle 10g
- CSS尺寸單位介紹CSS
- CSS設計模式介紹CSS設計模式
- CSS文件流通俗介紹CSS
- jQuery css()方法用法介紹jQueryCSS
- CSS OOCSS簡單介紹CSS
- CSS SMACSS簡單介紹CSSMac
- CSS BEM簡單介紹CSS
- CSS居中方案介紹CSS
- CSS3 Transition介紹CSSS3
- Base64編碼的全面介紹
- css樣式說明介紹CSS
- css em單位用法介紹CSS
- css transition屬性用法介紹CSS
- Unicode編碼解碼的全面介紹Unicode
- 常用前端佈局，CSS技巧介紹前端CSS
- css 註釋用法簡單介紹CSS
- css註釋妙用簡單介紹CSS
- css :focus選擇器用法介紹CSS
- css3 vw和vh介紹CSSS3
- css3 pointer-events 介紹CSSS3
- css border屬性簡單介紹CSS
- 一份儘可能全面的Go channel介紹Go
- MySQL全面瓦解22：索引的介紹和原理分析MySql索引
- Android IntentService使用全面介紹及原始碼解析AndroidIntent原始碼