web前段學習2017.6.15

標籤：刪除   管理   cas   結束   方式   keep   最新版   組合   span   

CSS---表現層，修飾和表現html文檔，為瞭解決結構層和表現層分離的問題。
通過CSS極大的提高了工作效率，方便工作人員維護和管理
CSS:層疊樣式表，目前用的最廣泛的css版本為css2，最新版本是css3

----------------------------------------------------------------
一 CSS的置放位置
1 嵌入式
css裡面我們叫html標籤為html元素
置放位置：直接將css代碼嵌入到html元素中
文法：<tag style="css屬性1:css屬性值1;css屬性2:css屬性值2;..."></tag>
<tag style="css屬性1:css屬性值1;css屬性2:css屬性值2;..."/>

作用範圍：只作用於當前標籤

2 植入式
文法：
<style>
選取器{
css屬性1:css屬性值1;
css屬性2:css屬性值2;
...
}
</style>
置放位置:放在head標籤裡面,通過一對style標籤引入
作用範圍：作用於當前的html頁面

3 外聯式：
置放位置：通過一個link標籤引入外部的層疊樣式表,link標籤必須放在head標籤裡面
文法：<link rel="stylesheet" type="text/css" href="相對路徑"/>
作用範圍：公用的，任何一個html頁面都可以引入，一旦引入就可以影響當前頁面的樣式

CSS置放位置的優先順序順序
嵌入式的優先順序最高
植入式於外聯式近標籤者優先

----------------------------------------------------------------

二 CSS的文法

文法：<tag style="css屬性1:css屬性值1;css屬性2:css屬性值2;..."></tag>
<tag style="css屬性1:css屬性值1;css屬性2:css屬性值2;..."/>

文法：
<style>
選取器{
css屬性1:css屬性值1;
css屬性2:css屬性值2;
...
}
</style>

選取器1{
css屬性1:css屬性值1;
css屬性2:css屬性值2;
...
}

選取器2{
css屬性1:css屬性值1;
css屬性2:css屬性值2;
...
}
每條css屬性及屬性值後面，都要以分號分割，表示該條css代碼結束

----------------------------------------------------------------

三 CSS的選取器

選取器：通過選擇可以找到相對應的html元素

選取器分類：簡單選取器、關係選取器、屬性選取器、偽類別選取器、偽對象選取器、組合選取器
選取器也可以叫做選擇符

1 簡單選取器

a 標籤選取器
標籤名{ css代碼 }--->div{ css代碼 }

b class選取器(類別選取器)
<p class="pTag"></p>
ps:body及body裡面所有的元素都有class這個HTML 屬性，class的屬性值我們叫它類名或者class名
.類名{ CSS代碼 }--->.pTag{ CSS代碼 }
通過一個類名定義了一套樣式，只要html元素裡面引用了該類名，那麼這套樣式都會對元素有影響

如何來取類名：類名只能由數字、字母、底線構成，但是不能以數字開頭
1tag--->錯誤
tag1 navTagName NavTagName nav_tag_name nav-tag-name nav-tag-name1...

推薦方式：一個單詞 tag1 nav-tag-name,所取類名必須要知名見意

<div class="header-container"></div>

ps:類名可以重複

c id選取器
<p id="idName"></p>

#id名{ css代碼 }---->#idName{ css代碼 }

ps:body及body裡面所有的元素都有id這個HTML 屬性，id的屬性值我們叫它id名

id的特性：具有唯一性，也就是id名不能重複，相當於咱們社會安全號碼

如何來取id名：類名只能由數字、字母、底線構成，但是不能以數字開頭
1tag--->錯誤
tag1 navTagName NavTagName nav_tag_name nav-tag-name nav-tag-name1...

推薦方式：一個單詞 tag1 navTagName,所取id名必須要知名見意
盡量採用駝峰命名法：第一個單詞全部小寫，第二個單詞及以上首字母大寫
id選取器我們盡量不要使用在css裡面

d 全域選取器(*)
*{ css代碼 }--->可以讓當前頁面的所有元素都對全域選取器裡面所定義的樣式產生影響

------簡單選取器的優先順序順序-------
id選取器>class選取器>標籤選取器>全域選取器

2 組合選取器
a 標籤名.類名
<div class="header-container"></div>
div.header-container{ css代碼 }

b 標籤名#id名
<div id="headerContainer"></div>
div#headerContainer{ css代碼 }

c 逗號選取器(,)
<p></p>
<span></span>
p,span{ css代碼 }
總結：選取器1,選取器2...{ css代碼 } ---->讓選取器1、選取器2等等共用這套樣式

3 關係選取器
a 相鄰選取器(E+F)----E、F分別泛指所有的css選取器，選擇緊貼E元素後面的F元素

b 子代選取器(E>F)----選擇E元素裡所有的F子項目

c 後代選取器(E F)----選擇E元素裡面所有的F元素

----------------------------------------------------------------
--------
|CSS2屬性|
--------
一 文本
1 水平對齊
text-align:left/right/center
也可以讓img、input等有水平方向的對齊

2 垂直對齊
vertical-align:top(居頂部)/bottom(居底部)/middle(置中)
多用於table

3 設定行高
line-height:50px/10%;
如果讓文本垂直置中與容器，將line-height的值設定跟容器的高度一樣。只適用於單行文本

4 首行縮排
text-indent:50px;

5 內容自動換行(css3)
word-break:break-all;---允許在單詞內部進行換行
word-break:keep-all;只在空格處或連字號（-）處換行

6 詞間距
word-spacing:10px;單詞與單詞之間的間隙為10px,只要有空格出現就認為是一個詞的開始

7 字間距
letter-spacing:5px;設定字(字元)之間的間隙5px

8 設定字型顏色
color:顏色;

9 設定大小字母的轉換
text-transform:none/capitalize/uppercase/lowercase;
capitalize:將每個單詞的第一個字母大寫
uppercase：將單詞所有的字母都轉換成大寫
lowercase：將單詞所有的字母都轉換成小寫

10 文本修飾
text-decoration:none/underline/line-through/overline;
none:不添加或者去掉文本修飾
underline:添加底線
line-through:添加刪除線
overline:添加上劃線

如果要去掉a標籤預設的底線，設定text-decoration:none;

二 字型的屬性
1 設定字型大小
font-size:50px;

2 字型風格
font-style:italic(斜體)

3 字型加粗
font-weight:bold;

4 設定字型類型
font-family:"黑體"

5 設定小型的大寫字母
font-variant:small-caps;

三 邊框屬性(border)
border-width:5px;設定邊框的粗細
border-color:red;設定邊框的顏色
border-style:solid(實線)/dotted(點狀線)/dashed(塊狀線);設定邊框樣式

縮寫：
border: 粗細 樣式 顏色;

如果給某一邊加邊框：top right bottom left
border-top-width:5px;
border-top-color:red;
border-top-style:solid;
縮寫：
border-top: 粗細 樣式 顏色;

四 容器寬高屬性(width/height)
width:300px/20%;
height:300px/20%;

-----補充----
常見的區塊層級元素：div ul li ol dt dd hn p table form...
區塊層級元素的特點：可以自動換行、可以直接設定寬高

常見的行內(內聯)元素:span a b i s u select option...
內嵌元素的特點：對寬高沒有直接作用、不會自動換行

常見的空元素：link meta br hr input img...
空元素的特點：沒有內容 在開始標籤中閉合,input、img、hr等可以直接設定寬高

 

web前段學習2017.6.15