關于對CSS學習的總結
W3C
World Wide Web Consortium的縮寫，中文是W3C組織或者萬維網聯盟，
W3C標準或者叫web標準 web標準是一系列的標準，
結構層： HTML 用于描述網頁的展示結構；
表現層： CSS 用于修飾裝飾網頁的美觀度；
行為層: JavaScript 用于完成頁面的組件；
CSS
CSS是Cascading Style Sheet的縮寫，翻譯為“層疊樣式表”，簡稱“樣式表”，
主要用于修飾 html xhtml html5 xml 讓網頁有這種千變萬化的形式
語法：選擇符{屬性：值}
body{font-size:12px;}
CSS書寫的四種格式
選擇器：
- HTML標簽選擇器：在HTML頁面中使用的標簽，如果在CSS中被定義，那么此網頁的所有該標簽都將按照CSS中定義的樣式顯示，
- 類選擇器：使用HTML標簽的class屬性引入CSS中定義的樣式規則的名字，稱為類選擇器，class屬性指定的樣式名字必須是以“.”開頭，
- ID選擇器：ID屬性是用來定義某一特定的HTML元素，與class屬性剛好相反，class屬性是用來定義一組功能或格式相同的HTML元素，ID選擇器定義的CSS名稱必須以“#”開頭，
- 通用選擇器：是所有選擇器中最強大卻最少使用的，通用選擇器的作用就像是通配符，它匹配所有可用元素，
- 偽類選擇器：是指對同一HTML元素的各種狀態和其所包括的部分內容的一種定義方式，
Id的優先級高于class
1、內嵌式引入： 把style標簽嵌套在head標簽中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{font-size:36px;}
</style>
</head>
<body>
<p>一些老的<b>瀏覽器不支持 iframe，</b></p>
<p>如果得不到支持，iframe 是不可見的，</p>
</body>
</html>
2、行內樣式
<b style="font-size:56px;">瀏覽器不支持 iframe，</b>
3、外鏈樣式把css當成是一個檔案，通過link標簽引入到html中
<link rel="stylesheet" type="text/css" href="css/main.css">
4.、嵌入樣式內嵌和外鏈一種綜合性的使用，不太常用
<style type="text/css">
@import url("css/style.css");
</style>
樣式的顯示取決于距離，即顯示距離目標最近的樣式
可以連接多個html應用到html里面
行內樣式表、內嵌樣式表、外部樣式表各有優勢，實際的開發中常常
需要混合使用：
? 有關整個網站統一風格的樣式代碼，放置在獨立的樣式檔案*.css
? 某些樣式不同的頁面，除了鏈接外部樣式檔案，還需定義內嵌樣式
? 某張網頁內，部分內容”與眾不同“，采用行內樣式
CSS的特點：
1、繼承：
網頁中子元素，將繼承父元素的樣式
例如：要控制段落p中的文字大小，可以直接給body標記加樣式，
2、層疊：
網頁中子元素定義了與父元素相同的樣式，則子元素的樣式將覆寫掉父元素的樣式
后面定義的樣式，會覆寫前面定義的樣式，
常用樣式屬性：
| CSS | 說明 |
|---|---|
| 顏色 | color |
| 字體大小 | font-size |
| 字體 | font-family:Arial,‘宋體’ |
| 文本對齊 | text-align |
| 文本縮進 | text-indent：2em 可以為負值 |
| 行高 | line-height：150% line-height：1.5em |
| 字體粗細 | font-weight：normal[正常]bold[粗體] |
| 邊框樣式 | border-style |
| 邊框寬度 | border-width |
| 邊框顏色 | border-color |
| 上邊距 | top |
| 左邊距 | left |
| 寬度 | width |
| 高度 | hight |
| 背景顏色 | background-color |
| 背景圖片 | background-image |
? 語法說明
該語法中的4個屬性值可以任意選擇其中一個，其中，left代表左對齊方式；right代表右對齊方式；center代表居中對齊方式；
Text-align 它只能控制文本是否居中 不能控制div是否居中
如果想讓div居中 要通過盒子模型中margin:0 auto;
所有的網頁都要有hn標簽 利于搜索引擎搜索
text-indent：-9999em；去隱藏頁面的標題，
Text-transform 用于大小寫字母轉換
設定重復背景圖片——background-repeat
background-repeat:repeat|repeat-x|repeat-y|no-repeat
設定背景圖片位置——background-position
偽類
| 狀態 | 語法 |
|---|---|
| 未訪問鏈接 | a:link{color:#ff0000} |
| 已訪問鏈接 | a:visited{color:#00ff00} |
| 滑鼠移動在鏈接上 | a:hover{color:#ff00ff} |
| 滑鼠按下到鏈接上 | a:active{color:#0000ff} |
盒子模型
內邊距 padding 用于填充內容內部
外邊距 margin 用于描述瀏覽器邊緣到內容的之間的距離
邊框 border：1px solid black
像素值 實線 顏色
margin：100px 上下左右都是100px的距離
margin：100px 200px； 上下100px、左右 200px
margin：100px 200px 300px 上100px 左右 200px 下300px
margin：100px 200px 300px 400px 上、右、下、左
margin-top margin-left margin-right margin-bottom
邊框也適用于4個方向
塊狀元素和行內元素
塊狀元素 具有高度和寬度的屬性，但是它不允許其他元素和它同行顯示
代表標簽 div p 等等
塊狀元素的默認屬性： display:block;
行內元素 不具有寬度和高度的屬性 允許其他元素與其同行顯示
代表標簽 a span
行內元素的默認屬性 display:inline;
塊狀元素和行內元素之間可以進行轉換
Display：none 可以隱藏元素
設定盒子
1、在使用邊框顏色復合屬性border-color時，如果只設定1種顏色，則四條邊框的顏色一樣；設定2種顏色，則邊框的上下為一個顏色，左右為另一個顏色；設定3種顏色，邊框的顏色順序為上、左右、下；設定4中顏色，邊框的顏色順序為上、右、下、左，
2、邊框寬度屬性border-width是一個復合屬性，可以同時設定四條邊框的寬度，
3、border-style是一個復合屬性，其他4個都是單個邊框的樣式屬性，只能取一個值，而復合屬性border-style可以同時取一到4個值，下面分別說明border-style屬性的4個取值方法：
— 取一個值：四條邊框均使用這一個值，e:s
— 取兩個值：上下邊框使用第一個值，左右邊框使用第二個值，兩個值一定要用空格隔開，
— 取三個值：上邊框使用第一個值，左右邊框使用第二個值，下邊框使用第三個值，取值之間要用空格隔開，
— 取4個值：四條邊框按照上、右、下、左的順序來呼叫取值，取值之間也要用空格隔開，
布局
1、定位布局：
屬性：positon
描述：設定物件的定位方式
值：
static 靜態定位：頁面中的每一個物件的默認值，
absolute 絕對定位：將物件從檔案流分離出來，通過設定left、right、top、bottom四個方向相對于父級物件進行絕對定位，如果不存在這樣的父物件，則依據body物件，
relative 相對定位：物件不從檔案中分離，通過設定left，right，top，bottom四個方向相對于自身位置進行相對定位，
2、浮動布局：
浮動是css實作布局的一種方式，包括div在內的任何元素都可以以浮動的方式進行顯示，
基本語法：
float:left|right|none
left 表示浮動元素在左邊，是居左對齊的，
right 表示浮動元素在右邊，是居右對齊的，
none 表示不浮動，是默認值，
3、清除浮動
當元素有浮動屬性時，會對其父元素或后面的元素產生影響，會出現一個布局錯亂現象，可以通過消除浮動的方法來解決，浮動元素的影響，
清除：clear
基本語法
clear:left|right|both|none
left 表示不允許在某元素的左邊有浮動元素，
right 表示不允許在某元素的右邊有浮動元素，
both 表示在某元素左右兩邊都不允許有浮動元素，
none 表示在某元素左右兩邊都允許有浮動元素，
overflow
visible [默認值，不剪切內容也不添加滾動條]，
auto [在必需時物件內容才會被裁切或者顯示滾動條]，
hidden [ 不顯示超過物件的尺寸的內容]，
scroll [總是顯示滾動條]
3種隱藏元素的方法：
- display：none
- width：0 height0
- overflow:hidden
zoom
縮放：
normal：默認值，使用物件的實際尺寸
number：百分數 | 無符號浮點實數，浮點實數值為1.0或百分數為100%時相當于此屬性的normal值
zoom:1 解決ie6高度自適應問題
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/263832.html
標籤：其他
上一篇：flv.js 加載 Flv: Invalid audio packet, missing SoundData payload!