當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML第二课——css

發布時間：2023/12/10 HTML 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML第二课——css 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

請關注公眾號：自動化測試實戰

先給大家提個建議，就是用sublime編輯器來編寫。用其他的也無所謂，我只是建議，因為這個會幫你自動補全很多代碼。

css概念

css叫層疊樣式表。意思就是一層一層的疊加。作用就是讓頁面中的可視化標簽變得好看。

css的三種寫法

內聯式

通過標簽里的style屬性設置。

<!DOCTYPE html>
<html>
<head> ? ?<meta charset="utf-8"> ? ?<title>Css</title> ? ?<meta name="keywords" content="key1, key2"> ? ?<meta name="description" content="">
</head>
<body> ? ? ? ? ? ?<div style="color: red; border: 1px solid red; display: inline;">This is a div tag</div> ? ?<div style="color: rgb(15, 20, 220);">This is a div tag</div> ? ?<div style="color: #ccff66;">This is a div tag</div>
</body>
</html>

顏色的書寫方式：

- 英文直接書寫
- rgb r: red, g: green, b: blue，所有顏色都是紅綠藍。取值0-255,?rgb(0，0，0)就代表黑色，rgb(255, 255, 255)代表白色，rgb(0, 255, 0)代表綠色
- 十六進制：前面要加#，比如#ccff00

以后都用十六進制寫顏色。

嵌入式

寫在<head>里的<style>標簽。

<!DOCTYPE html>
<html>
<head> ? ?<meta charset="utf-8"> ? ?<title>Css</title> ? ?<meta name="keywords" content="key1, key2"> ? ?<meta name="description" content=""> ? ?<style type="text/css"> ? ? ? ?/* ? ? ? ? ? ?css的注釋寫法 ? ? ? ?*/ ? ? ? ?div{
? ? ? ? ? ?border: 1px solid red; ? ? ? ? ? ?
? ? ? ? ? ?display: inline; ? ? ? ?
? ? ? ?} ? ?</style></head><body> ? ? ? ? ? ?<div>This is a div tag</div>
</body>
</html>

引用式

通過head標簽里的link標簽的href屬性引入外部的css文件。rel="stylesheet"是固定值，就這么寫，如果你用sublime編輯器，這個是自動補全的。

文件結構：

css文件夾里面有一個index.css文件。

lesson2.html

<!DOCTYPE html>
<html>
<head> ? ?<meta charset="utf-8"> ? ?<title>Css</title> ? ?<meta name="keywords" content="key1, key2"> ? ?<meta name="description" content=""> ? ? ? ?<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body> ? ? ? ? ? ?<div>這是一個div標簽</div>
</body>
</html>

index.css

div{
? ?font-family: 'Microsoft Yahei'; ? ?
? ?font-size: 20px; ? ?
? ?border: 1px solid red; ? ?
? ?display: inline;
}

以后寫css只用引用式；以后寫css只用引用式；以后寫css只用引用式

注意：如果你在css里寫了樣式，也在div標簽里寫了style，那樣會有限選擇div里面的style，這就是就近原則。

明天接著講css剩下的知識點，大家先消化一下上面的知識。

轉載于:https://www.cnblogs.com/captainmeng/p/8983981.html

總結

以上是生活随笔為你收集整理的HTML第二课——css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
css

上一篇： mysql中使用BETWEEN AND
下一篇：历史：古代：秦朝