標籤：標籤 img url ansi normal 技術分享 color 背景圖 html
一、
#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 層疊樣式表 二
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
