前端(二)之 CSS

来源:https://www.cnblogs.com/zuanzuan/archive/2018/12/05/10072831.html
-Advertisement-
Play Games

前端之 CSS 前言 昨天學習了標記式語言,也就是無邏輯語言。瞭解了網頁的骨架是什麼構成的,瞭解了常用標簽,兩個指令以及轉義字元;其中標簽可以分為兩大類: 1. 一類是根據標簽內容可以分類單雙標簽,單標簽指的是不需要字內容,標簽就可以代表所有功能;雙標簽:主內容可以包含文本,也可以包含子標簽(具有作 ...


前端之 CSS

前言

昨天學習了標記式語言,也就是無邏輯語言。瞭解了網頁的骨架是什麼構成的,瞭解了常用標簽,兩個指令以及轉義字元;其中標簽可以分為兩大類:

  1. 一類是根據標簽內容可以分類單雙標簽,單標簽指的是不需要字內容,標簽就可以代表所有功能;雙標簽:主內容可以包含文本,也可以包含子標簽(具有作用域);
  2. 另一類是根據標簽顯示的效果可以分為行塊標簽,塊標簽會換行顯示;行標簽會同行顯示。

今天學習 CSS,被稱之為網頁的化妝師。

什麼是 CSS

CSS 全稱為級聯樣式表(Cascading Style Sheet),主要負責頁面的風格設計,樣式、美觀。通常以.css 尾碼結尾。

  1. 標記語言

    和 html 一樣是非編程語言,不具備語言的程式邏輯。

  2. css 為前端頁面的樣式,由選擇器、作用域與樣式塊組成。

    選擇器:由標簽、類、id 單獨或組合出現;

    作用域:一組大括弧包含的區域;

    樣式塊:滿足 css 連接語法的眾多樣式。

  3. css 發展史代表版本

① 1990年,Tim Berners-Lee和Robert Cailliau共同發明瞭Web。1994年,Web真正走出實驗室。
② 1994年哈坤·利提出了CSS的最初建議。而當時伯特·波斯(Bert Bos)正在設計一個名為Argo的瀏覽器,於是他們決定一起設計CSS。
③ 哈坤於1994年在芝加哥的一次會議上第一次提出了CSS的建議,1995年的www網路會議上CSS又一次被提出,博斯演示了Argo瀏覽器支持CSS的例子,哈肯也展示了支持CSS的Arena瀏覽器。
④ 1997年初,W3C組織負責CSS的工作組開始討論第一版中沒有涉及到的問題。其討論結果組成了1998年5月出版的CSS規範第二版。
⑤ CSS3是CSS(層疊樣式表)技術的升級版本,於1999年開始制訂,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄佈局等模塊。

CSS 書寫語法

css 由三部分組成:選擇器、作用域與樣式塊。

選擇器 {
    樣式1: 值1;
    樣式2: 值2;
}

h3 {
    width: 100px;
    height: 100px;
    background-color: yellowgreen
}

CSS 的三種引入方式

第一種引入方式:行間式

特點:

  1. 書寫在標簽的 style全局屬性中;
  2. 樣式格式為=》key:value(單位);
  3. 以分號隔開多個樣式;
  4. 最後的分號可以省略
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css 三種引入第一種引入</title>
</head>
<body>
    <!-- 預設有寬 高為0 背景顏色預設為透明 -->
    <p style="width: 200px; height: 200px; background-color: green">css 第一種引入行間式</p>
</body>
</html>

第二種引入方式:內聯式

特點:

  1. 樣式書寫在 head 標簽內的 style 屬性內;
  2. 樣式格式為 => 選擇器:p|作用域 {}|樣式塊;
  3. 以分號隔開多個樣式;
  4. 最後的分號可以省略
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>css 三種引入第二種引入</title>
        <!-- 內聯式 -->
        <style type='text/css'>
            p {
                width: 150px;
                height: 150px;
                background-color: red
            }
        </style>
    </head>
    <body>
        <p>
            css 第二種引入內聯式引入
        </p>
    </body>
</html>

第三種引入方式:外聯式

特點:

  1. 書寫在外部的 css文件中,不需要書寫任何標簽;
  2. 其他同上
/*css 文件書寫 css 語法*/
/*外部 css 文件 00.css*/
h3 {
    width: 100px;
    height: 100px;
    background-color: yellowgreen
}
<!DOCTYPE html>
<html>
   <head>
    <meta charset='utf-8'/>
    <title>第三種引入外聯式引入</title>
    <link rel='stylesheet' href='./00.css'>
       <h3>
           第三種引入外聯式引入
       </h3>
</head> 
</html>

CSS 三種引入方式的優先順序

三種可以同時存在並協同完整佈局,三種引入方式之間沒有優先順序之說,哪種引入方式在邏輯下方(後解釋的)誰就起作用(樣式覆蓋)。並且行間式一定是邏輯最下方的。

當三種引入方式同時存在且操作同一對象的同一屬性時,才會出現衝突,最終起作用的就是優先順序高的。

/*o4.css*/
div {
    height: 200px;
    color: brown;
}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>三種引入的優先順序</title>

    <!-- 三種可以同時存在,協同完整佈局 -->
    <!-- 三種之間沒有優先順序之說 誰在邏輯下方(後解釋的)誰就起作用(樣式覆蓋) -->
    <!-- 行間式一定是邏輯最下方的 -->
    <!-- 內聯 -->
    <style type="text/css">
        div {
            width: 200px;
            color: pink;
            /*height: 200px;*/
        }
    </style>
    <!-- 外聯 -->
    <link rel="stylesheet" href="./04.css">
</head>
<body>
    <!-- 優先順序:大家同時存在且操作統一對象同一屬性,才會出現衝突,最終起作用的就是優先順序高的 -->
    <!-- 行間 -->
    <div style="background-color: cyan; color: orange">你是個好人</div>
</body>
</html>

基礎選擇器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>基礎選擇器</title>
    <style type="text/css">
        /* div => 標簽名 =》 標簽選擇器:開發過程中儘可能少的運用,運用範圍為最內層的顯示層 */
        /* dd => class 名 =》 類選擇器:佈局的主力軍 */
        /* d => id名 =》 id 選擇器:一定唯一的 */
        /* * => 通配選擇器 =》控制 html,body,body 下所有用於顯示內容的標簽(head 不參與顯示)*/
        * {
            border: 1px solid black;
        }

        /* 三種選擇器有優先順序*/
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        /* 類選擇器: .類名{} */
        .dd {
            background-color: orange;
        }

        /* id 選擇器: #id名 {}*/
        #d {
            background-color: green;
        }

        /* 優先順序:id 選擇器 > 類選擇器 > 標簽選擇器 > 通配選擇器*/
        /* 作用範圍越精確,優先順序越高*/
    </style>
    <style type="text/css">
    .div {
        width: 100px;
        height: 100px;
        background-color: orange
    }

    /* 多類名:類名與類名之間不能擁有任何符號隔斷 */
    .red.div{

    }

    .div.red {
        background-color: red;
    }

    </style>


