CSS的學習

CSS學習

1.CSS英文全稱是：Cascading Style Sheets 中文名叫層疊樣式列表
2.CSS作用
1、結構與樣式分離的方式，便於後期的維護和修改
2、可以用多套樣式，使網頁有任意樣式切換的效果
3、使得頁面載入的更快，降低伺服器的成本
3.樣式分類分為：外部樣式、內部樣式和行內樣式 – css檔案是以css為字尾！
內部樣式：

外部樣式：

外部樣式：外部樣式就是新建一個文件，裡面全寫css，然後通過link 插入到html程式碼中
作用：使得網頁的表示層和結構層能夠進行徹底分離

行內樣式：

4、背景樣式 background
1、background-color 顏色值 顏色作為背景顏色
2、background-image 圖片位置 圖片作為背景圖片
3、background-repeat repeat repeat-x repeat-y no-repeat 背景圖片的重複方向
4、background-attachment scroll fixed 背景是否隨著滾動條滾動
Fixed 文字滾動，背景圖片不隨著滾動
scroll 背景圖片隨著文字一起滾動
5、background-position 背景影像的起始位置
background-position屬性列表
1、 top left ,top center ,top right ,center left,center center,center right,bottom left,bottom center,bottom right
如果只定義了一個值，那麼第二個值將是center
預設值 0% 0%
2、x% y% 第一個值是水平 第二個值是垂直
左上角：0% 0% 右下角：100% 100%
如果規定了一個值另一個值就是50%
3、 apx bpx 第一個值是水平位置，第二個值是垂直位置。
左上角：0px 0px 右下角：100px 100px
如果規定了一個值另一個值就是50%
6、background 背景樣式的值是複合了屬性值的組合 1 2 3 4 5
7.顏色設定 color 單詞、16進位制、rgb
1、 lightgreen lightpink 英文單詞
2、 #000000 紅綠藍 #ff0000 #00ff00 #0000ff
3、 rgb(255,0,0) 紅綠藍 rgb(0,255,0) rgb(0,0,255)
8.文字樣式：對齊方式，文字修飾，文字轉換，文字縮排
作用：美化 修飾頁面的文字部分下相關內容
文字樣式的屬性：
color 表示顏色的內容 設定文字顏色
direction ltr rtl 文字的方向/書寫的方向
letter-spacing npx(注意：n可以是負數) 字元間距
line-height npx 行高（行間距）
text-align left,right ,center, justify（兩端對齊)
direction ( ltr rtl)和ltext-align的區別
1、 如果是字母和漢字的話，兩者的效果是一摸一樣的
2、 是否針對阿拉伯數字
direction （ ltr rtl）改變的不是順序，而是書寫的順序，從右往左寫的
文字修飾：
1、text-decoration none,underline,overline,line-through 文字的修飾：下劃線
2、text-shadow h-shadow v-shadow blur color 文字設定陰影
3、text-transform none,capitalize,uppercase,lowercase 改變字母大小寫
4、text-indent npx,nem（em表示字元單位） 首行縮排
字型樣式：
font系列
1、font-family ；隸書、宋體、楷體等字型 設定字型
2、font-style normal italic oblique 規定斜體的文字
3、Font-weight normal bold 100-900 文字加粗
4、font-size npx 字型大小
列表樣式
1、list-style-type none,disc,circle,square,decimal…. 設定列表專案的外觀
2、list-style-position inside,outside 列表符號的位置
3、list-style-image url,none 把圖片設定為列表專案的標記
4、list-style 同前面三個 簡寫屬性，涵蓋以上三個列表樣式屬性

偽類樣式：
偽類：
通常情況下超級連結上設定的樣式稱為偽類，偽類包含兩種：1、狀態偽類 2、結構性偽類
設定超級連結的幾種狀態
注意點：
1、 偽類是用在超級連結上的效果比較多
2、 但是超級連結不是偽類
3、 偽類是選擇器
偽類選擇器
1、a:link 未訪問的連結
2、a:visited 已經訪問過的連結
3、a:hover 滑鼠移動到連線上（浮動，懸停）
4、a:active 向被啟用的元素新增樣式
5、:focus 選擇擁有鍵盤輸入焦點的元素
結構性偽類
1、:first-child 選擇元素的第一個子元素
2、:last-child 選擇某個元素的最後一個子元素
3、:nth-child(n) 選擇某個元素的一個或者多個特定的子元素
4、:nth-last-child(n) 選擇某個元素的一個或者多個特定的子元素 從這個元素的最後一個子元素開始
5、:first-of-type 選擇一個上級元素下的第一個同類子元素

偽元素選擇器：
1、::selection 選擇指定元素中被使用者選中的內容
2、::before 可以在內容之前插入新的內容
3、::after 可以在內容之後插入新的內容
4、::first-line 選擇指定選擇器的首行
5、::first-letter 選擇文字的第一個字元
Css其他選擇器
1、id * 選擇指定元素中被使用者選中的內容
2、逗號選擇器 , 聯合選擇器
3、空格選擇器 子孫（後代）選擇器
4、> 選擇器 子選擇器（不是子孫後代）
5、+ 選擇器 同輩，兄弟選擇器
6、[] 屬性選擇器

選擇器的優先順序
1、！important
2、行內樣式
3、ID
4、類 class
5、標籤
6、萬用字元 *
7、瀏覽器預設屬性

