css是cascading style sheet 層疊樣式表
作用:用於美化html頁面
三種新增方式:
1. 內聯:在標籤的style屬性中新增css樣式** , 弊端:不能復用
2. 內部:在head標籤裡面新增style標籤, 在標籤體內通過選擇器選擇到元素之後給元素新增樣式, 能復用但是只能在當前頁面復用
3. 外部:在單獨的css檔案中寫樣式**, 在html頁面中通過link標籤引入, 可以實現多頁面復用工作中外部樣式 使用最多, 可以實現多頁面復用,而且可以將css樣式**和html**分離開 便於維護優先順序: 內聯優先順序最高, 內部和外部優先順序相同後執行覆蓋先執行的
選擇器1. 標籤名選擇器
格式: 標籤名
2. id選擇器
格式: #id
3. 類選擇器
格式: .class
4. 分組選擇器
格式: div,#id,.class
5. 任意元素選擇器
格式: * 選取頁面中所有的元素
6. 屬性選擇器
格式: 標籤名[屬性名='值'] 通過元素的屬性選擇元素
7. 子孫後代選擇器
格式: div div span 匹配div裡面的div裡面的所有span 包括後代
8. 子元素選擇器
格式: div>div>span 匹配div裡面的div裡面的子元素span 不包括後代
9. 偽類選擇器
選擇的是元素的狀態: 未訪問狀態/訪問過狀態/懸停狀態/點選狀態
顏色賦值
三原色:紅綠藍 rgb red green blue 0-255
賦值方式:
顏色單詞賦值:red/yellow/blue/pink.....
6位16進製制賦值:#ffff0000 每兩位表示乙個顏色
ffff ->2553位16進製制賦值:#f00 等效ffff0000
3位10進製賦值:rgb(255,0,0)
4位10進製賦值:rgba(255,0,0,0-1) a=alpha 透明度 值越小越透明
背景background-image:url(路徑); 設定背景
background-size: 寬度 高度(畫素); 設定背景的尺寸
background-repeat: no-repeat; 禁止重複
background-position: 橫向和縱向偏移畫素或百分比
文字和字型相關樣式
text-align: left/right/center; 水平對齊方式
text-decoration: overline/underline/linethrouth/none; 文字修飾
color:red; 字型顏色
line-height:20px; 行高,多行控制行間距 單行控制垂直居中
text-shadow: 顏色 x偏移值 y偏移值 濃度; 設定陰影
font-size:20px; 設定字型大小
font-weight: bold加粗/normal去掉加粗;
font-style:italic; 斜體
font-family: ***,***,***; 設定字型
font: 字型大小 字型名稱;
元素的顯示方式display
block: 塊級元素, 特點: 獨佔一行,可以修改寬高 , 如:h1-h6,p,div等
inline: 行內元素, 特點: 共佔一行,不能修改寬高 , 如:span,b,i,超連結a等
inline-block: 行內塊元素, 特點: 共佔一行,可以修改寬高, 如: img,input等
* 外邊距：元素距上級元素或者兄弟元素之間的距離
* 賦值方式：margin-left/top/bottom/right:20px;單獨給某乙個方向新增外邊距
margin：20px;給四個方向都新增
margin：20px 40px;上下20px 左右40px
margin:0 auto;左右居中
margin：10px 20px 30px 40px 上右下左 順時針
* 上下相鄰都加外邊距，取二者中最大值；
* 左右相鄰都新增外邊距，取二者之和。
* 行內元素新增上下外邊距無效
* 粘連問題：當元素上邊緣和上級元素上邊緣重疊時給元素上外邊距會出現粘連文題，給上級元素新增
overflow: hidden;
可解決。
* 賦值方式：border-left/top/bottom/right:1px solid red;單獨給乙個方向新增
border：1px solid red;給四個方向新增
* 圓角：border-radius：10px; 值越大越遠，當寬高相等時，超過寬高一半為正圓
元素邊緣距內容的距離padding
1. 繼承性: 元素可以繼承上級元素文字和字型相關的樣
式, 個別元素自帶效果不受繼承影響,
比如: 超連結字
體顏色, h1-h6字型大小
2. 層疊性: 多個選擇器有可能選擇到同乙個元素, 如果作
用的樣式不同,多個樣式全部層疊生效,
如果作用的樣
式相同 則由選擇器的優先順序決定
3. 選擇器優先順序: 作用範圍越小優先順序越高
id>class>標籤名》繼承
* 五種定位方式（4+1）
* 靜態定位+相對定位+絕對定位+固定定位
* 浮動定位
* 格式：position：static（由於靜態定位是預設值，可以不寫）
* 靜態定位也叫做文件流定位
* 靜態定位的特點：元素左上為基準，塊級元素從上往下排列，行內元素從左向右排列
* 通過外邊距控制元素的位置
* 格式：position：relative；
* 相對定位特點：元素不脫離文件流（元素改成相對定位後不管元素顯示到什麼位置，仍然佔著原來的位置）
* 通過left/right/top/bottom讓元素相對於初始位置做偏移
* 應用場景：當需要移動某一元素並且其他元素不受到影響時，使用相對定位
* 格式：position：absolute；
* 絕對定位特點：元素脫離文件流，（元素修改為絕對定位後會讓出所佔位置，後面 的元素會頂上來）
* 通過left/right/top/bottom讓元素相對於視窗位置或上一級元素做偏移，絕對定位座標預設相對於視窗
* 如果絕對定位需要相對某個上級元素時，需要在上級元素中新增position：relative
* 應用場景：需要將某個元素進行位置偏移，並且不希望元素仍然佔著原來的顯示位置時使用絕對定位
* 格式：position：fixed;
* 顯示特點：元素脫離文件流
* 通過left/right/top/bottom讓元素相對於視窗做位置偏移
* 應用場景：當元素需要固定在視窗的某個位置時使用
* 格式：float：left/right;
* 顯示特點：元素脫離文件流（不佔原來的位置），元素從當前所在行向左或向右浮動，當撞到上級元素邊緣或者其他浮動元素邊緣時就停止（浮起來的元素不會重疊）
* 浮動定位一行裝不下時會自動換行，換行時有可能被卡住
* 如果乙個元素的所有子元素都浮動了，那麼它的高度自動識別就為0了，因為浮動元素脫離文件流了。如果該元素後面的元素再頂上來就會被浮動元素遮蓋發生顯示異常，給上級元素（高度識別為0的元素）新增overflow:hidden解決此問題。
未加 overflow:hidden;
加 overflow:hidden;之後
* 應用場景：當需要將縱向排列的元素橫向排列時
* visible超出部分依然顯示（預設）
* hidden 超出部分隱藏，解決粘連問題和高度識別為0的問題
* scroll 超出部分滾動顯示
* baseline 基線對齊（預設）
* top 頂部對齊
* middle 中間對齊
* bottom 底部對齊
* 當多個元素設定絕對定位或者相對定位的時候可以實現元素層疊的效果，通過 z-index 可以靈活控制元素現實的層級（預設顯示層級按照新增順序）
* z-index 值越大 顯示層越靠前 例如：z-index : 2;
2.不是img標籤而是背景 , 在上右鍵->檢查 從樣式列表中找到路徑 在上面右鍵 copy linkaddress
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS 學習筆記
當同乙個html元素被不止乙個樣式定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中，其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此，內聯樣式 在html 元素內部 擁有最...