web前端---css（2）
阿新 • • 發佈：2017-10-13
自動 col fixed table 路徑 排列 inpu rgba 內聯對象
第一章 css的四種引入方式
1.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
<p style="background-color: rebeccapurple">hello yuan</p><strong><br></strong>
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。
<head>
<meta charset="
3.鏈接式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中。
<style type="text/css"> @import"mystyle.css"; 此處要註意.css文件的路徑 </style>
註意：
導入式會在整個網頁裝載完後再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是鏈接式的優點。
二 CSS的常用屬性
1 顏色屬性
| 1 2 3 4 5 6 7 |
<div style="color:blueviolet">ppppp</div>
<div style="color:#ffee33">ppppp</div>
<div style="color:rgb(255,0,0)">ppppp</div>
<div style="color:rgba(255,0,0,0.5)">ppppp</div>
|
2 字體屬性
| 1 2 3 4 5 6 7 |
font-size: 20px/50%/larger
font-family:‘Lucida Bright‘
font-weight: lighter/bold/border/
<h1 style="font-style: oblique">老男孩</h1>
|
3 背景屬性
background-color: cornflowerblue background-image: url(‘1.jpg‘); background-repeat: no-repeat;(repeat:平鋪滿) background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom) 簡寫：<body style="background: 20px 20px no-repeat #ff4 url(‘1.jpg‘)"> <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url(‘1.jpg‘)">
如下代碼所示：
背景屬性還會定義圖片的長和寬，是否重復，以及圖片的位置。
4.block和inline-block、inline
- block和inline這兩個概念是簡略的說法，完整確切的說應該是 block-level elements (塊級元素) 和 inline elements (內聯元素)。block元素通常被現實為獨立的一塊，會單獨換一行；inline元素則前後不會產生換行，一系列inline元素都在一行內顯示，直到該行排滿。
- 大體來說HTML元素各有其自身的布局級別（block元素還是inline元素）：
- 常見的塊級元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
- 常見的內聯元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
- block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要註意的是這個是個大概的說法，每個特定的元素能包含的元素也是特定的，所以具體到個別元素上，這條規律是不適用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
- 一般來說，可以通過display:inline和display:block的設置，改變元素的布局級別。
二者的區別：
- display:block
- block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。
- block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨占一行。
- block元素可以設置margin和padding屬性。
- display:inline
- inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
- inline元素設置width,height屬性無效。
- inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
- display:inline-block
- 簡單來說就是將對象呈現為inline對象，但是對象的內容作為block對象呈現。之後的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
5.position定位
position 屬性把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
可能的值如下表所示：
| 值 | 描述 |
|---|---|
| static | 默認。位置設置為 static 的元素，它始終會處於頁面流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 聲明）。 |
| relative | 位置被設置為 relative 的元素，可將其移至相對於其正常位置的地方，因此 "left:20" 會將元素移至元素正常位置左邊 20 個像素的位置。 |
| absolute | 位置設置為 absolute 的元素，可定位於相對於包含它的元素的指定坐標。此元素的位置可通過 "left"、"top"、"right" 以及 "bottom" 屬性來規定。 |
| fixed | 位置被設置為 fixed 的元素，可定位於相對於瀏覽器窗口的指定坐標。此元素的位置可通過 "left"、"top"、"right" 以及"bottom" 屬性來規定。不論窗口滾動與否，元素都會留在那個位置。工作於 IE7（strict 模式）。 |
web前端---css（2）