DIV
1、層疊樣式表中的定位技術，全稱 DIVision
2、有時候將div稱為"圖層"，更多稱為"塊"，稱為容器
div樣式設定
1、 div的大小 背景設定 width height px %
2、 div溢位效果演示、換行、滾動條顯示
3、 div的邊框，輪廓設定
4、 盒子模型
div溢位效果演示
1、 超出div的寬度和高度的文字或圖片進行隱藏處理
2、 超出div的寬度和高度的文字或圖片增加滾動條
overflow的設定
1、visible 預設值，內容不會被修剪，會呈現在元素框之外
2、hidden 超出的部分進行隱藏
3、scroll 不論是否需要，都顯示滾動條
4、auto 按需顯示滾動條以便檢視其餘的內容
eg：


絕對定位：
position: absolute; 參照物是參照父元素進行偏移
top: 150px;（距父元素上方偏移150px）
left: 150px;（距父元素左方偏移150px）
div的輪廓
設定div的邊框包括2部分：
1、 輪廓
2、 邊框
css輪廓 outline
作用：繪製於元素周圍的一條線，位於邊框的邊緣的外圍，可起到突出元素的作用
1、 dashed 虛線輪廓
2、 dotted 點狀輪廓
3、 solid 實線
4、 double 雙線
5、 none 無
css邊框
1、border-left （左） border-right（右） border-top（上） border-bottom（下）
2、作用：設定DIV的邊框的邊線寬度，顏色，虛線，實線等樣式css屬性
border-bottom （簡寫屬性，用於把下邊框的所有屬性設定到一個宣告中）
1、solid 設定下邊框為實線
2、none 無
3、double 雙線邊框
border 簡寫屬性在一個宣告設定所有的邊框屬性。

可以按順序設定如下屬性：
border-width（規定邊框的寬度）
border-style（規定邊框的樣式）
如果希望為元素框的某一個邊設定邊框樣式，而不是設定所有 4 個邊的邊框樣式，可以使用下面的 單邊邊框樣式屬性：
border-top-style
border-right-style
border-bottom-style
border-left-style
或者
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}（必須把單邊屬性放在簡寫屬性之後。因為如果把單 邊屬性放在 border-style 之前，簡寫屬性的值就會覆蓋單邊值 none。）
這兩種方法是等價的
border-color（規定邊框的顏色）
如果不設定其中的某個值，也不會出問題，比如 border:solid #ff0000; 也是允許的。
盒子模型：是用來改變 間距的，外邊距，內邊距，是css裡面一門非常重要的技術-div table body等 的塊級元素都可以使用上面的盒子模型
屬性
1、 width height border margin padding
2、 示例：
margin:10px(上) 10px(右) 10px(下) 10px(左)
margin -left margin -right margin -top margin –bottom
margin是物件和物件之間的距離

padding:10px(上) 10px(右) 10px(下) 10px(左)
padding -left padding -right padding -top padding–bottom
內邊距就是物件內部，文字和邊框之間的距離就是padding

Padding多出的部分由哪裡產生的：
box-sizing
1、content-box 在寬度和高度之外繪製元素的內邊距和邊框 – 預設溢位的效果
2、border-box 已設定的寬度和高度分別減去邊框和內邊距才能得到內容的高度和寬度
eg：

定位機制 （標準）文件流 脫標流（float position：absolute）
文件流特點：
1、空白摺疊現象
2、高矮不齊，底邊對齊
3、自動換行，一行寫滿，換行寫
浮動：
Float屬性設定
1、left 元素向左浮動
2、right 元素向右浮動
3、none 預設值，不浮動
eg：
沒有浮動


有浮動


float的包裹特性和奔潰特性
奔潰：float作為父級元素的時候，父級元素的高度發生了奔潰。
奔潰 破壞 崩塌 父級元素的高度發生了奔潰
奔潰效果

元素設定了浮動之後，父元素如果不設定高度之後會出現崩潰的效果。
清除浮動 – 為什麼清除浮動
a. 為了父元素不會出現“高度崩塌”
b. 如果強制規定外層容器的尺寸，則會顯得不那麼靈活，高度不能自動適應了
c. 從某個元素開始，不會在需要浮動效果了

eg：無清除浮動


有清除浮動



包裹


定位：
具體分類
position:
1、relative – 相對定位
2、absolute – 絕對定位
3、static – 無定位 – 預設
4、fixed – 固定定位
相對定位
1、相對定位的偏移參考元素是元素本身，不會使元素脫離文件流，元素的初始位置佔據的空間會被保留。
2、position:relative
相對定位的偏移是自己之前的位置作為參照進行的一個偏移
相對定位不作為元素單獨顯示出來，而是作為父容器去包含其他元素而使用
子絕父相 – （子元素設定絕對定位，父元素設定相對定位）
3、還是標準文件流，沒有破壞文件流

絕對定位破壞了標準的文件流，所以最後呈現出來的只有綠色，網頁呈現效果是根據程式碼順序執行的，相當於三個位面，綠色覆蓋在了最上方，絕對定位相對於已定位的最近的祖先元素進行偏移，如果沒有已定位的最近的祖先元素一般以body為參照物進行偏移。
浮動和絕對定位，絕對定位破壞了標準文件流，和文字不在同一個平面，會覆蓋文字，浮動是包裹 浮動和相對定位一般相互配合，兩個平級配合使用，可以縮減文字和圖片之間的距離
絕對定位和浮動


相對定位和浮動


固定定位
概念：相對於瀏覽器視窗定位
Position：fixed


border-radius: 30px/40px;
將方塊削成圓形，圓滑稜角的屬性 水平半徑/垂直半徑