CSS進階

来源:https://www.cnblogs.com/xiukang/archive/2018/07/17/8719405.html
-Advertisement-
Play Games

CSS介紹 CSS：層疊樣式表：Cascading Style Sheets：修改HTML樣式 CSS引用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引用CSS</title> <!-- 第一種:外部樣 ...


CSS介紹 CSS：層疊樣式表：Cascading Style Sheets：修改HTML樣式 CSS引用 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引用CSS</title>
    <!-- 第一種:外部樣式 -->
    <link rel="stylesheet" href="style.style">
    <!-- 第二種:內部樣式 -->
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 第三種:行內樣式 -->
    <p style="color: red">引用樣式</p>
</body>
</html>

CSS選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇器</title>
    <style>
        /*標簽選擇器
        選擇所有p標簽*/
        p {}
        /*id選擇器
        選擇id為xiu的標簽*/
        #xiu {}
        /*類選擇器
        選擇所有class為kang的標簽*/
        .kang {}
        /*後代選擇器
        選擇div裡面所有class為kang的標簽*/
        div .kang {}
        /*子代選擇器
        選擇div裡面子類的所有p標簽*/
        div > p {}
        /*交集選擇器
        選擇p標簽且id為kang的標簽*/
        p#kang {}
        /*並集選擇器
        選擇id為id的標簽和class為kang的兩個標簽*/
        #id,.kang {}
        /*偽類選擇器 :link未訪問的鏈接 :visited已訪問的鏈接 :hover滑鼠移上去的鏈接 :active選中的鏈接*/
        p:hover {}
        /*結構偽類選擇器
        選擇第一個p標簽*/
        p:first-child {}
        /*結構偽類選擇器
        選擇最後一個p標簽*/
        p:last-child {}
        /*結構偽類選擇器
        選擇第2個p標簽 n表示所有 2n表示偶數 2n+1表示奇數*/
        p:nth-child(2) {}
        /*結構偽類選擇器
        選擇所有偶數的p標簽 even偶數 odd奇數*/
        p:nth-child(even) {}
        /*屬性選擇器
        選擇屬性為href的a標簽*/
        a[href] {}
        /*屬性選擇器
        選擇屬性href和屬性title的a標簽*/
        a[href][title] {}
        /*屬性選擇器
        選擇屬性和值為href="url"的a標簽*/
        a[href="url"] {}
        /*屬性選擇器
        選擇屬性和值為href="url"且title="提示"的a標簽*/
        a[href="url"][title="提示"] {}
        /*屬性選擇器
        選擇屬性的值以url開頭的a標簽,該值必須是整個單詞*/
        a[href|="url"] {}
        /*屬性選擇器
        選擇屬性的值以url開頭的a標簽*/
        a[href^="url"] {}
        /*屬性選擇器
        選擇屬性的值以url結尾的a標簽*/
        a[href$="url"] {}
        /*屬性選擇器
        選擇屬性的值包含url的a標簽,該值必須是整個單詞*/
        a[href~="url"] {}
        /*屬性選擇器
        選擇屬性的值包含url的a標簽*/
        a[href*="url"] {}
    </style>
</head>
<body>
    <p>段落</p>
    <a href="url" title="提示">百度</a>
</body>
</html>

CSS字體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字體</title>
    <style>
        p {
            /*設置字體大小*/
            font-size: 20px;
            /*設置字體*/
            font-family: "宋體","微軟雅黑";
            /*字體加粗*/
            font-weight: 700;
            /*字體傾斜*/
            font-style: italic;/*normal 取消樣式*/
            /*字體顏色 預定義顏色:red;十六進位顏色:#FF0000;RGB顏色:rgb(255,255,255) */
            color: #aa00cc;/* #aa00cc可以簡寫為#a0c 兩兩相同才可以*/
            /*設置行高*/
            line-height: 20px;
            /*設置文字對齊方式*/
            text-align: center;
            /*段落首行縮進*/
            text-indent: 2em;
            /*設置字體裝飾 underline下劃線 overline上劃線 line-through刪除線 none無裝飾 */
            text-decoration: underline;
        }
        h1 {
            /*字體連寫，順序不能交換，size/family不能省略*/
            /*font: font-style font-weight font-size font-family;*/
            font: 25px "宋體";
        }
    </style>
</head>
<body>

    <p>字體</p>
    <h1>標題</h1>
</body>
</html>

