CSS（一）基礎

時間 2019-11-18

標籤 css 基礎欄目 CSS 简体版

原文原文鏈接

HTML CSS Javascript 三者關係

-HTML是網頁內容的載體；

-CSS樣式是表現（外觀控制）；

-Javascript是行爲，是用來實現網頁特效效果，如輪播圖；

什麼是CSS

-CSS 是層疊樣式表
-用於定義HTML內容在瀏覽器中的顯示樣式

CSS的做用

-CSS簡化HTML相關標籤，網頁體積小下載快
-解決內容與表現分離的問題
-更好的維護網頁提升工做效率

CSS內容：

-CSS基礎語法

　　1：CSS 規則由兩部分構成，選擇器+聲明。如： .h1 { color：red; }
　　2：CSS引用：寫在<head></head>標籤內： <style type="text/css"> CSS樣式。。。 </style>
　　3：相一樣式的能夠用逗號隔開，只寫一次。如： p,h1,h2,h3,h4 { color:red}

-CSS使用方法

　　1：行內樣式（內聯樣式）如： <p style="color:red;"></p>
　　2：內部樣式表（嵌入樣式）把CSS樣式寫在 <style type="text/CSS"> CSS樣式。。。</style>內，同時 style標籤要放在head標籤內
　　3：外部樣式表存在 .css文件內
　　　　　　引入外部文件 <link href="XX.css" rel="stylesheet" type="text/css" /> 同時注意放到head標籤內
　　4：導入式（儘可能不要用存在慢和兼容性問題） @import 引入外部CSS樣式如 @import url(XX.css) 或者 @import "XX.css" 要放在樣式代碼的最開始處

-CSS選擇器

　　。標籤選擇器
　　。類選擇器 1：爲HTML標籤添加 class屬性注意要用 .style
　　　　　　　　　2：可對不一樣類型元素的同一個名稱的類選擇器設置不一樣的樣式規則；如 p.red {font-size:50px;} h1.red { font-size:10px;}
　　　　　　　　　　3：多個樣式用空格隔開即開
　　。ID選擇器 1：爲HTML標籤添加id屬性如 <p id="p1"></p> 經過id選擇器來爲具備此ID的元素設置CSS規則： #p1{ color : red}
　　　　　　　　　　2：id是惟一的
　　。全局選擇器　　1：全部標籤設置樣式通配符 *{ color：blue}
　　。羣組選擇器 1：集體統一設置樣式用逗號隔開
　　　　　　
　　。後代選擇器　　1：使用後代選擇器設置時，之間用空格隔開如： p em{ color ；blue;}

　　　　　　　　　　

　　。僞類

　　　　-僞類選擇器定義特殊狀態下的樣式css

　　　　-沒法用標籤，id，class及其餘屬性實現、瀏覽器

　　　　　　　　-連接僞類：url

　　　　　　　　　　　　　　　　連接中的四種狀態：（：link 激活狀態）》（：visited 已訪問狀態）》（：hover 未訪問狀態）》（：active 和鼠標懸停狀態）blog

-CSS繼承和層疊

-CSS優先級

　　　　行內樣式 > 內部樣式 > 外部樣式；
　　　
　　　　內部樣式和 link 外部樣式表的優先級取決於誰離要顯示的地方近，就是所謂的就近原則；

　　　

-CSS命名規範

相關文章

相關標籤/搜索

CSS 基礎教程

CSS基礎學習

Java基礎之一

css基礎修煉之路

PHP 7 新特性

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<