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
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...