CSS 技術

来源:https://www.cnblogs.com/kohler21/archive/2022/06/11/16366386.html
-Advertisement-
Play Games

瀏覽本篇文章前可以先看之前的前端網頁介紹和html常用標簽以便更容易理解 本文目錄： CSS相關查閱文檔：https://kohler.lanzouo.com/i0XFcz8svob 文檔截圖 CSS 技術介紹 CSS 是「層疊樣式表單」。是用於(增強)控制網頁樣式並允許將樣式信息與網頁內容分離的一 ...


瀏覽本篇文章前可以先看之前的前端網頁介紹和html常用標簽以便更容易理解

本文目錄：

目錄

CSS相關查閱文檔：https://kohler.lanzouo.com/i0XFcz8svob

文檔截圖

CSS 技術介紹

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

CSS 語法規則


選擇器：瀏覽器根據“選擇器”決定受 CSS 樣式影響的 HTML 元素（標簽）。
屬性 (property): 是你要改變的樣式名，並且每個屬性都有一個值。屬性和值被冒號分開，並由花括弧包圍，這樣就組成了一個完整的樣式聲明（declaration），例如：

    p {
    color: blue
    }

多個聲明：如果要定義不止一個聲明，則需要用分號將每個聲明分開。雖然最後一條聲明的最後可以不加分號(但儘量在每條聲明的末尾都加上分號)
例如：

p{

color:red;
font-size:30px;
}

註：一般每行只描述一個屬性

CSS 註釋：

/*註釋內容*/

CSS 和 HTML 的結合方式

第一種：

在標簽的 style 屬性上設置”key:value value;”，修改標簽樣式。

例：分別定義兩個 div、span 標簽，分別修改每個 div 標簽的樣式為：邊框 1 個像素，實線，紅色。

<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>

1px表示邊框為1個像素，solid表示邊框為實現，red表示邊框為紅色。

效果：

--style 標簽專門用來定義 css 樣式代碼

我們通過添加style屬性來給給原來的標簽添加樣式：
通過使用border來添加了邊框，然後1px代表1像素，solid代表是實線，red代表是紅色

CSS的邊框樣式可以參考鏈接：https://www.w3school.com.cn/css/css_border.asp

問題：這種方式的缺點？

  1. 如果標簽多了。樣式多了。代碼量非常龐大。
  2. 可讀性非常差。
  3. Css 代碼沒什麼復用性可方言。

第二種

在 head 標簽中，使用 style 標簽來定義各種自己需要的 css 樣式。格式如下：

xxx {
Key : value value; }

例：分別定義兩個 div、span 標簽，分別修改每個 div 標簽的樣式為：邊框 1 個像素，實線，紅色。

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
  <!--style標簽專門用來定義css樣式標簽，在這個標簽里的是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>
</html>

效果：

這次我們是在head標簽內就添加style標簽來實現我們想要的CSS樣式，無論後面有多少標簽都可以使用這個樣式。
我們提前設置好對哪些標簽添加CSS樣式，然後後面不用再添加style屬性就可以實現我們想要的CSS樣式
這種方式的缺點。
1.只能在同一頁面內復用代碼，不能在多個頁面中復用 css 代碼。
2.維護起來不方便，實際的項目中會有成千上萬的頁面，要到每個頁面中去修改。工作量太大了。

第三種

把 css 樣式寫成一個單獨的 css 文件，再通過 link 標簽引入即可復用。
使用 html 的<link rel="stylesheet" type="text/css" href="./styles.css" />標簽 導入 css 樣式文件。
css 文件內容（命名為1.css）：

div{
border: 1px solid yellow; }
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>
</html>

效果：

這個效果跟之前的效果是一樣的，只不過是實現方式不同。
優勢：

  1. 可以在很多頁面使用
  2. 維護方便

CSS 選擇器

標簽名選擇器

標簽名選擇器的格式是：

標簽名{
		
	屬性：值; 
  }

標簽名選擇器，可以決定哪些標簽被動的使用這個樣式。
例：在所有 div 標簽上修改字體顏色為藍色，字體大小 30 個像素。邊框為 1 像素黃色實線。並且修改所有 span 標簽的字體顏色為黃色，字體大小 20 個像素。邊框為 5 像素藍色虛線。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 選擇器</title>
    <style type="text/css"> 
      div{
        border: 1px solid yellow; color: blue;
        font-size: 30px; }
    span{
        border:  5px dashed   blue; color: yellow;
        font-size: 20px; }
      /*deshed表示虛線*/
    </style>
</head>
<body>
<div>div 標簽 1</div>
<div>div 標簽 2</div>
<span>span 標簽 1</span>
<span>span 標簽 2</span>
</body>
</html>

效果：

在這裡我們針對div標簽邊框設置的是

  • 標簽的邊框為1像素的黃色實線
  • 標簽的字體設置的是藍色
  • 標簽的字體的大小為30個像素

對span標簽設置的是

  • 標簽的邊框為5像素的藍色虛線
  • 標簽的字體為黃色
  • 標簽的字體大小為20個像素

