小編給大家分享一下CSS的基礎(chǔ)使用方法有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)成立于2013年,先為船山等服務(wù)建站,船山等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為船山企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
第一部分: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: 黑體;
/*字體的大小(默認(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>中國(guó) 上海 河南</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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享文章:CSS的基礎(chǔ)使用方法有哪些
文章轉(zhuǎn)載:http://www.chinadenli.net/article36/pisisg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊(cè)、響應(yīng)式網(wǎng)站、用戶體驗(yàn)、網(wǎng)站營(yíng)銷、ChatGPT、App開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)