基礎內容

引入樣式表：<link rel="stylesheet" href="test.css">
em：相對大小單位

選擇器

示例說明

#id	選擇所有類
.clsss	選擇所有類
p	選擇所有p標簽，可以加逗號分組
p em	后代選擇器，選中p標簽中所有em標簽
p > em	子元素選擇器，只會查一層
p+em	相鄰兄弟選擇器，選擇p相鄰的em
p [class=“p1”]	屬性選擇器
…	…

背景樣式

background-color: green; background-image: url("image/wen.jpg"); background-repeat: no-repeat; // 可以x或y軸重復 background-attachment: fixed; // 固定圖片不跟著滾動條移動 background-position: 10px 30px;top center; //圖片位置，也可以百分比，可以與attachment的fixed搭配 background: green no-repeat ...; // 復合設置

文本字體樣式

color: #FF0000; direction: ltr/rtl; // 文字書寫方向 letter-spacing: 5px; // 字符間距 line-height: 50px; // 行高 text-align: justify; // 文本對齊方式left right center text-decoration: underline // 定義劃線 text-shadow: 2px 2px 1px #ff0000; // 陰影 text-transform: uppercase; // 定義大小寫 text-indent: 2em; // 首行縮進

字體

font-size: 20px; font-style: italic; // 斜體 font-weight: bold; // 加粗 font-family: 隸書; // 字體

列表樣式

list-style-type: square; // 列表項目的樣式 list-style-position: inside; // 列表前面標記(小圓點)的位置，默認outside list-style-image: url("image/1.gif"); // 設置列表項目的圖標 list-style: square inside...; // 復合設置

list-style-type詳解

偽類樣式

注意：同時寫多個需要按下面順序書寫

a:link {color:#FF0000;} /* 未訪問的鏈接 */ a:visited {color:#00FF00;} /* 已訪問的鏈接 */ a:hover {color:#FF00FF;} /* 鼠標劃過鏈接 */ a:active {color:#0000FF;} /* 已選中的鏈接，鼠標按住未松開的時候 */ :focus // 鍵盤輸入焦點的元素

偽類詳情

DIV 盒子模型 定位

width: 150px; height: 150px; top: 150px; left: 150px;// 位置參照，才能用top left之類的 position: relative相對 absolute絕對 static無定位 fixed相對于瀏覽器固定 相對定位位置會被保留，絕對定位不會 z-index: 50; // 堆疊順序，大的在前面overflow: auto scroll hidden; // 設置超出部分，隱藏或者顯示滾動條等 outline: dashed; // 輪廓，邊框之外 border: solid; // border-left... 邊框 margin: 10px 10px 10px 10px; // 外邊距，上右下左 padding: ...; // 內邊距，同上 box-sizing: border-box; // 讓padding的繪制的距離包含在整體大小里

位置浮動

text-align: center; // 內容居中，文字圖片 line-height: 150px; // 設置行高，可達到垂直居中的目的 vertical-align: bottom; // 垂直對齊方式 margin: 0px 50%; // 左右為auto實現塊級元素居中

文檔流：從左往右從上往下排序，float可以脫離標準文檔流

float: left right; clear: both; // 清除浮動，把前面的當做沒有浮動看待，撐起高度

其他效果

box-shadow: 0 0 5px 3px #ccc; // 陰影

總結

以上是生活随笔為你收集整理的CSS 示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。