18.9.14 下午 第40天上課
CSS中的常用選擇器 常用三種選擇器 標籤選擇器 p{ color: red; } id選擇器 id:(唯一性) id命名:數字、字母、下劃線、中劃線(-),不能用數字開頭 #p_1{ font-size: 30px; color: yellowgreen; } class選擇器 .p_2{ font-weight: bold; color: yellow; } 三種選擇器的優先順序: id選擇器>class選擇器>標籤選擇器
CSS中其他選擇器
後代選擇器 只要包含該標籤物件即可 div span{ font-size: 27px; font-family: 宋體; color: red; } 子選擇器 直系子標籤 div>span{ color: red; } 兄弟選擇器 只會改變下面相鄰的元素物件 #p_1+p{ color: green; } 兄弟選擇器 後面所有的兄弟物件都會改變 #p_1~p{ color: red; font-size: 30px; } 偽類選擇器 需要按照順序寫,否則效果將不顯示 a:link{text-decoration:none}未訪問過的。 a:visited{color:#ccc} 訪問過 a:hover{color: red;text-decoration:red}滑鼠放在超連結上,顯示紅色並有下劃線。 a:active{color:#FF7400} 選定連結
字型:(font) /*字型的顏色*/ color: gray; /*字型的大小*/ font-size: 12px; /*字型的加粗*/ /*font-weight: bold;*/ /*字型的風格*/ /*font-family: 宋體;*/ /*字型傾斜*/ /*font-style: italic;* 文字(text) /*下劃線展示*/ text-decoration: underline; /*去除下劃線*/ text-decoration: none; /*表示某段文字不可用*/ text-decoration:line-through; /*文字居中*/ text-align: center; /**文字水平居中*/ Line-height=文字所在父元素的高度 border屬性有三個修飾屬性 ?border-color ?border-color:red; ?border-top-color:blue; ?border-width ?border-width: 1px; ?border-left-width: 3px; ?border-style ?border-style: solid ?border-bottom-style: solid; ?可以使用border統一設定 ?border: 1px solid red; border-right: 5px dotted blue; .border: 邊框的大小 邊框的樣式 邊框的顏色
===========================================================================