CSS 的基礎知識1

這兩天看了前端css的部份內容，真心讓我難受，太多的屬性記不住，唉！！因此纔想着把筆記記錄一下，方便之後用到查看。

CSS 指的是層疊樣式表，定義瞭如何顯示html屬性，樣式一般存儲到樣式表中。
外部樣式表一般存儲在css文件中：多個樣式可層疊爲一個。

css的基礎語法：

css規則是由兩個主要部分組成：選擇器，以及一條或多條聲明。
選擇器通常是須要改變樣式的html元素：每一個聲明由一個屬性和一個值組成。屬性是但願設置的樣式屬性，每一個屬性有一個值，屬性和值用冒號分開。
h1 ｛color ：red；font-size:14px；｝ ----------將h1元素內的文字顏色定義爲紅色，同時字體大小設置爲14px

屬性值除了英文表示外，還可使用16進製表示
當使用RGB百分比時，當值爲0時，也須要寫百分號，其餘狀況不須要。
p ｛color：rgb（100%，0%，0%）；｝

**若是值爲若干個單詞，須要加引號：
p{font-family:"sans serif";}

**多重聲明：就是有幾個聲明，以下所示：

p{
text-align:center; ------每行只描述一個屬性，增長樣式的可讀性
color :black;
font-family: arial;
}

css 高級語法：

選擇器的分組：對選擇器進行分組，使被分組的選擇器分享相同的聲明，用逗號分開選擇器。例如：
        h1,h2,h3,h4,h5,h6{
                color:green;
            }

**css派生選擇器是經過根據元素在其位置的上下文關係來定義樣式的。

**id選擇器
id選擇器是爲標有特定id的html元素指定特定的樣式，id選擇器以#定義
#red {color:red;}
#green {color :green;}

id選擇器和派生選擇器的關係：
1.id選擇器用於創建派生選擇器
#sidebar p{
font-style:italic;
text-align:right;
margin-top:0.5em;
}

#sidebar h2{
        font-size:1em;
        font-weight:normal;
        font-style:italic;
        margin:0;
        line-height:1.5;
        text-align:right;
   }
    此時，sidebar中的p和h2有別與其餘地方的此標籤元素。該位置的標籤元素作了特殊處理。

2.id選擇器單獨使用：
#sidebar {
border:1px dotted #000;
padding :10px;
}

**類選擇器
類選擇器是以 點號顯示的：
.center {text-align:center;}
***類名的第一個字符不能爲數字

類選擇器也能夠用做派生選擇器：
.fancy td {
color:#f60;
background:#666;
}

**屬性選擇器
對帶有指定屬性的html元素設置樣式，不只限與class和id屬性
1.屬性選擇器：
[title]
{
color:red;
}
2.屬性和值選擇器：
[title=hw]
{
border:5px solid blue;
}

3.屬性和值選擇器 ----多個值 title 中只要包含hello字符就設置樣式

[title ~=hello] {color :red;}  

    [lang | =en] {color:red;}

***設置表單的樣式，屬性選擇器在不帶class和id的表單設置樣式頗有用
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family:Verdana,Arial;
}

input[type="button"]
     {
        width:120px;
        margin-left:35px;
        display:block;
        font-family:Verdana,Arial;
     }

---

css樣式的建立：插入css樣式的方法有三種：
1.外部樣式表：
當樣式須要應用與許多的頁面時，採用外部樣式表
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
-----從外部引用一個css文件的樣式聲明來格式文檔

2.內部樣式表：
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>

3.內聯樣式：（慎用）
當樣式須要在一個元素上應用一次時能夠採用，可是慎用，由於表現和內容混雜在一塊兒，內聯樣式容易損失掉樣式表的許多優點
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
4.多重樣式：
若是某些屬性在不一樣的樣式表中被一樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來

外部樣式表：
h3{
color:red;
text-align:left;
font-size:8pt;
}

內部樣式表：
h3 {
text-align: right;
font-size: 20pt;
}

color: red; 
 ext-align: right; 
 font-size: 20pt;

***當外部和內部樣式表都有共同的屬性時，顏色屬性被繼承於外部樣式表，而文字排列和字體尺寸會被內部樣式表中的規則取代

---

css的背景：

