2. 程式人生 > 其它 >03 CSS介紹

03 CSS介紹

阿新 • • 發佈：2021-08-09

03.CSS介紹

層疊樣式表：就是給HTML標籤新增養的，讓他變的更加的好看

註釋：

/*單行註釋*/
/*
多行註釋1
多行註釋2
多行註釋3
*/
通常我們在寫CSS樣式的時候也會用註釋來劃定樣式區域（因為HTML程式碼多所以對應的CSS程式碼也會很多）
/* 這是部落格園首頁的CSS樣式檔案*/
/*頂部導航條樣式*/
/*左側選單欄樣式*/
/*右側選單欄樣式*/
​
# CSS的語法結構
選擇器{屬性1:值1;
   屬性2:值2;
    屬性2:值2;
  }
​
# css的三種引入方式
1.style標籤內部直接書寫
 <style>
    h1{
      color: aqua;
     }
  </style>
2.link標籤引入外部css檔案
<link rel="stylesheet" href="mycss.css">
3.行內式(一般不用)
<h1 style="color: aquamarine">
  你好啊
</h1>
​
 
'''
css的學習流程
    1.先學如何查詢標籤
    css查詢標籤的凡事你一定要學會
    因為後面所有的框架封裝的查詢語句都是基於css來的
    2.之後在學如何新增樣式
'''

1.css選擇器

1.1. 基本選擇器

  • 元素選擇器

    p{color:"red";}

  • id選擇器

    #id1{

    }

  • 類選擇器

    .c1{

    font-size:14px;

    }

    p.c1{

    color:red;

    }

    注意：

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

    標籤中的class屬性如果有多個，要用空格分隔。

  • 通用選擇器

    *{

    color:white;

    }

1.2. 組合選擇器

在前端我們將標籤的巢狀用親戚關係來表述層級

<div>
  <p>div裡面的p</p>
  <p>div p
    <span>div p span</span>
  </p>
  <span>div裡面的span</span>
</div>
在此例子中：
div裡面的p，span都是div的後代
p是div的兒子，span是p的兒子，span是div的孫子
div是p的父親，p是span的父親

  • 後代選擇器

/* 後代選擇器*/
div span{
   color: red;
}

  • 兒子選擇器

/*兒子選擇器*/
div>span{color: green}

  • 毗鄰選擇器

/*毗鄰選擇器*/
div+p{
  /*同級別緊挨著的下面的第一個標籤*/
  color: aqua;
}

  • 弟弟選擇器

/*弟弟選擇器*/
div~span{
  /*同級別下面所有的span*/
  color: chartreuse;
}

1.3. 屬性選擇器

屬性選擇器是以[]作為標誌的

  1. 含有某個屬性

[username]{
        /*所有含有屬性名是username的標籤背景改為紅色  */
      background-color:red ;
      }

  1. 含有某個屬性並且有某個值

[username='wss']{
        /*找到所有屬性名是username並且屬性值為wss的標籤  */
      background-color: green;
      }

  1. 含有某個屬性並且有某個值的某個標籤

input[username='wss']{
      /*找到所有屬性名是username並且屬性值是wss的input標籤*/
     background-color: antiquewhite;
     }

2. 分組與巢狀

3. 偽類選擇器

 a:link{
      /*訪問之前的狀態*/
      color: red;
     }
    a:hover{
      /*滑鼠懸停的狀態*/
      color: aqua;
     }
    a:active{
      /*滑鼠點選不鬆開時的狀態*/
      color: black;
     }
    a:visited{
      /*訪問之後的狀態*/
      color: antiquewhite;
     }
    input:focus{
      /*input框獲取焦點(滑鼠點了input框)*/
      background-color: red;
     }

4. 偽元素選擇器

p:first-letter{
  /*第一個字型改變格式*/
  font-size: 48px;
  color: aqua;
}
p:before{
  /*在文字開頭 同css新增內容，使用者無法選中*/
  content: '你說的對';
  color: blue;
}
 p:after{
  /*在文字結尾 同css新增內容，使用者無法選中*/
  content: '你說的對';
  color: blue;
}

before和after通常都是用來清除浮動帶來的影響：父標籤塌陷的問題

5. 選擇器優先順序

'''
id選擇器
類選擇器
標籤選擇器
行內式
'''

  1. 選擇器相同 書寫順序不同 就近原則：誰離標籤近，聽誰的

  2. 選擇器不同 行內（內聯） > id選擇器 > 類選擇器 >標籤選擇器 精確度越高優先順序越高

6. CSS相關屬性

6.1. 長寬設定

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    p{
      background-color: aqua;
      width: 300px;
      height: 100px;
     }
    span{
      /*行內標籤無法設定長寬 就算寫了，也不會生效*/
      background-color: green;
      width: 100px;
      height: 50px;
     }
  </style>
