前端之CSS介紹
阿新 • • 發佈：2017-07-25
utf-8 http ont 語言 定義 靜態 charset href ron
| 一、CSS簡介 |
- 介紹
css我們稱呼層疊樣式表(英文全稱：Cascading Style Sheets)。它是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。如果html是一個人，那麽CSS就相當於衣服，有了它我們可以讓HTML樣式豐富多彩。
- 語法
css語法主要由兩部分組成：選擇器和聲明。選擇器通常是您需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。
selector { property1:value1 property2:value2 ……}
- 存在方式
元素內聯：直接在元素中置頂CSS
頁面嵌入：通過在head標簽中定義，提供後續使用
外部引入：通過外部文件，是head標簽中使用link引入，本質引入都是一樣。
- 註釋
/*代碼塊*/
/*.c1{
height: 30px;
}*/
| 二、CSS選擇器 |
分類：
- 元素選擇器
- id選擇器
- class選擇器
1.元素選擇器
通過不同的元素定義選擇器，如p、div、span、hr、table等等，只要定義了元素選擇器，所有該元素都會引用定義的樣式。
demo：
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>hello</title> <style> p{ background-color: aqua ; height: 20px; } div{ background-color: red; height: auto; } </style> </head> <body> <div>wd</div> <p>name</p> <!--head中定於了p、div標簽的樣式，body中所有的div和p都會引用到其樣式--> </body> </html>
2.id選擇器
通過使用#+名字定義樣式，引用使用id=“名字”引用該樣式。
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello wd</title> <style> #i1{ background-color: red; height: 50px; } </style> </head> <body> <div id="i1">python</div> <!--引用i1中的樣式--> </body> </html>
3.class選擇器
通過.+名字定義，使用class=“名字”來引用樣式
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello wd</title> <style> #i1{ background-color: red; height: 50px; } </style> </head> <body> <div id="i1">python</div> <!--引用i1中的樣式--> </body> </html>
前端之CSS介紹