<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css權威指南學習</title>
<style>
body p{
margin:1px;
background-color: #6633ff;
color: white;
}
/*web安全色：不同系統和瀏覽器擁有不同的調色板，安全色爲避免顏色抖動的216色*/
body p:nth-child(1){
background-color: #336699; /* 3 6 9 c f*/
color: rgb(20%,100%,80%); /*20%或51的倍數*/
}
/*絕對長度 極少使用 in英寸 cm釐米 mm毫米 pt點 pc派卡*/
body p:nth-child(2){
width: 3cm;
}
/*相對長度 ex em*/
body p:nth-child(3){
width: 400px;
font-size: 2em;
/*字間距*/
word-spacing:-2em; /*然而漢字不起作用*/
letter-spacing: 0.5em;/*正確用法（字母間距）*/
}
/*文本轉換 文本裝飾 文本陰影*/
body p:nth-child(4){
text-transform: capitalize;
text-decoration: line-through; /*不能繼承**/
text-shadow: aqua 5px 5px 5px;
}
body p:nth-child(4) strong{
color: antiquewhite; /*裝飾元素仍然爲父元素的顏色*/
}
/*使用auto 取auto容易使元素居中*/
body div:nth-child(5){
width: 800px;
height: 30px;
padding:5px;/*與p的水平外邊距不會合並*/
background-color: aquamarine;
}
body div:nth-child(5) p{
color: white;
width: 100px;
margin-bottom: auto; /*此時margin top和bottom設置爲0 並不能垂直居中*/
margin-top: auto;
margin-left: 100px;
margin-right: 100px; /*自動填充使得水平總寬度爲父元素寬度800-10px*/
}
/*垂直對齊*/
body p:nth-child(6){
font-size: 15px;
line-height: 15px;
}
body p:nth-child(6) span{
font-size: 12px;
line-height: 12px;
vertical-align: top;
}
body p:nth-child(6) strong{
font-size: 24px;
line-height: 1em;
vertical-align: middle;
margin: 100px; /*行內非替換元素外邊距無法影響行高*/
}
/*表單使用屬性選擇器可以很好的更改樣式*/
input[type='text']{
color: #3ff;
}
input[type='radio']{
color: #f63;
}
</style>
</head>
<body>
<p>安全色</p>
<p>絕對長度</p>
<p>相對長度</p>
<p>文本轉換 english<strong>www.baidu.com</strong></p>
<div><p>auto使用</p></div>
<p>垂直對齊 <span>垂直對齊</span> <strong>垂直對齊</strong>垂直對齊</p>
<input type="text" name="r2" value="123"/>
<input type="radio" name="c3" value="321"/>
</body>
</html>
《CSS權威指南》自我補充要點
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.