CSS相關
2020-07-29 22:44:50
文章目錄
一，基礎
1.使用CSS給表格的背景加顏色
<style>
td{
background-color:gray;
}
</style>
<table border="1">
<tr >
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
2.關於其語法
選擇器{屬性:值}
（以P爲例子）
方法1.直接把所有字改變顏色
<style>
p{
color:red;
}
</style>
<p>TAKE MY HANDS UP</p>
<p>YOU ARE THE COURSE OF MY EUPHORIA</p>
方法2.在裏面加style
<p style='color:purple'>TAKE MY HANDS UP</p>
<p>YOU ARE THE COURSE OF MY EUPHORIA</p>
3.選擇器
選擇器主要分3種
①元素選擇器
<style>
p{
color:red;
}
</style>
<p>TAKE MY HANDS UP</p>
<p>YOU ARE THE COURSE OF MY EUPHORIA</p>
②id選擇器
<style>
p{
color:red;
}
#p1{
color:green;
}
#p2{
color:purple;
}
</style>
<p>JK</P>
<p id='p1'>TAKE MY HANDS UP</p>
<p id='p2'>YOU ARE THE COURSE OF MY EUPHORIA</p>
③類選擇器（pre，after前面那個點不能忘記）
<style>
.pre{
color:blue;
}
.after{
color:green;
}
</style>
<p class='pre'>JK</P>
<p class='pre'>TAKE MY HANDS UP</p>
<p class='pre'>YOU ARE THE COURSE OF MY EUPHORIA</p>
<p class='after'>JK</P>
<p class='after'>TAKE MY HANDS UP</p>
<p class='after'>YOU ARE THE COURSE OF MY EUPHORIA</p>
④.更加精準的選擇
<style>
p.blue{
color:blue;
}
</style>
<p class='blue'>class=blue's p</P>
<span class='blue'>class=blue's span</span>
4.註釋
跟java一樣
/*
*/
5.尺寸
<style>
p#percentage{
width:50%;
height:50%;
background-color:pink;
}
p#pix{
width:180px;
height:50px;
background-color:purple;
}
</style>
<p id='percentage'>按照比例設定尺寸50%寬50%高</P>
<p id='pix'>按照畫素設定尺寸</p>
6.背景相關
①background-color：
- 預定義的顏色名字
比如red,gray,white,black,pink，參考顏色速查手冊 - rgb格式
分別代表紅綠藍的比例 rgb(250,0,255) 即表示紅色是滿的，沒有綠色，藍色是滿的，即紅色和藍色混合在一起：紫色 - 16進位制的表示
#00ff00 等同於 rgb(0,255,0)
<style>
p.gray{
background-color:gray;
}
h1{background:transparent}
h2{background:rgb(250,0,225)}
h3{background:#00ff00}
</style>
<p class='gray'>灰色</p>
<h1>透明背景</h1>
<h2>紫色</h2>
<h3>綠色</h3>
②把圖片做背景
#拿其中一個做例子：
```java
<style>
div#test
{
background-imge:url(pjm.jpg);
width:100px;
height:100px;
}
</style>
<div id='test'>
he is pjm,my cute son.
</div>
③背景重複
background-repeat屬性
值可以選
repeat; 水平垂直方向都重複
repeat-x; 只有水平方向重複
repeat-y; 只有垂直方向重複
no-repeat; 無重複
<style>
div#norepeat
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-repeat: no-repeat;
}
<div id="norepeat">
背景不重複
</div>
④平鋪背景
<style>
div#contain
{
background-imge:url(pjm.jpg);
width:100px;
height:100px;
background-size:contain;
}
</style>
<div id="contain">
背景平鋪，拉伸過
</div>
7.文字美化相關
①顏色
<style>
div#color
{
color:pink;
}
</style>
<div id="color">
bts
</div>
②關於有邊框的一塊塊
A.會形成那種有邊框且字在最左邊的效果。
<style>
div#left
{
text-align:left;
}
</style>
<div id='left'>
bts
</div>
B.字有多少就多長，用align
<style>
div#left{
text-align:left;
}
/*讓div和span的邊框顯露出來，便於理解本知識點*/
div,span{
border: 1px gray solid;
margin:10px;
}
div#right{
text-align:right;
}
div#center{
text-align:center;
}
span#right{
text-align:right;
}
</style>
<div id="left">
左對齊
</div>
<div id="right">
右對齊
</div>
<div id="center">
居中
</div>
<span id="right">
span看不出右對齊效果
</span>
③一些字的效果
選擇器{屬性：值}
屬性：text-decoration
值： overline
<style type="text-css">
h1{text-decoration:overline}
h2{text-decoration:line-through}
h3{text-decoration:underline}
h4{text-decoration:blink}
.a{text-decoration:none}
</style>
<h1>knj</h1>
<h2>ksj</h2>
<h3>myg</h3>
<h4>jhs</h4>
<a href="https://how2j.cn/">linefriends</a>
/*href不要寫錯成herf*/
<a class='a' href='https://how2j.cn/'>out</a>
④行間距
<style>
p{
width:200px;
}
.p{
line-height:200%;
}
</style>
<p>
DNA
Fake Love
Boy meet evil
blood tear sweat
</p>
<p class='p'>
Idol
ON
Wings
Mic Drop
mono
August D
Forever rain
</p>
⑤字元間距
<style>
p{
width:200px;
}
.p{
letter-spacing:2;
}
</style>
<p>
abcdefg abcdefg abcdefg abcdefg
</p>
<p class='p'>
abcdefg abcdefg abcdefg abcdefg
</p>
⑥單詞間距
<style>
p{
width:200px;
}
.p{
word-spacing:10;
}
</style>
<p>
abcdefg abcdefg abcdefg abcdefg
</p>
<p class='p'>
abcdefg abcdefg abcdefg abcdefg
</p>
⑦首行縮排
<style>
p{
width:200px;
}
.p{
text-indent:50;
}
</style>
<p>
abcdefg abcdefg abcdefg abcdefg
</p>
<p class='p'>
abcdefg abcdefg abcdefg abcdefg
</p>
⑧大小寫之類
<style>
/*大寫*/
p.b{
text-transform:uppercase;
}
/*小寫*/
p.t{
text-transform:lowercase;
}
/*首字母大寫*/
p.s{
text-transform:capitalize;
}
</style>
<p class='b'>
abcdefg
</p>
<p class='t'>
abcdefg
</p>
<p class='s'>
abcdgefg
</p>
⑨關於空白格
<style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
p.n{
white-space:normal}
p.p{
white-space:pre}
}
p.pw{
white-space:pre-wrap
}
p.nw
{
white-space:nowrap}
</style>
<p class='n'>
在預設情況下，多個 空白格或者
換行符
會被 合併成一個空白格
</p>
<p class="p">
保留所有的 空白格
以及換行符
相當於pre元素
特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字
</p>
<p class="pw">
保留所有的 空白格
以及換行符
相當於pre元素
特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字
</p>
<p class="nw">
不會換行
不會換行
不會換行
不會換行
不會換行
不會換行
直到br<br/>才換行
</p>
8.文字大小等
①大小
<style>
p.b{
font-size:70px;
}
p.s1{
font-size:50%;}
p.s2{
font-size:0.5em;}
</style>
<p>normal</p>
<p class='b'>30px's</p>
<p class-'s1'>50%bili</p>
<p class='s2'>0.5em</p>
#②斜體#
<style>
p.n{
font-style:normal;
}
p.i{
font-style:italic;}
</style>
<p>normal</p>
<p class='n'>normal's</p>
<p class='i'>xieti</p>
③#粗體#
<style>
p.n{
font-weight:normal;
}
p.b{
font-weight:bold;}
</style>
<p>normal</p>
<p class='n'>normal's</p>
<p class='b'>cu</p>
④字型檔裡用字型
<style>
p.n{
font-family:times new roman;
}
p.b{
font-family:arial;}
</style>
<p>normal</p>
<p class='n'>ziku's times new roman</p>
<p class='b'>ziku's</p>
綜合使用
<style>
p.all{
font:italic bold 30px "Times New Roman";
}
</style>
<p>預設字型</p>
<p class="all">斜體的 粗體的 大小是30px的 "Times New Roman" </p>
雙擊選中所有程式碼
試一下
9.滑鼠樣式
十字架式
<style>
span{
cursor:crosshair;
}
</style>
<span>shizijia</span>
10.表格
關於表格的寬度
屬性:table-layout
automatic; 單元格的大小由td的內容寬度決定
fixed; 單元格的大小由td上設定的寬度決定
（屬性：值）
但是中文不行
<style>
table.t1{
table-layout:automic;
}
table.t2{
table-layout:fixed;
}
</style>
<table class='t1' border='1' width='100%'>
<tr>
<td width='10%'>abcdefghijk,mnopqrstuvwxyz</td>
<td width='90%'>abc</td>
</tr>
</table>
<table class='t2' border='1' width='100%'>
<tr>
<td width='50px'>abcdefghijk,mnopqrstuvwxyz</td>
<td >abc</td>
</tr>
</table>
11.邊框
①虛實線
屬性： border-style
solid: 實線
dotted:點狀
dashed:虛線
double:雙線
②顏色
屬性：border-color
值：red,#ff0000,rgb(255,0,0)
③寬度
屬性：border-width
值：數位
（多個一起用）
<style>
.red{
border-style:solid;
border-color:purple;
border-width:1px;
}
.default
{
border-style:solid;
border-color:purple;
}
</style>
<div>no</div>
<div class='red'>purple you</div>
<div class='default'>no width</div>
12.內邊距
①單邊距
<style>
.red{
border:5px solid red;
background-color:green;
}
.ped-left
{
border:5px solid red;
background-color:green;
padding-left:50px;
}
</style>
<div>no</div>
<div class='red'>purple you</div>
<div class='ped-left'>purple you</div>
②四邊內邊距
<style>
.pad-left{
border:5px solid red;
background-color:green;
padding:20;
}
.ped-left-four
{
border:5px solid red;
background-color:green;
padding:110 20 30 40;
}
</style>
<div>no</div>
<div class='pad-left'>purple you</div>
<div class='ped-left-four'>purple you</div>
一些奇奇怪怪的規矩
如果缺少左內邊距的值，則使用右內邊距的值。
如果缺少下內邊距的值，則使用上內邊距的值。
如果缺少右內邊距的值，則使用上內邊距的值。
@[TOC]13.外邊距
margin-left: 左外邊距
margin-right: 右外邊距
margin-top: 上外邊距
margin-bottom: 下外邊距
<style>
.red{
border:5px solid red;
background-color:green;
}
.margin
{
border:1px solid red;
background-color:green;
margin-left:10px;
}
</style>
<div class='red'>purple you</div>
<div class='red'>purple you</div>
<br>
<div class='red'>purple you</div>
<div class='margin'>purple you</div>
13邊框模型
<style>
.box{
width:70px;
padding:5px;
margin:10px;
}
div
{
border:1px solid red;
font-size:70%;
}
</style>
<div >welcome</div>
<div class='box'>
army<br><br>
purple <br<br>
bts<br><br>
</div>
<div> bye</div>
14.超鏈接
超鏈狀態有4種
link - 初始狀態，從未被存取過
visited - 已存取過
hover - 滑鼠懸停於超鏈的上方
active - 滑鼠左鍵點選下去，但是尚未彈起的時候
<style>
a:link{color:#ff0000}
a:cisiter{color:#00ff00}
a:hover{color:#ffff00}
a:active{color:#ff00ff}
</style>
<a href:"http://www.12306.com">different</a>
這樣可以去除超鏈接下劃線
<style>
a.no_underline {text-decoration: none}
</style>
<a href="http://www.12306.com">預設的超鏈</a>
<br>
<a class="no_underline" href="http://www.12306.com">去除了下劃線的超鏈</a>
15.隱藏
使用display:none; 隱藏一個元素，這個元素將不再佔有原空間 「坑」 讓出來了
使用 visibility:hidden;隱藏一個元素，這個元素繼續佔有原空間，只是「看不見」
<style>
div.d{
display:none;
}
div.v{
visibility:hidden;
}
</style>
<div>can see div1</div>
<div class='d'>hidden div2,use display none</div>
<div >can see div3</div>
<div class='v'>hidden div4, visibility:hidden</div>
<div>can see div5</div>
效果如下
16.把css部分挑出來
獨立一個css後綴檔案
.p1{
color:red;
}
.span1{
color:blue;
}
在HTML檔案裡寫
<link rel="stylesheet" type="text/css" href="style.css" />
<p class="p1">紅色</p>
<span class="span1">藍色</span>
17.優先順序問題
①外部css檔案與內部style元素
style優先出現
②style元素與內部的p裡的color：green這樣
後者優先
③在style裡顏色之後加上！important即可使其在提前了
<style>
.p1{
color:green !important;
}
</style>
<p class="p1" style="color:red">p1 顏色是綠色，優先使用!important樣式</p>
二，佈局
1絕對定位
這樣子，position：absolute
並且在後面寫位置
下面 下麪一來，bts army會湊在一起，and自己挪開
<style>
p.abs{
position:absolute;
left:150px;
top:150px;
}
</style>
<p>bts</p>
<p class='abs'>and</p>
<p>army</p>
<p>forever</p>
2.這是有了div作爲定位的絕對位置
div就是絕對了的
<style>
p.abs{
position:absolute;
left:150px;
top:150px;
}
.absdiv{
position:absolute;
left:150px;
top:50px;
width:2115px;
border:1px solid pink;
}
</style>
<p>bts</p>
<p class='abs'>and</p>
<p>army</p>
<p>forever</p>
<div class='absdiv'>
沒定位的div
<p class='abs'>絕對定位的文字</p>
</div>
沒有了絕對定位則是不一樣的位置
（少了p.abs）
③關於那個覆蓋在哪一個上面
就是z-index大的在上面
<style>
img#i1{
position: absolute;
left: 60px;
top: 20px;
z-index:1;
}
img#i2{
position: absolute;
left: 60px;
top: 120px;
z-index:-1;
}
</style>
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>
<img id="i1" src="https://how2j.cn/example.gif" />
<img id="i2" src="https://how2j.cn/example.gif" />
3.相對位置
跟絕對位置比起來就是不佔位置
```java
<style>
p.r{
position:relative;
left:150px;
top:50px;
}
</style>
<p>bts</p>
<p class='r'>and</p>
<p>army</p>
<p>forever</p>
爲了使相對定位下仍然能夠不佔坑
則可以使用絕對定位一起使用
<style>
div.r{
position: relative;
left: 0;
top: 0;
}
div.a{
position: absolute;
left: 150px;
top: 0px;
}
</style>
<p>正常文字1</p>
<p>正常文字2</p>
<div class="r">
<div class="a">相對定位的文字3(不佔坑)</div>
</div>
<p>正常文字4</p>
<p>正常文字5</p>
4浮動起來
文字的浮動：其實就是讓出位置
<style>
.f{
float:right;
}
</style>
<div>正常文字1</div>
<div>正常文字2</div>
<div class="f">浮動文字</div>
<div>正常文字4</div>
<div>正常文字5</div>
改成left可以理解爲沒法繼續向左移動，只剩下繼續佔坑。
圖片的浮動：
用left即可環繞
<style>
.f{
float:left;
}
div{
width:320px;
}
</style>
<div >
<img class="f" src="https://how2j.cn/example.gif"/>
```java
```java
<p> 當圖片浮動時，文字圍繞着圖片
當圖片浮動時，文字圍繞着圖片
當圖片浮動時，文字圍繞着圖片
當圖片浮動時，文字圍繞着圖片
當圖片浮動時，文字圍繞着圖片
</p>
</div>
不圍繞
<style>
.f{
float:left;
}
div{
width:320px;
}
.clearp{
clear:left;
}
</style>
<div >
<img class="f" src="https://how2j.cn/example.gif"/>
<p> 當圖片浮動時，文字圍繞着圖片
當圖片浮動時，文字圍繞着圖片
當圖片浮動時，文字圍繞着圖片
當圖片浮動時，文字圍繞着圖片
當圖片浮動時，文字圍繞着圖片
</p>
</div>
<div >
<img class="f" src="https://how2j.cn/example.gif"/>
<p class="clearp"> 當圖片浮動時，文字卻不想圍繞圖片
當圖片浮動時，文字卻不想圍繞圖片
當圖片浮動時，文字卻不想圍繞圖片
當圖片浮動時，文字卻不想圍繞圖片
</p>
</div>
預設的div排列是會換行的
如果使用float就可以達到水平排列的效果，通常會用在選單，導航欄等地方
如果超出了父容器，還會有自動換行的效果
<style>
div#floatingDiv{
width:200px;
}
div#floatingDiv div{
float:left;
}
</style>
預設的div排列是會換行的
<div>
選單1
</div>
<div>
選單2
</div>
<div>
選單3
</div>
如果使用float就可以達到水平排列的效果，通常會用在選單，導航欄等地方
如果超出了父容器，還會有自動換行的效果
<div id="floatingDiv">
<div>
選單1
</div>
<div>
選單2
</div>
<div>
選單3
</div>
<div>
選單4
</div>
<div>
選單5
</div>
<div>
選單6
</div>
</div>
5.把span弄成塊（div），即可顯示出其塊的屬性；
塊級的改成span，則用內聯。裏面的display：block改爲display：inline
若要同一行且能控制大小，即用block-inline
<style>
div,span{
border: 1px solid lightgray;
margin:10px;
width:200px;
height:100px;
}
.d{
display:block;
}
</style>
<div>普通的div塊</div>
<span>這是普通span</span> <span>這是普通span</span> <span>這是普通span</span>
<span class="d">這是span,被改造成了塊級元素</span>
6居中
①內容居中
<style>
div{
border:1px solid lightgray;
margin:10px;
}
</style>
<div align="center">
通過設定屬性align="center" 居中的內容
</div>
<div style="text-align:center">
通過樣式style="text-align:center" 居中的內容
</div>
②元素居中
style=「width:300px;margin:0 auto」
相關div內換成這個
4.左對齊且填滿右半部分
<style>
.left{
width:200px;
float:left;
background-color:pink
}
.right{
overflow:hidden;
background-color:lightskyblue;
}
</style>
<div class="left">左邊固定寬度</div>
<div class="right">右邊自動填滿</div>
7垂直居中
直接文字居中
style裡
d {
line-height: 100px;
}
<div id=「d」>line-height 適合單獨一行垂直居中</div**>**
內邊距設定好剩下文字居中
#d {
padding: 30 0;
}
圖片居中
因爲line-height不可以起作用於圖片
<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">
<img src="https://how2j.cn/example.gif">
</div>
8左右固定
跟左固定相關
<style>
.left{
width:200px;
float:left;
background-color:pink
}
.right{
width:200px;
float:right;
background-color:pink
}
.center {margin:0 200px; background-color:lightblue}
</style>
9.貼着底部
<style>
#div1
{
position: relative;
height: 300px;
width: 90%;
background-color: skyblue;
}
#div2
{
position: absolute;
bottom: 0;
height: 30px;
width: 100%;
background-color: lightgreen;
}
</style>
<div id="div1">
<div id="div2"> 無論藍色div高度如何變化，綠色div都會貼在下面 下麪
</div>
</div>
@[TOC]8.css的塊之間應該直接按空格就可以有空格但是實現不了換行。
解決方案
<style>
div.nocontinue span{
border-bottom:2px solid lightgray;
float:left;
}
</style>
<div class="nocontinue">
<span>有換行的span</span>
<span>有換行的span</span>
<span>有換行的span</span>
</div>
<div style="clear:both"></div>
<div>後續的內容</div>
雙擊選中所有程式碼
試一下