一.CSS基礎
1.1 什么是CSS
Cascading Style Sheet 層疊級聯樣式表
CSS: 表現 (美化網頁)
二.CSS入門
2.1 CSS快速入門
1.在idea中創建一個新專案
2.將專案建成如下形式
3.在css檔案夾中創建樣式檔案style.css
h1{
color: cornflowerblue;
}
4.在index.html中使用link標簽與css檔案連接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是標題</h1>
</body>
</html>
此時的效果：
沒有css：
有css：
總結：css最好獨立于html
語法：
<!-- 語法：
選擇器{
statement;
statement;
statement;
}
-->
2.2 CSS匯入方式
1.行內樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css學習2</title>
</head>
<body>
<!--行內樣式，在標簽元素中撰寫一個style屬性，撰寫樣式即可-->
<h1 style="color: cornflowerblue">我是h1</h1>
</body>
</html>
行內樣式在行內直接撰寫style屬性，但是不符合css獨立于html的思想，
2.內部樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css學習2</title>
<!-- 內部樣式-->
<style>
h1{
color: cadetblue;
}
</style>
</head>
<body>
<!--行內樣式，在標簽元素中撰寫一個style屬性，撰寫樣式即可-->
<h1 style="color: cornflowerblue">我是h1</h1>
</body>
</html>
head中的style標簽是內部樣式
此時代碼中有兩個樣式，行內樣式為
內部樣式為
打開網頁，發現：
顯示為行內樣式，
將行內樣式去除，網頁顯示為：
結論：行內樣式優先度高于內部樣式
3.外部樣式
h1{
color: yellow;
}
最終的優先級結論：
就近原則
4.拓展（匯入式）
使用@import
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css學習</title>
<style>
@import url("css/style.css");
</style>
</head>
<body>
<h1>css學習</h1>
</body>
</html>
先顯示結構，后渲染，會導致一些問題，（css2.1）
三.選擇器
作用：選擇頁面上的某一個或者某一類元素
2.1基本選擇器
1.標簽選擇器：選擇一類標簽
語法：
h1{
color: darkslategray;
background: cyan;
border-radius: 10px;
}
p{
font-size: 80px;
}
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css學習</title>
<style>
/*
標簽選擇器，會選擇到頁面上所有這個標簽的元素
*/
h1{
color: darkslategray;
background: cyan;
border-radius: 10px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>開心每一天</h1>
<p>小宋的css學習</p>
</body>
</html>
效果：
2.類選擇器（class）：選擇所有class屬性一致的標簽
語法：
/*
格式：
.(class的名稱){
statements;
}
好處，可以多個標簽歸類，是同一個class時可以復用，
*/
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小宋的CSS學習</title>
<style>
.c2{
background-color: cornflowerblue;
color: darkslategray;
border-radius: 10px;
}
.c3{
color: burlywood;
}
</style>
</head>
<body>
<h1 class="c1">大標題1</h1>
<h1 class="c2">大標題2</h1>
<h1 class="c3">大標題3</h1>
<p class="c2">內容1</p>
</body>
</html>
效果：
3.id選擇器：全域唯一
語法：
/*
id選擇器語法
#id名稱{
statements;
}
id必須保證全域唯一
*/
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css學習</title>
<style>
#sdawqe{
color: cornflowerblue;
background-color: cadetblue;
}
#smy{
background-color: aquamarine;
}
#0003{
background-color: burlywood;
}
</style>
</head>
<body>
<h1 id="sdawqe">標題一</h1>
<h1 id="smy">標題二</h1>
<h1 id="0003">標題三</h1>
</body>
</html>
效果：
注：
在id選擇器中，id=""中開頭不能為數字，因為在這里id需要遵守變數命名規范，相當于在記憶體中創建一個類為id的變數，
border-radius可以使背景的邊緣變圓滑，
優先級：id選擇器>類選擇器>標簽選擇器
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/265416.html
標籤：其他
下一篇：Vue新手入門指南（易懂）