元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">ｈ
    <title>塊級元素</title>
    <style>
        /*　塊級元素 block-level
        總是從新行開始
        高度，行高，外邊距都可以控制
        寬度預設是容器的１００％
        可以容納內聯元素和其他元素
        常見的塊元素：<h> <p> <div> <ul> <ol>等等*/

        /* 行類元素 inline-level
        和相鄰的行內元素在一行上
        高寬無效，但水平方向的padding和margin可以設置，垂直方向無效
        預設寬度為他本身內容的寬度
        常見的行內樣式有：<a> <strong> <em> <s>等等 */

        /*行內塊元素 inline-block
        和相鄰行內元素在一行上，但之間有空白縫隙
        預設寬度為他本身內容的寬度
        寬度，高度，外邊距都可以控制
        常見的行內塊元素有：<img> <input> <td> */

        /*可以將行內元素和行內塊元素看作文字對待*/
        div {
            /*將塊元素轉換為行內元素*/
            display: inline;
        }
        span {
            /*將行內元素轉換為塊元素*/
            display: block;
        }
        a {
            /*將行內元素轉換為行內塊元素*/
            display: inline-block;
        }
    </style>
</head>
<body>
    <div></div>
    <span></span>
    <a href="#"></a>
</body>
</html>

CSS的特性

  • 層疊性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">ｈ
    <title>繼承性</title>
    <style>
        /*一般情況下，如果出現樣式衝突，會按照CSS的書寫順序，已最後的樣式為準
        樣式衝突，遵循的原則為就近原則，那個樣式離結構進，就執行那個樣式,就近原則
        樣式不會衝突，不會層疊
        color樣式衝突了，就執行最近的一個color，font-size沒有衝突，正常執行 */
        p {
            color: red;
            font-size: 20px;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>段落</p>
</body>
</html>
  •  繼承性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">ｈ
    <title>繼承性</title>
    <style>
        /*子標簽會繼承父標簽的某些屬性，比如：字體顏色和字型大小*/
        .xiu {
            color: red;
        }
    </style>
</head>
<body>
    <div class="xiu">
        <p>段落</p>
    </div>
</body>
</html>
  • 優先性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">ｈ
    <title>優先順序</title>
    <style>
        /*
        繼承或者*的貢獻值 0000
        每個元素的貢獻值 0001
        每個類,偽類的貢獻值 0010
        每個ID的貢獻值 0100
        行內樣式的貢獻值 1000
        每個!important的貢獻值 無窮大
        貢獻值越大,越先執行
        貢獻值可以疊加,比如:
        div ul li {} -- 0003
        .xiu ul li {} -- 0012
        #xiu ul li {} -- 0102
        */
        .xiu {
            color: red!important;/*最先執行*/
        }
        .xiu {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="xiu">
        <p>段落</p>
    </div>
</body>
</html>

 背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">ｈ
    <title>背景圖片</title>
    <style>
        body {
            /*添加背景顏色*/
            background-color: red;
            /*添加背景圖片*/
            background-image: url(1.png);
            /*no-repeat圖片不平鋪 repeat-x水平平鋪 repeat-y垂直平鋪*/
            background-repeat: no-repeat;
            /*設置圖片位置 top上 bottom下 left左 right右 也可以寫數值x,y值 */
            background-position: right bottom;/*如果只寫一個,剩下一個為居中center*/
            /*設置圖片滾動 fixed固定 scroll預設滾動而滾動*/
            background-attachment: fixed;
            /*設置圖片透明度*/
            background: rgba(0,0,0,0.5);
            /*設置背景圖片的大小
            cover 等比例鋪滿整個盒子，超出範圍將隱藏
            contain 等比例鋪滿整個盒子，保證圖片始終顯示在盒子內 */
            background-size: 300px 300px;/*一般設置一個值，另外一個值預設auto 等比例縮放*/
            /*background連寫方式*/
            /*background: 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置*/
        }
    </style>
</head>
<body>
  
</body>
</html>

邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邊框</title>
    <style>
        table {
            width: 100px;
            height: 100px;
            /*設置邊框寬度*/
            /*border-width: 1px;*/
            /*設置邊框樣式 none無邊框 solid實線邊框 dashed虛線 */
            /*border-style: dashed;*/
            /*設置邊框顏色*/
            /*border-color: red;*/
            /*設置上邊框*/
            /*border-top: 1px solid red;*/
            /*border連寫*/
            border: 1px solid red;
        }
        td {
            border: 1px solid blue;
        }
        table,td {
            /*合併單元格相鄰邊框*/
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>修抗</td>
            <td>修抗</td>
        </tr>
        <tr>
            <td>牛皮</td>
            <td>牛皮</td>
        </tr>
    </table>
</body>
</html>

 邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>內邊距與外邊距</title>
    <style>
        /* padding 用於設置內邊距:自身的邊框與自身內部內容的距離
        margin 用於設置外邊距:自身邊框與相鄰邊框的距離

        margin與padding的語法一樣:
        padding-top 上內邊距
        padding-right 右內邊距
        padding-bottom 下內邊距
        padding-left 左內邊距
        padding: 3px; 上下左右都是3px
        padding: 3px 4px; 上下為3px,左右為4px
        padding: 2px 3px 4px;上2px,左右為3px,下為4px
        padding: 1px 2px 3px 4px; 上1px,左2px,下3px,右4px
        
        padding不能為負數值
        padding在塊級元素下,上下左右可以隨意設置,會撐開盒子,一般要減去padding設置的高度寬度
        padding在行內元素只有左右邊距有效果,上下不識別

        margin: 0 auto;設置水平居中,auto自動 只對塊元素起作用
        margin在塊級元素下,上下左右可以隨意設置
        margin在行內元素只有左右邊距有效果,上下不識別 */

        
    </style>
</head>
<body>
    
</body>
</html>
  • 邊距問題：1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*外邊距合併*/
        .xiu {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 150px;
        }
        .kang {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 100px;/*最終兩個盒子的距離已最大的那個為準*/
        }
    </style>
</head>
<body>
    <div class="xiu"></div>
    <div class="kang"></div>
</body>
</html>
  •  邊距問題2
<!DOCTYPE html>
<
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML基礎範例
    1 2 3 4 5 Title 6 7 8 9 10 用戶名： 11 13 14 密&emsp;碼： 15 17 18 性&emsp;別： 19 ... ...
  • Angularjs1.X進階筆記(1)—兩種不同的雙向數據綁定
    一. html與Controller中的雙向數據綁定 html Controller的雙向數據綁定，在開發中非常常見，也是Angularjs1.x的宣傳點之一，使用中並沒有太多問題。 1.1數據從html流向controller 也就是從 視圖層 流向 模型層 ,原生html中需要使用表單元素（例如 ...
  • 前端(七)：ES6一些新特性
    一、變數 1.var關鍵字的弊端 var關鍵字的弊端：1.可以重覆聲明變數；2.無法限制變數修改；3.沒有會計作用域，只有函數作用域。 慣用的解決辦法是將onclick寫進一個匿名函數。 2.let和const關鍵字 let和const關鍵字使得變數不可以被重覆聲明，且變數具有塊級作用域。不同的是， ...
  • promise順序執行，返回結果存放在數組
    遇到面試的一個編程題：三個返回promise對象的非同步操作，讓你寫一個函數可以將這些操作順序執行，並返回一個數組包含三個非同步對象的結果 非同步對象： 註意：promise對象在實例化的時候就會執行，所以函數都是返回promise對象，這樣執行函數的時候就會執行promise對象中的內容 我們期望的結果 ...
  • bootstrap Table的使用方法
    1.官網 url:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 文檔包含了表格屬性、列屬性、事件、方法等等. 2.引入庫 只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js裡面定義就 ...
  • 用模板引擎Art-Template渲染空格或換行符引發的一場“命案”
    一、緒論 說實話，真的不知道如何給這篇博客命名，因為我覺得應該有一些小伙伴遇到跟我同樣的問題正在抓耳撓腮中。 二、導火索 最近在做一個移動H5翻頁的功能，類似於MAKA模板那種。假設大致框架如下 ​ 第一頁是首頁，第二頁開始就是要動態添加的地方，所以紅框裡面的樣式類，是從2開始的，這是第一個伏筆。 ...
  • 常見面試演算法題JS實現-設計一個有getMin功能的棧
    前言： 已經確定工作了～下周一正式入職，按理說應該是可以好好浪蕩一周的，但是內心總是不安，總覺得自己這個水平真的太菜了，還是趁著現在有自己的時間，趕緊多看看書，多學習學習吧orz所以把之前校招買的書，又翻出來看，都是很經典的書，但是因為自己找到工作之後就放縱了，幾乎都放在書架上長灰，現在拿出來，一是 ...
  • vue使用axios請求後端數據
    1. 安裝axios 2.在main.js裡面導入axios 3.下麵就可以使用axios獲取數據了 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類