CSS
css的四種引入方式
- 直接寫在標籤中,用分號隔開
<div style='background-color:red;color:yellow'>這裏的背景是紅色,字是黃色</div>
- 寫在head標籤中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: red;
color:yellow;
}
</style>
</head>
<body>
<div>這裏的背景是紅色,字是黃色</div>
</body>
- 寫在css文件中,用link導入
建議使用方法
<!--css文件:style.css-->
div{
background-color: red;
color:yellow;
}
<!--html文件style.html-->
<head>
<link type='text/css' rel='stylesheet' href='style.css'>
</head>
<body>
<div>這裏的背景是紅色,字是黃色</div>
</body>
- import 導入
不建議用:在頁面全部加載完之後,再整體渲染
<!--css文件:style.css-->
div{
background-color: red;
color:yellow;
}
<!--html文件style.html-->
<head>
<style>
@import'style.css';
</style>
</head>
<body>
<div>這裏的背景是紅色,字是黃色</div>
</body>
4種方法的輸出頁面:
css選擇器(selector)
- 基礎選擇器
<style>
*{
<!--通配符,選擇全部-->
}
</style>
- 標籤選擇器
<style>
p{
<!--選擇所有p標籤-->
}
</style>
- css選擇器
<style>
#p1{
<!--選擇所有id='p1'的標籤-->
}
.p2{
<!--選擇所有class='p2'的標籤-->
}
</style>
- 多項選擇器
<style>
p,div,.span1{
<!--選擇所有p標籤-->
}
</style>
- 後代選擇器
<style>
#div1 p{
<!--選擇id='div1'的後代中的所有p標籤-->
}
</style>
- 子代選擇器
<style>
#div1>p{
<!--選擇id='div1'的子代中的所有p標籤-->
}
</style>
- 毗鄰選擇器
<style>
#div1+p{
<!--選擇id='div1'後面緊挨着的一個p標籤,如果沒有就沒用-->
}
</style>
- 屬性選擇器
<head>
<style>
[class]{
<!--選擇所有有class屬性的標籤-->
}
[class='div1']{
<!--選擇所有class='div1'的標籤-->
}
[class~='div2']{
<!--選擇所有class='div1 div2'中含有div2的標籤-->
}
[class^='div1']{
<!--選擇所有class='div1 div2'以div1開頭的標籤-->
}
[class$='div2']{
<!--選擇所有class='div1 div2'以div2結尾的標籤-->
}
[wolf]{
<!--可以自己寫一個屬性,選擇所有有wolf屬性的標籤-->
}
div[class='p']{
<!--選擇div標籤中class='p'的標籤-->
}
</style>
</head>
<style>
p:after{
content:'add';
color:red;
}
p:before{
content:'add';
color:yellow;
}
<!--在p標籤文本前後添加文本和樣式-->
</style>
僞類()
<head>
<style>
a:link{
<!--未選擇樣式-->
}
a:hover{
<!--鼠標懸浮時樣式-->
}
.a1:hover .a2{
// 鼠標懸浮在a1時,a2改變樣式
}
a:visited{
<!--訪問後樣式-->
}
a:active{
<!--鼠標點擊時樣式-->
}
</style>
</head>
<body>
<a href='https://blog.csdn.net/weixin_42016382/article/details/100873921'></a>
</body>
css的屬性
color/font-size/font-weigth/font-family/height/width/line-height/position/display/z-index/opacity/float/clear/overflow/visibility
hover/active/after/before
padding/marign/border/border-radius/
- 字體屬性
<style>
div{
/*字體顏色*/
color:red;
/*color:#G3c;*/
/*color:#GG33cc*/
/*color:rgb(255,255,255)*/
/*字體大小*/
font-size:45px;
/*字體粗細(0,100,200~900,bold,bolder,lighter...)*/
font-weight:900;
/*font-style:italic;*/
/*字體樣式*/
font-family:'Times New Roman';
/*字體居中:center、left、right*/
text-align: center;
/*背景行高*/
height: 100px;
/*文本行高:文本上下居中*/
line-height: 100px;
/*單詞間距*/
word-spacing: 5px;
/*字母間距*/
letter-spacing: 2px;
/*文本轉換格式*/
text-transform: capitalize;
/*寬度*/
width:50%;
}
</style>
- 背景屬性
<style>
/*background-color: #cc3399;*/
/*background-image: url('ico.png');*/
/*!*平鋪方式:repeat/no-repeat*!*/
/*background-repeat: no-repeat;*/
/*位置*/
background-position: center center;
background: url('ico.jpg') no-repeat 100px 50px red;
</style>
- 邊框屬性
<style>
/*3種邊距都可以設置4個方向*/
/*盒子之間的間距/居中*/
margin:0 auto;
/*margin-bottom: 1px;*/
/*margin-left: 1px;*/
/*margin-right: 1px;*/
/*margin-top:1px;*/
/*盒子邊框:粗細/顏色/樣式*/
border:1px red groove;
padding:1px;
</style>
- 列表屬性
ul,ol{
list-style:decimal-leading-zero;
list-style:none;<br> list-style:circle;
list-style:upper-alpha;
list-style:disc;
}
- display屬性
塊級標籤內聯標籤轉換
<style>
div{
display:block;/*none;inline;inline-block;*/
}
</style>
- a標籤屬性
a{
text-decoration: none; /*設置超鏈接下劃線格式*/
}
文檔流
正常文檔流:
脫離文檔流:
1. float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
height:50px;
width:50px;
background-color: blue;
}
.div2{
height:50px;
width:50px;
background-color: green;
}
.div3{
height:100px;
width:100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
設置左float:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
height:50px;
width:50px;
background-color: blue;
}
.div2{
height:50px;
width:50px;
background-color: green;
/*設置左浮動設置左浮動設置左浮動設置左浮動*/
float:left;
}
.div3{
height:100px;
width:100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
<style>
.div2{
height:50px;
width:50px;
background-color: green;
/*設置右浮動設置右浮動設置右浮動設置右浮動*/
float:right;
}
</style>
在這裏背景會浮動覆蓋,但是文本不會被覆蓋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color:gold;
}
.div1{
height:50px;
width:50px;
background-color: blue;
}
.div2{
height:50px;
width:50px;
background-color: green;
float:left;
}
.div3{
height:100px;
width:100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
</body>
</html>
2. clear
<style>
div{
color:gold;
}
.div1{
height:50px;
width:50px;
background-color: blue;
}
.div2{
height:50px;
width:50px;
background-color: green;
float:right;
}
.div3{
height:100px;
width:100px;
background-color: purple;
/*clear:right;*/
}
</style>
<style>
div{
color:gold;
}
.div1{
height:50px;
width:50px;
background-color: blue;
}
.div2{
height:50px;
width:50px;
background-color: green;
float:right;
}
.div3{
height:100px;
width:100px;
background-color: purple;
/*右邊清除,右邊有浮動時自動向下移*/
clear:right;
}
</style>
clear解決浮動混亂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0 auto;
}
div{
color:gold;
font-weight: 900;
}
.top{
background-color: blue;
}
.div1{
width: 200px;
color:black;
float: left;
}
.div2{
width: 200px;
float: left;
}
.bottom{
background-color: #cc3399;
text-align: center;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">111111111</div>
<div class="div2">222222222</div>
</div>
<div class="bottom">3333333</div>
</body>
</html>
這裏並不能得到我們想要的浮動結果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0 auto;
}
div{
color:gold;
font-weight: 900;
}
.top{
background-color: blue;
}
.div1{
width: 200px;
color:black;
float: left;
}
.div2{
width: 200px;
float: left;
}
.div3{
clear:both;
}
.bottom{
background-color: #cc3399;
text-align: center;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">111111111</div>
<div class="div2">222222222</div>
<div class="div3"></div>
</div>
<div class="bottom">3333333</div>
</body>
</html>
在浮動標籤下面添加一個空標籤,設定樣式 clear:both; 隔離下面的標籤,解決浮動混亂
清除浮動的主流方法:
<style>
// 寫這樣一個樣式:
.clearfix:after{ // 在浮動的盒子父級最後添加以下盒子
content:'...'; // 盒子內容(隨意,但不能爲空)
display:block; // 使盒子爲塊級元素,佔整行
clear:both; // 隔離上面的浮動元素
visibility:hidden; // 隱藏盒子文本內容content
height:0; // 使盒子高度爲0,不佔頁面位置
}
</style>
// 用這樣一個空標籤來隔離浮動
3. overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0 auto;
}
div{
color:gold;
font-weight: 900;
}
.top{
background-color: blue;
overflow: hidden;
}
.div1{
width: 200px;
color:black;
float: left;
}
.div2{
width: 200px;
float: left;
}
.bottom{
background-color: #cc3399;
text-align: center;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">111111111</div>
<div class="div2">222222222</div>
</div>
<div class="bottom">3333333</div>
</body>
</html>
在外層class='top’的樣式加入 overflow:hidden; 也能實現正確的需求。隱藏超出部分
4.position
- fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0 auto;
}
.div1{
height: 1000px;
background-color: aqua;
}
.div2{
height: 1000px;
background-color: aquamarine;
}
.a{
position: fixed;/*固定標籤*/
bottom:10px;
right:10px;
}
</style>
</head>
<body>
<div class="div1" id="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<a class="a" href="#div1">回到頂部</a>
</body>
</html>
在滾動條的滾動中,標籤有position:fixed的標籤位置固定
2.position:relative; 改變盒子位置,不脫離文檔流,以原位置爲基礎移動。
2. position:absolute; 改變盒子位置,脫離文檔流,後面的盒子前移,該標籤會向上找有position:releative; 的前輩標籤爲基礎移動,找不到時以html爲基礎移動。
對於脫離文檔流的,即 position:absolute; 使用 text-align:center; 時,必須加入寬度 width:100%; 脫離文檔流後,不指定寬度,盒子不知道瀏覽器寬度,無法居中
懸浮示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<style>
*{
margin:0;
}
.left{
float:left; // 左飄
}
.right{
float:right; // 右飄
}
.pg-head{ // 上部分背景,基本樣式
height:48px;
background-color: deepskyblue;
line-height: 48px;
}
.pg-head .logo{ // logo樣式,background
width:200px;
height:48px;
text-align: center;
}
.pg-head .info{ // 右側頭像部分樣式及position定位前提relative
width: 100px;
height:48px;
position:relative;
right:200px;
text-align: center;
}
.pg-head .info:hover{ // 頭像懸浮樣式
background-color: darkgray;
}
.pg-head .info:hover .accessory{ // 鼠標懸浮到頭像時,展示額外內容
display: block;
}
.pg-head .info .a img{ // 頭像樣式
width:40px;
height:40px;
border-radius: 50%;
margin: 4px;
}
.body-left{ // 下部分左邊菜單基本樣式
width:200px;
position: absolute;
top:50px;
bottom:0;
left:0;
border:1px red solid;
}
.body-right{ // 下部分右邊主要內容樣式
z-index: 9; // 與頭像額外內容分層
position: absolute;
left: 210px;
right:0;
bottom:0;
overflow: auto;
top:50px;
border:1px red solid;
}
.pg-head .info .opr{ // 額外內容標籤樣式
display: block;
background-color: deepskyblue;
}
.pg-head .info .accessory{ // 額外內容整體樣式及position定位
display: none;
text-align: center;
line-height:48px;
width: 100px;
height: 48px;
position: absolute;
top:48px;
z-index: 10;
}
.pg-head .info .accessory a:hover{ // 額外內容鼠標懸浮樣式
background-color: darkgray;
}
</style>
</head>
<body>
<div class="pg-head">
<div class="left logo">Python</div>
<div class="right info">
<a class="a">
<img src="09.jpg">
</a>
<div class="accessory">
<a class='opr'>用戶信息</a>
<a class="opr">註銷用戶</a>
</div>
</div>
</div>
<div class="pg-body">
<div class="body-left"></div>
<div class="body-right">
<p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
<p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
<p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
<p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
<p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
</div>
</div>
<script src="jquary-3.4.js"></script>
<script>
</script>
</body>
</html>
效果:鼠標懸浮時,展示額外內容