整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
CSS的代碼是類似 json 數(shù)據(jù)的鍵值對，也就是key : value，當(dāng)然，每一句都必須以分號（；）結(jié)束，切記，沒有分號會出問題的。
其實類似 json 數(shù)據(jù)在我們生活中很常見，比如以下例子：
姓名：小明
性別：男
班別：19計機預(yù)師班
在以上例子中，“姓名”可以稱為字段或者屬性，姑且叫它“屬性”吧，而后面的“小明”則是屬性值，這樣子就形成了一種明確的數(shù)據(jù)組，同樣道理，先看一下CSS代碼：
background-color：red;
color:green;
font-size:2em;
......發(fā)現(xiàn)沒有？其實這兩種方式是差不多一樣的，“background-color”是屬性（property），而它的值（value）則是“red”，用這種方式，就設(shè)定了背景顏色為紅色。只不過CSS代碼后面必須要加分號（;）結(jié)束，在這里再次提醒。
當(dāng)然，還有一點要提醒初學(xué)者，在計算機程序設(shè)計中，所有的標(biāo)點符號的輸入必須切換到英文輸入的狀態(tài)，不然，也會出現(xiàn)一些莫名其妙錯誤出來。
好了，上面介紹了CSS代碼長啥樣，那么接下來就要明確一個問題：代碼寫出來后，我們怎么應(yīng)用到HTML中去？也就是說，怎么用CSS控制HTML的顯示效果。
在具體的應(yīng)用中，我們引入“選擇器（selector）”這個概念。
什么是選擇器（selector）？其實按照我們的理解，你寫好了CSS代碼以后，那你要把這些寫好的代碼應(yīng)用到某個地方去對吧，而這些受體就是選擇器。
CSS有三種選擇器，分別是標(biāo)簽（tag）、類（class）和ID.
標(biāo)簽，指的是HTML標(biāo)簽，也就是說，所有的HTML標(biāo)簽都是標(biāo)簽選擇器。要注意的是，如果要用標(biāo)簽選擇器，必須是HTML標(biāo)簽，不允許自定義。先看以下例子(大家可以把以下代碼保存為html文件，然后用瀏覽器打開看效果）：
<html>
<head>
<style>
p{
background-color:red;
color:green; font-size:2em;
}
</style>
</head>
<body>
<p>注意這里顯示的顏色</p>
<p>再留意顯示這里的顏色</p>
<b>好吧，再次留意這里的顏色</b>
</body>
</html>以上代碼中，第4~8行是標(biāo)簽選擇器的應(yīng)用方式，格式很簡單，就是直接寫HTML標(biāo)簽（上面的例子中用了p標(biāo)簽），然后后面跟著一對大括號（{}），大括號里面寫具體的CSS代碼，以上案例的功能就是，給HTML中所有的p標(biāo)簽內(nèi)容（第12~13行）應(yīng)用上“紅色背景、綠色字和2em的字體大小”的效果，而第14行中是b標(biāo)簽，沒有該效果。
我們有這么一個場景：在以下代碼中，我們給p標(biāo)簽加上了綠色的字體顏色，也就是說第12~13行的文字是綠色的，那如果我需要給“注意這里顯示的顏色”和“再留意顯示這里的顏色”這兩行文本添加不同的顏色，怎么辦呢？
<html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
</style>
</head>
<body>
<p>注意這里顯示的顏色</p>
<p>再留意顯示這里的顏色</p>
<b>好吧，再次留意這里的顏色</b>
</body>
</html>有兩種方法，分別是類和ID可以解決。
先用類的方法：我們可以手動地在兩個p標(biāo)簽中都加上類，或者為其中一個加上即可。具體做法如下。
<html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
.yellow{
color:yellow;
}
</style>
</head>
<body>
<p class="yellow">注意這里顯示的顏色</p>
<p>再留意顯示這里的顏色</p>
<b>好吧，再次留意這里的顏色</b>
</body>
</html>在以上代碼中，我在第15行的p標(biāo)簽內(nèi)加了一個class屬性，屬性值為“yellow”，然后第9~11行則是對yellow類的具體實現(xiàn)，像這樣就可以給“注意這里顯示的顏色”這行文本加了黃色（yellow）的效果了。
總結(jié)一下類的語法：.<類名>{<具體的CSS代碼>}。
注意：類名是自定義的，你喜歡用什么類名就什么類名，但是，你所起的類名也要符合一些規(guī)則：一是必須以字母或者下劃線（_）作為開頭，后面可以加數(shù)字，不能加其他符號；二是類名是對大小寫敏感的，也就是說一個字母的大寫和小寫狀態(tài)是兩個不一樣的類名。
好了，接下來是另外一種實現(xiàn)方法，用ID.
ID方法的實現(xiàn)在形式上跟類（class）差不多，在CSS選擇器中，類的語法是，在類名前面加一個點（.），而ID的不一樣的地方在于，它在ID名前面加的是一個#號，具體做法如下：
<html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
#yellow{
color:yellow;
}
</style>
</head>
<body>
<p id="yellow">注意這里顯示的顏色</p>
<p>再留意顯示這里的顏色</p>
<b>好吧，再次留意這里的顏色</b>
</body>
</html>以上案例中，通過ID的方法，也可以把“注意這里顯示的顏色”文本修改成黃色（yellow）顯示效果。
大家可以對比類和ID的實現(xiàn)方法，兩者只是在符號和引用方式上存在不一樣，那真的只是在形式上不一樣嗎？
并不是這樣的，之所以存在這兩種方式，因為這兩者它們有各自的特性。
類的特性：類的最大特征是可復(fù)用，可以在多個不同的標(biāo)簽中應(yīng)用同一個類。比如以下這個案例：
<html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
.yellow{
color:yellow;
}
</style>
</head>
<body>
<p class="yellow">注意這里顯示的顏色</p>
<p>再留意顯示這里的顏色</p>
<b class="yellow">好吧，再次留意這里的顏色</b>
</body>
</html>在以上代碼中，我定義了一個yellow類（第9~11行），然后分別應(yīng)用到“注意這里顯示的顏色”（第15行）和“好吧，再次留意這里的顏色”（第17行）文本上。
ID的特性：ID，顧名思義，就是身份標(biāo)識，身份標(biāo)識具有唯一性，而ID的作用，就是標(biāo)識唯一性，也就是說，只要在某個標(biāo)簽上應(yīng)用一個ID，那就不能再在其他標(biāo)簽上使用該ID了。
至于這三種選擇器的優(yōu)先級，這里直接說結(jié)論，ID優(yōu)先級最高，類其次，標(biāo)簽優(yōu)先級最低。大家可以運行以下代碼看結(jié)果：
<html>
<head>
<style>
p{
color: brown;
}
.cl{
color: black;
}
#ii{
color: green;
}
</style>
</head>
<body>
<p class="cl">注意這里顯示的顏色</p> <!-- 顯示顏色為black -->
<p class="cl" id="ii">再留意這里顯示的顏色</p> <!-- 顯示顏色為green -->
</body>
</html>符號選擇器，嚴(yán)格來講，不能稱之為“選擇器”，它指的是在使用選擇器的時候，用上一些符號，使得選擇器的功能更加豐富。在這里介紹三個。
1.星號（*）：星號代表“包含所有”的意思，比如：
2.空格：空格在這里有限定作用。
比如以下例子，我現(xiàn)在有這么一個需求，我需要把基礎(chǔ)科目中的三個科目（語文、數(shù)學(xué)、英語）設(shè)置為藍色顯示，并加粗；而專業(yè)科目中兩個科目（計算機和幼兒教育）文本設(shè)置成綠色，并加粗，那怎么處理呢？
<html>
<head>
<style>
</style>
</head>
<body>
<ul>
<p>基礎(chǔ)科目：</p>
<li>語文</li>
<li>數(shù)學(xué)</li>
<li>英語</li>
</ul>
<ul>
<p>專業(yè)科目</p>
<li>計算機</li>
<li>幼兒教育</li>
</ul>
</body>
</html>假如我對“l(fā)i”標(biāo)簽設(shè)置CSS，那所有的“l(fā)i”標(biāo)簽都是同一個樣式，那就沒有基礎(chǔ)科目和專業(yè)科目的區(qū)別了。在這里，我可以這樣解決：
解決方法如下代碼：
<html>
<head>
<style>
.ul1 li{
color: blue;
font-weight: bold;
}
.ul2 li{
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<ul class="ul1">
<p>基礎(chǔ)科目：</p>
<li>語文</li>
<li>數(shù)學(xué)</li>
<li>英語</li>
</ul>
<ul class="ul2">
<p>專業(yè)科目</p>
<li>計算機</li>
<li>幼兒教育</li>
</ul>
</body>
</html>特別說明：在HTML標(biāo)簽中，每個標(biāo)簽都稱為“節(jié)點（node）”，每個節(jié)點隨著HTML標(biāo)簽的包含關(guān)系，存在著相對的父子節(jié)點之分，包含元素的稱為父節(jié)點，被包含元素被稱為子節(jié)點。在以上代碼中，ul和li的關(guān)系，ul是父節(jié)點，li是子節(jié)點。
3.逗號：對多個選擇器應(yīng)用同樣的CSS樣式。
在對多個選擇器，無論是標(biāo)簽選擇器、類選擇器還是ID選擇器，如果把這些選擇器冠以同樣的CSS樣式，則可以用逗號分隔，把多個選擇器寫在一起，代碼如下：
<html>
<head>
<style>
p,b,.cl,#ii{
color: brown;
font-weight: bold;
}
</style>
</head>
<body>
<p>注意這里顯示的顏色</p>
<p>再留意顯示這里的顏色</p>
<b>好吧，再次留意這里的顏色</b>
<div class="cl">用類的方式標(biāo)識選擇器</div>
<p id="ii">用ID的方式標(biāo)識選擇器</p>
</body>
</html>在以上代碼的第4~7行中，用逗號把p、b、.cl以及#ii這四個選擇器都應(yīng)用上了同樣的CSS樣式。
VS Code一些常用快捷鍵
CTRL+？：添加注釋
CTRL+Enter：強制換行，無論光標(biāo)在不在末端。
好了，當(dāng)你看到這里，你對CSS是什么應(yīng)該有詳盡的了解了，那就開始先相關(guān)技術(shù)文檔自學(xué)吧！
HP是世界上最好的語言，這是一個老梗。
有不少學(xué)習(xí)PHP的程序員后來去做了前端開發(fā)，畢竟近些年前端開發(fā)還是蠻吃香的。
學(xué)習(xí)PHP不僅僅要學(xué)習(xí)html，而且還要學(xué)習(xí)CSS。
CSS是萬維網(wǎng)聯(lián)盟在 HTML 4.0 之外提出，目的是為了讓CSS完成樣式與內(nèi)容的分離。
那么，CSS如何入門呢?w3cschool在這里分享幾個方法：
w3cschool官方本身就有CSS教程，我們看教程的目的主要還是要了解CSS到底是干什么用的。
其實，用一句簡單的話來說，改變我們看的網(wǎng)頁的樣子.。
w3cschool新開發(fā)了CSS微課，這可能是很多程序員小伙伴所需要的。
CSS直接抓住了CSS教程中比較核心的一些概念和語法，并且有實戰(zhàn)的訓(xùn)練習(xí)題。
其內(nèi)容包括了CSS基礎(chǔ)、CSS文本樣式、CSS屬性、CSS定位和布局，讓你系統(tǒng)、立體地全面認(rèn)識CSS。
CSS微課實現(xiàn)了游戲化的編程體驗，關(guān)卡是循序漸進的，這迫使你不能跳躍而忽略一些重要的編程知識。
其中，習(xí)題類型包含了判斷題、選擇題、實戰(zhàn)訓(xùn)練題。
理論離不開實戰(zhàn)，CSS微課做到了例子多，概括技術(shù)全面。
當(dāng)你可以通關(guān)的時候，你已經(jīng)對CSS算是有一個比較深刻的認(rèn)識，也掌握了一定的CSS編程技能。
學(xué)編程一定要讓編程本身變得有趣，所以大可以先玩編程。
用CSS微課學(xué)習(xí)是一種有趣化的方法。
另外，閱讀《css禪意花園》，就當(dāng)成一本故事書看，隨便翻翻你會發(fā)現(xiàn)css確實很好玩的。
TML是制作網(wǎng)頁的基礎(chǔ)，我們在網(wǎng)站建設(shè)中談?wù)摰撵o態(tài)網(wǎng)頁就是基于HTML的網(wǎng)頁。
早期的網(wǎng)頁直接用HTML代碼編寫，但現(xiàn)在有許多智能網(wǎng)頁制作軟件（常用的如frontpage，dream weaver等）通常不需要手動編寫代碼，而是由這些軟件自動生成。雖然不需要自己寫，但是理解HTML代碼仍然是非常重要的。
了解HTML是什么？它是學(xué)習(xí)網(wǎng)站建設(shè)的重要技術(shù)基礎(chǔ)知識
下面我們自己可以動手創(chuàng)建一個非常簡單的網(wǎng)頁，首先我們讓計算機顯示擴展，方法是打開我的電腦，然后現(xiàn)在欄目工具》文件夾選項》查看》高級設(shè)置中找到《隱藏已知文件類型的擴展名》將其不勾選，并單擊“應(yīng)用”以確認(rèn)設(shè)置。然后在桌面上創(chuàng)建一個新的TXT文件，將此文件命名為“xxx.html”（擴展名也可以是htm），這樣你就可以用瀏覽器打開它，你就會看到自己制作的最簡單的頁面。
html是一種超文本標(biāo)記語言，即html（hypertext markup language），是一種用來描述網(wǎng)絡(luò)文檔的標(biāo)記語言。在頁面的開頭和結(jié)尾使用<html></html>標(biāo)簽。
總結(jié)：
1）HTML是我們常說的靜態(tài)網(wǎng)頁；
2）HTML是以Html或htm為擴展名的文件；
3）HTML某些標(biāo)簽代碼規(guī)則，讓內(nèi)容在瀏覽器中呈現(xiàn)出我們所需要的樣式；
4）HTML可以使用記事本創(chuàng)建，并以.html或.htm為擴展名保存。
html文件中的代碼由具有一定的規(guī)則規(guī)律標(biāo)簽與內(nèi)容組成。以指定的HTML結(jié)構(gòu)和內(nèi)容形成完整的html文件。我們可以直接使用瀏覽器來打開，查看網(wǎng)頁效果。
如果您想在瀏覽器中顯示各式各樣的網(wǎng)頁，我們就需要html文件（HTML基本結(jié)構(gòu)+內(nèi)容+標(biāo)簽）和css文件（css樣式）來實現(xiàn)我們需要的漂亮網(wǎng)頁。
動力節(jié)點老杜講解的html學(xué)習(xí)教程，非常詳細(xì)全面，完全適合小白入門
內(nèi)容：講解了HTML基礎(chǔ)語法、HTML概述、W3C概述、B/S架構(gòu)系統(tǒng)原理、table、背景色與背景圖片、超鏈接、列表、表單、框架等知識點。
通過html教程的學(xué)習(xí)之后，不但可以開發(fā)基本的網(wǎng)頁，還可以看懂別人編寫的HTML頁面。
HTML完整資料下載：
http://www.bjpowernode.com/?toutiaoweb.chai
1.HTML教程:課程內(nèi)容概述
2.HTML教程:BS結(jié)構(gòu)介紹
3.HTML教程:軟件環(huán)境準(zhǔn)備
4.HTML教程:HTML概述
5.HTML教程:我的第一個HTML
6.HTML教程:HTML的基本標(biāo)簽
7.HTML教程:HTML的實體符號
8.HTML教程:HTML的表格
9.HTML教程:HTML的單元格合并1
10.HTML教程:HTML的單元格合并2
11.HTML教程:thead tbody tfoot
12.HTML教程:背景色和背景圖片
13.HTML教程:HTML圖片img標(biāo)簽
14.HTML教程:HTML超鏈接
15.HTML教程:超鏈接的作用-request和response的概念
16.HTML教程:HTML列表
17.HTML教程:form表單初步
18.HTML教程:用戶注冊表單的實現(xiàn)
19.HTML教程:下拉列表支持多選
20.HTML教程:form的file控件
21.HTML教程:隱藏域hidden控件
22.HTML教程:隱藏域hidden控件2
23.HTML教程:readonly和disabled
24.HTML教程:控件的maxlength屬性
25.HTML教程:HTML文檔中節(jié)點的id屬性
26.HTML教程:div和span在網(wǎng)頁中的應(yīng)用
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
