HTML第三節

一.初識CSS

1.CSS定義

A.內部樣式表

B.外部樣式表?

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./第一次.css">
</head>
<body><p>這是p標簽</p><div>這是div標簽</div>
</body>
</html>

P{color: aquamarine;
}
div{color: brown;font-size: 30px;
}

?C.行內寫法

二.選擇器

1.標簽選擇器

注：1.所有的p標簽都會設置成一個格式?

2.類選擇器（差異化）

注：1.先定義類，再使用類

2.一個class屬性可以使用多個類名

3.定義類前面要加.

3.id選擇器

?4.通配符選擇器

注：作用：清除頁面中所有標簽的默認格式，方便后續設置每一項格式?

三.利用類選擇器畫盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red{width: 100px;height: 100px;background-color: red;}.orange{width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="red">div1</div><div class="orange">div2</div>
</body>
</html>

?四.文字控制屬性

（一）字體大小

注：1.默認字體大小為16px?

（二）字體粗細?

?（三）字體傾斜

注：1.字體傾斜不好看，一般用font-style清除文字的傾斜效果?

（四）行高

1.行高的書寫方法

2.行高的測量方法

?3.垂直居中

注：1.盒子高度即為height，好像涉及盒子模型?

?（五）字體族

注：1.從左向右依次查找，先找到哪個就用哪個?

?（六）font屬性

注：1. 具體設定的屬性值可以從京東等網站上復制

2.設置所有字體的初始格式，如果有需要單獨設置的字體則單獨設置

（七）文本修飾屬性?

1.文本縮進

注：1.2em表示首行縮進兩個字號大小的距離?

?2.文本對齊

注：1.居中的本質是文字內容居中

3.圖片實現居中效果?

注：1. 要將屬性設置給內容的父級，內容外要套div標簽

4.文本修飾線

（八）字體顏色

注：1.其中第二種寫法數字越大顏色越深

五.調試工具?

注：1.調試工具在瀏覽器檢查頁面中?

本文是對B站上黑馬免費課程的總結，供個人學習使用?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/72464.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/72464.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/72464.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！