文本和字型相關樣式
- text-align: left /right/ center; 水準對齊方式
- text-decoration: underline下劃線/ overline上劃線/ line-through删除線/ none去掉下劃線
- line-height: 30px; 行高, 可以控制多行的間距, 單行可以控制垂直居中
- text-shadow: 顔色 x偏移值 y偏移值 濃度; 值越小越清晰
- 右下:++ 右上:+- 左上:-- 左下:-+
- font-size: 20px; 字型大小
- font-weight: bold加粗/ normal去掉加粗;
- font-style: italic 斜體
- font-family: xxx xxx xxxx; 設定字型
- font: 30px xxx xxx xxx; 設定字型大小 和字型
元素的顯示方式display
- block: 塊級元素的預設值
- 特點:獨占一行,可以修改寬高 , 包括:div,h1-h6,p等
- inline: 行内元素的預設值
- 特點:共占一行,不可以修改寬高,包括: span,b加粗,i斜體,u下劃線,s删除線, 超連結a
- inline-block:行内塊元素預設值
- 特點: 共占一行,可以修改寬高, 包括:img,input等
- 行内元素預設是不能修改寬高的, 如果必須要改, 需要将顯示方式display改成block或inline-block
盒子模型
- 盒子模型 = 寬高（weight、height）+外邊距（margin）+邊框（border）+内邊距（padding）
- 通過盒子模型的相關樣式,控制元素的顯示效果
- 寬高: 控制元素的顯示大小
- 外邊距: 控制元素的顯示位置
- 邊框: 控制邊框效果
- 内邊距: 控制元素内容的位置
寬高
- 指派方式: width/height
- 像素值
- 百分比(上級元素的百分比)
- 行内内元素不能修改寬高
外邊距
-
什麼是外邊距:
元素距上級元素或相鄰兄弟元素的距離稱為外邊距
- 指派方式:
margin-left/right/top/bottom:10; 單獨某個方向指派 margin:50px; 四個方向指派 margin:10px 20px; 上下10 左右20; margin:10px 20px 30px 40px; 上右下左 順時針 - 上下相鄰兩個元素彼此添加外邊距,取最大值
- 左右相鄰兩個元素彼此添加外邊距,兩者相加
- 行内元素上下外邊距無效
- 粘連問題: 當元素的上邊緣和上級元素的上邊緣重疊時,給元素添加上外邊距會出現粘連問題, 給上級元素添加overflow:hidden解決!
邊框
-
- border-left/right/top/bottom: 粗細 樣式 顔色; 單獨某個方向添加邊框
- border: 粗細 樣式 顔色; 四個方向添加邊框
- border-radius:3px; 圓角，值越大越圓 超過寬高一半時為正圓
内邊距
- 元素邊緣距内容的距離稱為内邊距, 用來控制元素内容的位置
- 給元素添加内邊距會影響元素的寬高
- 指派方式: 類似外邊距
padding-left/right/top/bottom:10px; 單獨某個方向 padding:10px; 四個方向 padding:10px 20px; 上下10 左右20 padding:10px 20px 30px 40px; 上右下左 順時針
CSS三大特性
- 繼承: 元素可以繼承上級元素文本和字型相關的樣式, 部分标簽自帶效果不受繼承影響,比如:超連結字型顔色, h1-h6字型大小 。
- 層疊性: 多個選擇器選擇到同一個元素時, 如果作用的樣式不同，則所有樣式全部層疊生效, 如果樣式相同，則由優先級決定。
晚課作業
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font: 12px "simhei", Arial, Helvetica, sans-serif;
color: #666;
}
body>div{
background-color: #e8e8e8;
overflow: hidden;/*解決粘連問題*/
display: inline-block;
}
#left_div{
width: 611px;
height: 376px;
background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_stationery_img1.png");
background-size: 254px 279px;
background-repeat: no-repeat;
background-position: 45px 52px;
}
#right_div{
width: 375px;
height: 376px;
background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_stationery_img2.png");
background-size: 130px 230px;
background-repeat: no-repeat;
background-position: 0 50%;
}
#left_div>div{
width: 245px;
height: 232px;
margin: 70px 0 0 340px;
}
#right_div>div{
width: 224px;
height: 155px;
margin: 75px 0 0 130px;
}
.p1{
font-size: 32px;
color: #333;
margin-bottom: 12px;
}
.p3{
font-size: 16px;
margin-bottom: 12px;
color: #E89AA8;
font-weight: bold;
}
a{
width: 132px;
height: 40px;
display: block;
background-color: #E89AA8;
text-decoration: none;
text-align: center;
line-height: 40px;
color: white;
border-radius: 2px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="left_div">
<div>
<p class="p1">雅緻布面年曆本</p>
<p class="p2">有色更有範！變色PU皮，撞色搭配，絢麗色彩，張揚個性，點亮生活新時尚！</p>
<p class="p3">僅售 ￥49.00</p>
<a href="">檢視詳情</a>
</div>
</div>
<div id="right_div">
<div>
<p class="p1">透視網格拉鍊袋</p>
<p class="p2">南韓創意卡通 叢林物語網格檔案袋</p>
<p class= ![RabbitMQ學習-服務端學習[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)