Web前端開發，自學筆記整理
CSS核心屬性
1.核心屬性
01-CSS核心屬性.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS核心屬性</title>
<style type="text/css">
.test1 {
/*1.寬度*/
width: 400px;
/*2.高度*/
height: 300px;
/*3.背景*/
/*顏色單詞*/
/*background: red;*/
/*顏色16進制*/
/*background: #71d232;*/
/*顏色三原色RGB a表示透明度*/
/*background: rgb(26,162,97);*/
background: rgba(26,162,97,1);
/*4.字體顏色*/
color: white;
/*5.字體大小（默認16px）*/
font-size: 30px;
/*6.字體類型*/
font-family: "微軟雅黑","宋體";
/*7.字體加粗
bold/bolder/100-900（常規500）/normal
*/
font-weight: normal;
/*8.字體傾斜*/
font-style: italic;
/*9.大小寫
small-caps
all-small-caps
*/
font-variant: all-small-caps;
/*10.水平對齊方式 left/right/center/justify */
text-align: justify
}
.test2 {
width: 150px;
height: 50px;
background: red;
color: white;
/*11.垂直對齊方式 top/middle/bottom*/
/*vertical-align: middle;*/
/*行高
多行：行間距
單行：位置 (行高=容器高度 居中)
*/
line-height: 50px;
}
.main {
width: 150px;
height: 150px;
/*倍行高
倍數和字體大小有關，如果字體爲13px，2倍行高就是26px
*/
line-height: 2em;
/*line-height: 30px;*/
}
ul {
background: lightblue;
/*12.無序列表樣式*/
/*簡寫*/
/*list-style: none;*/
list-style: circle inside;
/*顯示圖片*/
/*list-style-image: url(img.png);*/
/*列表符號位置 inside/outside*/
/*list-style-position: outside;*/
/*disc實心圓、circle 空心圓、square實心方塊、none不顯示*/
/*list-style-type: square;*/
}
li {
line-height: 30px;
}
.test3 {
/*13.文本屬性*/
/*line-through刪除線*/
/*text-decoration: line-through;*/
/*underline下劃線*/
/*text-decoration: underline;*/
/*overline上劃線*/
text-decoration: overline;
}
a {
/*none 去掉劃線*/
text-decoration: none;
}
span {
font-size: 25px;
}
.car {
color: red;
}
.price-1 {
color:red;
text-decoration: line-through;
}
.price-2 {
color: red;
text-decoration: line-through;
}
.price-3 {
color: purple;
text-decoration: overline;
}
.phone {
font-style: italic;
font-size: 20px;
text-decoration: underline;
}
.box {
width: 300px;
height: 300px;
/*14.背景樣式*/
/*背景顏色*/
background-color: red;
/*背景圖片*/
background-image: url(qq.png);
/*背景平鋪方式
repeat 平鋪（默認）
no-repeat 不平鋪
repeat-x 水平方向平鋪
repeat-y 垂直方向平鋪
*/
background-repeat: no-repeat;
/*背景大小*/
background-size: 100px 100px;
/*背景位置
水平方向：left/center/right/具體數值
垂直方向：top/center/bottom/具體數值
*/
background-position: center;
}
</style>
</head>
<body>
<p class="test1">
你可以不聰明，但不可以不努力！
hello WORLD！
</p>
<div class="test2">HTML</div>
<p class="main">
你可以不聰明，但不可以不努力！你可以不聰明，但不可以不努力！你可以不聰明，但不可以不努力！
</p>
<br />
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<br />
<p class="test3">HTML</p>
<a href="01-CSS核心屬性.html">谷歌一下</a>
<br />
<div class="test4">
<span class="car">特斯拉電動跑車</span>新上市，不要<span class="price-1">99</span>，只要<span class="price-2">69</span>，VIP價<span class="price-3">59</span>，心動不如行動，趕快拿起電話預約吧(<span class="phone">82008820</span>), 電話預約購買贈送充電卡一張。
</div>
<br />
<div class="box"></div>
</body>
</html>2.浮動
02-浮動.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style type="text/css">
/*浮動存在的問題：層級、大小*/
.box {
width: 299px;
height: 300px;
background: red;
}
.view {
width: 100px;
height: 100px;
}
.view1 {
background: purple;
/*float: left;*/
float: right;
}
.view2 {
background: lightblue;
/*float: left;*/
float: right;
}
.view3 {
background: green;
/*float: left;*/
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="view view1"></div>
<div class="view view2"></div>
<div class="view view3"></div>
</div>
</body>
</html>3.盒子模型
03-盒子模型.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background: red;
/*padding 內邊距
一般用於調整盒子內容位置
*/
/*padding-left:20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;*/
/*一個值時：四個方向*/
/*padding:30px;*/
/*兩個值時：上下、左右*/
/*padding:30px 50px ;*/
/*三個值時：上、左右、下*/
/*padding:20px 30px 10px;*/
/*四個值時：上、右、下、左*/
padding: 10px 20px 30px 40px;
/*border 邊框*/
/*solid實線，dashed虛線，dotted點狀線，double雙線，none無*/
border-style: double;
border-width: 10px;
border-color: blue;
/*margin 外邊距
一般用於調整盒子位置
*/
/*margin-left: 30px;
margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;*/
/*margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px;*/
margin: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>