id 選擇器

id 選擇器的格式是：

#id 屬性值{
	屬性：值; 
  }

id 選擇器，可以讓我們通過 id 屬性選擇性的去使用這個樣式。
例：分別定義兩個 div 標簽，
第一個 div 標簽定義 id 為 id001 ，然後根據 id 屬性定義 css 樣式修改字體顏色為藍色，字體大小 30 個像素。邊框為 1 像素黃色實線。
第二個 div 標簽定義 id 為 id002 ，然後根據 id 屬性定義 css 樣式 修改的字體顏色為紅色，字體大小 20 個像素。邊框為 5 像素藍色點線。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ID 選擇器</title>
    <style type="text/css">
        #id001 {
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        #id002{
            color: red;
            font-size: 20px;
            border: 5px blue dotted ; }
      /*dotted表示點線*/
</style>
</head>
    <body>
        <div id="id001">div 標簽 1</div>
        <div id="id00">div 標簽 2</div>
 </body>
</html>

效果：

這次我們是對兩個div標簽進行設置
兩個都是div標簽
但是我們對兩個div設置了id，兩個id是不一樣的
就類似於給起了個名字 名字是不相同的
對id為id001的我們設置:

  • 標簽的邊框為1像素黃色實線
  • 標簽的字體為藍色
  • 標簽的字體大小為30像素

對id為id002的我們設置:

  • 標簽的邊框為5像素藍色點線
  • 標簽的字體為紅色
  • 標簽的字體大小為20像素

class 選擇器（類選擇器）

class 類型選擇器的格式是：

.class 屬性值
{
屬性：值;
}

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

例：

  1. 修改 class 屬性值為 class01 的 span 或 div 標簽，字體顏色為藍色，字體大小 30 個像素。邊框為 1 像素黃色實線。
  2. 修改 class 屬性值為 class02 的 div 標簽，字體顏色為灰色，字體大小 26 個像素。邊框為 1 像素紅色實線。
<html>
<head>
<meta charset="UTF-8">
<title>class 類型選擇器</title>
<style type="text/css">
.class01{ color: blue;
font-size: 30px;
border: 1px solid yellow; }
.class02{ color: grey;
font-size: 26px; border: 1px solid red;
}
</style>
</head>
<body>
<div class="class02">div 標簽 class01</div>
<div class="class01">div 標簽</div>
<span class="class02">span 標簽 class01</span>
<span>span 標簽 2</span>
</body>
</html>

效果：

我們定義了兩個class：class01和class02
class01:

  • 標簽字體顏色為藍色
  • 標簽字體大小為30個像素
  • 標簽的邊框為一個像素的黃色實線

class02：

  • 標簽字體顏色為灰色
  • 標簽字體大小為26個像素
  • 標簽的邊框為一個像素的紅色實線

然後我們再標簽中使用class
我們在第一個和第三個標簽中使用class02在第二個標簽中使用class01第四個標簽不使用class
然後我們就利用class的選擇來實現了我們想要的效果

組合選擇器

組合選擇器的格式是：

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

組合選擇器可以讓多個選擇器共用同一個 css 樣式代碼。
例：
我們現有如下標簽 ：

<div class="class01">div 標簽 class01</div> <br />
<span id="id01">span 標簽</span>   <br />
<div>div 標簽</div> <br />
<div>div 標簽 id01</div> <br />

修改 class="class01" 的div 標簽 和 id="id01" 所有的 span 標簽，字體顏色為藍色，字體大小 20 個像素。邊框為 1 像素黃色實線。

<html>
<head>
<meta charset="UTF-8">
<title>class 類型選擇器</title>
  <style type="text/css">
  .class01 , #id01{ 
    color: blue; 
    font-size: 20px;
    border: 1px red solid; 
    }
  </style>
</head>
<body>
<!--
需求 1：修改 class="class01" 的 div 標簽 和 id="id01" 所有的 span 標簽，字體顏色為藍色，字體大小 20 個像素。邊框為 1 像素黃色實線。
-->

<div id="id01">div 標簽 class01</div> <br />
<span class="class01" >span 標簽</span>   <br />
<div>div 標簽</div> <br />
<div>div 標簽 id01</div> <br />
</body>
</html>

效果：

在這裡我們是先定義了一個組合：class01，id01
這個組合共同使用我們定義的css樣式：

  • 標簽的字體為藍色
  • 標簽的字體大小為20個像素
  • 標簽的邊框為一個像素的紅色實線

然後我們在下麵的標簽中使用
第一個標簽設置id=id01
第二個標簽設置class=class01
剩餘標簽不設置
然後我們就得到瞭如圖所示的效果
這個組合選擇器就是把前面的class和id結合起來，使得我們能夠降低代碼的冗餘，儘可能提高我們的效率

常用樣式

  1. 字體顏色

color:red;
顏色可以寫顏色名如：black,blue,red,green等
顏色也可以寫rgb值和十六進位表示值：如rgb（255,0,0）,#00F6DE,如果寫十六進位值必須加#

  1. 寬度

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

  1. 高度

