HTML應用CSS程式碼方式
基本上,沒有CSS程式碼應用的頁面是不忍直視的,它可以讓頁面更加規整美觀。
下面介紹一下如何在頁面中應用CSS程式碼,大致有三種方式:
(1).分別是內聯樣式。
(2).內部樣式表。
(3).引入外部樣式表。
一.內聯樣式:
內聯樣式是直接將CSS程式碼通過style屬性寫在應用元素自身之上。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <div style="width:100px;height:50px;border:1px dotted red;"></div> </body> </html>
使用style屬性建立內聯樣式,屬性值就是普通的CSS程式碼。
特別說明:單引號和雙引號都是可以的。
內聯樣式的優先順序最高,不過使用內聯樣容易使html程式碼顯得雜亂,容易導致檔案龐大,且無法複用程式碼。
通常應用非常簡短的CSS樣式設定,或者臨時CSS程式碼測試。
二.內部樣式表:
內部樣式表通常在<head>標籤中,用<style></style>標籤包裹。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div { width:100px; height:50px; border:1px dotted red; } </style> </head> <body> <div></div> </body> </html>
內部樣式表和內聯樣式相比具有不少優勢,頁面更加簡潔,更便於修改程式碼。
缺點也是明顯的,同樣可以使頁面比較龐大,只有當前所在頁面元素可以重用CSS程式碼。
比較適用於當前頁面小範圍頁面樣式的修改。
三.引入外部樣式表:
在網頁頭部<head>標籤中可以使用<link>引入外部樣式表。
對於多頁面的網站比較適用,便於統一樣式,快速改變,減小網頁體積和重複利用程式碼等優點。
[HTML] 純文字檢視 複製程式碼<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS教程</title> <link rel="stylesheet" type="text/css" href="antzone.css" /> </head>
對於成品上線網站,推薦使用此方式為頁面應用CSS程式碼。
相關文章
- 8款最受歡迎的HTML5/CSS3應用及程式碼HTMLCSSS3
- 《iOS應用開發指南——使用HTML5、CSS3和JavaScript》——1.3 移動應用程式≠桌面應用程式iOSHTMLCSSS3JavaScript
- 精選HTML5/CSS3動畫應用原始碼分享HTMLCSSS3動畫原始碼
- css3 calc()應用程式碼例項CSSS3
- 如何用 CSS + HTML + JS 建立桌面應用CSSHTMLJS
- HTML、CSS程式碼書寫規範HTMLCSS
- 《iOS應用開發指南——使用HTML5、CSS3和JavaScript》——1.3節移動應用程式≠桌面應用程式iOSHTMLCSSS3JavaScript
- 用css列印htmlCSSHTML
- 低程式碼平臺建立數字應用程式的高效方式
- 8款強大的CSS3/HTML5動畫及應用原始碼CSSS3HTML動畫原始碼
- CSS之CSS和html整合方式及優先順序CSSHTML
- HTML5 應用程式快取HTML快取
- HTML+CSS底部footer兩種固定方式HTMLCSS
- css和html的四種結合方式CSSHTML
- HTML 和 CSS 程式碼結構的基本準則HTMLCSS
- 網頁中應用CSS樣式的幾種方式網頁CSS
- 低程式碼正在改變企業的應用開發方式
- HTML,CSS編碼規範HTMLCSS
- HTML中使用CSS的幾種方式介紹HTMLCSS
- 一些常用的html、css、js的簡單應用HTMLCSSJS
- 純 HTML+CSS+JavaScript 編寫的計算器應用HTMLCSSJavaScript
- HTML程式碼混淆技術:原理、應用和實現方法詳解HTML
- webpack--css、html 和 js 程式碼的常用處理WebCSSHTMLJS
- CSS應用給網頁元素的幾種方式總結CSS網頁
- html程式碼複用怎麼解決?HTML
- HTML5 應用程式快取簡介HTML快取
- css和html的四種結合方式介紹CSSHTML
- 在html中使用css樣式的集中方式HTMLCSS
- HTML/CSS/JS編碼規範HTMLCSSJS
- Zen Coding 快速編寫HTML/CSS程式碼的實現HTMLCSS
- .NET Core應用程式的2種部署方式
- 用程式碼的方式開啟“允許安裝來自未知來源的應用”
- 程式碼雨(coderain)原始碼(html5+css3+javascript,原創)AI原始碼HTMLCSSS3JavaScript
- 9款最新炫酷HTML5/CSS3應用推薦HTMLCSSS3
- 15個無比華麗的HTML5/CSS3動畫應用HTMLCSSS3動畫
- 用深度學習自動生成HTML程式碼深度學習HTML
- HTML————9、HTML CSSHTMLCSS
- 用vs除錯帶CSS的HTML除錯CSSHTML