能夠應用純色做爲背景，也可使用背景圖像建立至關複雜的效果

使用background-color 屬性數字背景色，能夠接收任何合法的顏色值

p {
background-color:green;
}

background-color 不能被繼承，默認值是transparent 透明的意思

背景圖像：
將圖像放入背景中，使用background-image 屬性，默認值爲none，表示沒有聽任何圖像

**若是須要設置一個背景圖像，必須爲這個屬性設置一個url值：
body {background-image: url(/i/eg_bg_04.gif);}
background-image 不能被繼承，全部的背景屬性都不能被繼承

背景重複：
若是須要在頁面上對背景圖像進行平鋪，可以使用background-repeat屬性
repeat屬性致使圖像在水平垂直方向上平鋪，repeat-x和repeat-y分別致使圖像只在水平和垂直方向上重複，no-repeat 不容許圖像在任何方向上平鋪

默認背景圖像從一個元素的左上角開始：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}

背景定位：
利用 background-position 屬性改變圖像在背景中的位置
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}

關鍵字：top、bottom、left、right和center以及使用長度值，如100px、5cm

關鍵字一般會成對出現，若是隻出現一個關鍵字，則另外一個是center

背景關聯：
若是文檔比較長，當文檔向下滾動時，背景圖像也會滾動，當文檔滾動超過圖像的位置時，圖像消失。
background-attachment屬性防止這種滾動，經過這個屬性，能夠聲明圖像相對於可視區是固定的（fixed）。
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}

background-attachment 屬性的默認值是scroll 。默認狀況下，背景隨着文檔滾動

**css的背景屬性：
background                   背景屬性設置在一個聲明中

background-attachment 背景圖像是否固定或者隨着頁面的其他部分滾動
background-color 設置元素的背景顏色
background-image 把圖像設置爲背景
background-position 設置背景圖像的起始位置
background-repeat 設置背景圖像是否及如何重複

css文本

css的文本屬性是對文本的外觀進行操做，如改變顏色、大小、字符的縮進等

縮進文本：
text-indent 屬性
p {text-indent :5em;}
通常來講，該屬性能夠爲全部塊級元素應用，可是沒法應用與行內元素，圖像之類的替換元素也沒法應用該屬性。
不過，若是一個塊級元素的首行中有一個圖像，則會隨着該行的其他文本移動。
若是想把一個行內元素的第一行「縮進」，能夠用左內邊距或外邊距創造這種效果

使用負值： 能夠實現「懸掛縮進」，即第一行懸掛在元素中餘下部分的左邊
p {text-indent:-5em;}
若是對一個段落設置了負值，那麼首行的某些文本可能會超出瀏覽器窗口的左邊界,爲了不該問題，須要再設置一個外邊距或一些內邊距：
p {text-indent:-5em; padding-left:5em;}

使用百分比值：
百分數相對於縮進元素父元素的寬度。若是縮進了20%，其父元素寬度也會縮進20%
div {width:500px;}
p {text-indent:20%;}
<div>
<p>this is a paragragh</p>
</div>
繼承：text-index能夠被繼承
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

***水平對齊：

text-align屬性
屬性值：left、right、center
<CENTER>不只影響文本，還會把整個元素居中，text-align 不會控制元素的對齊，只會影響內部內容
justify 是兩端對齊方式屬性

***字（單詞）間隔
word-spacing 屬性能夠改變字之間的標準間隔，默認值是normal 與0 同樣的含義
word-spacing 屬性接受一個正長度值或負長度值。若是提供一個正長度值，那麼字之間的間隔就會增長，反之，則拉近

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

letter-spacing 屬性是字母間隔，是數字和字母之間的間隔
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

***字符轉換：
text-transform 屬性 處理文本的大小寫
屬性值：none ---無任何操做
uppercase ---全大寫
lowercase --全小寫
capitalize ---只對每一個單詞的首字母大寫
h1 {text-transform: uppercase} ---對h1元素的內容全大寫

***文本裝飾：
text-decoration 屬性 ------它的值會替換而不是累積
屬性值： none --去掉原本的裝飾，恢復默認
underline --對元素加下劃線
overline ---在文本的頂端畫一個上劃線
line-through 在文本中間畫個貫穿線
blink ----讓文本閃爍

