楔子：
1、什么是CSS，有什么作用？
1)CSS(Cascading Style Sheet):層疊樣式表語言，
2)CSS的作用是：
修飾HTML頁面，設定HTML頁面中的某些元素的樣式，讓HTML頁面更好看，
HTML還是主體，CSS依賴HTML，CSS的存在就是修飾HTML，所以新建的檔案還是xx.html檔案，
2、CSS需要掌握到什么程度？
第一，常見的CSS樣式會寫，第二，別人寫的CSS樣式能看懂，
3、在HTML頁面中嵌套使用CSS的三種方式：
第一種方式：在標簽內部使用style屬性來設定元素的CSS樣式，這種方式稱為行內定義方式，
語法格式：
<標簽 style="樣式名:樣式值;樣式名:樣式值;樣式名:樣式值;..."></標簽>
第二種方式：在head標簽中使用style塊，這種方式被稱為樣式塊方式，
語法格式：
<head>
<style type="text/css">
選擇器 {
樣式名 : 樣式值;
樣式名 : 樣式值;
.....
}
選擇器 {
樣式名 : 樣式值;
樣式名 : 樣式值;
.....
}
</style>
</head>
第三種方式：鏈入外部樣式表檔案，這種方式最常用（將樣式寫到一個獨立的xxx.css檔案當中，在需要的網頁上直接引入css檔案，樣式就引入了），
語法格式：
<link type="text/css" rel="stylesheet" href="https://www.cnblogs.com/Burning-youth/archive/2022/01/16/css檔案的路徑" />
這種方式易維護，維護成本較低，
正文：
1、HTML引入樣式的第一種方式：行內定義方式：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML引入樣式的第一種方式：行內定義方式</title>
</head>
<body>
<!--寬500像素，高60像素，背景顏色為“#CCFF”-->
<div style="width: 500px;height: 60px;background-color: #CCFFFF;"></div>
<br /><br />
<!--
樣式display
為none，則圖片有隱藏
為block，則顯示圖片
-->
<div style="width: 500px;height: 60px;background-color: #CCFFFF;display: none;"></div>
<br /><br />
<div style="width: 500px;height: 60px;background-color: #CCFFFF;
border-color: red;border-width: 1px;border-style: solid;"></div>
<br /><br />
<!--
border-color: red;border-width: 1px;border-style: solid;
可以整合為
border: red 1px solid;
-->
<div style="width: 500px;height: 60px;background-color: #CCFFFF;border: red 1px solid;"></div>
</body>
</html>
谷歌瀏覽器：
2、HTML中引入CSS樣式的第二種方式：樣式塊：
代碼：
<!doctype html>
<html>
<head>
<title>HTML中引入CSS樣式的第二種方式：樣式塊</title>
<!--固定格式-->
<style type="text/css">
/*
id選擇器
語法格式：
#id{
樣式名 : 樣式值;
樣式名 : 樣式值;
樣式名 : 樣式值;
....
}
*/
#usernameErrorMsg {
color : red;
font-size : 12px;
}
/*
標簽選擇器
語法格式：
標簽名 {
同上（id選擇器）
}
標簽選擇器作用的范圍比id選擇器廣，
*/
div {
background-color : black;
border : 1px solid red;
width : 100px;
height : 100px;
}
/*
類選擇器
語法格式：
.類名{
同上上（其他倆個選擇器）
}
*/
.student {
border : 1px solid red;
width : 400px;
height : 30px;
}
</style>
</head>
<body>
<!--
設定樣式字體大小12px，顏色為紅色
-->
<span id="usernameErrorMsg">對不起，用戶名不能為空！</span>
<div></div>
<div></div>
<!--class相同的標簽可以認為是同一類標簽，-->
<br><br><br>
<input type="text" />
<br><br><br>
<select >
<option>專科</option>
<option>本科</option>
</select>
</body>
</html>
谷歌瀏覽器：
3、在HTML中使用CSS樣式的第三種方式：引入外部獨立的css檔案：
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在HTML中使用CSS樣式的第三種方式：引入外部獨立的css檔案</title>
<!--引入css-->
<!--rel，type都是固定寫法，href后加引入的css路徑-->
<link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/Burning-youth/archive/2022/01/16/css/1.css" />
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<span id="baiduSpan">點擊我鏈接到百度哦！</span>
</body>
</html>
css代碼：
/*
標簽選擇器
*/
a {
/*
使下劃線消失
*/
text-decoration : none;
}
/*
cursor : 滑鼠樣式，pointer是小手，hand也是，但是hand有瀏覽器兼容問題，建議使用pointer
*/
/*
id選擇器
*/
#baiduSpan {
/*
下劃線；
滑鼠游標變為小手
*/
text-decoration: underline;
cursor: pointer;
}
谷歌瀏覽器：（小手沒截成功，，，）
4、串列樣式：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>串列樣式</title>
<style type="text/css">
/*
標簽選擇器
*/
ul{
/*
讓串列中的標志消失
list-style-type: none;
*/
/*
讓串列中的標志變為空心圈圈
list-style-type: circle ;
*/
/*讓串列中的標志變為黑心方塊*/
list-style-type: square ;
}
</style>
</head>
<body>
<ul>
<li>中國
<ul>
<li>北京</li>
<li>上海</li>
<li>重慶</li>
</ul>
</li>
<li>美國</li>
<li>俄國</li>
</ul>
</body>
</html>
谷歌瀏覽器：
5、CSS樣式的絕對定位：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS樣式的絕對定位</title>
<style type="text/css">
/*id選擇器*/
#div1{
background-color: red;
border: 1px black solid;
width: 300px;
height: 300px;
position : absolute; /*絕對定位*/
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
谷歌瀏覽器：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/413098.html
標籤：其他