樣式初識-基本樣式介紹
1 CSS介紹
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
selector {property: value}
下面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字體大小設置為 14 像素。在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意圖為您展示了上面這段代碼的結構：
2 選擇器
2.1 id選擇器
下面的id選擇器樣式，寫在head的style內，如下所示
<head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color: gray; height: 45px; } </style> </head>
2.2 class選擇器
<style> .c_top{ background-color: gray; height: 45px; } </style>
2.3 標簽選擇器
所有的div標簽，都設置了下面的樣式
<style> div{ height: 35px; background-color: gray; } </style>
2.4 層級選擇器
層級選擇器，也叫關聯選擇器，中間用空格間隔，如下所示：
<style> div a{ height: 35px; background-color: gray; } </style>
2.5 組合選擇器
組合選擇器，中間用逗號間隔，如下所示：
<style> #i1,#i2,#i3{ height: 35px; background-color: gray; } </style>
2.6 屬性選擇器
屬性選擇器，對選擇到的標簽再通過屬性進行一次篩選，如下所示：
<style> input[type="text"]{width:200px;height: 50px;} </style>
2.7 優先級
樣式的優先級，標簽上style優先，然後按照編寫順序，采用就近原則。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; color: white; } .c2{ font-size: 18px; color: black; } </style> </head> <body> <div class="c1 c2" style="color:pink;">樣式的優先級</div> </body>
3 邊框
邊框，主要是border，主要有寬度、樣式、顏色(border: 20px dotted red;)
如下所示：
<div style="border: 20px dotted red;">樣式邊框</div>
4 其他常用樣式
height 高度 百分比
width 寬度 像素，百分比
text-align 水平方向設置
line-height 垂直方向根據標簽高度
color 字體顏色
font-size 字體大小
font-weight 字體加粗
<div style="height: 48px; width:80%; border: 1px solid red; font-size: 16px; text-align: center; line-height: 48px; font-weight: bold;"> 顯示的內容 </div>
5 float浮動
float，為了讓標簽浮動起來，塊級標簽也可以堆疊
<div style="clear: both;"></div> <div style="width: 20%;float: left">1</div> <div style="width: 20%;float: left">2</div>
6 display
display: none; -- 讓標簽消失
display: inline;
display: block;
display: inline-block;
具有inline,默認自己有多少占多少
具有block，可以設置無法設置高度，寬度，padding margin
行內標簽：無法設置高度，寬度，padding margin
塊級標簽：設置高度，寬度，padding margin
塊級標簽與內聯標簽，通過display進行轉換
<div style="display: inline;">顯示內容</div> <span style="display: block;">顯示內容</span>
7 邊距
設置邊距，通過margin、padding進行設置，其中：
padding 內邊距
margin 外邊距
<div style="width: 980px;margin: 0 auto;"> <div style="float: left;">收藏本站</div> <div style="float: right;"> <a>登錄</a> <a>註冊</a> </div> <div style="clear: both"></div> </div>
樣式初識-基本樣式介紹