能夠結合多種裝飾使用；例如：
     a:link a:visited {text-decoration: underline overline;}   --超連接既有下劃線，又有上劃線

***處理空白符：
white-space 屬性 能夠處理字之間和文本行之間的空白符的方式

<p>This paragraph has many
spaces in it.</p>

p {white-space: normal;}

***當 white-space 屬性設置爲 normal 時，會合並全部的空白符，並忽略換行符

屬性值：
pre ----瀏覽器不會合並空白符，也不會忽略換行符
nowrap -----防止元素中的文本換行，除非使用了一個 br 元素
pre-wrap ----瀏覽器不只會保留空白符並保留換行符，還容許自動換行
pre-line ----瀏覽器會保留換行符，並容許自動換行，可是會合並空白符（和pre-wrap的區別）

***文本方向：
direction 屬性影響塊級元素中文本的書寫方向、表中列布局的方向、內容水平填充元素框的方向、以及兩端對齊元素中最後一行的位置
對於行內元素，只有當unicode-bidi 屬性設置爲embed或bidi-override 時纔會應用direction 屬性
屬性值：ltr和rtl ；；；默認值是ltr，顯示從左到右文本。rtl是從右往左顯示

css文本屬性：

    color               設置文本顏色
        direction           設置文本方向。
        line-height         設置行高。
        letter-spacing      設置字符間距。
        text-align          對齊元素中的文本。
        text-decoration     向文本添加修飾。
        text-indent         縮進元素中文本的首行。
        text-shadow         設置文本陰影。CSS2 包含該屬性，可是 CSS2.1 沒有保留該屬性。
        text-transform      控制元素中的字母。
        unicode-bidi        設置文本方向。
        white-space         設置元素中空白的處理方式。
        word-spacing        設置字間距。

---

css字體
定義了文本中字體的大小、粗細、風格等
font-family 屬性定義文本的字體

body {font-family: sans-serif;}

font-style 屬性 ---設置斜體文本
屬性值：normal ---文本正常顯示
italic --文本斜體顯示
oblique --文本傾斜顯示

字體變形：
font-variant 屬性 設定小型大寫字母 ---不一樣大小的大寫字母

p {font-variant:small-caps;}

字體加粗：
font-weight 屬性設置文本的粗細
屬性值：bold 粗體

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

字體大小：
font-size 設置文本的大小

***若是您沒有規定字體大小，普通文本（好比段落）的默認大小是 16 像素 (16px=1em)

css字體屬性：
font 簡寫屬性。做用是把全部針對字體的屬性設置在一個聲明中。
font-family 設置字體系列。
font-size 設置字體的尺寸。
font-size-adjust 當首選字體不可用時，對替換字體進行智能縮放。（CSS2.1 已刪除該屬性。）
font-stretch 對字體進行水平拉伸。（CSS2.1 已刪除該屬性。）
font-style 設置字體風格。
font-variant 以小型大寫字體或者正常字體顯示文本。
font-weight 設置字體的粗細。

---

css連接：
連接的四種狀態：
a:link - 普通的、未被訪問的連接
a:visited - 用戶已訪問的連接
a:hover - 鼠標指針位於連接的上方
a:active - 連接被點擊的時刻

規則：

a:hover 必須位於 a:link 和 a:visited 以後
a:active 必須位於 a:hover 以後

text-decoration 屬性大多用於去掉連接中的下劃線

background-color 屬性規定連接的背景色

---

css列表：

css列表屬性容許放置、改變列表項的標誌，或者將圖像做爲列表項標誌

列表類型：影響列表的樣式，最簡單的方法是改變其標誌類型

修改列表項的標誌類型：list-style-type屬性
   ul {list-style-type : square}

列表項圖像：
對各標誌使用圖像：list-style-image屬性

ul li {list-style-image : url(xxx.gif)}

列表標誌位置：list-style-position屬性

簡化列表樣式：

list-style屬性
li {list-style : url(example.gif) square inside}

list-style 的值能夠按任何順序列出，並且這些值均可以忽略。只要提供了一個值，其它的就會填入其默認值