</head>
<body>
  <p>p</p>
  <span>span</span>
</body>

6.2. 字型屬性

font-family：設定字型

font-size：設定字型大小

font-weight：字型粗細，寬度

color：設定顏色

text-decoration：設定字型裝飾

text-indent：可以設定縮排

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    p{
      font-family: '華文宋體','微軟雅黑'; /*第一個不生效，就用後面的字型*/
      font-size: 20px;
      text-indent: 32px; /*縮排32px*/
      font-weight: bolder; /*bolder lighter 100~900 inherit 繼承父元素的粗細值*/
     
      /*color: red; !*直接寫顏色英語*!*/
      /*color: #eeeeee;  !*顏色編號*!*/
      /*color: rgb(128,2,45); !*三基色 數字 範圍 0-255*!*/
      /*color: rgba(128,2,45,02); !*第四個引數是顏色的透明度 範圍是0-1*!*/
      /*text-decoration: underline;   !*下劃線*!*/
      text-decoration: overline; /*上劃線*/
     }
    a {
      text-decoration: none; /*無樣式,主要給a標籤去掉自帶下劃線*/
     }
  </style>
</head>
<body>
  <p>曹操了草草，草草了曹</p>
  <a href="https://www.mzitu.com">點我</a>
​
</body>
</html>

6.3. 文字屬性

text-align:

center:設定居中

left：左對齊

right：右對齊

justify：兩端對齊

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    p {
      /*text-align: center; !*居中顯示*!*/
      /*text-align: left; !*左對齊*!*/
      text-align: right; /*右對齊*/
      text-align: justify; /*兩端對齊*/
     }
  </style>
</head>
<body>
  <p>你在叫什麼啊。</p>
  <p>講實話我不比你看的多。</p>
  <p>講實話上海我不比你呆的時間長。</p>
</body>
</html>

6.4. 邊框

邊框屬性

  • border-width 邊框寬度

  • border-style 邊框樣式

  • border-color 邊框顏色

#d1 {
 border-width: 2px;
 border-style: solid;
 border-color: red;
}

通常使用簡寫方式

#d1 {
 border: 2px solid red;
}

邊框樣式

值描述
none 無邊框。
dotted 點狀虛線邊框。
dashed 矩形虛線邊框。
solid 實線邊框。

除了可以統一設定邊框外還可以單獨為某一個邊框設定樣式，如下所示：

#d1 {
 border-top-style:dotted;
 border-top-color: red;
 border-right-style:solid;
 border-bottom-style:dotted;
 border-left-style:none;
}

border-radius

用這個屬效能實現圓角邊框的效果。

將border-radius設定為長或高的一半即可得到一個圓形。

具體例項，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    p {
      background-color: red;
      border-color: red;
     }
    #d1 {
      background-color: green;
      height: 400px;
      width: 400px;
      border-radius: 50%; /*直接寫50%即可 長寬一樣就是圓，不一樣就是橢圓*/
    }
  </style>
</head>
<body>
  <p>你真帥啊，雀食蟀啊，雀食蟀，你搞的真不賴</p>
  <div id="d1"></div>
</body>
</html>

6.5. display屬性

用於控制HTML元素的顯示效果

值意義
display: none 隱藏標籤不展示到前端頁面並且原來的位置也不佔有了 但是元素還存在於文件上
display: inline 將標籤設定為行內標籤的特點
display: block 將標籤設定成塊級標籤的特點
display: inline-block 標籤既可以在一行顯示又可以設定長寬

display:"none"與visibility:hidden的區別：

visibility：hidden：可以隱藏某個元素，但隱藏的元素仍需要佔用與未隱藏之前一樣的空間，也就是說，該元素雖然被隱藏了，但仍然會影響佈局

display:none:可以隱藏某個元素，且隱藏的元素不會佔用任何空間，也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失

6.6. CSS盒子模型

  • margin：用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的

  • padding：用於控制內容與邊框之間的距離

  • border：圍繞內邊距和內容外的邊框

  • content：盒子中的內容，顯示文字和影象

margin外邊距 1、 margin是設定盒子與盒子之間的位置關係 2、邊框線以外的距離都可以設定margin 3、使用margin

   單一方向margin
       margin-left
       margin-right
       margin-top
       margin-bottom
​
   多個方向margin
     1個值  4個方向
     2個值  上下  左右
     3個值  上   左右   下
     4個值  上   右    下  左
​
   margin-left:
         正值  右移動
         負值  左移動
​
   margin-top
         正值  下移動
         負值  上移動
​
4、讓塊元素水平居中（內聯元素不起作用）
  margin：0  auto
 margin-top:5px;
 margin-right:10px;
 margin-bottom:15px;
 margin-left:20px;