</head>
<body>
    <!-- ***** -->
    <!-- 選擇器:css 選擇 html 標簽的一個工具 =》將 html 與 css 建立起聯繫,那麼 css 就可以控制 html樣式 -->
    <!-- 選擇器就是給 html 標簽起名字 -->
    <div></div>
    <div class="dd"></div>
    <div class="dd" id="d"></div>

    <div class="div red"></div>
    <div class="div"></div>
</body>
</html>

長度單位與顏色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>長度單位與顏色</title>
    <style type="text/css">
        .div {
            /*px mm cm in em vw vh*/
            width: 200px;
            height: 200px;
            /*顏色單詞 | rgb() 0~255 | rgba | #六個十六進位數*/
            background-color:  rgba(255,0,255,0.5);
            /* #abc == #AABBCC*/
            background-color: #00FFFF
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>

文本樣式操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本樣式操作</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: orange
        }
        /*字體樣式*/
        .box {

            width: 400px;
            /*字族*/
            /* STSong 作為首選字體,微軟雅黑作為備用字體*/
            font-family: 'STSong','微軟雅黑';
        }
        .box.uu {
            /* 字體大小*/
            font-size: 40px;
            /*字重*/
            font-weight: 100;
            /*風格*/
            /*none清除系統字體風格*/
            /*font-style: none;*/
            font-style: italic;
            /*行高:某一段文本在自身行高中可以垂直居中顯示=》文本垂直居中*/
            line-height: 200px;

            /*字體整體設置*/
            /*字重 風格 大小/行高 字族 (風格可以省略)*/
            font: 100 normal 60px/200px 'STSong';
        /*}
        i {
            Normal 清除系統字體風格
            font-style: normal;
        }*/
    </style>

    <style type="text/css">
        .wrap {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .w1 {
            /*換行方式*/
            word-break: break-all;
        }
        .w2 {
            width: 400px;
            /*水平居中:left|center|right*/
            /*text-align: center;*/
            /*字劃線 中下上劃線*/
            text-decoration: line-through;
            text-decoration: underline;
            text-decoration: overline;
            /*字間距*/
            letter-spacing: 5px;
            /*詞間距*/
            word-spacing: 5px;
            /*縮進*/
            /*1em 相當於一個字的寬度*/
            text-indent: 2em;
        }
        a {
            /*取消劃線*/
            text-decoration: none
        }
    </style>
</head>
<body>
    <div class="box uu">[普通文本]</div>
    <i>i的文本</i>
    <div class="wrap"> 一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五</div>
    <hr>
    <div class="wrap w1"> 一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二</div>
    <hr>
    <div class="wrap w2">hello world hello world</div>
    <a href="sfjsflj">aaa</a>
</body>
</html>

display

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        .box {
            width: 80px;
            height: 40px;
            background-color: orange
        }
        .box {
            /*block: 塊級標簽,獨占一行,支持所有 css 樣式*/
            /*display: block;*/

            /*inline:內聯(行級)標簽,同行顯示,不支持寬高*/
            /*display: inline;*/

            /*inline-block:內聯塊標簽,同行顯示,支持所有 css 樣式*/
            display: inline-block;

            /*標簽的嵌套規則*/
             /*block 可以嵌套所有顯示類型標簽,div|h1~h6|p,*/
            /*註:hn 與 p 屬於文本類型標簽,所以一般只嵌套inline 標簽*/

            /* inline 標簽只能嵌套 inline 標簽,span|i|b|sub|sup|ins|

            /*inline-block 可以嵌套其他類型標簽,但不建議嵌套任意類型標簽 img|input*/
        }
        .b1 {
            height: 100px;
        }
        .b2 {
            height: 80px;
        }
        .b3 {
            height: 120px;
        }
        .box {
            /*文本基線對齊*/
            vertical-align: baseline;
        }
    </style>
</head>
<body>
    <div class="box b1">123</div>
    <div class="box b2">456</div>
    <div class="box b3">789</div>
</body>
</html>

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

-Advertisement-
Play Games
更多相關文章
  • 基本語法: 1、雙向數據綁定 vue react angular --ngMel(屬性型指令) 2、條件渲染: vue react angular *ngIf(結構型指令) 3、列表渲染: vue react angular angular小案例:Todos ...
  • 貪吃蛇 對不起,您的瀏覽器不支持canvas ...
  • 一、Object.creat()使用方法 Object.creat(對象); 功能:實現繼承,創建一個原型繼承自參數的對象。 什麼是原型式繼承:就是利用修改原型鏈的結構(增加一個節點中的成員,刪除一個節點中的成員,修改一個節點中的成員),來使得實例化對象可以使用整條鏈中的所有成員。 相容方式: fu ...
  • 一、需要實現的效果 這裡使用jQuery來實現。需要實現的效果如下:當下拉條改變時,單選框選中的值隨之變化。 二、註意 當設置單選框的checked屬性時,要使用jQuery的prop()方法,不能夠使用jQuery的attr()方法,attr()只適合簡單html元素設置。 jQuery的prop ...
  • CSS盒模型的概念與分類 CSS盒模型就是一個盒子,封裝周圍的HTML元素,它包括內容content、邊框border、內邊距padding、外邊距margin。 CSS盒模型分為標準模型和IE模型; 標準模型和IE模型的區別 標準模型的width是內容content 的寬度; 設置方式: box- ...
  • 項目中基於skyline的瀏覽器插件進行二次開發,基本的業務操作模式基本上是:點擊功能按鈕開啟操作模式,onFrame預選Feature,onLButtonUp選定Feature並執行業務操作,OnRButtonUp結束操作模式等。這裡封裝了這個基本操作模式,避免代碼重覆,便捷功能擴展和統一。 ...
  • 聲明 本系列文章內容全部梳理自以下幾個來源: 《JavaScript權威指南》 "MDN web docs" "Github:smyhvae/web" "Github:goddyZhao/Translation/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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...