day03-CSS

来源:https://www.cnblogs.com/liyuelian/archive/2022/10/29/16839515.html
-Advertisement-
Play Games

CSS 1.css介紹 css指的是層疊樣式表（cascading style sheets） 官方文檔：https://www.w3school.com.cn/css/index.asp 為什麼需要css？ 在沒有css之前，我們想要修改html元素的樣式需要為每個html元素單獨定義樣式屬性，費 ...


CSS

1.css介紹

css指的是層疊樣式表（cascading style sheets）

官方文檔：https://www.w3school.com.cn/css/index.asp

  • 為什麼需要css？
  1. 在沒有css之前，我們想要修改html元素的樣式需要為每個html元素單獨定義樣式屬性，費心費力。所以css就出現了。
  2. 使用css將html頁面的內容與樣式分離，提高web開發的工作效率（針對前段開發）

  • css快速入門-例子

    創建html文件完成如下網頁顯示：

    image-20221029163338591image-20221029165028046

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css快速入門</title>
    <!-- 1.在head標簽類出現了<style type="text/css"> </style>
         2.表示要寫css內容
         3.div{}表示對div元素進行樣式的指定，div就是一個選擇器（元素/標簽選擇器）
         4.width:300px;...等表示對div樣式的具體指定，可以有多個
         5.如果有多個使用分號;分開即可，最後的屬性後面可以不用分號（建議寫上）
         6.當運行頁面時，div就會被div{}渲染，修飾
		 7.在調試css時，可以通過修改顏色或者大小來看樣式是否生效
		 8.css的註解是/* */,快捷鍵是ctrl+/
     -->
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            background-color: beige;
        }
    </style>
</head>
<body>
<div>hello,北京</div>
<br/>
<div>hello,上海</div>
<br/>
<div>hello,天津</div>
<br/>
</body>
</html>
    image-20221029165028046

2.css語法

  1. css語法可以分成兩部分：（1）選擇器（2）聲明

  2. 聲明由屬性和值組成，多個聲明之間用分號分隔

    image-20221029165306679

  3. 最後一條聲明可以不加分號（建議加上）

  4. 一般每行只描述一個屬性

  5. css註釋：/*註釋內容*/，類似java，快捷鍵是ctrl+/

3.css常用樣式

3.1字體顏色和邊框

  • 字體顏色

    顏色可以寫顏色名，比如green；也可以寫rgb值，比如rgb(200,200,200)；十六進位表示值，比如#708090

    image-20221029170550018 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顏色</title>
    <style type="text/css">
        div {
            /*三種方式指定顏色：
            1.英文  red;
            2.十六進位 ##ff7d44;
            3.三原色  rgb(255,0,0);
            */
            /*color: red;*/
            /*color: rgb(255,0,0);*/
            color: #ff7d44;
        }
    </style>
</head>
<body>
<div>一隻小貓咪</div>
</body>
</html>
    image-20221029171917343

  • 邊框：屬性border

    例子

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邊框</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            border: 1px solid blue;/*屬性的值的順序是隨意的*/
        }
    </style>
</head>
<body>
<div>一隻小貓咪</div>
</body>
</html>
    image-20221029171851297

3.2寬度和高度

  • 寬度width和高度height的值，可以用像素：100px，也可以是百分比：50%

    /*width: 300px;*/
width: 50%;/*百分比*/

使用百分比可以自適應瀏覽器的寬度和高度

3.3背景顏色和字體樣式

  • 背景顏色

    屬性background-color

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 20%;
            height: 100px;
            background-color: beige;
        }
    </style>
</head>
<body>
<div>hello,北京</div>
</body>
</html>
    image-20221029172915952

  • 字體樣式

    • font-size：指定大小，可以按照像素大小
    • font-weight：指定是否是粗體
    • font-family：指定類型

    例子

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字體樣式</title>
    <style type="text/css">
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 華文新魏; /*選擇的字體要是電腦上已經安裝的字體*/
        }
    </style>
