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
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...