Java自學-CSS(1)
阿新 • • 發佈：2021-08-15
Java自學-CSS(1)
1、CSS的簡單介紹
2、什麼是CSS和發展史
練習格式:
3、CSS的快速入門及優勢
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--規範，<style>可以編寫css的程式碼 每一個宣告，最好使用分號結尾 語法: 選擇器{ 宣告1; 宣告2; 宣告3; } --> <style> h1{ color: chartreuse; } </style> </head> <body> <h1>我是標題</h1> </body> </html>
建議使用這種規範：
4、四種css匯入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--內部樣式--> <style> h1{ color: chartreuse; } </style> <!--外部樣式--> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--優先順序:行內樣式>內部樣式>外部樣式（錯）--> <!--優先順序:就近原則--> <!--行內樣式:在標籤元素中，編寫一個style屬性，編寫樣式即可--> <h1 style="color: crimson">我是標題</h1> </body> </html>
5、三種基本選擇器-重要
標籤選擇器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*標籤選擇器，會選擇到頁面上所有的這個標籤的元素*/ h1{ color: #5c88c9; background: #a92525; border-radius: 20px; } p{ font-size: 80px; } </style> </head> <body> <h1>蔡偉</h1> <h1>蔡偉</h1> <p>想學Java</p> </body> </html>
類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*類選擇器的格式.class的名稱{
好處，可以多個標籤歸類，是同一個cLass,可以複用
*/
.caiwei{
color: aquamarine;
}
.xss{
color: antiquewhite;
}
</style>
</head>
<body>
<h1 class="caiwei">標題1</h1>
<h1 class="xss">標題2</h1>
<h1 class="caiwei">標題3</h1>
<p class="caiwei">p標籤</p>
</body>
</html>
id選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id選擇器: id必須保證全域性唯一!
#id名稱{}
不遵循就近原則，固定的
優先順序： id選擇器>cLass選擇器>標籤選擇器
*/
#caiwei{
color: crimson;
}
.style1{
color: chartreuse;
}
h1{
color: rgb(104, 220, 220);
}
</style>
</head>
<body>
<h1 id="caiwei">標題1</h1>
<h1 class="style1">標題2</h1>
<h1 class="style1">標題3</h1>
<h1>標題4</h1>
<h1>標題5</h1>
</body>
</html>