一、CSS(層疊式樣式表),決定頁(yè)面怎么顯示元素
1、引入方式:
2、優(yōu)先級(jí):行內(nèi)模式>內(nèi)嵌模式>外鏈?zhǔn)?br>二、CSS語(yǔ)法:
1、內(nèi)嵌:
選擇器{屬性1:value1;屬性2:value2;}
注釋 /* */
選擇器
第一種情況:標(biāo)簽名,影響其他同類型的標(biāo)簽;
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> div { color:red; text-align:center; } </style></head><body> <div>我是黑客</div></body></html>
第二種情況;id 選擇器
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #hacker { color: green; text-align: center; } </style></head><body> <div id="hacker">我是黑客</div></body></html>
第三種情況: class ,可以在不同的元素中去使用
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .test { color: red; text-align: center; } </style></head><body> <h1 class="test">這是一級(jí)標(biāo)題</h1> <p class="test">這是段落</p></body></html>
?
2、外鏈
需要XX.css
例:mystyle.css
#hacker{ color: red; text-align: center; }
<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="mystyle.css"></head><body> <div id="hacker">我是黑客</div></body></html>
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> @import url(css/mysql.css) </style></head><body> <div id="hacker">我是黑客</div></body></html>
三、常用樣式:
Margin:外邊框
Border:邊框
Padding:內(nèi)邊框
Content:顯示數(shù)據(jù)的地方(文本、圖片等)
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #hacker{ background-color: lightgrey; width: 300px; border: 20px solid red; padding: 10px; margin: 20px } </style></head><body> <div id="hacker">我是黑客</div></body></html>
效果圖:
?
來源:https://www.icode9.com/content-4-465401.html聯(lián)系客服