標籤:代碼塊 樣式表 等等 code 簡介 html 應用 link 注釋
css我們稱呼層疊樣式表(英文全稱:Cascading Style Sheets)。它是一種用來表現HTML(標準通用標記語言 (SGML)的一個應用)或XML(標準通用標記語言 (SGML)的一個子集)等檔案樣式的電腦語言。CSS不僅可以靜態地修飾網頁,還可以配合各種指令碼語言動態地對網頁各元素進行格式化。如果html是一個人,那麼CSS就相當於衣服,有了它我們可以讓HTML樣式豐富多彩。
css文法主要由兩部分組成:選取器和聲明。選取器通常是您需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。
selector { property1:value1 property2:value2 ……}
元素內聯:直接在元素中置頂CSS
頁面嵌入:通過在head標籤中定義,提供後續使用
外部引入:通過外部檔案,是head標籤中使用link引入,本質引入都是一樣。
/*代碼塊*/
/*.c1{
height: 30px;
}*/
分類:
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介紹