前端三劍客——css 學習筆記

阿新 • • 發佈：2021-05-30

CSS技術簡單的闡述

1、介紹

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

2、語法規則

在這裡插入圖片描述

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

p{
	color:blue;
	font-size:30px;
}

注：一般每行只描述一個屬性
css的註釋：/* 註釋內容 */

3.css與html的結合方式

3.1第一種

在標籤的style屬性上設定“key：value value；”修改標籤樣式

出題：分別定義兩個div，span標籤，分別修改每個div和span標籤的樣式為：邊框一個畫素，實線，紅色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < 
title>label</title>
</head>
<body>
    <div style="border:red solid 1px">早上好</div>
    <div style="border:red solid 1px">早起的鳥兒有蟲吃</div>
    <span style="border:red solid 1px">biubiubiu</span>
    <span style="border 
:red solid 1px">好看的皮囊千篇一律，有趣的靈魂萬中無一</span>
</body>
</html>

實現：

在這裡插入圖片描述

由此也可以看出div和span標籤的特性，div標籤獨佔一行，span標籤的長度和標籤內文字的長度一樣

這種方法的缺點：

1）如果標籤多了。樣式多了。程式碼量非常龐大

2）可讀性非常差

3）css程式碼沒有什麼可複用性可言

3.2第二種

在head標籤中，使用style標籤來定義各種自己需要的css樣式。

格式如下：

xxx{
	key: value value
}

使用這種方式的程式碼，實現第一種方法中的題目

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>head</title>
  <style>
          div{
            border:1px red solid;
          }
          span{
            border:1px red solid;
          }
  </style>
</head>
<body>
      <div>aaaaaa</div>
      <div>bbbbbb</div>
      <span>vvvvvv</span>
      <span>cccccc</span>
</body>
</html>

實驗結果和1，一摸一樣

這種方式存在的缺點：
- 只能在同一個頁面內複用程式碼，不能再多個頁面中複用css程式碼
- 維護起來不方便，實際的專案中會有成千上萬的頁面，要到每個頁面中去修改。工作量就太大了

3.3第三種

把css樣式寫成一個單獨的css檔案，再通過link標籤引入即可複用。

使用html的< link rel=“stylesheet” type=“text/css” href="./sytles.css"/>標籤，匯入css樣式檔案。

css樣式檔案

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

html程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- link標籤專門用來引入css樣式程式碼-->
    <link href="./Demo03Style.css" rel="stylesheet" type="text/css"/>
<!--    link標籤中：
        href：設定或獲取目標的URL
        rel：定義當前文件與被連結文件之間的關係，stylesheet即代表css樣式表
        type：定義當前文字內容以層疊樣式表（CSS）來解析
        media：設定或獲取媒體型別
        -->
</head>
<body>
        <div>biubiubiu</div>
        <div>dududududu</div>
        <span>bengbeng</span>
        <span>huahuahua</span>
</body>
</html>

4.css選擇器

4.1標籤名選擇器

格式

標籤名{
	屬性:值;
}

標籤名選擇器，可以決定哪些標籤被動的使用這個樣式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標籤名選擇器</title>
    <style>
          div{
            border:red 1px solid;
            color:yellow;
            font-size:30px;
          }
          span{
            border:blue 5px dashed;
            color:green;
            font-size:30px;
          }
    </style>
</head>
<body>
      <div>我佔單獨一行</div>
      <span>我好睏阿</span>
      <span>要睡著了，打起精神來啊！</span>
</body>
</html>

實現截圖：

在這裡插入圖片描述

4.2id選擇器

id選擇器的格式是

#id編號{	屬性：值;}注：'{'前面的格式是“# + id +編號"編號就是1，2，34之類的

id選擇器，可以讓我們通過id屬性選擇性的去使用這個樣式。

程式碼例項：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IDSelector</title>
    <style>
        #id1{
          color:gray;
          font-size:20px;
          border: 8px blue dashed;
        }
        #id2{
          color:gold;
          font-size:30px;
          border:5px fuchsia solid;
        }
    </style>
</head>
<body>
      <div id="id1">好好學習啊！優秀的人那麼多，不學習以後怎麼辦啊！</div>
      <span id="id2">加油，努力呀！</span>
</body>
</html>

在這裡插入圖片描述

4.3 class選擇器（型別選擇器）

class型別選擇器的格式是

class型別{	屬性：值；}

class型別選擇器，可以通過class屬性有效的去使用這個樣式

寫一個具體例項：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class型別選擇器</title>
    <style>
      .first{
        color:royalblue;
        font-size:20px;
        border:3px yellowgreen solid;
      }
      .class1{
        color:brown;
        font-size:30px;
        border:4px aqua dashed;
      }
    </style>
</head>
<body>
    <div class="first">樣式選擇器是 ”. + 型別名稱“</div>
    <p class="class1" align="center">沒想到吧</p>
</body>
</html>

實現截圖：

在這裡插入圖片描述

4.4組合選擇器

組合選擇器的格式似是：

選擇器1，選擇器2，選擇器n{	屬性：值；}

例項：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>組合選擇器</title>
    <style>
      .class1,#id01{
        color:darkorange;
        font-size:20px;
        border:3px blue solid;
      }
    </style>
</head>
<body>
    <div id="id01">idea專業版好用，但是我一直嫖好麻煩</div>
    <span class="class1">啊！我還好多作業啊！但是一點也不想做，好麻煩啊！</span>

</body>
</html>

4.5css常用樣式：

1、字型顏色顏色

color:red;

2、寬度

width:19px;
寬度可以寫畫素值：19px
也可以寫百分比值：20%

3.高度

height:20px;
和寬度一樣也是可以寫畫素值和百分比

4、字型樣式

color：#FF0000:字型顏色為紅色
font-size:20px; 字型大俠

5、紅色1畫素實線邊框

border:1px solid red;
虛線是dashed

6、DIV居中

margin-left:auto
margin-right:auto

7、背景顏色

backgroud-color:yellow;

8、文字居中

text-align:center;

9、超連結去下劃線

text-decoration:none;

10、表格細線

table{
	border:1px solid black;/*設定邊框*/
	border-collapse:collapse;/*將邊框合併*/
}
td,th{
	border-collapse:collapse;/*將邊框合併*/
}

11、列表除去修飾

ul{	list-style:none;}

對以上所有的樣式做一個編寫：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他常用樣式</title>
    <style>
        div{
            color:blue;
            border:1px green solid;
            width:300px;
            height:300px;
            background:gold;
            font-size:40px;
            margin-left:auto;
            margin-right:auto;
            text-align:center;
        }
        a{
            text-decoration:none;
        }
        table{
            border:1px orange solid;
            border-collapse:collapse;
        }
        td{
            border:1px orange solid;
        }
        ul{
            list-style:none;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">baidu</a>
    <div>哈哈哈哈</div>
    <ul>
        <li>hahaha</li>
        <li>hahaha</li>
        <li>hahaha</li>
        <li>hahaha</li>
        <li>hahaha</li>
    </ul>
    <table >
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>