HTML第二课——css
生活随笔
收集整理的這篇文章主要介紹了
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> ? ?<!-- 這是注釋 --> ? ?<!--通過css改變文字顏色：color屬性 --> ? ?<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> ? ?<!-- 這是注釋 --> ? ?<!--通過css改變文字顏色：color屬性 --> ? ?<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=""> ? ?<!-- ? ?<style type="text/css"> ? ? ? ?/* ? ? ? ? ? ?css的注釋寫法 ? ? ? ?*/ ? ? ? ?div{ ? ? ? ? ? ?border: 1px solid red; ? ? ? ? ? ?display: inline; ? ? ? ?} ? ?</style> --> ? ?<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body> ? ?<!-- 這是注釋 --> ? ?<!--通過css改變文字顏色：color屬性 --> ? ?<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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql中使用BETWEEN AND
- 下一篇： 【面试】前端面试人事问题