HTML CSS 層疊樣式表 二
一、
#ID{
width:寬度px;
height:高度px;
background-color:red; 背景顏色的兩種加法
background:rgba(x,x,x,x) rgba顏色 最後一個值為透明度 1為不透明，0為全透明。
background:url(圖片.jpg) np-rereat; 背景圖添加 repeat是平鋪
background-image:url(圖片.jpg); 背景圖添加
background-size;100%; 背景圖拉伸100% 幾乎不會用到 因為會失真。
}
#ID{
font-family:字體名字； 改字體
font-size:10px; 改字體大小，單位像素
color:顏色; 改字體顏色
font-styel:italic; 字體樣式 italic斜體（就是I那個傾斜） normal正常 默認正常
text-decoration:underline;文本修飾屬性 underline下劃線 overline上劃線 line-through 刪除線 none無，可以用於去掉下劃線比如<a>標簽的。
overflow:hidden; 元素溢出內容屬性 visible不修剪 會呈現在元素框之外 默認 hidden修剪並隱藏溢出內容 scroll加滾動條 auto自動 如果溢出就加滾動條
text-align:center; 水平對齊 center 居中 left左對齊 默認 right右對齊
vertical-align 垂直對齊
line-height: 行高 垂直居中可以用行高進行
text-indent 縮進單位像素
}
.btn{
border:black solid 10px; 邊框 黑色 solid實線 dotted虛線 線寬、
}
.btn：hover{ 當鼠標移到這個class為btn的div上的時候
background-color:red; 背景色變紅
color:green; 字體變綠
cursor:pointer 鼠標變小手
transiti:1s; 變化在1秒內完成
transfor:rotate(45deg); 旋轉45°
box-shadow:4px 5px 6px 陰影效果 向下5px 向右5px 虛化5px 陰影色為黑色
二、課上聯系
<style> #d1 { width:200px; height:200px; /*background-color:red;*/ background:rgba(255, 0, 0,0.5); background:url(img/tu.jpg) no-repeat; /*默認平鋪，no-repeat不平鋪。*/ /*background-image:url(img/tu.jpg);*/ background-size:100%; /*圖片尺寸拉伸不常用，容易失真。*/ /*background-attachment:scroll;*/ overflow:scroll; } #d2 { width:200px; height:200px; font-family:宋體; font-size:50px; color:red; font-style:italic; /*斜體*/ font-weight:900; /*加粗100-900*/ text-decoration:line-through; /*刪除線。underline下劃線 overline上劃線 none，無，去超鏈接下劃線*/ } a { text-decoration:none; } .btn { width:100px; height:40px; border:1px dotted black; text-align:center; /*水平居中*/ line-height:40px; /*垂直居中*/ } .btn:hover { background-color:black; color:white; cursor:pointer; transition:1s; transform:rotate(10deg); /*轉動*/ box-shadow:5px 6px 7px red; /*虛化*/ } </style>
<body>
<div id="d1">
<p>甲乙丙甲乙丙</p><p>甲乙丙甲乙丙</p><p>甲乙丙甲乙丙</p>
<p>甲乙丙甲乙丙</p><p>甲乙丙甲乙丙</p><p>甲乙丙甲乙丙</p>
<p>甲乙丙甲乙丙</p><p>甲乙丙甲乙丙</p><p>甲乙丙甲乙丙</p>
</div>
<div id="d2">風雪依稀秋白發尾</div>
<a href="CSS課上練習3.html">超鏈接</a><br /><br />
<div class="btn">按鈕</div>
</body>
三、網頁效果
HTML CSS 層疊樣式表 二