技術標籤：htmlcss

CSS的引用：

內嵌css

第一種方式：在標籤內部使用：
<p class="secondP" style="color: red;font-size: 60px">我是第二個</p>

內部css

第二種方式：
使用style標籤，引用css，在head的後面使用
<style>css</style>

外部css：

第三種方式：
使用<link rel="stylesheet" href="index.css">
標籤，引入外部的css

img標籤比較特殊

img標籤的屬性width和height，和他的css：width，height 屬性和css名稱一樣，當屬性寬高和css的寬高同時存在是，css將約束標籤的寬高，而屬性不起作用

內嵌的css的優先順序最高

內部和外部引用的css，誰後載入，就用誰

背景：

background:url("timg.jpg")   white     no-repeat 1px              2px;
			背景圖片          背景顏色    平鋪      1px代表x軸       2px代表y軸
 

選擇器：

*{    
	font-size: 20px;   全域性選擇器，整個頁面所有標籤都遵循這個css
}
p,div{    所有的p標籤和所有的div
            color: #4a74d8f0;/*color：字型顏色*/
            font-size: 20px;
        }
        div p{   選擇到所有的div標籤包含的p標籤
            color: black;
        }
		div>p{  選擇父元素為div的所有的p標籤
            color: blue;
        }
		div+p
 
{   選擇所有div之後的p標籤
            color: palevioletred;
        }
		p[class]{   選擇所有有class屬性的p標籤
            color: violet;
        }
		p[class=firstP]{   選擇所有class等於firstP屬性的p標籤
            color: violet;
        }
偽類選擇器
    p:hover{   當滑鼠懸停到標籤上時觸發的選擇器，滑鼠移開恢復原樣

    } 
	input:focus{   當input標籤被選擇，出現可以輸入的游標時觸發的選擇器，失去焦點時，恢復原樣
            height: 100px;
        }

浮動float和display：

標準文件流：頁面中元素按照其原有的特性進行排列

脫離標準文件流：給塊狀元素添加了浮動之後，塊狀將不會按照標準文件的排列順序進行排列，而會進行位置移動

當需要讓塊狀元素排成一行時，可以給塊狀元素新增float的css，這樣這些塊狀元素將脫離標準文件流，並且排成一行，同時他也會覆蓋掉標準文件的標籤

float:left;    讓塊狀元素向左浮動，添加了float屬性後，塊狀元素將脫離標準文件流
clear:both;    清除浮動，清除的是該元素的四周的浮動屬性與該元素的影響

dispaly 屬性
/*將塊狀元素轉換為行內元素*/
display: inline-block;/*行內塊狀元素：有行內元素的特性：不主動換行；又有塊狀元素的特性：可以設定寬高*/

display: block;/*block：將一個行內元素轉換為塊狀元素*/

display: none;/*當使用display為none時，該標籤不會被顯示在頁面中*/