CSS基礎（一）---CSS樣式
阿新 • • 發佈：2018-12-20
一、css概述
1、CSS是Cascading Style Sheets的英文縮寫，即層疊樣式表
2、CSS和HTML一樣都是標記語言，可以直接由瀏覽器執行，屬於瀏覽器解釋型語言
3、CSS能夠對網頁中的元素進行精確的控制，可以對網頁中元素進行精確修改
4、CSS是能夠真正做到網頁表現與內容分離的一種樣式設計語言
5、CSS目前最新版本為CSS3
二、css與html的關係
1、HTML是標記，是把文字、圖片等內容放在HTML標籤中讓瀏覽器去解釋，並把內容顯示在瀏覽器中，供使用者閱讀，HTML就是人的骨骼架構
2、CSS是為HTML標籤新增各種樣式，用來告訴瀏覽器，應該如何顯示這些標籤裡面的內容，起到佈局與美化網頁的作用，CSS就是人的衣服，用來修飾
三、css寫法格式
1、外鏈樣式
外鏈樣式——通過載入的方式載入CSS樣式，檔案字尾名需要是.css，只要頁面載入本CSS檔案，那麼這些頁面都會受到影響，在以後做專案時會經常使用外鏈樣式（需要在head中寫上link標籤）
<!DOCTYPE html> <html> <head> <title>css樣式-外鏈樣式</title> <!-- 在head中匯入.css檔案 --> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- 外鏈樣式，引入.css檔案,該頁面會收到引入的.css檔案影響 --> <h1>標題1</h1> </body> </html>
下面是style.css檔案，css檔案，針對html當中的標籤，標籤{……}，在{}中寫規則
/*.css檔案書寫*/
/*對應html檔案標籤{},在{}編寫相應的規則*/
/*選擇器{屬性:值}*/
h1{color: red}2、頁內樣式
頁內樣式——直接在本頁面寫CSS樣式，所寫CSS樣式隻影響本頁面，其他頁面不會受到影響（需要在head中寫上style標籤）
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>css樣式-頁內樣式</title> <!-- 在head設定本頁面的css規則 --> <style type="text/css"> h2{color: green} div{color: blue} </style> </head> <body> <h2>demo2</h2> <div>哈哈哈哈哈哈</div> </body> </html>
3、行內樣式
行內樣式——在HTML標籤內部，以屬性的方式寫CSS樣式，該CSS樣式只會對本標籤起到作用，類似於<h2 style=“color：red；”>，記得寫完style之後加上分號
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>css樣式-行內樣式</title>
</head>
<body>
<!-- 行內樣式，直接寫在屬性當中，只修飾指定標籤內容 -->
<h3 style="color:yellow;">web前端</h3>
<h3>我正在學習css</h3>
</body>
</html>