溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下CSS的基礎(chǔ)使用方法有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
第一部分：CSS的基本使用
CSS全稱Cascading Style Sheets，翻譯：層疊（級(jí)聯(lián)）樣式表。
如果說HTML是網(wǎng)頁的結(jié)構(gòu)，那么CSS就是網(wǎng)頁化妝師。
CSS有三種寫法：
直接寫在標(biāo)簽內(nèi)
寫在style標(biāo)簽內(nèi)
使用外部.css文件
（對(duì)應(yīng)CSS的三種寫法，就有三種引入CSS的方式，見下：）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS的引入方式1</title> </head> <body> <!--第一種引入方式：行內(nèi)樣式--> <!--注意：只能寫在開始標(biāo)簽或者自閉合標(biāo)簽里，不能寫在結(jié)束標(biāo)簽里哦--> <!-- 直接給標(biāo)簽添加style屬性，style的屬性值里書寫樣式——樣式與樣式之間用分號(hào)隔開；樣式的名稱與樣式值用冒號(hào)隔開！ --> <!-- 注意：嵌套標(biāo)簽設(shè)置了最外層的樣式，其內(nèi)所有標(biāo)簽都會(huì)應(yīng)用此樣式！ --> <p style="color:red;font-size:30px;">我是段落標(biāo)簽</p> <!-- 優(yōu)勢(shì)：直觀，很容易區(qū)分是給哪個(gè)標(biāo)簽添加的樣式 --> <!-- 劣勢(shì)：代碼冗余，樣式過多的話，代碼的可讀性很差--> <!-- 一般用于測(cè)試，不用于實(shí)際開發(fā)頁面中 --> </body> </html>
在設(shè)置屬性color屬性時(shí)，如下圖操作，可以對(duì)顏色進(jìn)行更加直觀詳細(xì)的選擇：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>CSS的引入方式2</title>
<!--第二種引入方式：內(nèi)部樣式-->
<!-- 優(yōu)勢(shì)：實(shí)現(xiàn)了標(biāo)簽和樣式的分離，讓代碼的可讀性更高 -->
<style>
p{
color: #c481ff
}
</style></head><body><p>我是段落標(biāo)簽</p></body></html>本處用的1.css文件內(nèi)容：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS的引入方式3</title> <!--第一種：鏈接式(建議使用)--> <!--rel屬性（relation）是當(dāng)前這個(gè)HTML頁面與鏈接進(jìn)來的樣式表之間的關(guān)系，在此鏈接進(jìn)來的是本頁面的樣式表 href屬性寫樣式表的路徑--> <link rel="stylesheet" href="1.css"> <!--第二種：導(dǎo)入式(不建議使用)--> <style> @import "1.css"; </style></head><body><!--第三種引入方式：外部樣式（有兩種）--><!--小提示：新建.css文件的方法，在pycharm中是新建Stylesheet文件--><!-- 優(yōu)勢(shì):實(shí)現(xiàn)了html文件和樣式的分離，讓代碼的可讀性更高，而且讓代碼的復(fù)用性也更高！ --><p>我是段落標(biāo)簽2</p></body></html>
@import導(dǎo)入式不推薦使用，因?yàn)榇嬖谌毕荩涸谡麄€(gè)網(wǎng)頁裝載完之后再裝載.CSS文件，如果網(wǎng)頁文件過大時(shí)，會(huì)導(dǎo)致先出現(xiàn)無樣式的頁面，閃爍以后再出現(xiàn)樣式網(wǎng)頁。
而推薦使用< link >，因?yàn)樗窍妊b載.css文件，再裝載網(wǎng)頁
在實(shí)際開發(fā)中我們不使用行內(nèi)樣式！ 使用最多的是外部樣式。 一般寫demo的時(shí)候使用內(nèi)部樣式————因?yàn)榻o別人發(fā)demo的時(shí)候，只發(fā)一個(gè)文件即可。 無論是外部樣式，內(nèi)部樣式還是行內(nèi)樣式，都會(huì)生效，它們共同為標(biāo)簽添加樣式。 如果一個(gè)標(biāo)簽通過外部樣式，內(nèi)部樣式設(shè)置了同一類樣式（值不同），會(huì)產(chǎn)生覆蓋效果————覆蓋的原則：后寫的樣式覆蓋先寫的樣式！
（1）選擇器權(quán)重：
現(xiàn)實(shí)生活中—誰的權(quán)利大，就聽誰的，同理，選擇器權(quán)重也是一樣，誰的權(quán)重值高，應(yīng)用誰的。這里的權(quán)重高低通過精確度評(píng)判，精確度越高，權(quán)重越大。
（2）選擇器的用處：
用于準(zhǔn)確的選中元素（就是HTML種講的標(biāo)簽），并賦予樣式。
| 作用：根據(jù)標(biāo)簽的名字找到標(biāo)簽； |
| 注意：它會(huì)找到所有的同名標(biāo)簽。 |
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>標(biāo)簽選擇器</title>
<style>
/*標(biāo)簽選擇器。直接把頁面中的標(biāo)簽當(dāng)做一個(gè)選擇器進(jìn)行選擇*/
p{
color: chartreuse;
}
</style>
</head><body><p>我是段落標(biāo)簽1</p><p>我是段落標(biāo)簽2</p></body></html>你可以理解為下圖這個(gè)整體叫做選擇器?。?！
| 通過標(biāo)簽的class屬性，選擇對(duì)應(yīng)的元素，借助了一個(gè)類的概念，一處定義，可以多處使用。 |
| 使用場(chǎng)景：它的作用對(duì)多個(gè)標(biāo)簽（往往需要相同的樣式）設(shè)置樣式。 |
| 一個(gè)標(biāo)簽可以設(shè)置多個(gè)class值，值與值之間用空格隔開，這個(gè)標(biāo)簽會(huì)具有所有class包含的樣式。 |
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>類選擇器</title>
<style>
/*類選擇器，也稱class選擇器。通過.進(jìn)行選擇*/
.p1{
color:red;
}
</style></head><body><p class="p1">我是段落標(biāo)簽</p></body></html>類選擇器可以選擇多個(gè)，因?yàn)閏lass屬性不唯一；
但是id選擇器只能選擇一個(gè)，因?yàn)閕d是唯一的。
| 通過標(biāo)簽的id屬性，選擇對(duì)應(yīng)的元素。 |
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>id選擇器</title>
<style>
/*第三種選擇器：id選擇器 通過#進(jìn)行選擇*/
#p2{
color:cadetblue;
}
</style></head><body><p id="p2">我是段落標(biāo)簽</p></body></html>以上三個(gè)選擇器的權(quán)重： id選擇器 > 類選擇器 >標(biāo)簽選擇器
拓展：如果一個(gè)標(biāo)簽同時(shí)通過id選擇器和類選擇器設(shè)置了同一個(gè)樣式，而我們想要其類選擇器設(shè)置的樣式（background-color）生效，但是看上面選擇器權(quán)重——類選擇器的權(quán)重是低于id選擇器的，應(yīng)該是id選擇器設(shè)置的樣式生效。但是我們可以通過在指定樣式后添加!import來使其生效?。?！
!important是權(quán)重最大的?。?！
注意：!important只能作用于單個(gè)樣式的值，它不是選擇器！
| 群組選擇器是可以同時(shí)選擇多個(gè)標(biāo)簽的選擇器。 |
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>群組選擇器</title>
<style>
/*第四種選擇器：群組選擇器 不同選擇器之間用逗號(hào)隔開。*/
p,span{
color: #ff82c1;
}
</style></head><body><p>我是段落標(biāo)簽</p><span>我是文本標(biāo)簽</span><h2>我是一級(jí)標(biāo)簽</h2></body></html>| 顧名思義，選擇所有標(biāo)簽！ |
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>全選擇器</title>
<style>
/*第五種選擇器：全選擇器 通過*選擇此頁面的所有元素，進(jìn)行統(tǒng)一的樣式設(shè)置*/
*{
color: #a3ff50
}
</style></head><body><p>我是段落標(biāo)簽</p><h2>我是一級(jí)標(biāo)題</h2><h3>我是二級(jí)標(biāo)簽</h3><span>我是文本標(biāo)簽</span></body></html>注 意：塊狀標(biāo)簽可以嵌套內(nèi)聯(lián)標(biāo)簽和其他塊狀標(biāo)簽；內(nèi)聯(lián)標(biāo)簽只能嵌套文本和其他內(nèi)聯(lián)標(biāo)簽,但不能嵌套塊狀標(biāo)簽。
有個(gè)特例：p標(biāo)簽和h標(biāo)簽不能嵌套塊狀標(biāo)簽，也不能嵌套本身，只能嵌套內(nèi)聯(lián)標(biāo)簽?。?！
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>后代選擇器</title>
<style>
/*層次選擇器第一種：后代選擇器 用空格隔開*/
/*后代是它里面嵌套的所有標(biāo)簽*/
/*此例就是p標(biāo)簽里的所有的ol標(biāo)簽，不管ol里嵌套多少ol，都是p的后代*/
p ol{
list-style: none;
}
</style>
</head><body><p>
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3 <ol>
<li>我是有序列表111</li>
<li>我是有序列表222</li>
</ol>
</li>
</ol></p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>子代選擇器</title>
<style>
/*層次選擇器第二種：子代選擇器 用>隔開*/
/*子代選擇器只能選擇他的兒子，在此就是選擇id為ul1的無序列表的兒子*/
/* 上述語法格式中的選擇器可以是id選擇器，class選擇器也可以是標(biāo)簽名選擇器 */
#ul1>li{
list-style: none; /*這個(gè)屬性作用是去除列表的樣式，代表去掉無序列表前面的小圓圈*/
}
</style></head><body><!--子代選擇器 顏色，字體等等在子代選擇器里會(huì)繼承。所以此處用list-style屬性進(jìn)行觀察--><ul id="ul1">
<li>1</li>
<li>2</li>
<li>3 <ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</li></ul></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>兄弟選擇器</title>
<style>
/*層次選擇器第三種：兄弟選擇器 用~進(jìn)行選擇*/
/*只要是有同一個(gè)父親的就稱為兄弟*/
/*在本例中，id為p2的父親是body，所以body里都是他的兄弟
又因?yàn)榇a是從上向下執(zhí)行的，所以不會(huì)選中 我是段落標(biāo)簽1*/
#p2~p{
color:#ff8971 }
</style></head><body><p>我是段落標(biāo)簽1</p><p id="p2">我是段落標(biāo)簽2</p><p>我是段落標(biāo)簽3</p><p>我是段落標(biāo)簽4</p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>相鄰兄弟選擇器</title>
<style>
/*層次選擇器第四種：相鄰選擇器（相鄰兄弟選擇器） 用+進(jìn)行選擇*/
/*先是找兄弟，然后選擇其中相鄰的*/
/*在本例中，因?yàn)榇a是從上向下執(zhí)行的，所以不會(huì)選中 我是段落標(biāo)簽1*/
#p2+p{
color:#ff8971
}
</style></head><body><p>我是段落標(biāo)簽1</p><p id="p2">我是段落標(biāo)簽2</p><p>我是段落標(biāo)簽3</p><p>我是段落標(biāo)簽4</p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style>
/*屬性選擇器 選中所有p標(biāo)簽里有name屬性的 常用于Input里
如果只想選中 我是段落標(biāo)簽1 ，那么就改為p[name="p1"]即可*/
p[name]{
color: red;
}
</style></head><body><p name="p1">我是段落標(biāo)簽1</p><p name="p2">我是段落標(biāo)簽2</p><p name="p3">我是段落標(biāo)簽3</p><p>我是段落標(biāo)簽4</p></body></html>權(quán)重大小比較總結(jié)一句話：越具體（就是一開始說的準(zhǔn)確度）權(quán)重越大；越模糊權(quán)重越??！
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>偽類選擇器</title>
<!--偽類選擇器-->
<!-- 語法格式—— 選擇器：偽類名 -->
<!-- 如果要給一個(gè)元素加4個(gè)偽類，一定要遵守一個(gè)順序（link visited hover active） -->
<style>
/*未訪問超鏈接時(shí)的樣式 有超鏈接地址時(shí)（僅適用于a標(biāo)簽）*/
a:link{
color: #ff25ec;
}
/*鼠標(biāo)懸浮時(shí)的樣式 適用于所有標(biāo)簽*/
a:hover{
color: #3b29ff;
}
/*激活狀態(tài)時(shí)，即點(diǎn)擊的時(shí)候 適用于所有標(biāo)簽*/
a:active{
color: #ff9d47;
}
/* 訪問過后，點(diǎn)擊完超鏈接之后 （僅適用于a標(biāo)簽）*/
a:visited{
color:green;
}
</style>
</head><body><!--#表示空鏈接--><a href="#">我是超鏈接</a></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>字體的常用樣式</title>
<style>
p{
/*字體的類型（例如：黑體，宋體，仿宋...）*/
font-family: 黑體;
/*字體的大?。J(rèn)字號(hào)是16px）*/
font-size: 30px;
/*字體的樣式（斜體italic 或者 正常normal）*/
font-style: italic;
/*字體的粗細(xì)（默認(rèn)粗細(xì)是normal——400） bold是粗體*/
font-weight: bold;
/*字體的小大寫 把英文小寫字母變?yōu)榇髮懽帜?nbsp; 大小不變*/
font-variant: small-caps;
/*字體的復(fù)合樣式，要注意順序,其實(shí)就是上面樣式的一個(gè)總寫
順序?yàn)椋簊tyle variant weight size/height family 可以少寫！*/
font:italic small-caps normal 50px 黑體;
}
</style></head><body><p>我是段落標(biāo)簽</p><p>HELLO</p><p>hello</p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>文本常用樣式</title>
<style>
p{
/*用于設(shè)置標(biāo)簽內(nèi)的文本的對(duì)齊方式————left（左對(duì)齊，默認(rèn)）；center（居中對(duì)齊）;right（右對(duì)齊）*/
text-align: left;
/* 用于設(shè)置標(biāo)簽內(nèi)單行文本的高度*/
line-height:40px;
/*首行縮進(jìn) em是一個(gè)中文字距 也可以用px單位 1em=16px*/
text-indent:2em;
/*文本線 underline是下劃線； line-through稱為刪除線 overline（上劃線） none為去除文本線*/
text-decoration: underline;
/*字與字之間的距離*/
letter-spacing: 1em;
/*詞距 在底下p標(biāo)簽里寫文本，空格隔開就是一個(gè)單詞*/
word-spacing:50px;
/*行高 可以撐起高度*/
/*撐起高度就是可以通過設(shè)置行高把元素的高度撐到行高那么高*/
/*有個(gè)應(yīng)用：?jiǎn)涡形谋敬怪本又校ㄔ诖怪狈较蚓又校焊叨?行高*/
line-height: 50px;
/* 用于設(shè)置換行模式————normal（默認(rèn)，滿了一行后正常換行）；nowrap（不換行）*/
white-space: normal;
/* 用于設(shè)置內(nèi)容超出標(biāo)簽的處理辦法————hidden（超出部分隱藏）;*/
overflow: hidden;
/* 用于設(shè)置文本溢出標(biāo)簽時(shí)，文本要做什么事情————ellipsis（用于設(shè)置顯示省略號(hào)） */
text-overflow: ellipsis;
}
a{
/*用于設(shè)置文本的裝飾模式————underline（下劃線）；line-through（中劃線）;overline（上劃線）*/
/* 可以通過設(shè)置為none去除超鏈接下的下劃線！ */
text-decoration: none;
}
</style></head><body><!--注意：如果是內(nèi)聯(lián)標(biāo)簽，比如span是內(nèi)聯(lián)標(biāo)簽，始終都是居中狀態(tài)，改對(duì)齊方式?jīng)]用。
因?yàn)閮?nèi)聯(lián)元素設(shè)置寬高無效，只與內(nèi)容有關(guān)。--><p>我是一個(gè)段落標(biāo)簽</p><p>中國 上海 河南</p><a href="">111</a></body></html>行高的應(yīng)用之實(shí)現(xiàn)單行文本垂直居中：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>行高的一個(gè)應(yīng)用</title>
<style>
p{
/*通過讓行高=高度，實(shí)現(xiàn)單行文本的垂直居中*/
height: 200px; /*高度*/
line-height: 200px; /*行高*/
}
</style></head><body><p>我是段落標(biāo)簽</p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>背景的常用樣式</title>
<style>
p{
/*設(shè)置p的寬高*/
/* 行元素?zé)o法設(shè)置寬高；塊元素或者行級(jí)塊元素可以設(shè)置寬高。如果不設(shè)置寬高，那么使用默認(rèn)寬度——和父標(biāo)簽的寬度一樣；如果不設(shè)置高度，那么使用默認(rèn)高度是由內(nèi)容撐起！ */
width:300px;
height:300px;
/*設(shè)置背景顏色*/
/* 背景顏色的寫法：1.代表顏色的英文單詞（例如：red,yellow...）；
2.#加6位16進(jìn)制數(shù)（6位中前兩位是紅，中間兩位是綠，后兩位是藍(lán)。紅綠藍(lán)的取值范圍是00~FF/ff）————開發(fā)中最常用的寫法；
3.rgb（紅，綠，藍(lán)）函數(shù)獲取一個(gè)顏色————一般用于JS代碼；
4.rgba（紅，綠，藍(lán)，不透明度）函數(shù)獲取一個(gè)顏色————一般用于JS代碼 */
background-color: #a3ff50;
/*背景圖片 url寫圖片的路徑*/
background-image: url("");
/*設(shè)置背景的大小 也可使用百分比，是參照它的容器*/
background-size:100px 100px;
/*背景平鋪 不平鋪 平鋪意思：如果背景圖很小，那么就可以在這個(gè)p上放多個(gè)。不平鋪就是只放一個(gè)*/
background-repeat: no-repeat;
/*背景定位 可以使用百分比定位（兩個(gè)百分比數(shù)據(jù)，第一個(gè)是相對(duì)于左，第二個(gè)是相對(duì)于上）*/
background-position: center;
/*復(fù)合樣式 也要按照順序（中間空格隔開，如果不想定位而設(shè)置大小，將定位的那個(gè)屬性值寫為0）
屬性的順序是：background-color bacfground-image background-repeat background-position/background-size */
background:red url("") ;
}
</style></head><body><p></p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>漸變色之線性漸變</title>
<style>
#p1{
width:300px;
height: 300px;
/*linear-gradient()函數(shù)用于實(shí)現(xiàn)線性漸變*/
/*注意：顏色的漸變實(shí)現(xiàn)是靠漸變的圖像實(shí)現(xiàn)的，在函數(shù)里可以放多個(gè)顏色實(shí)現(xiàn)漸變*/
/*漸變的效果默認(rèn)是從上往下漸變填入的顏色
to right,to left,to top,to buttom right(從左上往右下漸變)
也可以以一定角度進(jìn)行漸變，格式為：度數(shù)deg,比如：90deg */
background-image: linear-gradient(to left,skyblue,pink);
}
</style></head><body><p id="p1" class="p2"></p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>漸變色之徑向漸變</title>
<style>
#p1{
width: 200px;
height: 300px;
/*radial-gradient()函數(shù)用于實(shí)現(xiàn)徑向漸變*/
/*注意：顏色的漸變實(shí)現(xiàn)都是靠漸變的圖像實(shí)現(xiàn)的*/
/*默認(rèn)是從最中心向外發(fā)散進(jìn)行漸變（ellipse是橢圓形狀的漸變）
circle(形狀變?yōu)閳A)*/
background-image: radial-gradient(ellipse,skyblue,pink,white);
}
</style></head><body><p id="p1"></p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>漸變色之文字漸變</title>
<style>
span{
/*給背景設(shè)置漸變色*/
/*默認(rèn)文字的顏色漸變是從上往下漸變的
改漸變的方向的話在顏色前面加，比如：to right*/
background-image: linear-gradient(to right,blue,black);
/*規(guī)定這個(gè)背景漸變色繪制的區(qū)域 在此設(shè)置為文本那個(gè)區(qū)域*/
-webkit-background-clip: text;
/*把原本的文字設(shè)置為透明的*/
color: transparent;
}
</style></head><body><!--文字本身是不能設(shè)置漸變的，我們是通過設(shè)置背景的漸變來實(shí)現(xiàn)文字的漸變的--><span>我是漸變的文字，我超級(jí)帥！</span></body></html>以上是“CSS的基礎(chǔ)使用方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