CSS全稱為"層疊樣式表(Cascading Style Sheets)", 它主要是用於定義HTML內容在浏覽器內顯示的樣式, 比如文字, 顏色, 視覺上的靜態效果, 布局等等. 如果說HTML是網頁開發的根本, 那麼CSS就是修飾網頁的那支美工筆, 而以後要學習的JS(JavaScript)將會是網頁的靈魂(個人拙見).
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識CSS樣式</title>
<style type="text/css">
#wang{
font-size:20px;/*設置文字字號*/
color:red;/*設置文字顏色*/
font-weight:bold;/*設置字體加粗*/
}
</style>
</head>
<body>
<p id = "wang">網頁制作是任何一個從事開發行業的人都應該掌握的技能, 因為它無時不刻的在我們的生活中出現, 了解學習網頁制作, 會讓你的視野更加開闊, 而CSS在網頁開發中, 更具有著舉足輕重的位置, 所以一定要認真用心的學習.</p>
</body>
</html>
這樣一個網頁, 我想大家可以從簡單的文字注釋中可以猜測出實現的效果, 在段落標簽中包含的文字, 會按照<style>標簽內部的css樣式來改變樣子, 比如這個的實現效果就是, 這一段文字的字號會是20, 文字顏色會是紅色, 字體樣式會加粗.
下面我們逐句進行分析
首先, 我們先看標簽內部的屬性, 我聲明了<p>標簽的id = "wang", 那麼在樣式表中, 就應該用#wang來代表為這個標簽修改它的css樣式(如果是class = "wang", 那麼那句話會是.wang), 具體的區別後面會為大家做詳細的解釋.
接下來就要說css樣式表了, 首先要使用<style>樣式標簽, 內部可以設置不同的類型, 我寫的這個就是類型為文本css, 這種插入css樣式的形式稱之為嵌入式(後面還會有講), 在標簽內部, 用標簽(不推薦!!!)(標簽選擇器), #id名(ID選擇器), 或者.class名(類選擇器)(ID選擇器和類選擇器是推薦樣式!!!)加上大括號{}的形式, 進行css樣式的設置.
比如#wang{font-size:12px;}
這句話, 其中#wang叫做選擇符, 也叫選擇器(三種類型, 標簽選擇器, 類選擇器, ID選擇器), 指明網頁中要應用規則樣式的元素, 也就是"樣式"作用於網頁中的哪些元素, 這裡就是只有id = "wang"的標簽會改變樣式, 如果需要只為段落標簽修改, 那麼選擇器就寫p(標簽選擇器), 如果設置 class = "wang", class屬性(類選擇器)同理, 使用.wang即可. 而其他不符合選擇器要求的標簽不會受到影響(這個時候<span>標簽的強大不就體現出來了, <div>邏輯標簽也一樣).
類選擇器和ID選擇器雖然簡單用起來是沒什麼差異的感覺的, 但是實際上差別很大, 簡單說來就是ID選擇器只可以用一次, 而類選擇器可以設置多次, class允許class = "wang fei", 然後.wang選擇器, .fei選擇器這種多類設置樣式, 而ID選擇器不可以使用詞列表. 這個很重要, 建議百度詳細學一學
font-size:12px;這句話叫做聲明, 意思就是聲明出這樣的樣式規則, 讓選擇好的標簽進行遵守.
font-size叫做屬性, css樣式表中有很多的屬性, 這個懂一些專業外語, 或者英語的人會很舒服, 畢竟見名知意嘛, 不懂的話, 多寫就會熟悉了.
12px是這個屬性的值, 這個是一一對應的, color對應的就應該是16進制顏色, 或者直接英文的顏色單詞, 而font-size的意思是字號大小, 那麼就應該對應字號大小的表示方法, 也就是12px(12像素大小).
當有多條樣式屬性的時候, 要用分號分隔, 使代碼更加規范.
注釋樣式, 和HTML中不同, css中的代碼和其他的語言很像, 注釋才用別的語言塊注釋的形式:/*要注釋的內容*/
css的三種樣式
css樣式分為三種, 內聯式, 嵌入式, 外部式(較為常用), 對選擇器標簽進行樣式設置會遵循就近原則(類似於變量的賦值, 最後一次的設置, 就是最後的樣式), 具體三種樣式, 大家自行百度即可, 就不一一說明了.