height:20px;
高度可以寫像素值：19px；
也可以寫百分比值：20%；

  1. 背景顏色

background-color:#0F2D4C

  1. 字體樣式：

color：#FF0000；字體顏色紅色
font-size：20px; 字體大小

  1. 紅色 1 像素實線邊框

border：1px solid red;

  1. DIV 居中

margin-left: auto;
margin-right: auto;

  1. 文本居中：

text-align: center;

  1. 超鏈接去下劃線

text-decoration: none;

  1. 表格細線

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

  1. 列表去除修飾

ul {
list-style: none;
}

示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css 常用樣式.html</title>
<style type="text/css">
  div{
    color: red;
    border: 1px yellow solid;
    width: 300px;
    height: 300px;
    background-color: green;
    font-size: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  table{
    border: 1px red solid;
    border-collapse: collapse;
  }
  td{
    border: 1px red solid;
  }
  a{
    text-decoration: none;
  }
  ul{
    list-style: none;
  }
</style>
</head>
<body>
  <ul>
  <li>11111111111</li>
  <li>11111111111</li>
  <li>11111111111</li>
  <li>11111111111</li>
  <li>11111111111</li>
  </ul>
  <table>
  <tr>
  <td>1.1</td>
  <td>1.2</td>
  </tr>
  </table>
  <a href="http://www.baidu.com">百度</a>
  <div>我是 div 標簽</div>
</body>
</html>

如圖片失效等問題請參閱公眾號文章：https://mp.weixin.qq.com/s/A09HBiJCAf_VBPNqqP7fIw

歡迎關註我的公眾號，共同學習


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 導師轉我800塊，讓我模擬一個電路（電源設計）
    寫在前面 令人愉快又頹廢的周日馬上就要到了，正在計劃這周博客寫什麼的我，突然收到導師發給我的消息，What？要給我發補助？ 這樣中午不得去食堂加一個餐，很快啊，我就說了聲：謝謝。 但後續證明我還是太嫩了些，天上是沒有免費午餐的。 不過對於這種專業相關，而且能從中學到不少東西的任務，我還是十分樂意去乾 ...
  • Centos7 中安裝Elasticsearch
    1.下載安裝包 1.1 下載elasticsearch 7.13.3 curl -L -O https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.13.3-linux-x86_64.tar.gz 1.2 解壓文件 t ...
  • SQL的語法
    SQL的語法 SQL通用語法 SQL語句可以單行或多行書寫，以分號（“;”）結尾。 SQL語句可以使用空格或縮進增強可讀性。 MySQL資料庫的SQL語句不區分大小寫（建議關鍵字大寫）。 註釋 單行註釋： -- 內容 # 內容（MySQL特有） 多行註釋： /* 內容 */ SQL語句分類 分類 全 ...
  • MyBatis-Plus入門教程及基本API使用案例
    MyBatisPlus（簡稱MP）是基於MyBatis框架基礎上開發的增強型工具，旨在簡化開發、提高效率 - 無侵入：只做增強不做改變，不會對現有工程產生影響 - 強大的 CRUD 操作：內置通用 Mapper，少量配置即可實現單表CRUD 操作 - 支持 Lambda：編寫查詢條件無需擔心欄位寫錯... ...
  • 羅景：連接效率優化實踐
    分享嘉賓：羅景 58同城 高級架構師 編輯整理：洪鵬飛 內容來源：DataFun AI Talk《連接效率優化實踐》 出品社區：DataFun **導讀：**本次分享由以下幾個部分構成—— 58的業務背景 綜合排序框架 效率優化框架 基礎數據流程（數據） 策略優化路徑（演算法） 效率優化平臺（工程） ...
  • 001 Android開發初體驗
    1、簡介 註：本文代碼參考 我們將開發本系列第一個應用，並藉此學習一些Android基本概念以及構成應用的UI組件。 初學習，如果沒能全部理解，也不必擔心，後續還會涉及這些內容並有更加詳細的講解。 馬上要開發的應用名叫GeoQuiz，它能給出一道道地理知識問題。用戶點擊TRUE或FALSE 按鈕來回 ...
  • Jetpack架構組件學習(3)——Activity Results API使用
    原文地址:Jetpack架構組件學習(3)——Activity Results API使用 - Stars-One的雜貨小窩 技術與時俱進,頁面跳轉傳值一直使用的是startActivityForResult方法,如今有了新的API實現方式,學習並稍微總結下 😄 startActivityForR ...
  • 個人音樂博客 h5、css和js等
    淺說一下吧 這個小項目由h5和css還有js和jq寫的 主題內容為個人音樂 博客等 首頁一級導航欄 以及側邊欄 整合部分圖標(側邊欄未添加收起操作 時間原因 會的朋友們可以自行添加一個動畫就可以 在main.js中) 中間音樂部分為作者和歌詞 點擊播放的按鈕可彈出對應的視頻mv 視頻mv均為酷狗音樂 ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類