基礎(chǔ)內(nèi)容

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

選擇器

示例說(shuō)明

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

背景樣式

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

文本字體樣式

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

字體

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

列表樣式

list-style-type: square; // 列表項(xiàng)目的樣式 list-style-position: inside; // 列表前面標(biāo)記(小圓點(diǎn))的位置，默認(rèn)outside list-style-image: url("image/1.gif"); // 設(shè)置列表項(xiàng)目的圖標(biāo) list-style: square inside...; // 復(fù)合設(shè)置

list-style-type詳解

偽類樣式

注意：同時(shí)寫(xiě)多個(gè)需要按下面順序書(shū)寫(xiě)

a:link {color:#FF0000;} /* 未訪問(wèn)的鏈接 */ a:visited {color:#00FF00;} /* 已訪問(wèn)的鏈接 */ a:hover {color:#FF00FF;} /* 鼠標(biāo)劃過(guò)鏈接 */ a:active {color:#0000FF;} /* 已選中的鏈接，鼠標(biāo)按住未松開(kāi)的時(shí)候 */ :focus // 鍵盤(pán)輸入焦點(diǎn)的元素

偽類詳情

DIV 盒子模型 定位

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

位置浮動(dòng)

text-align: center; // 內(nèi)容居中，文字圖片 line-height: 150px; // 設(shè)置行高，可達(dá)到垂直居中的目的 vertical-align: bottom; // 垂直對(duì)齊方式 margin: 0px 50%; // 左右為auto實(shí)現(xiàn)塊級(jí)元素居中

文檔流：從左往右從上往下排序，float可以脫離標(biāo)準(zhǔn)文檔流

float: left right; clear: both; // 清除浮動(dòng)，把前面的當(dāng)做沒(méi)有浮動(dòng)看待，撐起高度

其他效果

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

總結(jié)

以上是生活随笔為你收集整理的CSS 示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。