web前端css

當我們用html的語法給內容規劃布局樣式時，可能會出現許多個相似的內容需要運用同一種樣式，復制粘貼太麻煩而且如果后期要改動的話比如把許多個地方從紅色改成藍色，就需要一個一個改了，這時候就需要引入css來操作了

把需要添加的屬性放在style標簽中就好了

行內樣式表：

<!--px 像素單位行內樣式表：直接寫在標簽中
-->
<p style="color: red;font-size: 20px;font-weight: bold;">末日鐵拳</p>

內嵌樣式表：

<style>p{font-size:16px;color:red;}
</style>

外部樣式表：

<link href="css/index.css" rel="stylesheet">

用來連接外部css，然后在外部css中改樣式

外部css：

p{color: red;font-size: 50px;
}

選擇器：

根據不同選擇器類型給不同類型的內容更改樣式

標簽選擇器：

p{color:red;font-size:20px;
}

id選擇器：

#title{color:red;font-size:20px;
}

類選擇器：

.p1{color:blueviolet;
}
.p2{color:blue;
}

通配選擇器 選中所有的標簽

*{font-family: 楷體;color: red;font-size: 30px;
}

選擇器組合 可以為多個選擇器定義相同的樣式表

#title,.p1,.p2,h1{font-family: 楷體;}

字體的各種屬性：

				color:red;font-size: 20px;	/*字大小*/font-family: 楷體;	/*全部字體格式*/font-weight: 900;	/*字體加重*/font-style: italic;	/*字體，斜體*/text-align: right;	/*靠右對齊   align：對齊*/text-decoration: line-through;	/*刪除線*/text-decoration: underline;		/*下劃線*/line-height: 20px;		/*行高*/letter-spacing: 30px;	/*字符間距*/word-spacing: 40px;		/*單詞間距*/text-indent: 2em;	/*首行縮進 em相當于當前文檔中一個字符的大小*/

如果想要去除超鏈接的下劃線可以：

a{text-decoration: none;
}

背景圖片：

			p{color: red;background-color: aliceblue;	/*背景顏色*/width: 800px;height: 600px;background-image: url(./img/圖片.png);	/*背景圖片*/background-repeat: no-repeat;	/*控制背景圖片是否重復*/background-position: center center;		/*背景位置*/background-size: 400px 400px;	/*背景尺寸*/}

列表：

如果有兩個列表，想把列表的內容樣式進行修改，只改一個列表的話，把兩個列表的li分別加上class名再進行修改很麻煩，直接給ul加上class名然后對u1，u2進行修改：

			.u1 li{text-align: center;color: red;list-style-type: none;	/*去除默認的圖標*/list-style-image:url(./img/wemeet%20image_20240302144312961.png) ;		/*指定一個圖片當圖標*/list-style-position: inside;	/*圖標位置*//* 直接用list-style把三種屬性都可以寫上 */list-style: none url(圖片.png) inside; }<ul class="u1"><li>列表</li><li>列表</li><li>列表</li><li>列表</li></ul><ul class="u2"><li>列表</li><li>列表</li><li>列表</li><li>列表</li></ul>

偽類：

CSS偽類專門用來表示標簽的一種的特殊的狀態，當我們需要為處在這些特殊狀 態的標簽設置樣式時，就可以使用偽類 。

			/*鼠標移到標簽上時，自動切換到樣式表*/a:hover{color:green;text-decoration: underline;}p:hover{color: blue;background-color: #008000;}/* 當鼠標點擊標簽時，自動切換到樣式表*/a:active{color: aqua;}input:active{background-color: #FF0000;}/* 向擁有鼠標焦點的標簽(輸入框)	添加樣式 */i1:focus{background-color: aqua;}

透明度：

img{opacity: 1;	/*設置標簽透明度 0完全透明 1完全不透明*/
}

標簽：

塊級標簽:

無論內容多少，都會獨占一行，一般用來進行網頁布局
可以設置寬高width height
例如

、

、

• 、
  1. 、

     ---

     等。

行級標簽：

只占自身大小，不會占一行
設置寬高無效
主要用來對文字修飾
例如、、、等。

行塊級標簽：

不占一行，可以設置寬高
例如 等

display：

		<!-- 設置塊級標簽為行級標簽--><p style="display: inline;">艾興瓦爾德</p><!--設置行級標簽為塊級標簽--><b style="display: block;">里阿爾托</b><!--設置標簽隱藏--><img src="圖片" style="display: none;" >

div&span：

p h1這些標簽雖然是塊級標簽，但是它們都有默認樣式，會影響網頁布局使用
div標簽是一個塊級標簽，沒有任何的附加樣式，用來進行網頁布局，給什么屬性就變成什么樣子
span和div同理但是是一個行級標簽