整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
轉CSS系列-CSS簡介及添加
大家可能都知道，如果一個網頁只是使用HTML代碼進行編寫。在默認情況下是沒有任何樣式可言的，就像我們蓋好一幢樓，但是還沒有裝修那樣，而HTML就相當于我們剛蓋好樓的主體，而咱們開始學習的CSS就是裝修，只不過CSS是針對HTML實現美化，當然不只是美化，還有布局。
CSS 全稱：Cascading Style Sheets中文翻譯為層疊樣式表 ，定義HTML中的標記以何種方式顯示。如：我們想讓網頁中H1標記的文字顯示的不要那么大，或者換個顏色等等諸如一系列這樣的問題，都可以通過CSS來實現。目前所有的主流瀏覽器均支持CSS。
我們通過下邊兩張圖對比一下：
我們先看一下添加過CSS樣式的網頁如下圖
現在我們把CSS樣式表文件去掉
通過這兩種這兩張圖大家可以明顯的看到。加完CSS的可以按照我們設計的想法實現我們網頁元素的擺放
下邊我們先學習如何把CSS添加到網頁中去，而其還要注意學習CSS要明白一個重要的問題，CSS主要是解決與實現表現（CSS）與結構（HTML）的分離。我們編寫完HTML之后，如何通過CSS對HTML實現控制呢。
行內樣式
內嵌樣式
鏈接樣式
導入樣式
我們這一節課的示例就先從行內樣式開始
行內樣式：就是直接在HTML上寫樣式，就是HTML上加屬性style=””這種形式。如
<p style=”color:#f00”>dushuwu</p>，但是這種方法并不是被我們推薦的，因為不利于實現表現與結構分離。也為后期維護帶來很多不必要的困難。我們只需要知道即可。
內嵌樣式：針對當前一個網頁可以使用的樣式，一般寫在html的<head></head>標記中。而且要使用一個示明，我們的樣式都要寫到這個聲明中如下：
<style type=”text/css”>寫我們的樣式</style>
我們看一個示例文件為我們段落文字改成紅色的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dushuwu第一示例</title>
<style type="text/css">
p
{
color:#f00;
}
</style>
</head>
<body>
<p>dushuwu</p>
<h2>www.</h2>
</body>
</html>
我們在這里又有一個新的知識點。如果我們想給段落添加一個樣式的話。我們可以通過兩步實現，第一步先找到這個段落，第二步添加CSS樣式屬性（PS：這些屬性咱們現在可以理解為已經提供好的，咱們使用即可）。
那咱們現在就看一下這個CSS選擇器：
CSS選擇器的分類：
HTML標簽選擇器
群組選擇器
包含選擇器
自定義選擇器有可以分為兩種
Class選擇器
ID選擇器
HTML標簽選擇器：就是直接使用BODY中的HTML標記做為選擇符,就像我們第一示例那樣。
但是這種選擇器有一種局限性。假設我們有兩個段落。要設置不一樣的效果。那怎么辦呢？當然我們選擇器必須結合起來用才可以。
假如我們要為網頁中的H2和P的文字都要改成紅色的，怎么辦呢？這時候群組選擇器就派上用場了。我們看個示例文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dushuwu第一示例</title>
<style type="text/css">
h2,p
{
color:#f00;
}
</style>
</head>
<body>
<p>dushuwu</p>
<h2>dushuwu提供CSS教程</h2>
</body>
</html>
語法規范就是
選擇器,選擇器{屬性:屬性值;}
總結：我們記得只要我們CSS屬性一致的時候，都可以使用群組選擇符。
包含選擇器：找到含有的內容，就像我們HTML中UL LI a（PS：列表上加鏈接） 這種形式，如果我們要為列表中鏈接添加樣式。這時候我們就能使用包含選擇器
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>dushuwu第三示例</title>
<style type=”text/css”>
ul li a{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href=”#”>項目編號1</a></li>
<li><a href=”#”>項目編號2</a></li>
</ul>
<a href=”#”>我不會被改變</a>
</body>
</html>
語法規范是：
選擇器 選擇器{屬性:屬性值;}
注意：這里面是空格隔開的 HTML中的父級空格HTML中的子級
自定義選擇器
引入：如果網頁中有多個P標簽，我們想為其中某一個P添加樣式。該怎么辦呢，之前的選擇器都不能滿足。
ID選擇器：為網頁中某一個標簽添加屬于自己的選擇器，而且規范要求我們這個ID名稱的選擇器只能使用一次。（PS：也是為了以后JS好調用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>示例</title>
<style type="text/css">
#diyi li a{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href="#">項目編號1</a></li>
<li><a href="#">項目編號2</a></li>
</ul>
<ul id="diyi">
<li><a href="#">項目編號1</a></li>
<li><a href="#">項目編號2</a></li>
</ul>
<a href="#">我不會被改變</a>
</body>
</html>
語法規范就是：
#選擇器名稱{CSS屬性：屬性值;}
而在HTML中就是 id=”選擇器名稱”
為久經沙場的打工人，我們肯定經歷過一次次難忘的面試，這其中有愉快的交談，也有尷尬的對話，甚至還會有崩潰的瞬間...可以說，人類的面試悲歡喜樂，并不相通！近日看到一位程序員網友發帖吐槽：前端面試太難了，問啥啥不會，都快面哭了。
即使隔著手機屏幕，都已經感覺到了這位小伙伴的“崩潰瞬間”。當面對面試官的連環問題而完全不知所云，無法解答的時候，可能那時的我們只求找個地縫鉆進去吧。
其實，上面這位網友的尷尬遭遇，在面試的時候并不少見。很多情況下是由于我們的技術基礎并不扎實，也沒有形成自己的知識體系，導致我們在面對新行業、新領域的問題時，無法快速適應和解決。
就拿前端學科舉例，隨著新形勢下企業對于前端的綜合能力要求更加高，物聯網、大數據可視化、云計算、VR/AR、5G等新技術接踵而至，現在的前端工程師更是承擔了更多責任，而這些都取決于扎實的基礎之上，沒有系統的理論基礎，沒有成體系的技術架構，完全無法真正形成自己的技術競爭力。
因此推薦所有的前端er一門必備的課程《浠浠呀老師html+css前端入門教程，快樂學習，小白必看》。課程由浠浠呀老師為小白入門前端傾力打造的前端基礎教程。是零基礎小白入門前端開發的不二之選。
先來隆重介紹一下浠浠呀老師吧：
千鋒教研院執行院長，千鋒學科部總監，小獅視覺總監，前端培訓屆扛把子-千鋒HTML5大前端學科創建者。 畢業于布列斯特普希金國立大學，曾任北京市屬高校師資培訓中心特邀講師，多年擔任北京市屬高校師資培訓工作。著有《HTML5從入門到精通》、《Jquery從入門到實戰》、《PhotoShop CC實戰入門》、《Unity虛擬現實開發實踐》、《數據結構與算法（C語言篇）》、《Nginx 高性能 Web 服務器應用與實戰（微課版）》等多本書籍，被500多所高校選用，深受好評。 深耕IT職業教育行業十多年，學生遍布各大互聯網大廠，熱愛教育事業。對于教學研究、教學管理工作有深刻的理解。
視頻不同于以往傳統的前端教學視頻。摒棄了傳統教程填鴨式課堂講授的方式，用最直觀的動畫效果解釋原理，用最真實的案例鞏固知識。是一種全新的講課方式，對小白友好，能讓前端入門變得清晰簡單。
課程從最基礎開始，講解無廢話不反復，節奏明快，直擊痛點，直截了當地輸出干貨。將復雜的前端問題拆解成簡單的知識點。將前端知識點系統整理，結合實用案例，以講解+動畫的形式展現，讓學生真正地看到即學到。
課程設計十分用心，認真分析了小白們的日常學習習慣，思維習慣，知識背景。甚至對每一個小白可能出現疑問的地方做了預判。每個案例都悉心打磨，簡單而典型。用前期大量的教研時間換取學生們的接收知識時間。
本課程共包括2季，內容涵蓋，HTML，CSS和HTML5、CSS3。本次發布視頻第一季上半部分——HTML。課程共 50 集，16個部分，58個知識點，30個案例。
輯：陳凌煜
本文出自微信公眾號“August精彩編程”（ID：august-edu）
2019年8月12日
網站分靜態網站和動態網站，相信小伙伴們對這兩個詞略有耳聞或者已經了解，那么小編還是啰嗦一下這兩種網站有什么區別。
網頁上的內容是隨著數據庫讀取出來的內容不一樣或者用戶操作不一樣而改變的，舉個例子，比如網頁上的用戶登錄，剛訪問網頁的時候用戶登錄狀態是無登錄狀態，當用戶點擊登錄，彈出輸入賬號密碼的窗口的時候，這還不算是動態，還屬于靜態，那么接下來，用戶點擊登錄按鈕，網頁將賬號密碼提交到服務器后臺，服務器把賬戶密碼拿去跟數據庫里面存的做比較，如果一樣，則登錄成功，網頁顯示登錄成功狀態，如果核對沒有完全一致，則登錄失敗，網頁保持無登錄狀態。
像這種隨著用戶操作而改變內容的網站，才稱之為動態網頁。
看了上面的動態網站，其實對靜態網站也能有一定理解了，不理解也沒關系，這里再詳細說明下！靜態網站是指網站無論用戶操作什么，都是一模一樣的，不會有任何改變，那么有小伙伴可能又要問了，有些網站上有導航欄，我點擊首頁，會跳轉到首頁，點擊關于我們，又換了一個頁面，這難道不是動態嗎？不是的，這是靜態，你無論怎么操作，你會發現你跳轉來跳轉去的網頁長得一摸一樣，沒有任何改變。
其實除了看網頁變化來判斷是靜態網頁還是動態網頁之外，還有個方法，看網頁地址欄的擴展名，如果.html就是靜態網頁，如果是.asp或者.php那就是動態網頁。但是這種說法并不完全正確，現在可以動靜分離，可以理解為有沒有數據庫支持！
如圖所示是我在網絡上找到的一個asp動態網站。Html網站網上非常多一抓一大把，php也不少，有興趣的小伙伴可以自己上網搜索下！
接下來進入主題，我們先來看看我們今天要實現的效果是什么？
鼠標經過有效果對吧。
我們先看看效果圖：
這是一個網站的導航欄
接下來我們把鼠標放上去看看會發生什么？
這種神奇的效果要如何設計呢？大家都知道網頁設計的三大利器是什么？
答案：HTML+CSS+JavaScript
今天這個案例我們只需要用到HTML+CSS，還是很簡單的，我們先來看看導航欄怎么寫：
<!DOCTYPE html> <html> <head> <title>August精彩編程</title> </head> <body> <div class="header"> <a href="#"><img src="logo.png"></a> <div class="header-word"> <ul> <a href="#"><li>CONTACT</li></a> <a href="#"><li>EVENTS</li></a> <a href="#"><li>FACULTY</li></a> <a href="#"><li>GALLERY</li></a> <a href="#"><li>ABOUT</li></a> <a href="#"><li>HOME</li></a> </ul> </div> </div> <div class="clear"></div> </body> </html>
這樣寫我們的導航欄就寫出來了，但是效果是什么樣的呢？
我們需要對這個頁面加上CSS（層疊樣式表）。代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>August精彩編程</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
}
html{
height: 2400px;
}
.header{
width: 100%;
height: 100px;
background:#07cbc9;
}
.header img{
height: 48px;
width: 260px;
padding: 26px 26px;
padding-left: 10%;
float: left;
}
a{
color: #fff;
text-decoration: none;
}
.header .header-word{
padding-right:75px;
}
.header .header-word ul li{
float: right;
font-size: 16px;
font-family: "微軟雅黑";
padding-right: 10px;
padding-left: 10px;
list-style: none;
line-height: 100px;
color: #fff;
}
</style>
</head>
<body>
<div class="header">
<a href="#"><img src="logo.png"></a>
<div class="header-word">
<ul>
<a href="#"><li>CONTACT</li></a>
<a href="#"><li>EVENTS</li></a>
<a href="#"><li>FACULTY</li></a>
<a href="#"><li>GALLERY</li></a>
<a href="#"><li>ABOUT</li></a>
<a href="#"><li>HOME</li></a>
</ul>
</div>
</div>
<div class="clear"></div>
</body>
</html>
然后效果就出來啦，如圖所示：
接下來就是今天我們所學內容最核心的內容，涉及到4個CSS的鏈接偽類。
鏈接偽類，是指鏈接的四個狀態：激活狀態（active）、已訪問狀態（visited）、未訪問狀態（link）、鼠標經過狀態（hover）。
那么我們今天要使用的就是鼠標經過狀態（hover），怎么使用呢？看已下這段CSS：
.header .header-word ul li:hover{
float: right;
font-size: 16px;
font-family: "Microsoft YaHei UI";
padding-right: 10px;
padding-left: 10px;
list-style: none;
line-height: 100px;
background: #000;
color: #fff;
}
是噠，這樣就完成了我們今天要制作的效果。
接下來附上完整代碼：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
