33-01html和css

標籤：語言   水平   one   lan   識別   style   路徑   匹配   auto   

<!-- 連結標籤 a anchor
　　href 網址.本地路徑

　　target: 目標 新開一個_blank 預設就是_self

　　 <a href="http://www.baidu.com">連結的標籤</a>
<!-- <a href="03-標題標籤.html" target="_blank">更多</a> -->

 

<!-- 1.相對路徑 參照當前的檔案 ./或者不寫
上級 ../
上上級../../
-->
<!-- 2.絕對路徑 從根盤 -->

 

<!-- div標籤 沒有實際的語言含義 語義 -->
<!-- span 標籤 一般放在 行內的; 沒有語義 -->

<!-- 圖片標籤 image

src  source 圖片的地址路徑
alt  alternate 替換, 圖片不存在提示,爬蟲 :爬資料識別
-->

<img src="images/banner1.jpg" alt="電腦圖片">

<!-- 段落標籤 p paragraph-->
<!-- 換列標籤 <br /> -->

<!-- 字元實體 系統中有些顯示有衝突
空格:&nbsp;
>:&gt;
<:&lt;
-->

<!-- CSS書寫方式 -->
<p style="color:green">
這是一大段話!
</p>

內嵌式
<style>
　　　　/* 選取器 */
　　p{
　　　　color: red;
　　　　}
</style>

外鏈式
<link rel="stylesheet" href="css/main.css">

文字屬性
p{
/* 字型大小 */
　　font-size: 20px;
/* 字型
漢字在匹配的時候有問題,建議英文
*/
　　font-family: "Microsoft Yahei";

/* 字型顏色 */
　　color: red;

/* 行高 */
　　line-height: 30px;

a{
/* 去掉底線 a */
　　text-decoration: none;
　　color: green;

}
</style>

邊框
div{
　　width: 300px;
　　height: 300px;

/* 背景色 */
　　background-color: red;
/* 邊框的粗細 實體線(最常用) 邊框顏色 */
/* border-top: 20px solid green; */
/* border-bottom: 10px dashed gold;虛線 */
/* border-left: 5px dotted blue;點線 */
/* border-right: 1px solid purple; */

/* border屬性連寫 */
　　border:10px solid gold;
}

div{
　　width: 200px;
　　height: 200px;
border: 1px solid green;

/* margin外邊距 */
/* margin-top: 20px;
margin-left: 50px;
margin-bottom: 100px;
margin-right: 200px; */

/* margin的屬性連寫 */
/* margin: 30px; 設定四個邊 */
/* margin:10px 30px 50px; */
/* 上 右 下 左 順時針 */
/* margin:10px 20px 30px 40px; */

/* 設定元素水平置中 */
/* margin-left: 600px; */
　　margin: 0 auto;

}

內邊距：內容到邊框的距離
div{

　　width: 300px;
　　height: 300px;
background-color: green;
　　border: 1px solid red;

/* 內邊距 */
/* padding-top: 5px;
padding-left: 10px;
padding-right: 30px;
padding-bottom: 50px; */

/* 屬性連寫 */

padding: 10px 20px 30px 40px;
}

 

選取器，1標籤，類別選取器，後代選取器

/* 1.標籤選取器 */
/* div{
　　width: 200px;
　　height: 200px;
　　background-color: red;
　　}

p{

　　color: gold;
} */

/* 2.類別選取器 */
/* 點 類名稱{屬性:值} */
/* .first{
　　width: 200px;
　　height: 200px;
　　background-color: red;
}

.second{
　　width: 200px;
　　height: 200px;
　　background-color: green;
} */

/* 3.層級選取器 後代選取器 */
/* 選取器space選取器{屬性:值} */ 選擇所有的後代，包括孫子
.box p{               或div p{  }

　　color: red;
}

33-01html和css