推薦使用簡寫：

margin: 5px 10px 15px 20px;

常見居中：

 #d1 {
 margin: 0 auto;
}

padding內邊距填充1、控制盒子與內容之間的位置關係 2、邊框線以內的距離都可以設定padding 3、內邊框會撐大盒子，如果設定padding，讓盒子不變形，加上多少padding，盒子的寬高就需要減去多少padding 4、padding的設定 單一方向padding padding-left padding-right padding-top padding-bottom

多個方向padding ​ 1個值 4個方向 ​ 2個值 上下 左右 ​ 3個值 上 左右 下 ​ 4個值 上 右 下 左

5、padding不能設定負值 

#d1 {
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 15px;
 padding-left: 20px;
}

推薦使用簡寫：

#d1 {
 padding: 5px 10px 15px 20px;
}

6.7. float浮動

在CSS中，任何元素都可以浮動

浮動元素會生成一個塊級框，而不論它本身是何種元素

關於浮動的兩個特點：

  • 浮動的框可以向左或向右移動，知道它的外邊緣碰到包含框或另一個浮動框的邊框為止。

  • 由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

三種取值

left：向左浮動

right：向右浮動

none：預設值，不浮動

浮動帶來的影響

浮動帶來的影響：父標籤塌陷

通用的解決浮動帶來的影響方法

在寫html頁面之前 先提前寫好處理浮動帶來的影響的 css程式碼

.clearfix:after {
    content:' ';
  display:block;
  clear:both;
}
只要標籤出現了塌陷的問題就給該塌陷的標籤加一個clearfix屬性即可

6.8. clear

clear屬性規定元素的哪一側不允許其他浮動元素。

值描述
left 在左側不允許浮動元素。
right 在右側不允許浮動元素。
both 在左右兩側均不允許浮動元素。
none 預設值。允許浮動元素出現在兩側。
inherit 規定應該從父元素繼承 clear 屬性的值。

注意：clear屬性只會對自身起作用，而不會影響其他元素。

6.9. 清除浮動

清除浮動的副作用（父標籤塌陷問題）

主要有三種方式：

  • 固定高度

  • 偽元素清除法

  • overflow:hidden

偽元素清除法（使用較多）：

.clearfix:after {
 content: "";
 display: block;
 clear: both;
}

6.10. overflow溢位屬性

值描述
visible 預設值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，並且其餘內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。

  • overflow（水平和垂直均設定）

  • overflow-x（設定水平方向）

  • overflow-y（設定垂直方向）

圓形頭像

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圓形頭像</title>
  <style>
    body{
      margin: 0;
      background-color: #4e4e4e;
     }
    #d1 {
      height: 400px;
      width: 400px;
      border-radius:50% ;
      border: 5px solid white;
      margin: 0 auto;
      overflow: hidden;
    }
    #d1>img {
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="d1">
    <img src="22.png" alt="">
  </div>
​
</body>
</html>

6.11. 定位

  • 靜態

    所有的標籤預設都是靜態的static，無法改變位置

  • 相對定位

    相對於標籤原來的位置做移動relative

  • 絕對定位

    相對於已經定位過的父標籤做移動（如果沒有父標籤那麼就以body為參照）

    當你不知道頁面其他標籤的位置和引數，只給你一個父標籤的引數嗎，讓你基於該標籤，左定位

  • 固定定位

    相對於瀏覽器視窗固定在某個位置

6.11. 驗證浮動和定位是否脫離文件流（原來的位置是否還保留）

'''
浮動
相對定位
絕對定位
固定定位
'''
# 不脫離文件流
浮動
# 脫離文件流
相對定位
絕對定位
固定定位

6.12. 模態框

z-index

#i2 {
  z-index: 999;
}

設定物件的層疊順序。

  1. z-index 值表示誰壓著誰，數值大的壓蓋住數值小的，

  2. 只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index

  3. z-index值沒有單位，就是一個正整數，預設的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那麼誰寫在HTML後面，誰在上面壓著別人，定位了元素，永遠壓住沒有定位的元素。

  4. 從父現象：父親慫了，兒子再牛逼也沒用

eg:百度登入頁面 其實是三層結構

1.最底部是正常內容（z=0）離使用者最遠

2.黑色的透明層（z=90）

3.白色的註冊區域（z=100）

模態框示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      margin: 0;
     }
     .cover{
      position: fixed;
      left: 0;
      right: 0;
      top:0;
      bottom: 0;
      z-index: 90;
      background-color: rgba(0,0,0,0.5);
​
     }
     .modal{
      background-color: white;
      height: 200px;
      width: 400px   ;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left:-200px ;
      margin-top:-100px ;
      z-index: 100;
     }
​
  </style>