</head>
<body>
<div>hello,北京</div>
</body>
</html>
    image-20221029173612311

3.4div和文本居中

  • div居中

屬性margin-left 和 margin-right 都設置為auto的話，表示左右居中

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div居中顯示</title>
    <style type="text/css">
        div {
            /*
            margin-left和margin-right都設置為auto的話，表示左右居中
            */
            margin-left: auto;
            margin-right: auto;
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 華文新魏;
        }
    </style>
</head>
<body>
<div>hello,北京</div>
</body>
</html>
image-20221029174222872
  • 文本居中

屬性text-align，值為center時表示文本居中

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本居中顯示</title>
    <style type="text/css">
        div {
            margin-left: auto;
            margin-right: auto;
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 華文新魏;
            /*文本居中*/
            text-align: center;
        }
    </style>
</head>
<body>
<div>hello,北京</div>
</body>
</html>
image-20221029174632429

3.5超鏈接去下劃線

屬性text-decoration，值為none時表示無修飾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超鏈接去下劃線</title>
    <style type="text/css">
        a {
            /* decoration是修飾的意思*/
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">點擊百度</a>
</body>
</html>

image-20221029175324974

3.6表格細線

設置邊框 : border: 1px solid black

將邊框合併: border-collapse: collapse;

指定寬度： width

設置邊框： 給 td, th 指定即可 border: 1px solid black;

  1. table, tr, td 表示組合選擇器
  2. 就是 table 和 tr 還有 td ,都用統一的樣式指定, 可以提高復用性

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格細線</title>
    <style type="text/css">
        /*
        設置邊框 : border: 1px solid black
        將邊框合併: border-collapse: collapse;
        指定寬度： width
        設置邊框： 給 td, th 指定即可 border: 1px solid black;
        1. table, tr, td 表示組合選擇器
        2. 就是 table 和 tr 還有 td ,都用統一的樣式指定, 可以提高復用性
        */
        table, tr, td {
            width: 300px;
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td align=center colspan="3">星期一菜譜</td>
    </tr>
    <tr>
        <td rowspan=2>素菜</td>
        <td>青草茄子</td>
        <td>花椒扁豆</td>
    </tr>
    <tr>
        <td>小蔥豆腐</td>
        <td>炒白菜</td>
    </tr>
    <tr>
        <td rowspan=2>葷菜</td>
        <td>油悶大蝦</td>
        <td>海參魚翅</td>
    </tr>
    <tr>
        <td>紅燒肉</td>
        <td>烤全羊</td>
    </tr>
</table>
</body>
</html>
image-20221029175935200

3.7列表去修飾

屬性list-style的值為none時，表示去掉預設的修飾

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表去修飾</title>
    <style type="text/css">
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>三國演義</li>
    <li>紅樓夢</li>
    <li>西游記</li>
    <li>水滸傳</li>
</ul>
</body>
</html>
image-20221029180427883

4.css三種使用方式

  • 方式1：在標簽的style屬性上設置css樣式

    問題分析：

    • 標簽多了，樣式多了，代碼量龐大
    • 可讀性差，維護麻煩
    • css代碼沒有復用性

    例子

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在標簽的style屬性上設置css樣式</title>
</head>
<body>
<div style="width: 300px;height: 100px;background-color: beige">hello,北京</div>
<br/>
<div style="width: 300px;height: 100px;background-color: beige">hello,上海</div>
<br/>
<div style="width: 300px;height: 100px;background-color: beige">hello,天津</div>
<br/>
</body>
</html>
    image-20221029181246013

  • 方式2：在head標簽中，使用style標簽來定義需要的css樣式

    例子

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在head標簽中，使用style標簽來定義需要的css樣式</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            background-color: beige;
        }
        span {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div>hello,北京</div>
<br/>
<div>hello,上海</div>
<br/>
<span>hello,span</span>
<br/>
</body>
</html>
    image-20221029181903182

  • 方式3：把css樣式寫成單獨地css文件，在通過link標簽引入（推薦使用）

    例子

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入外部的css文件</title>
    <!-- rel：代表relation，關聯的意思 -->
    <!-- type="text/css" 這個屬性可以不寫 -->
    <!-- href表示要引入的css文件的位置，可以是web的完整路徑，也可以是相對路徑-->
    <!-- 推薦使用第三種方式-->
    <link rel="stylesheet" type="text/css" href="./mycss.css">
</head>
<body>
<div>hello,北京~</div>
<br/>
<div>hello,上海</div>
<br/>
<span>hello,span</span>
<br/>
</body>
</html>

    div {
    width: 200px;
    height: 100px;
    background-color: brown;
}

span {
    border: 1px dashed blue;
}
    image-20221029183013179

5.css選擇器

5.1css元素選擇器

  1. 最常見的css選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器
  2. css元素/標簽選擇器通常是某個html元素，比如p、h1、a等
  3. 元素選擇器會修飾所有的對應的元素

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素選擇器</title>
    <style type="text/css">
        h1 {
            color: red;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>
<h1>一隻大貓咪</h1>
<p>一隻小貓咪</p>
</body>
</html>
image-20221029184000128

5.2ID選擇器

元素選擇器會修飾所有的對應的元素，但是假如希望某一個html元素使用特定的樣式，而這個元素已經用了元素選擇器修飾，這時候就可以使用id選擇器來進行特殊的指定

  1. id選擇器可以為標有特定id的html元素指定特定的樣式
  2. id選擇器以#來定義

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id選擇器</title>
    <!--
         1.使用id選擇器，需要現在要修飾元素指定id屬性，id值是自己指定的
         2.id是唯一的，不能重覆
         3.在<style>標簽中指定id選擇器時，前面需要有#id值
     -->
    <style type="text/css">
        #css1 {
            color: #ff7d44;
        }

        #css2 {
            color: #8A2BE2FF;
        }
    </style>
</head>
<body>
<h1 id="css1">Hello，北京</h1>
<h1 id="css2">hello，上海</h1>
</body>
</html>
image-20221029185634465

5.3class選擇器(類選擇器)

假如html文件中有三個div標簽：

如果使用元素選擇器的話，所有的div元素都會受到影響；

如果使用id選擇器的話，可以唯一地修飾其中某一個div元素；

但是如果想要修飾其中兩個div，這時就不能用id選擇器，因為id選擇器只能唯一地修飾一個div元素，也不能使用元素選擇器，這時候就需要使用class類選擇器。

class類選擇器可以在許多元素（不一定是相同的元素）當中，挑選出其中的一部分來進行修飾。

唯一修飾使用id選擇器，部分修飾使用類選擇器，全部修飾使用元素選擇器

  1. class類型選擇器，可以通過class屬性選擇去使用這個樣式

  2. 基本語法

    .class 屬性值{屬性:值;}

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>類選擇器</title>
    <!--    1.選擇class選擇器，需要在被修飾的元素上，設置class屬性，屬性值(名稱)自己定義
            2.class屬性的值（名稱）可以重覆
            3.需要在style標簽中指定類選擇器的具體樣式，開頭需要使使用.類選擇器名稱
       -->
    <style type="text/css">
        .css1 {
            color: pink;
        }
        .css2 {
            color: #25d2be;
        }
    </style>
</head>
<body>
<h1 class="css1">Hello，北京</h1>
<h1 class="css1">Hello，world</h1>
<h2 class="css2">ni hao</h2>
<h1 class="css2">hello，上海</h1>
</body>
</html>
image-20221029192002534

5.4組合選擇器

  1. 組合選擇器可以讓多個選擇器共用同一個css樣式代碼

  2. 語法格式

    選擇器1,選擇器2,選擇器n{屬性:值;}

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>組合選擇器</title>
    <style type="text/css">
        .class01, #id01 {
            width: 300px;
            height: 100px;
            border: 2px solid paleturquoise;
            color: #ff7d44;
        }
    </style>
