整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。 [1]
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
DIV是html的一個標簽 css是一個樣式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo1{
color: red;
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="demo1">
demo1
</div>
</body>
</html>
<link rel="stylesheet" href="css/style.css"/>
@import url
@import url("g.css");
.demo1{
color: red;
width: 100px;
height: 100px;
background: blue;
}
<div style="color: blue;width: 100px;height: 100px; background: black;">demo2</div>
/* */ 注釋內容
元素選擇器 div{屬性:值}
ID選擇器 #id{屬性:值}
class選擇器 .類名{屬性:值}
子選擇器 元數 空格 元素{屬性:值}
后代選擇器 元數 > 元數{屬性:值}
屬性選擇器 元素[屬性]{}
通配符選擇器 *{屬性:值}
群組選擇器
background-color 規定要使用的背景顏色。
background-position 規定背景圖像的位置。
background-size 規定背景圖片的尺寸。
background-repeat 規定如何重復背景圖像。
background-origin 規定背景圖片的定位區域。
background-clip 規定背景的繪制區域。
repeat 默認。背景圖像將在垂直方向和水平方向重復。
repeat-x 背景圖像將在水平方向重復。
repeat-y 背景圖像將在垂直方向重復。
no-repeat 背景圖像將僅顯示一次。
inherit 規定應該從父元素繼承 background-repeat 屬性的設置。
background-attachment 規定背景圖像是否固定或者隨著頁面的其余部分滾動。
background-image 規定要使用的背景圖像。
inherit 規定應該從父元素繼承 background 屬性的設置。
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
簡寫
background: url(images/bg.gif) no-repeat top right
背景圖片的滾動
背景圖片是否隨著內容的滾動而滾動由background-attachment設置
background-attachment:fixed; 固定，不隨內容的滾動而滾動
background-attachment:scroll; 滾動，隨內容的滾動而滾動
邊框顏色 border-color:#000
邊框寬度 border-width:1px;
border-left 設置左邊框，一般單獨設置左邊框樣式使用
border-right 設置右邊框，一般單獨設置右邊框樣式使用
border-top 設置上邊框，一般單獨設置上邊框樣式使用
border-bottom 設置下邊框，一般單獨設置下邊框樣式使用,有時可將下邊框樣式作為css下劃線效果應用。
邊框樣式值如下：
none : 無邊框。與任何指定的border-width值無關
hidden : 隱藏邊框。IE不支持
dotted : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線（常用）
dashed : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線（常用）
solid : 實線邊框（常用）
double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值
上 右 下左
groove : 根據border-color的值畫3D凹槽
ridge : 根據border-color的值畫菱形邊框
inset : 根據border-color的值畫3D凹邊
outset : 根據border-color的值畫3D凸邊
上 右 下左
簡寫
border:5px solid red;
color:red; 文字顏色 #ffeeees
font-size:12px; 文字大小
font-weight:bolds 文字粗細(bold/normal)
font-family:”宋體”文字字體
font-variant:small-caps小寫字母以大寫字母顯示
text-align:center; 文本對齊(right/left/center)
line-height:10px; 行間距(可通過它實現文本的垂直居中)
text-indent:20px; 首行縮進
text-decoration:none;
文本線(none/underline/overline/line-through) underline/overline/line-through; 定義文本上的下劃線/上劃線/中劃線
letter-spacing: 字間距
list-style-type 設置列表項標記的類型。參閱：list-style-type 中可能的值。
list-style-position 設置在何處放置列表項標記。參閱：list-style-position 中可能的值。
list-style-image 使用圖像來替換列表項的標記。參閱：list-style-image 中可能的值。
inherit 規定應該從父元素繼承 list-style 屬性的值
取值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha
| upper-alpha | none | inherit
disc: 點
circle: 圓圈
square: 正方形
decimal: 數字
decimal-leading-zero: 十進制數，不足兩位的補齊前導0，例如: 01, 02, 03, ..., 98, 99
lower-roman: 小寫羅馬文字，例如: i, ii, iii, iv, v, ...
upper-roman: 大寫羅馬文字，例如: I, II, III, IV, V, ...
lower-greek: 小寫希臘字母，例如: α(alpha), β(beta), γ(gamma), ...
lower-latin: 小寫拉丁文，例如: a, b, c, ... z
upper-latin: 大寫拉丁文，例如: A, B, C, ... Z
armenian: 亞美尼亞數字
georgian: 喬治亞數字，例如: an, ban, gan, ..., he, tan, in, in-an, ...
lower-alpha: 小寫拉丁文，例如: a, b, c, ... z
upper-alpha: 大寫拉丁文，例如: A, B, C, ... Z
none: 無(取消所有的list樣式)
inherit:繼承
list-style-position
inside
列表項目標記放置在文本以內，且環繞文本根據標記對齊。
outside
默認值。保持標記位于文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。
簡寫
list-style:square inside url('/i/arrow.gif');
a{text-decoration: none;}
a:link {color:#FF0000;} /* 未訪問的鏈接 */
a:visited {color:#00FF00;} /* 已訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標劃過鏈接 */
a:active {color:#0000FF;} /* 已選中的鏈接 */
盒子模型的組成部分
外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）四個屬性
自身的身高 width height
內邊距 padding
盒子邊框 border
與其他盒子的距離 margin 外邊距
常見的寫法 border:1px solid #foo;
單獨屬性:
border-widh:
border-style:
dotted 點狀虛線
dashed（虛線）
solid（實線）
double（雙實線）
border-color(顏色)
padding:內邊距
值：像素/厘米等長度單位、百分比
padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左（設置4個點-->順時針方向）
單獨屬性
padding-top:
padding-right:
padding-bottom:
padding-left:
當設置內邊距的時候會把盒子撐大，為了保持盒子原來的大小，應該高度和寬度進行減小，根據width和height減小
margin 外邊距
值：與padding相同
單獨屬性：與padding相同
外邊距合并：兩個盒子同時設置了外邊距，會進行一個外邊距合并
margin
margin:10px 上下左右都會騰出10px出來
margin:0px auto; 居中
left 元素向左浮動。
right 元素向右浮動
清除浮動
clear: both;
left
right
塊級元素：
他會獨占一行，在默認情況下，其寬度自動填滿其父元素的寬度；
塊級元素可以設置width、height屬性；
塊級元素即使設置了寬度也是獨占一行，塊級元素可以設置margin、padding屬性；
行內元素：
行內元素不會獨占一行，相鄰的行內元素會排列在同一行里，直到行排不下，就自動換行，其寬度隨內容而變化；
行內元素的width、height屬性則無效；
行內元素的margin、padding屬性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都會產生邊距效果，但是豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不產生邊距效果。
行內元素轉換
display:none; 不顯示
display:block;變成塊級元素
display:inline; 變成行內元素
display:inline-block;以塊級元素樣式展示，以行級元素樣式排列
塊級元素(block element）
address 地址
center 舉中對齊塊
div- 常用塊級容易
dl 定義列表
form 交互表單 （只能用來容納其它塊元素）
h標簽
hr 水平分隔線
ol 無需列表
ul有序列表
p 段落
pre 格式化文本
行內元素：
a - 錨點
b - 粗體(不推薦)
br- 換行
code - 計算機代碼(在引用源碼的時候需要)
em - 強調
i - 斜體
img - 圖片（特殊的內聯元素，同時是內聯替換元素，替換元素可以設置寬高）
當圖片和DIV在一起時，圖片周圍會出現margin現象，即元素不重合貼在一起，為了解決這個問題，設置img的css為{margin：0；display：block；border：0px}
input - 輸入框
label - 表格標簽
select - 項目選擇
strong - 粗體強調
textarea - 多行文本輸入框
u - 下劃線
var - 定義變量
替換元素有如下：（和img一樣的設置方法）
<img>、<input>、<textarea>、<select>
<object>都是替換元素，這些元素都沒有實際的內容
15. 溢出
overflow 屬性規定當內容溢出元素框時發生的事情。
visible 默認值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，并且其余內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
16. 定位
position
static靜態定位（不對它的位置進行改變，在哪里就在那里）
默認值。沒有定位，元素出現在正常的流中（忽略 top,bottom, left, right 或者z-index 聲明）。
fixed固定定位（參照物--瀏覽器窗口）---做 彈窗廣告用到
生成固定定位的元素，相對于瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right"以及 "bottom"屬性進行規定。
relative（相對定位 ）（參照物以他本身）
生成相對定位的元素，相對于其正常位置進行定位。
absolute（絕對定位）(除了static都可以，找到參照物-->與它最近的已經有定位的父元素進行定位)
生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定
z-index
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
定位的基本思想: 它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。
站建設html+css代碼編寫時的注意事項：
1.浮動時記得清除浮動在沒有清楚浮動的情況下。right,bottom,left.所以margin:01px3px5px;結果是上方無邊界，右邊1像素，以此類推。
2.有效利用pad和border邊界重合時。使用pad和border可以避免，可以防止上下div塌陷”合理的控制上下div間距。
3.記住“PBL寫法bordermargin與pad簡寫語法有特定順序，從上方開始順時針方向轉動：top,會出現跑格。頁面會發生變形。
4.不是零的值，都要指定單位CSS需要對每個fontmargin等各種值指定單位。
5.解決IE6浮動元素的雙倍邊距問題對一個div設置了float:left和 margin-left:100pxIE6中，這個bug就會出現。只需要多設置一個displai就行了。
6.!important;如果實在沒有辦法解決一些細節問題,可以用這個方法.火狐對于”!import會自動優先解析,IE則會忽略
文章出自:北京網站制作公司-東浩聯創 http://www.donhonet.net/new/detail-5-11-591.html 轉載請注明出處
、使用 div 后，什么時候使用 table
Web標準并不排除表格的使用，但使用表格排版是不明智的，因為表格歸根結底只是一種顯示“數據”的方式。大家應該知道，在 Excel 中，表格就是用來放置數據信息的。使用表格顯示信息能讓瀏覽者閱讀起來更輕松，表達也更清楚。
XHTML 中的元素可分為三大類，下面分別介紹。
輔助布局設計元素:主要指div、span等，這類元素的主要功能是布局整個頁面。靈活使用這些元素，能讓網頁豐富多彩。
結構化元素或信息元素:主要指table、ul、pre、code等元素，是一種信息顯示與整理方式，如 table 是用來顯示表格信息的，ul是用來顯示列表信息的，當需要用表格或列表的時候，用這兩種方式來顯示是合理的。
為實現某些功能而添加的元素:如添加關鍵字的meta keyword，設置鏈接的a等。由上面的分析可知，符合Web標準的設計思路是，使用div等布局元素來制作頁面的布局、定位、色塊、圖像等，使用table、ul等元素來顯示頁面中需要展示的數據。這實際上是一個信息合理化整合的過程，什么地方該用什么元素還是照用不誤。
二、初學 Web 標準的幾個誤區
初次接觸 Web標準的用戶可能會受表格布局或其他一些問題的影響，常見問題及解決建議如下:
1.不要用傳統的表格思維來套div
用慣了表格的用戶可能會覺得，CSS 布局就是將原來用table的地方用div來代替，原來是 table 嵌套，現在是 div嵌套。這種觀點是錯誤的。
應該跳出表格布局的禁錮，拋棄一個td接一個td放置內容的思維方式。按前文所述，Web標準的目的是將內容和表現完全分離。即在加入表現之前，頁面里有的僅僅是內容，在沒有修飾的情況下，它就是一張有一些文字和圖像(圖像是指內容中的圖像，是有真正意義的圖像，而非修飾性的圖像)的簡單頁面，這些文字和圖像僅僅是依次羅列下來，只有結構，沒有任何樣式。當加人表現，將所有修飾的圖像作為背景，用CSS 來定義每一塊內容的位置、字體、顏色等時，才構成了一個完整的頁面。
這樣制作的頁面才是內容與表現完全分離的，即抽掉 CSS 文件，剩下的就只是干凈的內容。
2.不必為每塊內容都創建一個id
內容都是有結構的，相同結構的內容可以用同一個樣式來定義，如相同級別的標題、正文、圖像等。對干多次引用的樣式可以用cass 來定義，不需要全部用id:另外也不是說只能用 div 布局，在需要的時候，完全可以用p來代替。
至于僅僅為了行高、間距，或者一個修飾性圖像而增加的div，隨著大家對 CSS應用的熟練和理解，很快就會知道這是沒有必要的。希望大家多研究 CSS，做出最簡練、最有效的樣式表。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
