04_CSS盒子模式

04_CSS盒子模式

04_CSS盒子模式

 

CSS 中每一個選取項 (selector) 都是以盒子模式 (box model) 來呈現,也就是說, CSS 制定的樣式 (style) 使 HTML 文件中的元素都具有邊界 (margin) 、邊框 (border) 與邊距 (padding)

 

css file

div {
color: white;
background-color: black;/*底色*/
width: 20%;/* 寬度 */
height: 40%;/* ��度 */
margin: 1%;/* 邊界 */
border: thick blue solid;/* 邊框 */
padding: 10%;/* 邊距 */
text-align: center;/* 文字至中 */
}
jash {
color: white;
background-color: black;/*底色*/
width: 50%;/* 寬度 */
height: 40%;/* ��度 */
margin: 30%;/* 邊界 */
border: thick blue solid;/* 邊框 */
padding: 10%;/* 邊距 */
text-align: center;/* 文字至中 */
}
span {
color: white;
background-color: black;
margin: 2;
border: thick blue solid;
padding: 6;
}

html file

<html>
<head>
<title>網頁標題</title>
<linkrel="stylesheet"type="text/css"
      href="demo01.css">
</head>
<body>
<span>There is no spoon.</span>
<div>There is no spoon.</div>
<jash>There is no spoon.</jash>
</body>
</html>

 

 

 


發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *