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
  • 一、引言:什麼是 JSON JSON (Java Script Object Notation) 是一種很常用的數據格式,它常常用在 web 應用程式中。它可以表示結構化的數據。 下麵是常見的 JSON 文件結構 { "name": "Kamishiro Rize", "age": "22", "o ...
  • 前言 大家好,我是蝸牛,在上一篇中,我們介紹了不同版本的HTTP區別和發展背景,這篇文章我們來聊聊HTTP的缺點,HTTP缺點大致總結有以下三點: 通信使用明文(不加密),內容可能會被竊聽。 不驗證通信方的身份,因此有可能遭遇偽裝(客戶端和服務端都有可能) 無法證明報文的完整性,有可能會被篡改。 其 ...
  • resultMap處理欄位和屬性的映射關係 如果欄位名與實體類中的屬性名不一致,該如何處理映射關係? 第一種方法:為查詢的欄位設置別名,和屬性名保持一致 下麵是實體類中的屬性名: private Integer empId; private String empName; private Integ ...
  • 大家在看到這篇文章前,為了有一個舒適的c++IDE,一定感受到了Dev-c++的廉價感,Clion功能的多餘,VS的臃腫。他們也有自己的優點,但糟點太多,令人十分難受。而VS Code,可以取長補短。下麵的配置內容,可以讓你在刷題時,享受絲滑的動畫,體會集成終端的方便,讓你覺得Coding不再枯燥。 ...
  • 給定一個不含重覆數字的數組 nums ,返回其 所有可能的全排列 。你可以 按任意順序 返回答案。 示例 1: 輸入:nums = [1,2,3] 輸出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 示例 2: 輸入:nums = [0,1] 輸 ...
  • 設計模式的目的 編寫軟體過程中,程式員面臨著來自 耦合性,內聚性以及可維護性,可擴展性,重用性,靈活性 等多方面的 挑戰,設計模式是為了讓程式(軟體),具有更好 代碼重用性 (即:相同功能的代碼,不用多次編寫) 可讀性 (即:編程規範性, 便於其他程式員的閱讀和理解) 可擴展性 (即:當需要增加新的 ...
  • 本文講解了決策樹的創鍵的過程,包括熵,信息增益的計算,還有決策樹的創建,以及使用matplotlib讓決策樹可視化的詳細過程 ...
  • ♠ use C++11 倍數 若 $a,b,k \in \mathbb N$,且 $a \times k=b$,那麼 $b$ 是 $a$ 的倍數,稱 $a$ 整除 $b$,記作 $a \mid b$。 $[1,n]\in \mathbb N$ 中 $x \in \mathbb N$ 的倍數有 $\l ...
  • LinkList可以定義指向List的指針 1.當函數參數為LinkList L時,意味著只改變或操作List的內容,而不需要改變L這個指針 如 Status GetElem(LinkList L,int i,ElemType) 2.當參數為LinkList &L時,意味著需要改變或操作L這個指針本 ...
  • Spring 5框架 一、Spring概念 1、Spring是輕量級的JavaEE框架 2、Spring可以解決企業應用開發的複雜性 3、Spring有兩個核心部分:IOC和AOP ​ 1)IOC:控制反轉,把創建對象過程交給Spring進行管理 ​ 2)AOP:面向切麵,不修改源代碼進行功能增強 ...