css的列表屬性（list）：
list-style 簡寫屬性。用於把全部用於列表的屬性設置於一個聲明中。
list-style-image 將圖象設置爲列表項標誌。
list-style-position 設置列表中列表項標誌的位置。
list-style-type 設置列表項標誌的類型。

css表格
改善表格的外觀

表格邊框：
border屬性
table, th, td
{
border: 1px solid blue;
}
若是須要把表格顯示爲單線條邊框，請使用 border-collapse 屬性

摺疊邊框：
border-collapse 屬性將表格邊框摺疊爲單一邊框
table
{
border-collapse:collapse;
}

table,th, td
{
border: 1px solid black;
}
***若是沒有規定 !DOCTYPE，border-collapse 屬性可能會引發意想不到的錯誤

表格的寬度和高度：

width和height ---寬度和高度

table
{
width:100%;
}

th
{
height:50px;
}

表格的文本對齊：
text-align 和 vertical-align 屬性設置表格中文本的對齊方式

text-align 是水平對齊
vertical-align 是垂直對齊

表格的內邊距：
控制表格中內容和邊框的距離，爲td和th設置padding屬性：

td
{
padding:15px;
}

表格的顏色：

table, td, th
{
border:1px solid green;
}

th
{
background-color:green; --背景顏色
color:white;
}

css Table屬性：

border-collapse 設置是否把表格邊框合併爲單一的邊框。
border-spacing 設置分隔單元格邊框的距離。
caption-side 設置表格標題的位置。
empty-cells 設置是否顯示錶格中的空單元格。
table-layout 設置顯示單元、行和列的算法。

---

css輪廓:
輪廓outline 是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用。css outline 屬性規定元素輪廓
的樣式、顏色、寬度

css 邊框屬性：
outline 在一個聲明中設置全部的輪廓屬性。
outline-color 設置輪廓的顏色。
outline-style 設置輪廓的樣式。
outline-width 設置輪廓的寬度。

---

css框模型
css框模型規定了元素框 處理元素的內容、內邊距、邊框和外邊距的方式

border     邊框

margin 外邊距
padding 內邊距
element 元素

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景

內邊距的邊緣是邊框。邊框之外是外邊距，外邊距默認是透明的，不會遮擋其後的任何元素。

背景是由內容和內邊距以及邊框組成的區域；內邊距、邊框和外邊距是可選的，默認是零。能夠經過設置內外邊距爲零來覆蓋瀏覽器樣式

* {
    margin: 0;
    padding: 0;
    }

在css中，width和height是指元素內容的寬度和高度，增長內外邊距和邊框不會影響內容的尺寸，可是會增長元素框的總尺寸

內邊距、邊框和外邊距能夠應用於一個元素的全部邊，也能夠應用於單獨的邊

外邊距能夠是負值，並且在不少狀況下都要使用負值的外邊距

邊框內的空白是內邊距，邊框外的空白是外邊距

1.css 內邊距

內邊距是邊框內的空白部分，即元素內容到邊框之間的空白部分，使用padding屬性，能夠接受長度值和百分比值，可是不能是負值

h1 {padding: 10px;} ---爲h1全部邊設置10px的內邊距

也能夠按照上、右、下、左的順序分別設置內邊距

h1 {padding: 10px 0.25em 2ex 20%;}   ----簡寫規則

單邊內邊距的屬性：
padding-top
padding-right
padding-bottom
padding-left
padding 做用是在一個聲明中設置元素的所內邊距屬性

h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}

內邊距能夠設置百分比值，而且這個百分比值是根據其父元素的width計算的。同時改變

****上下內邊距與左右內邊距一致；即上下內邊距的百分數會相對於父元素寬度設置，而不是相對於高度

css邊框
元素的邊框是圍繞元素內容和內邊距的一條或多條線
能夠設置元素邊框的樣式、寬度和顏色

border-style屬性定義了10個不一樣的非inherit 樣式；包括none

定義一個圖片：
a:link img {border-style: outset;}

爲一個邊框定義多種樣式：
p.aside {border-style: solid dotted dashed double;}

定義單邊樣式：

p {border-style: solid solid solid none;} 《=====》 p {border-style: solid; border-left-style: none;}

邊框的寬度：
border-width 屬性指定
指定寬度有兩種方法：
1.指定長度值；2.使用關鍵字，thin、medium（默認）和thick

