加入星計(jì)劃,您可以享受以下權(quán)益:

  • 創(chuàng)作內(nèi)容快速變現(xiàn)
  • 行業(yè)影響力擴(kuò)散
  • 作品版權(quán)保護(hù)
  • 300W+ 專業(yè)用戶
  • 1.5W+ 優(yōu)質(zhì)創(chuàng)作者
  • 5000+ 長期合作伙伴
立即加入
  • 正文
  • 推薦器件
  • 相關(guān)推薦
  • 電子產(chǎn)業(yè)圖譜
申請入駐 產(chǎn)業(yè)圖譜

高效入門css3(一)

09/05 15:36
576
閱讀需 7 分鐘
加入交流群
掃碼加入
獲取工程師必備禮包
參與熱點(diǎn)資訊討論

css是web前端開發(fā)的三劍客之一(html、css、JavaScript),html負(fù)責(zé)網(wǎng)頁內(nèi)容框架,css負(fù)責(zé)網(wǎng)頁美化,JS負(fù)責(zé)網(wǎng)頁邏輯。

你現(xiàn)在看到的網(wǎng)頁是怎么來的?

你在本地輸入了一個(gè)域名,回車,經(jīng)過DNS解析為ip地址后,與遠(yuǎn)端服務(wù)器進(jìn)行tcp連接,連接后本地與遠(yuǎn)端服務(wù)器通過http協(xié)議發(fā)送和傳輸數(shù)據(jù),服務(wù)器會給本地發(fā)送一個(gè)html文件,里面描述了整個(gè)網(wǎng)頁的實(shí)現(xiàn)內(nèi)容,本地通過瀏覽器打開html文件(里面包含css、js),你就看到眼前的網(wǎng)頁了。

我們在這里學(xué)的就是這個(gè)負(fù)責(zé)網(wǎng)頁頁面美化的css,層疊樣式表!

正文

css的核心思想就是把頁面美化從頁面框架中抽離開了,html專心干好骨架和內(nèi)容的事情,相當(dāng)于形成一個(gè)人,css專注于把這個(gè)人打扮得漂漂亮亮,所以設(shè)計(jì)感好的人玩起css來會相當(dāng)出彩。

先來試試下面這個(gè)代碼,如果第一次聽說前端,建議先去看看我的html文章哦,為了方便,可以直接登錄這個(gè)網(wǎng)站在線編輯html。

<!DOCTYPE HTML>  <!--聲明是html文檔-->
<html>
	<head>       <!--頭部-->
		<meta charset="UTF-8"/>
		<title>第一個(gè)網(wǎng)頁</title>
		 <style>
            p {color:red;}
            h1 {color:blue;}
         </style>
	</head>
	
	<body>       <!--內(nèi)容-->
		<h1>hello world</h1>
		<p>hello</p>
	</body>
</html>

我們看到題目內(nèi)容變成了紅色,段落內(nèi)容變成了藍(lán)色,如何實(shí)現(xiàn)的?我們在head內(nèi)部定義了一個(gè)標(biāo)簽<style>,在里面就可以輸入我們的css代碼進(jìn)行頁面美化!對于html中的每一個(gè)標(biāo)簽我們都可以進(jìn)行編輯,進(jìn)行美化,

p {color:red;}
h1 {color:blue;}

相信大家都能看懂,這兩行就實(shí)現(xiàn)了p和h1標(biāo)簽的顏色設(shè)置,當(dāng)然css能力遠(yuǎn)不止如此,對于p,我們再加點(diǎn)料:

p {
	color:red;                         /*字體紅色*/
	font-size:30px;                    /*字體大小為30像素*/
	background-color:lightblue;        /*背景為天藍(lán)色*/
	text-align:center;                 /*居中顯示*/
  }

在這里插入圖片描述

段落中的字體被我們設(shè)置為紅色,背景為天藍(lán)色字體大小為30像素,且字體居中顯示

如果有兩個(gè)P段落,但我只想對其中一個(gè)編輯,怎么辦??比如

<p>hello1</p>
<p>hello2</p>

若直接p {color:red;},則hello1和hello2都會變成紅色,現(xiàn)在我只想讓hello1變成紅色,而我還想讓hello2變成藍(lán)色,怎么說?

選擇器

通過給每個(gè)標(biāo)簽加上選擇器!你也可以理解成一個(gè)類,這樣每個(gè)段落都變得獨(dú)一無二,這樣對它們進(jìn)行編輯就簡單多了。

<p class="a">hello1</p>
<p class="b">hello2</p>

在style里,用.a和.b表示上面兩個(gè)類:

.a{
	color:red;
}
.b{
	color:blue;
}

在這里插入圖片描述

成功!且由于先前對P標(biāo)簽的背景顏色、字體大小、字體居中的設(shè)置,hello1、hello2也繼承了這些特性,這也是后面對于復(fù)雜的文本進(jìn)行編輯時(shí)的思路,先對大部分進(jìn)行統(tǒng)一的基本設(shè)定,再對單一特殊的部分單獨(dú)調(diào)整

所有標(biāo)簽都可以定義一個(gè)或多個(gè)選擇器,class是最經(jīng)典的一種,多個(gè)class時(shí),可以

<p class="a b c d">hello3</p>

這樣對a,b,c,d編輯都可以影響hello3。

再舉個(gè)例子,對圖片如何用css改尺寸?很簡單

<img class="img" src="..." alt="..."/>

style里:

.img{
	width:100px;
}

自然圖片的寬度變?yōu)?00像素,高度會自動(dòng)變化。

選擇器有很多種,還有很常用的一種,為id

<p id="e">hello4</p>

style里,用#e對其編輯

#e{
	color:blue;
}

hello4就變成了藍(lán)色!id的優(yōu)先級要高于class。

class嵌套

class經(jīng)常會嵌套著使用,比如

<div class="container">
	<div class="d1"> 1 </div>
	<div class="d2"> 2 </div>
</div>

對它們進(jìn)行編輯也是一樣的,

.container{
	font-size:20px;
	text-align:center;             /*居中顯示*/
	border-color:blue;             /*邊框顏色為藍(lán)色*/
	border-width:10px;             /*邊框粗10px*/
	border-style:solid;            /*邊框類型為實(shí)線*/
	border-radius:10px;            /*邊框圓角*/
}
.d1{
	background-color:lightblue;   /*d1區(qū)域的背景是天藍(lán)色*/
}
.d2{
	background-color:red;         /*d2區(qū)域的背景是紅色*/
}

在這里插入圖片描述

很easy吧!下一章見!

推薦器件

更多器件
器件型號 數(shù)量 器件廠商 器件描述 數(shù)據(jù)手冊 ECAD模型 風(fēng)險(xiǎn)等級 參考價(jià)格 更多信息
74CBTLV3257PGG8 1 Integrated Device Technology Inc TSSOP-16, Reel

ECAD模型

下載ECAD模型
$1.08 查看
NC7SZ04P5X 1 Rochester Electronics LLC LVC/LCX/Z SERIES, 1-INPUT INVERT GATE, PDSO5, 1.25 MM, EIAJ, SC-88A, SC-70, 5 PIN
$0.32 查看
DSC1121BM1-030.0000 1 Microchip Technology Inc OSC MEMS 30.000MHZ CMOS SMD
$1.73 查看

相關(guān)推薦

電子產(chǎn)業(yè)圖譜