02-CSS基礎

来源:https://www.cnblogs.com/OnlyOnYourself-lzw/archive/2022/07/31/16537229.html
-Advertisement-
Play Games

CSS 基礎 1、CSS介紹 CSS概念 Cascading Style Sheet層疊樣式表,通過不同的樣式可以讓網頁更漂亮,樣式也可疊加得到最終的效果。CSS用於渲染html元素進行樣式控制的語言 CSS作用 網頁美化 HTML與CSS的區別 HTML:網頁結構的創建 CSS:網頁美化 2、CS ...


CSS 基礎

1、CSS介紹

  • CSS概念
    • Cascading Style Sheet層疊樣式表,通過不同的樣式可以讓網頁更漂亮,樣式也可疊加得到最終的效果。CSS用於渲染html元素進行樣式控制的語言
  • CSS作用
    • 網頁美化
  • HTML與CSS的區別
    • HTML:網頁結構的創建
    • CSS:網頁美化

2、CSS三種引入方式

2.1、內聯樣式

  • 在標簽內部使用style屬性,屬性值是CSS屬性鍵值對(只在一個標簽中起作用)
    • <div style="color.gray">Hello CSS~<div>

2.2、內部樣式

  • 定義<style>標簽, 在標簽內部定義CSS樣式(只在一個HTML文件中起作用)

    • <style>
        div {
          color: blue;
        }
      </style>
      

2.3、外部樣式

  • 定義link標簽,引入外部的CSS文件(可以在多個HTML中復用)
    • <link rel="stylesheef" href="out.css">
    • out.css
      • div { color: pink; }
  • PS
    • 在工作中經常會使用外部樣式

3、CSS的基本選擇器

  • 用於查找指定html元素標簽,匹配元素後可以設置樣式

3.1、元素選擇器

  • 元素名稱{color: red;}

    • <style>
          div {color: red;}
      </style>
      
      <div>hello css1</div>
      

3.2、id選擇器

  • #id屬性值{color: red;}

    • <style>
      	#a1 {color: red;}
      </style>
      
      <div id="a1">hello css2</div>
      

3.3、類選擇器

  • .class屬性值{color: red;}

    • <style>
        	.cls {color: red;}
      </style>
      
      <div class="cls">hello css3</div>
      

4、CSS的擴展選擇器

4.1、組合選擇器

  • 特點

    • 多個基本選擇器組合在一起

    • 名稱 符號 作用 格式
      層級選擇器 空格 匹配某個選擇器下麵的子元素或孫元素 父選擇器 子孫選擇器 ···
      並集選擇器 , 匹配多個選擇器,元素只要符合其中任意一個選擇器即可 選擇器1,選擇器2,···
      屬性選擇器 [] 根據指定屬性匹配元素 [屬性名]

4.2、偽類選擇器

  • 名稱 符號 作用 格式
    偽類選擇器 標簽名:link 未訪問的狀態 a:link
    標簽名:visited 已訪問的狀態 a:visited
    標簽名:hover 滑鼠懸浮的狀態 a:hover
    標簽名:active 已選中的狀態 a:active

    註意事項

    • 偽類選擇器如果以上4中全部設置,順序必須為link\visited\hover\active,否則效果不顯示

5、CSS常見樣式

5.1、背景樣式

  • 每個標簽都可以設置背景

5.2、文本樣式和字體樣式

6、CSS樣式案例(初相遇)

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小說文章</title>
        <style>
          div {
              width: 400px;
              margin: auto;
          }
    
          p {
              text-indent: 2em;
          }
    
          #mei {
              color: deeppink;
              font-weight: bolder;
              font-size: 18px;
          }
    
          #title {
              font-size: 18px;
              color: #06f;
              text-align: center;
          }
    
          #wen {
            font-size: 12px;
            color: #999;
            font-weight: normal;
          }
    
          #last {
            font-family: 宋體;
            font-style: italic;
          }
        </style>
    
    </head>
    <body>
    
    <div>
      <h1 id="title">
        初次相遇
        <span id="wen">
          文/席慕容
        </span>
      </h1>
    
      <p>
        <span id="mei">美</span>麗的名和美麗的詩一樣,都是可遇而不可求的,常常在最沒能料到的時候出現
      </p>
      <p>
        我喜歡那樣的夢,在夢裡,一切都可以重新開始,一切都可以慢慢解釋,心裡甚至 還能感覺到,所有被浪費的時光竟然都能重回時的狂喜與感激。胸懷中 洋溢著幸福,只因你就在我眼前,對我微笑,一如當年
      </p>
    
      <p id="last">
        我喜歡那樣的夢,明明知道你已為我跋涉千里,卻又覺得芳草鮮美,落英繽紛,好像你我才初相遇
      </p>
    </div>
    </body>
    </html>
    

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

