CSS基礎一

時間 2019-12-14

標籤 css 基礎欄目 CSS 简体版

原文原文鏈接

什麼是CSS？

CSS：層疊樣式表css

網頁一層一層的。html

而css就能夠分別爲網頁的各層設置樣式。瀏覽器

CSS樣式編寫放在那裏？

（內聯樣式）放在元素的style屬性中。給誰設置寫在那個標籤裏面。緩存

也稱爲：內聯樣式，只對當前的元素中的內容起做用。工具

內聯樣式不方便複用，不推薦使用。佈局

內聯樣式屬於結構與表現耦合，不方便後期的維護，不推薦使用。開發工具
```
<p style="color:red;font-size:100px;">鋤禾日當午，旱地和嚇唬</P>
```
（內部樣式）將css樣式編寫在head中的style標籤裏,而後經過css選擇器選擇指定元素，而後能夠同時爲這些元素一塊兒設置樣式，這樣可使樣式進一步的複用。spa

將樣式表編寫到style標籤中，也可使表現和結構進一步分類，使表現和結構進一步分離，推薦使用方式。code
```
<style type="text/css">
         p{
             color:red;
             font-size:100px;
         }
     </style>
```
（外部樣式）表htm

將樣式表編寫到外部的css文件中。
1. 編寫外部樣式css文件
2. 引入外部css樣式文件到當前html中。
```
<!doctype html>
<html>
  <head>
      <meta charset="utf-8" />
      <title>CSS入門</title>
      <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>
      <p>鋤禾日當午，旱地和嚇唬</P>
      <p>建立明月光，疑似地上霜</p>
  </body>
</html>
```
  1. 將css樣式統一編寫到外部樣式表中，徹底使結構和表現徹底分離，可使樣式表在不一樣的頁面中使用。
  2. 最大限度是樣式複用。
  3. 經過link標籤引入，能夠利用瀏覽器的緩存加快用戶訪問的速度提升用戶體驗。因此在開發中最推薦的方式是外部樣式表。

CSS註釋

/*
    註釋內容
*/

選擇器

經過選擇器能夠選中頁面中指定的元素，而且將聲明塊中的樣式應用到選擇器對應的元素上。

聲明塊

聲明塊緊跟在選擇器的後邊，使用對{}括起來，聲明塊中實際上就是一組一組的明值對結構，這一組一組的明值對咱們稱爲聲明。

在一個聲明塊中能夠寫多個聲明，多個聲明之間使用;隔開。聲明的樣式名和樣式值之間使用：來鏈接

p{
    color:red;
    font-size:100px;
}

開發工具HBulder

推薦使用的開發工具，見官網文檔。

div 塊元素

所謂的塊元素就是會獨佔一行的元素。
不管他的內容有多少，都會獨佔一整行。
div標籤沒有任何語義，不會爲他裏面的元素設置任何的默認樣式。
div元素主要用來對網頁佈局的。

<div style="background-color: red; width: 100px;">one div</div>
        <div style="background-color: blue; width: 100px;">two div</div>

常見塊元素

div、p、h一、h二、h3.。。。

內聯元素（行內元素）

span：沒有任何語義，專門用來選中文字，而後爲文字設置樣式。

內聯元素：只佔自身大小，不會佔用一行。

常見內聯元素

a、img、span、iframe

塊元素與內聯元素區別

塊元素：主要用來佈局。

內聯元素：主要用來選中文本，設置文本樣式。

通常請款告知使用塊蒜素去包含內聯元素，二不會使用內聯元素去包含塊元素。

a元素能夠包含任意元素

，可是除了它自己。

p元素不能包含任何塊元素

經常使用選擇器

元素(標籤)選擇器

做用：能夠選擇頁面中的全部指定元素。
```
p{
 color:red;
 font-size:100px;
}
```

id選擇器

經過元素的id屬性值選中惟一的一個元素。

語法：

#p1{
             color: green;
             font-size: 300px;
         }

類選擇器

能夠爲元素設置class屬性，class屬性和id屬性相似，只不過class屬性能夠重複。

用戶相同class屬性的元素，稱爲一組元素。

經過元素的class屬性，選中一組元素。

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8"/>
      <title>css03</title>
      <style>
          p{
              color:red;
              font-size:100px;
          }
          #p1{
              color: green;
              font-size: 200px;
          }
          .p1{
              color:greenyellow;
          }
          .hello{
              color: #9932CC;
              font-size: 60px;
          }
      </style>
  </head>

  <body>
      <p>ggggg</p>
      <p>ggggg</p>
      <p id="p1">ggggg</p>
      <p class="p1 hello">ggggg</p>
      <p class="p1">ggggg</p>
  </body>
</html>

class能夠同時爲一個元素設置多個class屬性值，多個值之間用空格隔開。

選擇器分組

經過選擇器分組能夠同時選中多個選擇器對應的元素。

語法：選擇器1，選擇器2，選中N{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>css03</title>
        <style>
            p{
                color:red;
                font-size:100px;
            }
            #p1{
                color: green;
                font-size: 200px;
            }
            .p1{
                color:greenyellow;
            }
            .hello{
                color: #9932CC;
                font-size: 60px;
            }
            #p1,h1,.p2{
                background: gold;
            }
        </style>
    </head>
    
    <body>
        <h1>fd</h1>
        <p class="p2">fdfd</p>
        <p>ggggg</p>
        <p id="p1">ggggg</p>
        <p class="p1 hello">ggggg</p>
        <p class="p1">ggggg</p>
    </body>
</html>

通配選擇器

能夠用來選中頁面中的全部元素

*{
                color:red;
                font-size: 90px;
            }

複合選擇器（交際選擇器）

做用：能夠選中同時知足多個選擇器的元素

span.p3{
                color: #00008B;
            }

span與p3中間沒有空格。

對id選擇器來講，不建議使用複合選擇器。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。