css樣式常用的樣式以及選擇器

別攔著我，我要學習發表於2020-11-20
CSS

css技術介紹：

css是層疊樣式的表單。是用於（增強）控制網頁樣式，並允許將樣式資訊與網頁內容分離的一種標記性語言。

語法規則：

選擇器：瀏覽器根據“選擇器”決定受css樣式影響的HTML元素（標籤）。
屬性：是你要改變的樣式名，並且每一個值。屬性和值都被冒號分開，並由花括號包圍，這樣就組成了一個完整的樣式宣告，例如p{color：blue}
多個宣告：如果要定義不止一個宣告，則需要用分號將每個宣告分開。雖然最後一條宣告的最後可以不加分號。(但儘量在每條宣告的末尾都加上分號）

方式一：

<div style="border: 1px solid red">div標籤1</div>
<div style="border: 1px solid red">div標籤2</div>
<span style="border: 1px solid red">span標籤1</span>
<span style="border: 1px solid red">span標籤2</span>

方式二：

在head中定義css樣式，選擇器就是html標籤

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style標籤專門用來定義css樣式程式碼-->
    <style type="text/css">
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div >div標籤1</div>
<div >div標籤2</div>
<span >span標籤1</span>
<span >span標籤2</span>
</body>

方式三：

將css樣式寫為一個單獨的css檔案，再通過link標籤引入服用即可
css樣式檔案：

div{
    border: 1px solid red;
 }
span{
    border: 1px solid red;
}

html程式碼：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link標籤專門用來引入css樣式-->
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<div >div標籤1</div>
<div >div標籤2</div>
<span >span標籤1</span>
<span >span標籤2</span>
</body>

常用的選擇器

  1. 標籤名選擇器
    格式： 標籤名{
    屬性：值；
    }

  2. id選擇器
    格式：#id 屬性值{
    屬性：值
    }

  3. class型別選擇器
    格式：.class屬性值{
    屬性:值；
    }
    class型別選擇器，可以通過class屬性有效的選擇性的使用這個樣式

  4. 組合選擇器
    格式： 選擇器1，選擇器2，選擇器n{
    屬性：值；
    }

常用的樣式：

  • color：顏色
  • width：寬度
  • height：高度
  • background-color：背景顏色
  • font-size：字型大小
  • border：邊框
  • margin left：auto /margin right：auto ：DIV居中
  • text-align：文字居中
  • text-decoration：none ：超連結去除下劃線

相關文章