p {border-style: solid; border-width: 5px;}

或
p {border-style: solid; border-width: thick;}

定義單邊寬度：
按照上右下左的順序設置元素各邊邊框：
p {border-style: solid; border-width: 15px 5px 15px 5px;}
或者簡寫：
p {border-style: solid; border-width: 15px 5px;}

能夠經過下面屬性設置邊框各邊寬度：
border-top-width
border-right-width
border-bottom-width
border-left-width

邊框寬度設置值：
none ---無邊框
solid
outset
***當屬性值border-style設置爲none時，即沒有邊框，因此以前無論你定義的是什麼，都會消失。包括任何樣式
因爲 border-style 的默認值是 none，若是沒有聲明樣式，就至關於 border-style: none。所以，若是您但願邊框出現，就必須聲明一個邊框樣式

邊框的顏色：
border-color屬性設置
它一次能夠最多接收4個顏色值，若是小於四個，則值賦值會起做用

邊框顏色默認是元素自己的前景色，若是沒有爲邊框聲明顏色，將與元素的文本顏色相同。若是元素沒有任何文本，
則它的邊框顏色是其父元素的文本顏色，這個父元素多是body、div等

定義單邊顏色：--和定義寬度屬性同樣
border-top-color
border-right-color
border-bottom-color
border-left-color

透明邊框：
border-color：transparent ---建立不可見邊框

css外邊距
圍繞着元素邊框的空白區域是外邊距
設置外邊距使用margin屬性，該屬性能夠接受任何長度單位，百分數值甚至負值

margin 能夠設置auto，更常見的是爲外邊距設置長度值

h1 {margin : 0.25in;}

內邊距屬性值設置百分比值也是相對應父元素的width計算的。

使用值賦值的規則：

若是缺乏左外邊距的值，則使用右外邊距的值。
若是缺乏下外邊距的值，則使用上外邊距的值。
若是缺乏右外邊距的值，則使用上外邊距的值。

單邊外邊距屬性：
margin-top
margin-right
margin-bottom
margin-left
margin 在一個聲明中設置全部外邊距屬性

css 外邊距合併
外邊距合併指當兩個垂直外邊距相遇時，他們將造成一個外邊距。合併以後的外邊距的高度等於兩個發生合併的外邊距的高度較大者

---

css定位：

css定位屬性容許你對元素進行定位

使用display 屬性改變生成框的類型。display=block 可讓行內元素表現的像塊級元素同樣。
display=none 讓生成的元素根本沒有框

當把一些文本添加到一個塊級元素的開頭，即便沒有把文本定義爲段落，也會看成段落來對待

<div>
some text ------------------無名塊框
<p>Some more text.</p>
</div>

ss 定位機制：普通流、浮動、絕對定位

全部框都在普通流中定位。

css position 屬性：
static 元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中

relative 元素框偏移某個距離。元素仍保持其未定位前的形狀，它本來所佔的空間仍保留 ---相對定位

absolute 元素框從文檔流徹底刪除，並相對於其包含塊定位；包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，
就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框 --絕對定位

fixed 元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己 ---固定定位

css定位屬性：

position 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
top 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow 設置當元素的內容溢出其區域時發生的事情。
clip 設置元素的形狀。元素被剪入這個形狀之中，而後顯示出來。
vertical-align 設置元素的垂直對齊方式。
z-index 設置元素的堆疊順序。

css 相對定位：

設置爲相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它本來所佔的空間仍保留。

*****在使用相對定位時，不管是否進行移動，元素仍然佔據原來的空間。所以，移動元素會致使它覆蓋其它框

css 絕對定位：
設置爲絕對定位的元素框從文檔流徹底刪除，並相對於其包含塊定位，包含塊多是文檔中的另外一個元素或者是初始包含塊。
元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

css絕對定位使元素與文檔流無關，所以不佔據空間

***相對定位是相對於元素在文檔中的初始位置，而絕對定位是相對於最近的已定位祖先元素，若是不存在祖先元素，那麼相對於最初的包含塊

css 浮動：

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣

float 屬性

行框和清理

要想阻止行框圍繞浮動框，須要對該框應用 clear 屬性屬性值：left、right、both和none表示框的哪些邊不該該挨着浮動框