</head>
<body>
<h1 class="class01">Hello，北京</h1>
<h1 id="id01">hello，上海</h1>
</body>
</html>
image-20221029192714587

5.5優先順序說明

行內樣式優先順序 > id選擇器優先順序 > class選擇器優先順序 > 元素選擇器優先順序

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇器的優先順序說明</title>
    <style type="text/css">
        #id01 {
            color: purple;
        }

        #id02 {
            color: blue;
        }

        .class01 {
            color: red;
        }

        div {
            color: black;
        }
    </style>
</head>
<body>
<h3>選擇器的優先順序說明</h3>
<!--行內樣式的優先順序高於id選擇器-->
<div style="color: #25d2be" id="id01">一隻貓貓在睡覺</div>
<!--id選擇器的優先順序高於類選擇器-->
<div id="id02" class="class01">兩隻貓貓在睡覺</div>
<!--類選擇器的優先順序高於元素選擇器--->
<div class="class01">三隻貓貓在睡覺</div>
</body>
</html>
image-20221029194011128

6.練習

CSS 測驗 (w3school.com.cn)


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

-Advertisement-
Play Games
更多相關文章
  • 雲小課｜MRS基礎原理之CarbonData入門
    閱識風雲是華為雲信息大咖，擅長將複雜信息多元化呈現，其出品的一張圖(雲圖說)、深入淺出的博文(雲小課)或短視頻(雲視廳)總有一款能讓您快速上手華為雲。更多精彩內容請單擊此處。 摘要：CarbonData是一種新型的Apache Hadoop本地文件格式，使用先進的列式存儲、索引、壓縮和編碼技術，以提 ...
  • 「MySQL高級篇」MySQL鎖機制 && 事務
    ①表級鎖：全局鎖，元數據鎖，意向鎖，AUTO-INC鎖 ②行級鎖：兩階段鎖協議，間隙鎖，臨鍵鎖 ③事務隔離級別，ACID特性 ④死鎖：解決方案 ...
  • Python 多重繼承時metaclass conflict問題解決與原理探究
    大家好，我是陶朱公Boy. 今天跟大家分享一款基於“生產者消費者模式”下實現的組件。 該組件是作者偶然在翻閱公司一中間件源碼的時候碰到的，覺得設計的非常精美、巧妙，花了點時間整理成文分享給大家。 ...
  • 學習筆記——ServletConfig,ServletContext
    2022-10-29 一、web中的兩個介面： （1）ServletConfig： 說明：每當有一個servlet對象時，就會有唯一 一個servletConfig配置文件對象 功能：能獲得Servlet名稱（該名稱是web.xml中配置的servlet-name的值），使用方法：如下，可寫在 創建 ...
  • python3使用libpcap庫進行抓包及數據處理
    python版本：python 3.9 libpcap版本：1.11.0b7 python libpcap庫是底層綁定c語言libpcap庫的開發包，旨在提供python應用可訪問的unix c libpcap庫API（以及為win32系統提供的Npcap、WinPcap），直接使用底層c代碼，性能 ...
  • 微服務初始
    同源策略介紹 同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現 請求的url地址,必須與瀏覽器上的url地址處於同域上,也就 ...
  • 學習筆記——Servlet
    2022-10-29 Servlet 1、 Servlet的作用： 例如：查詢數據 （1）瀏覽器端點擊某個查詢功能，向伺服器端發出請求；伺服器端解析請求，創建Servlet對象，並調用特定方法；Servlet對象調用“DAO”方法獲取數據；DAO方法查詢資料庫。 （2）之後將後端的處理數據傳遞給“前 ...
  • Java發展到現在，哪些技術可以放棄了？
    各位好啊，我是會編程的蝸牛，作為java開發者，對於各類java開發技術、開發框架肯定是多少都要瞭解和知道的。 但是作為已經發展了幾十年的java開發生態，各類技術層出不窮，有的新技術新框架已經對舊技術舊框架產生了顛覆性的影響，當然還有一些舊技術壓根就沒流行過。今天我們來看下Java那些可以放棄的技... ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類