什么是CSS?以及它與HMTL有何關系?

發表時間:2020-08-07 10:26作者:網站建設來源:蘇州互旦科技網址:http://www.zptv7ihx.cn/what-is-CSS.html

什么是CSS?以及它與HMTL有何關系?


CSS代表級聯樣式表,重點放在“樣式”上。 HTML用于構造網站建設文檔(定義標題和段落之類的內容,并允許您嵌入圖像,視頻和其他媒體),而CSS則通過并指定了文檔的樣式-頁面布局,顏色和字體都已確定與CSS。以HTML為基礎(每所房子都有),以CSS為美學選擇(維多利亞時代的豪宅和世紀中葉的現代住宅之間有很大的不同)。

CSS如何工作?

CSS通過與HTML元素交互來為您的網頁帶來樣式。元素是網頁的單個HTML組件(例如一個段落),在HTML中可能看起來像這樣:


<p>This is my paragraph!</p>


如果您想讓這段文字在通過網絡瀏覽器查看網頁的用戶中顯示為粉紅色和粗體,則可以使用如下所示的CSS代碼:


p   {   color:pink;   font-weight:bold;   }


在這種情況下,“ p”(該段落)稱為“選擇器”,它是CSS代碼的一部分,用于指定CSS樣式將影響哪個HTML元素。 在CSS中,選擇器寫在第一個花括號的左側。 大括號之間的信息稱為聲明,它包含應用于選擇器的屬性和值。 屬性是諸如字體大小,顏色和邊距之類的東西,而值則是這些屬性的設置。 在上面的示例中,“顏色”和“字體粗細”都是屬性,而“粉紅色”和“粗體”是值。 全括號的{   color:pink;   font-weight:bold;   }


是聲明,再次,“ p”(表示HTML段落)是選擇器。 這些相同的基本原理可以應用于更改字體大小,背景顏色,邊距縮進等等。 例如:


body   {   background-color:lightblue;   }


會使頁面的背景變成淺藍色,或者p   {   font-size:20px;   color:red;   } 將創建一個帶有紅色字母的20點字體段落。

外部,內部或內聯CSS?

但是,您可能想知道此CSS代碼實際上如何應用于HTML內容。 就像HTML一樣,如何設計網站?CSS通過計算機上的文本編輯器或文字處理器以簡單的純文本形式編寫,并且有三種主要方法可將CSS代碼添加到HTML頁面中。 CSS代碼(或樣式表)可以是外部,內部或內聯的。 外部樣式表另存為.css文件,可用于通過一個文件確定整個網站的外觀(而不是將CSS代碼的單獨實例添加到要調整的每個HTML元素中)。 為了使用外部樣式表,您的.html文件需要包含一個標題部分,該部分鏈接到外部樣式表,并且看起來像這樣:


<head>

<link rel=”stylesheet”   type=”text/css”   href=mysitestyle.css”>

</head>


這會將.html文件鏈接到您的外部樣式表(在本例中為mysitestyle.css),然后該文件中的所有CSS指令都將應用于鏈接的.html頁面。


內部樣式表是直接寫入特定.html頁面標題的CSS指令。 (如果您在網站上只有一個頁面具有獨特的外觀,這將特別有用。)內部樣式表看起來像這樣。 。 。


<head>

<style>

Body   {   background-color:thistle;   }

P   {   font-size:20px;   color:mediumblue;   }

</style>

</head>


背景色和帶有20磅中藍色字體的段落現在將應用于此單個.html頁面。


最后,內聯樣式是直接寫入HTML代碼的CSS片段,僅適用于單個編碼實例。 例如:


<h1   style=”font-size:40px;color:violet;”>Check out this headline!</h1>


會導致單個.html頁上的一個特定標題以紫羅蘭色40點字體顯示。


一般而言,外部樣式表是在網站上實現CSS的最有效方法(通過專用CSS文件跟蹤和實現網站樣式更容易),而內部樣式表和內聯樣式可用于以下情況: 需要進行個別樣式更改時的案例依據。


因此,如果HTML是支持您網站的基礎,框架,墻壁和大梁,請考慮使用CSS,然后再使用油漆顏色,窗口樣式和美化環境。 您必須首先建立基礎,否則您將一無所獲,但是,一旦您做到了,您將想要遵循某種風格,而CSS是釋放內部裝飾器的門票。

文章列表
2019-07-08
蘇州谷歌競價發現,許多外貿公司的網站都負責外包公司。對于其他批次的公司,他們依靠自己的探索方法。但他們經常遇到無法解決的問題。以下是Google Bidding教程方法的詳細說明。
2019-07-08
蘇州外貿推廣渠道有哪些?本次就關于B2B推廣,我總結了五種方法分享給大家,僅此幫助那些從事google推廣碰壁的人...
2019-07-09
蘇州谷歌代理現已是長三角負責google推廣的重要渠道之一,對于新入行的企業來講首先要知道其到底是做什么?自己可能...
2019-07-09
對于蘇州外貿網站建設的人來說,由于隨著全球電子商務的發展,許多外貿公司希望將品牌推向世界,并將建立一個外貿網站。那...
2019-07-10
做過的網站優化的人都會碰到網站收錄下降、網站被K或者是不收錄等情況,令人頭疼不已。本次就由蘇州seo外貿推廣教你6...
2019-07-10
從今天海外網站發展趨勢來講,如果外貿企業還想單靠網站在Google、bing和Yahoo等搜索引擎賺取流量和訂單,...
2019-07-11
由于外貿近年來遭受的損失,如何度過這場危機已成為最關鍵的問題。搞好外貿是一種在主要社交媒體上推廣網站排名和公司產品...
2019-07-11
首先要知道Google作為全球第一大搜索引擎,每天吸引的流量是無比龐大的。既然是外貿企業如果放棄這個推廣平臺,實在...
2019-07-12
蘇州google代理商就網站中最重要TKD教程中,今天抽取title標簽單獨講,后續也會把K和D逐一為大家分析。t
2019-07-12
蘇州谷歌代理商告訴你做優化首先要懂一些代碼,但是現在很多剛從事這類工作的人不是太懂代碼,只知道把標題、關鍵詞、描述...