</head>
<body>
<div>這是最底層的頁面內容</div>
<div class="cover"></div>
<div class="modal">
  <h1>登陸</h1>
  <p>usernmae<input type="text"></p>
  <p>password<input type="text"></p>
</div>
</body>
</html>

6.13. opacity

用來定義透明效果。取值範圍是0~1，0是完全透明，1是完全不透明。

相關推薦

03 CSS介紹

03.CSS介紹 層疊樣式表：就是給HTML標籤新增養的，讓他變的更加的好看 註釋： /*單行註釋*//*多行註釋1多行註釋2多行註釋3*/通常我們在寫CSS樣式的時候也會用註釋來劃定樣式區域（因為HTML程式碼多所以對應的CSS程式

JQuery 03 CSS

示例1: 增加class 通過addClass() 增加一個樣式中的class <script src=\"https://how2j.cn/study/jquery.min.js\"></script>

CSS介紹

一 什麼是CSS CSS全稱Cascading Style Sheet層疊樣式表，是專用用來為HTML標籤新增樣式的。

CSS介紹、修改元素樣式

網頁分成三個部分：結構(HTML)表現(CSS)行為(JavaScript)css介紹： 疊層樣式表 網頁實際上是一個多層的結構，通過CSS可以分別為網頁的每一個層來設定樣式

03 css引入方式

技術標籤：csscss CSS樣式表 CSS的三種樣式表 按照CSS樣式書寫的位置(或者音符的方式), CSS樣式表可以分為三大類

03 CSS技術

CSS 技術 文件:CSS2.0.ch 1.1CSS技術介紹 CSS 是「層疊樣式表單」。是用於(增強)控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。

CSS：CSS介紹 & CSS與HTML結合方式

1 什麼是CSS？ CSS是指層疊樣式表 cascading style sheets。 通過CSS可以讓我們定義HTML元素如何顯示。

03-CSS動畫

CSS3中動畫、框模型、文字陰影、背景屬性 什麼是CSS動畫 使用CSS3技術來控制頁面元素CSS屬性的變化

03 HTML 與 CSS 基礎入門

正所謂，知己知彼，百戰不殆。我們爬蟲的爬取物件，就是各式各樣的網頁，只有對網頁的基本內容達到熟悉的程度，才能順利的書寫我們的爬蟲程式。

CSS選擇器整理以及優先順序介紹

一、基礎選擇器 選擇器 名稱 描述 相容性 * 通配選擇器 選擇所有的元素 ie6+ E 元素選擇器

本文章介紹CSS 文字格式

文字顏色 顏色屬性被用來設定文字的顏色。 顏色是通過CSS最經常的指定： 十六進位制值 - 如:＃FF0000

微服務系列之ZooKeeper註冊中心03：zookeeper介紹與安裝

一、Zookeeper 介紹 Apache ZooKeeper 是一個開放原始碼的分散式應用程式協調元件，是 Hadoop 和 Hbase 的重要元件。它是一個為分散式應用提供一致性服務的軟體，提供的功能包括：配置維護、域名服務、分散式同步、

本文介紹CSS定位和浮動

CSS 定位和浮動 CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式佈局，將佈局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。

03 使用css改變頁面樣式

在VSCode中建立03.html， 輸入以下程式碼： <!DOCTYPE html> <html lang=\"zh-cn\">

03、css樣式相關

一、高度寬度 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

移動端佈局四： rem適配佈局，em和rem介紹，媒體查詢顯示不同樣式，媒體查詢呼叫不同css樣式

學習目標 能夠使用rem單位 能夠使用媒體查詢的基本語法 能夠使用Less的基本語法

CSS float相關介紹

一、float介紹 float元素也稱為浮動元素，設定了float屬性的元素會根據屬性值向左或向右浮動。浮動元素會從普通文件流中脫離，但浮動元素影響的不僅是自己，它會影響周圍的元素對齊進行環繞。簡單來說，就是讓block元

CSS三大特性及盒子模型，border；padding及margin的 介紹

今天是CSS的第三天，主要學習了CSS的三大特性及盒子模型。重點掌握border；padding及margin的用法！

11、關於CSS樣式中“顏色”的概念介紹及 Overflow（overflow屬性規定當內容溢位元素框時發生的事情）

技術標籤：第三冊：HTML+CSShtmlcsscss3html5 2.13 關於CSS樣式中“顏色”的概念介紹

css如何設定背景顏色透明？css設定背景顏色透明度的兩種方法介紹

技術標籤：csshtmlcss3 在網頁佈局中有時為了網頁的整體美觀，可能需要將網頁中的某些部分設定為背景顏色透明，那麼如何設定背景顏色透明呢？本篇文章就來給大家介紹一下css設定背景顏色透明的方法。