微信小程序開發之路之HTML中的css

HTML應用CSS

css是層疊樣式表的縮寫,從html4開始使用,是爲了更好地渲染HTML元素

css主要通過三種方式添加到HTML中:

  • 內聯樣式: 在HTML標籤中使用style屬性
  • 內部樣式表: 在HTML文檔頭部使用style元素來調用css
  • 外部引用: 使用外部css文件

內聯樣式

當特殊樣式應用到個別元素時,可以在元素單獨使用style屬性

//這個例子定義了該段落的字體顏色,背景顏色,左邊距的屬性  
<p style="color: blue;background-color:gray;margin-left: 10px">this is a paragraph..</p>

//這個例子演示字體與對齊
<h1 style="font-family: Ani;font-size: 40px">A Title</h1>
<p style="text-align: center">使用text-align的屬性替代center標籤</p>

內部樣式表

當特殊樣式應用到整個HTML文件時,可以使用內部樣式表

<head>
<style type="text/css">
body{background-color: blueviolet}
p{color: aqua;font-size: 12px;text-align: center}

</style>
</head>


外部樣式表

當特殊樣式應用到很多頁面時,可以使用外部樣式表,這個時候需要創建.css文件,然後在HTML頭部使用link標籤導入

<html>
<head>
<link rel="stylesheet" type="text/css" href="css文件路徑/xx.css"> 
</head>
</html>

css選擇器

css選擇器可以理解爲以什麼樣的方式選擇某一部分空間進行css渲染
主要有三類

構造選擇器

構造選擇器針對網頁中的一類標籤疊加樣式,一般形式爲:

<style type="text/css">
    標籤名 { 美化屬性}
</style>

這樣本文件中所使用的所有該標籤都按照設定的css樣式進行渲染

類選擇器

類選擇器針對某一類中的個別元素

<style type="text/css">
    .非關鍵字類名{ 美化屬性}
</style>

類選擇器是自己命名的,但是不能夠使用關鍵字,類選擇器以點開頭,調用方式爲:

<li class="對應非關鍵字類名"/>

id選擇器

id選擇器類似類選擇器,其實符號是井號#而不是點 ,一般與div配合應用於區域

<style type="text/css">
    #id名{ 美化屬性}
</style>
<!--調用方式-->
<div id="id名">....</div>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章