-Advertisement-
Play Games
更多相關文章
  • Javascript基礎Day4 函數(下) 作用域(重點) 什麼是作用域,就是一個變數可以生效的範圍 變數不是在所有地方都可以使用的,而這個變數的使用範圍就是作用域 全局作用域 整個頁面起作用,在<script>內都能訪問到; 在全局作用域中有全局對象window,代表一個瀏覽器視窗,由瀏覽器創建 ...
  • Javascript基礎Day3 1、迴圈:重覆執行代碼 特征:有規律性的重覆執行相似代碼 為什麼要使用迴圈? 主要是為了減少頁面代碼 for迴圈: 語法: for(表達式1;表達式2;表達式3){ 代碼 } 表達式1:初始值,定義在for迴圈中需要用的變數 表達式2:判斷條件,判斷初始值是否滿足該 ...
  • Javascript基礎Day2 1、***自增自減運算符: ++、-- ++或--在變數之前時,先給當前變數做加1或減1的操作,然後在把計算結果做其他操作; ++或--在變數之後時,先拿當前變數去做其他操作,然後在給該變數做加1或減1的操作; 2、進位:也稱為進位計數制,常見的進位有二進位,八進位 ...
  • 1 Vite項目目錄 用Vscode打開創建的項目,看到下麵的目錄結構: 通過運行 npm install 初始化項目後生成兩個初始化文件:node_modules和 package-lock.json 2 SFC 語法規範 *.vue 件都由三種類型的頂層語法塊所組成:<template>、<sc ...
  • Javascript基礎Day1 1、js的書寫位置: 行內式(不推薦): 情況1: <div onclick="alert(123)">hello</div> <p onclick="alert(123)">hello</p> 情況2: <a href="javascript:alert(4567 ...
  • 1.安裝nodejs(建議最新版本) 下載地址:下載 | Node.js 中文網 在安裝的過程中建議不要裝在C盤,安裝完成配置環境變數,並且建議講緩存路徑更改。 安裝完成後通過查看nodejs版本和npm版本,在終端輸入 npm --version 和node --version,如下圖所示: 2. ...
  • BOM 原生對象:成為js中的內置對象,就是由 js 中的構造函數創建的對象就被稱為原生對象:Object、Number、Array、Date、String。。。。 宿主對象:web運行環境,也就是windows操作系統和瀏覽器這些被稱為宿主,有這些宿主提供的對象,就叫宿主對象。 *BOM:瀏覽器對 ...
  • JavaScript基礎 1、JavaScript概述 W3C標準:網頁主要由三部分組成 HTML:用來製作網頁基礎內容和基本結構 CSS:用來網頁樣式美化效果 JavaScript:用來製作數據驗證,和用戶交互 JavaScript概念 JavaScript是一門跨平臺、面向對象的腳本語言,運行在 ...
一周排行
    -Advertisement-
    Play Games
  • MQTTnet 是一個高性能的MQTT類庫,支持.NET Core和.NET Framework。 MQTTnet 原理: MQTTnet 是一個用於.NET的高性能MQTT類庫,實現了MQTT協議的各個層級,包括連接、會話、發佈/訂閱、QoS(服務質量)等。其原理涉及以下關鍵概念: MqttCli ...
  • 在WPF中,源屬性(Source Property)指的是提供數據的屬性,通常是數據模型或者其他控制項的屬性,而目標屬性(Target Property)則是數據綁定的目標,通常是綁定到控制項的屬性,例如TextBlock的Text屬性。數據綁定將源屬性的值自動更新到目標屬性中。 主要包含以下幾個事件: ...
  • async/await 是 C# 中非同步編程的關鍵特性,它使得非同步代碼編寫更為簡單和直觀。下麵深入詳細描述了 async/await 的使用場景、優點以及一些高級使用方法,並提供了相應的實例源代碼。 使用場景: I/O 操作: 非同步編程特別適用於涉及 I/O 操作(如文件讀寫、網路請求等)的場景。在 ...
  • 使用過office的visio軟體畫圖的小伙伴都知道,畫圖軟體分為兩部分,左側圖形庫,存放各種圖標,右側是一個畫布,將左側圖形庫的圖標控制項拖拽到右側畫布,就會生成一個新的控制項,並且可以自由拖動。那如何在WPF程式中,實現類似的功能呢?今天就以一個簡單的小例子,簡述如何在WPF中實現控制項的拖拽和拖動,... ...
  • 1、Blazor Hybrid簡介 Blazor Hybrid 使開發人員能夠將桌面和移動本機客戶端框架與 .NET 和 Blazor 結合使用。在 Blazor Hybrid 應用中,Razor 組件在設備上是本機運行的。 這些組件通過本地互操作通道呈現到嵌入式 Web 視圖控制項。 組件不在瀏覽器 ...
  • 除了內置的數據集,scikit-learn還提供了隨機樣本的生成器。通過這些生成器函數,可以生成具有特定特性和分佈的隨機數據集,以幫助進行機器學習演算法的研究、測試和比較。 目前,scikit-learn庫(v1.3.0版)中有20個不同的生成樣本的函數。本篇重點介紹其中幾個具有代表性的函數。 1. ...
  • 從0到1,手把手帶你開發截圖工具ScreenCap------002實現通過文件對話框,選擇合適的文件夾,自定義預設的圖片保存位置,簡單易學 ...
  • 每次談到容器的時候,除了Docker之外,都會說起 Kubernetes,那麼什麼是 Kubernetes呢?今天就來一起學快速入門一下 Kubernetes 吧!希望本文對您有所幫助。 Kubernetes,一種用於管理和自動化雲中容器化工作負載的工具。 想象一下你有一個管弦樂隊,將每個音樂家視為 ...
  • 目錄 基本說明 安裝 Nginx 部署 VUE 前端 部署 Django 後端 Django admin 靜態文件(CSS,JS等)丟失的問題 總結 1. 基本說明 本文介紹了在 windows 伺服器下,通過 Nginx 部署 VUE + Django 前後端分離項目。本項目前端運行在 80 埠 ...
  • 從0到1,手把手帶你開發截圖工具ScreenCap------003實現最小化程式到托盤運行,- 為了方便截圖乾凈,實現最小化程式到托盤運行,簡潔,勿擾,實現最小化程式到托盤運行, 實現托盤菜單功能,實現回顯主窗體, 實現托盤開始截屏, 實現氣泡信息提示,實現托盤程式提示,實現托盤退出程式, 封裝完... ...