CSS簡介

来源:https://www.cnblogs.com/wx-1998/archive/2019/09/02/11448590.html
-Advertisement-
Play Games

CSS簡介 1.CSS介紹 層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的電腦語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。 2.C ...


CSS簡介

1.CSS介紹

  層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)
或XML(標準通用標記語言的一個子集)等文件樣式的電腦語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。

2.CSS語法

  選擇器 {屬性:屬性值;}

3.CSS使用方式

內部樣式表 <style type="text/css">
/*css語句*/
</style>
外部樣式表

<link rel="stylesheet" type="text/css" href="目標文件的路徑及文件名全稱" />

<style type="text/css">
@import url(目標文件的路徑及文件名全稱);
</style>

差別1:本質的差別:link屬於XHTML標簽,而@import完全是CSS提供的一種方式。 差別2:載入順序的差別:當一個頁面被載入的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被載入,而@import引用的CSS會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式(就是閃爍),網速慢的時候明顯。
差別3:相容性的差別:@import是CSS2.1提出的,所以老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標簽無此問題。
差別4:使用dom(document object model文檔對象模型 )控制樣式時的差別:當使用javascript控制dom去改變樣式的時候,只能使用link標簽,因為@import不是dom可以控制的.
內聯樣式表  <div style="width:500px; height:200px;"></div>

4.CSS不同使用方式的優先順序

  A、內聯樣式表的優先順序別最高
  B、內部樣式表與外部樣式表的優先順序和書寫的順序有關,後書寫的優先順序別高。

5.樣式表的作用域

  作用域:內聯樣式的作用域最小,只能應用於當前元素,其次是內部樣式表,能應用於當前HTML文件,最後是外部樣式表,能應用於所有鏈接的HTML文件。

6.CSS選擇器

  什麼是選擇器?

    幫助我們在css中找到html的元素並且定位到指定元素的身上。

  三大基礎選擇器

    id

    class

    html

  高級選擇器

      *        通配符

      .d1,.d2{}     群組選擇器

      .d1 .d3{}        後代選擇器

      .d1>.d2{}       子元素選擇器

 

偽類選擇器

          a:link{屬性:屬性值;}超鏈接的初始狀態;

          a:visited{屬性:屬性值;}超鏈接被訪問後的狀態;
          a:hover{屬性:屬性值;}滑鼠懸停,即滑鼠划過超鏈接時的狀態;
          a:active{屬性:屬性值;}超鏈接被激活時的狀態,即滑鼠按下時超鏈接的狀態;
          link--visited--hover--active。

  選擇器權重比較

三大基礎選擇器 id>class>html
權重比較 id、class、html選擇器數量

是否直接選中目標

!important

7.CSS基本樣式

  width

  height

  background

8.CSS註釋

  /* 註釋內容 */


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

-Advertisement-
Play Games
更多相關文章
  • 在工業監控裡面, 需要對每天的數據, 進行記錄, 時間長了之後, 資料庫很容易撐爆. 這時候, 如果允許, 可以對之前的數據進行一次清除, 只記錄幾個月內的數據. 在資料庫中, 進行測試: 執行腳本: 會發現, 表確實被刪除了, 且別的表並未受到影響. 在不能發後臺包的情況下, 可以通過mysql定 ...
  • Android Studio的安裝及第一次啟動時的配置 一、下載Android Studio 百度搜索“Android Studio" 點擊中文社區進入,選擇最新版本下載。 下載後雙擊安裝包開始安裝。 安裝好後點擊程式運行,進入第一次運行時的配置。 出現”Unable to access Andro ...
  • 1、當導入ReactiveObjC.framework後,進行編譯時報錯:framework not found xxx 報錯如下圖: 解決辦法: Targets — Build Settings — Search Paths 在 Framework Search Paths 中添加當前framew ...
  • **本篇只列出零碎的jQuery基礎知識點,個人記錄自己的學習進度,無序排列,謹慎查看。** 1.jQuery入口函數的四種寫法2.jQuery與JS遍曆數組的區別3.jQuery符號衝突問題4.jQuery與JS的map遍歷方法5.each方法和map方法的區別6.jQuery各種靜態方法的使用7 ...
  • 一、背景屬性縮寫的格式 1.backgound:背景顏色 背景圖片 平鋪方式 關聯方式 定位方式 2.註意點: 這裡的所有值都可以省略,但是至少需要一個 3.什麼是背景關聯方式 預設情況下,背景圖片會隨著滾動條的滾動而滾動,如果不想這樣,那麼我們可以修改它們的關聯方式 4.格式: backgroun ...
  • css實現: JS代碼一: 註:正則表達式\b會把英文縮寫,譬如I'm拆分成兩個部分,導致輸出為I'M,所以不能使用\b JS代碼二: JS代碼三: JS代碼四: 註:\b:匹配一個單詞邊界,也就是指單詞和空格間的位置。例如, 'erb' 可以匹配"never" 中的 'er',但不能匹配 "ver ...
  • HTTP中get和post的區別 GET 從指定的資源請求數據。 POST 向指定的資源提交要被處理的數據 | | GET | POST | | | | | | 後退/刷新 | 無害的 | 數據會被重新提交 | | 書簽 | 可收藏為書簽 | 不可收藏為書簽 | | 緩存 | 能被緩存 | 不能緩存 ...
  • 事件委托還有一個名字叫事件代理。JavaScript高級程式設計上講:事件委托就是利用事件冒泡,只指定一個事件處理程式,就可以管理某一類型的所有事件。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...