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