1. 程式人生 > >CSS之旅:前端基礎之CSS

CSS之旅:前端基礎之CSS

dot bms 布局 兩個 vbr 元素定位 padding 占滿 one

CSS(Cascading Style Sheet,層疊樣式表)定義如何顯示HTML元素。

當瀏覽器讀到一個樣式表,它就會按照這個樣式表來對文檔進行格式化(渲染)。

CSS語法

CSS實例

每個CSS樣式由兩個組成部分:選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之後用分號結束。

技術分享圖片

CSS註釋

/*這是註釋*/

註釋是代碼之母。--摘自哪咤語錄

CSS的幾種引入方式

行內樣式

行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。

<p style="color: red">Hello world.</p>

內部樣式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部樣式

外部樣式就是將css寫在一個單獨的文件中,然後在頁面進行引入即可。推薦使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS選擇器

基本選擇器

元素選擇器

p {color: "red";}

ID選擇器

#i1 {
  background-color: red;
}

類選擇器

.c1 {
  font-size: 14px;
}
p.c1 {
color: red;
}

註意:

樣式類名不要用數字開頭(有的瀏覽器不認)。