2018.10.24 下午 css學習2
行內樣式表：<div style="color:red；">今天是公元2018年10月24日程式設計師的節日</div> //書寫方便權重高
內部樣式表：就是我們經常使用的 在<head>裡面進行使用的
<style><div style="color:red；"></style> //部分結構和樣式相分離 可以控制一個介面
外部樣式表：就是把html和css分離開來 //完全實現結構和樣式相分離 可以控制多個介面
<head><
塊級標籤顯示模式：
每個塊級元素通常都會獨自佔據一整行或者多行，常用於網頁的搭建
常見的塊級標籤元素：<h1>~<h6> <p> <div> <ul> <li> <ol>
行內元素：
行內元素不佔單獨的區域，靠自身的字型和影象來進行支撐結構，一般不可以設定寬度，高度，對其等屬性，常用於控制文字中的樣式
常見的行內樣式有 a strong b em i del s ins u span等屬性 但是 span是最常用的
特點：1.和相鄰的行內元素在一行上
2.高，寬無效，但是水平方向的padding和margin可以設定，垂直方向的無效
3.預設的寬高就是他自己的本身內容的寬高。
4.行內元素只能容納文字或者其他行內元素 （a特殊）
行內塊元素：
在行內元素中有幾個比較特殊的標籤---<img />,<input />,<td>可以對他們進行設定寬高和對其屬性
特點：就是有塊級元素的特點也有行內元素的特點
顯示模式的轉換：
塊轉行內：display:inline
行內轉換成塊級：dispaly:block
行內元素標籤轉換成行內塊元素：display:inline-block //既可以在一行上又有大小
交集選擇器：<p class="red">好睏好想睡覺啊</p> <style>p.red { font-size: 50px;}</style> //這是一個即又的關係的關係
並集選擇器：.one,p,#test,h1 {color:green;} //字面意思就是這些標籤裡面的內容的最終展現的樣式是一樣的
後代選擇器：<div><p>諸葛亮</p></div> <style>div p{color:yellow}</style> //這樣就只把div裡面的p標籤進行相應的樣式顯示了
子元素選擇器：大於號 子元素選擇器 只選擇親兒子 .nav>li {} //只對親兒子有作用 孫子什麼的都不起作用
屬性選擇器：選取某些標籤帶有特殊屬性的選擇器 我們稱為屬性選擇器
<a href='#' title="我是百度的連結">百度一下，你就知道</a> //這樣滑鼠移動到這個連結的位置就會彈出這個提示框
<style> a[title] {color : red} </style> //這樣就把相應的樣式選擇出來了
<style> input[type=text] {color:blue} </style> //這樣也就把相應的type="text" 的選擇出來了
<style> div[class^=font ] { color:yellow} </style> // ^= 表示以font開頭就會選擇出來了
<style> div[class$=footer ] { color:yellow} </style> // $= 表示選擇以footer結尾的標籤內容
<style> div[class*=tao ] { color:yellow} </style> //帶有tao字的都會選擇出來
偽元素選擇器：
首先進行復習一下： .demo 是類選擇器 ：demo 是偽類選擇器 ::demo 是偽元素選擇器
1 p::first-letter { color:red; font-size:50px;} //用來選擇第一個字
2 p::first-line { color:green; } //選擇第一行
3 p::selection {color:pink;} //讓選中的字變粉紅色
4 <div>今年</div>
5 <style> div::before {content:"我"} div::after{content:"18歲"}</style> //結果就會輸出 我今年18歲了
//註釋：before會在div前面進行插入 after會在div後面進行插入
css背景（background）
設定背景圖片是否平鋪：
<style>
background-image:url(image/1.jpg) //這是背景圖片
background-repeat: no-repeat //這是設定沒有平鋪 預設是repeat設定有平鋪的 repeat-x設定橫向平鋪 repeat-y設定設定縱向平鋪
</style>
設定背景的位置：
background-position: right bottom ; //這樣就移動到右下角了 方位名詞是沒有順序的 誰在前面都行
top//往上面 left//往左 right//往右 bottom//往下 center//居中 就是有分為水平和垂直兩個方向上的
background-position: right ; //如果方位名詞致謝一個話 另外一個名詞則預設為center
還可以利用精確單位來進行：這裡要注意的是出現了精確的座標 第一個值一定是 水平座標 第二個值一定是垂直座標
background-position:10px,30px
設定圖片是否滾動：background-attachment: scroll; //預設是scroll的 fixed//表示固定的
背景圖片的簡寫方式：
background: #000 url() no-repeat fixed center -25px
背景半透明： <div>background:rgba(0,0,0,0.5)</div> //設定div盒子為半透明
背景縮放：background-size:100px ; //我們儘量只改變一個值 防止縮放失幀扭曲
background-size:50% ; //圖片只改變為原來背景的一半的大小
background-size:cover ; //圖片自動縮放比例，保證圖片始終填滿整個背景區域，如果有溢位則會被隱藏
background-size:contain ; //圖片自動縮放比例，保證圖片始終在完整的顯示在背景區域
多背景圖片：有兩張圖片的時候一定要把背景顏色放倒第二張圖片那裡面
***一個元素可以設定多張背景圖片
***魅族屬性使用逗號分隔
***如果圖片之間存在交集，則前面的圖片會把後面的背景圖片進行覆蓋
***為了避免背景色把影象覆蓋住，背景色通常都定義在最後一組上
div{
background:url(image/1.jpg) no-repeat left top, //兩張圖片的時候用逗號進行隔開
background:url(image/2.jpg) no-repeat right bottom hotpink; //注意：有兩張圖片的時候 背景顏色一定要寫在第 二張圖片裡面
}
凹凸文字效果：
凸起效果：div { text-shadow:1px 1px 1px #100, -1px.-1px 1px #fff ； } //就是設定左邊是白色的 右邊是黑色的
凹下效果：div { text-shadow:-1px -1px 1px #100 , 1px 1px 1px #fff ; } //就是設定左黑右邊白的效果
文字修飾：
text-decoration:none//取消連結 的下劃線 就是取消文字裝飾 因為a標籤預設是有下劃線的