/********************************/
>css樣式基礎學習
/********************************/
0.選擇器種類
/********************************/
/**.body{};類選擇器*/
/**#body{}; id選擇器*/
/** body{};元素選擇器*/
/** body,div{};集體聲明*/
/** *{};集體聲明列表 */
/** div p{};兩個標籤之間用空格隔開*/
/** .div p{};組合選擇器*/
/** a:link{text-decoration:none;};僞類選擇器*/
/** a[href][title] {color:red;};
p[class~="important"] {color: red;} class屬性中包含important關鍵詞的元素
屬性選擇器將同時有 href和 title屬性的 HTML超鏈接的文本設置爲紅色*/
/** *[title]{};有title這個屬性的元素*/
/**
[abc^="def"]選擇 abc 屬性值以 "def" 開頭的所有元素
[abc$="def"]選擇 abc 屬性值以 "def" 結尾的所有元素
[abc*="def"]選擇 abc 屬性值中包含子串 "def" 的所有元素
*/
/********************************/
>1.示例代碼
/********************************/
/**
如果是嵌套的就只會修改子元素的屬性
body div{};控制div的屬性
//屬性選擇器
div[country="中國"]{
border: solid 1px black;
font: 50px;
background-color: gray;
};
*/
/* div{
border: solid 1px black;
font: 50px;
background-color: gray;
width: 10%;
height: 20%;
padding-left: 10%;* 調整邊框和內容的距離
margin-left: 10%;* 調整div和window邊界的距離
background-image: url(../images/myeclipse.jpg);
*inherit表示重複覆蓋整個頁面
background-repeat: no-repeat;
}; */
/*
//屬性選擇器
[id="china"]{
font-style: normal;
font-weight: bold;
};
*/
/*
//id選擇器
#china1{
font-weight: bold;
};
*/
/* font {
margin-left: 50%;* 調整文本的距離
}
*/
/*http://www.w3school.com.cn/css/css_table.asp*/
/********************************/
>2.有序列表和無序列表樣式
/********************************/
*{
/**list-style-type:square; 修改無序列表的頭部顯示方形還是圓形*/
/* list-style-type:lower-roman; 如果設置了list-style-image這個就不用設置了*/
list-style-image: url(../images/eclipse.png);
/*li {list-style : url(example.gif) square inside}將三個樣式合併爲一個 */
list-style-position: inside;
}
/********************************/
