css入門

来源:https://www.cnblogs.com/-xct/archive/2019/12/03/11977760.html
-Advertisement-
Play Games

css 層疊樣式表,作用是為標簽加效果 基本選擇器 元素選擇器 標簽名稱{css屬性:值} id選擇器 id{} 類選擇器 .class1{屬性:值} 屬性選擇器 後代選擇器 html代碼: 組合選擇器 div,a{ color: yellow;} css樣式引入方式 head標簽中引入 外部文件引 ...


css

層疊樣式表,作用是為標簽加效果

<div style="background: red">123</div>

基本選擇器

元素選擇器

標簽名稱{css屬性:值}

div{width:100px;}

id選擇器

id{}

html代碼:
<div id="d1">

    </div>

css寫法:
    #d1{
        background-color: green;
        width: 100px;
        height: 100px;
    }

類選擇器

.class1{屬性:值}

html代碼:
<div id="d1" class="c1">
    baby
</div>

<div id="d2" class="c2">
   熱巴
</div>

<div id="d3" class="c1">
    唐藝昕
</div>


css寫法:
.c1{
    background-color: green;
    width: 100px;
    height: 100px;
}

屬性選擇器

html代碼:
<div id="d5" class="c1" xx="ss">
    baby
</div>

<div id="d2" class="c2" xx="kk">
   熱巴
</div>

css寫法:
[xx]{
           /*屬性查找*/
           background-color: green;
    width: 100px;
    height: 200px;
       }


        [xx='ss']{
            /*屬性帶屬性值查找*/
    background-color: green;
    width: 100px;
    height: 200px;
}

後代選擇器

html代碼:

div id="d1" class="c1" xx="ss">
        <span>
            <a href="http://www.baidu.com">baby</a>
        </span>
    </div>
    <div id="d2" class="c2" xx="kk">
        <a href="http://www.baidu.com">熱巴</a>
    </div>
    <div id="d3" class="c1">
        唐藝昕
    </div>
    <a href="http://www.baidu.com">xxxxxxx</a>
div a{    color: yellow;}

組合選擇器

div,a{ color: yellow;}

html代碼:
div id="d1" class="c1" xx="ss">
        <span>
            <a href="http://www.baidu.com">baby</a>
        </span>
    </div>
    <div id="d2" class="c2" xx="kk">
        <a href="http://www.baidu.com">熱巴</a>
    </div>
    <div id="d3" class="c1">
        唐藝昕
    </div>
    <a href="http://www.baidu.com">xxxxxxx</a>
    
    
css代碼: 
註意:a標簽字體顏色設置,必須找到a標簽才能設置
    #d1 a,#d3 a{
        background-color: pink;
        color:yellow;
    }

css樣式引入方式

head標簽中引入

<style>
    /* 選擇器{css屬性名稱:屬性值;css屬性名稱:屬性值;} */
    div{                               用了基本選擇器中的元素選擇器
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
給所有div標簽加樣式

外部文件引入

（工作中常用的）

創建一個css文件,stylesheet文件,比如test.css文件。裡面寫上以下代碼
div{
    /* css註釋 */
    width: 200px;
    height: 200px;
    background-color: red;
}

在想使用這些css樣式的html文件的head標簽中寫上下麵的內容
<link rel="stylesheet" href="test.css"> href對應的是文件路徑

內聯樣式

<div style="background-color: red;height: 100px;width: 100px;"></div>

multiple="multiple"?

css樣式相關

display屬性

改變標簽屬性:
inline: 將塊級標簽變成了內聯標簽
block:將內聯標簽變成塊級標簽
inline-block: 同時具備內聯標簽和塊級標簽的屬性,也就是不獨占一行,但是可以設置高度寬度
none: 設置標簽隱藏 （瞭解，後面用）

html代碼

 <span>
        我是span標簽
    </span>
    <div class="c1">
        鵝鵝鵝,曲項向天歌!
    </div>

    <div class="c2">
        白毛浮綠水
    </div>

css寫法

span{display: block;}             將內聯標簽變成塊級標簽
    .c1{
        background-color: red;    內容背景顏色
        height: 100px;            內容背景高度
        width: 100px;             內容背景寬度
        display: inline;          將塊級標簽變成內聯標簽
        /*display: inline-block;*/  同時具備內聯標簽和塊級標簽的屬性
         }

顏色設置

英文單詞:red;
十六進位: #ff746d;
rgb: rgb(155, 255, 236);

背景顏色透明度: rgba(255, 0, 0,0.3);      
單純的就是顏色透明度

標簽透明度（例如背景圖片透明度）: opacity: 0.3;         
0到1的數字,這是整個標簽的透明度

盒子模型

標簽占空間總大小=margin+border+padding+content

html代碼

<div>
    窗前明月光
</div>

css寫法

div{ width: 200px;                           內容寬度
     height: 100px;                          內容高度
     background-color: rgba(255, 0, 0,0.3);  內容背景顏色
     background-image: url("fage.png");      內容背景圖片 url寫圖片路徑,也可以是網路地址路徑
     margin: 10px 15px              外邊距:上下 左右  距離無顏色
     border: 4px solid red;         邊框:大小 樣式 顏色 
     padding: 4px 2px 6px 8px;   上4右2下6左8  內邊距       
}

margin 外邊距

距離其他標簽或者自己父級標簽的距離

html代碼

    <div>
        窗前明月光
    </div>
    <div class="c1">
        <div class="c2">
        </div>
    </div>

css寫法

  .c1{
        background-color: red;
        height: 100px;
        width: 100px;
     /*margin: 10px 15px;*/     上下10，左右15
        margin-left: -10px;
    }
    .c2{
        background-color: green;
        height: 20px;
        width: 20px;
        /*margin: 10px 15px;*/
        margin-left: 20px;
    }

讓外邊距為零

body{
    margin: 0;
}

border 邊框

html代碼

<div>
    窗前明月光
</div>

css寫法

邊框簡寫方式,對四個邊框進行設置
<div style="border:1px solid red; ">           /*寬度/樣式/顏色*/
窗前明月光
</div>                                         

order-left: 1px solid green;  單對左邊邊框設置   
border-top: 1px solid blue;   上邊邊框       


細寫
border-width: 5px;  邊框寬度
border-style: dashed;  邊框樣式
border-color: aqua; 邊框顏色

padding 內邊距

內容和邊框之間的距離

html寫法

<div style="padding:1px solid red; ">   /*寬度/樣式/顏色*/
窗前明月光
</div>

padding: 6px 8px;           上下6左右8
padding: 4px 2px 6px 8px;   上4右2下6左8
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;

content: 內容部分

背景

html代碼

<div>
    窗前明月光
</div>

css寫法

background-color: #ff746d;            背景顏色
background-color: rgba(255, 0, 0,0.3);背景顏色
background-image: url("fage.png");   url寫圖片路徑,也可以是網路地址路徑

background-repeat: no-repeat;        不重覆
background-repeat: repeat-y;         y方向上
background-position: right top;      右上
（lift top,center top,right top,center bpttom）
background-position: 100px 50px;     離左邊邊多少,離右邊多少  一般通過css設置

簡寫方式: 
    background: #ff0000 url("fage.png") no-repeat right bottom;
高度寬度
css寫法:
    div{
        height: 100px;
        width: 100px;
        background-color: pink;
    }
    span{                        ！！！行級標簽不能設置高度寬度
        height: 100px;
        width: 100px;
        background-color: green;
    }

可以設置百分比，會按照父級標簽的高度寬度來計算

<div class="c1"><div class="c2">234</div></div>

css寫法:
        .c1{
        width: 200px;
        height: 100px;
        background: red;
    }
        .c2{
            width: 50%;
            height: 50%;
            background: gold;
        }
字體相關

html代碼

<div>
    窗前明月光
</div>

css寫法

font-size: 50px;    /* 預設字體大小是16px */
color:green;        /* 字體顏色 */

font-family:        '楷體', '宋體';      瀏覽器如果不支持第一個選第二個。。。

font-weight: 400;    /* 字體粗細 100-900,預設是400 */
字體對齊

字體對齊

html代碼:
    <div>
        窗前明月光
    </div>

css寫法

div{  height: 100px;
      width:200px;
      background-color: yellow;
      text-align: center;  水平居中  
      line-height: 100px;  和height高度相同,標簽文本垂直居中
        /*垂直居中*/ 
      text-align: right;右對齊

浮動

浮動的元素,不獨占一行,並且可以設置高度寬度

html代碼

<div class="cc"> 

<div class="c1"></div>
<div class="c2"></div>
</div> 

<div class="c3"></div>

scc寫法

body{ margin: 0; }   要浮動,先讓預設為8的外邊距為0

c1{
background-color: red;  height: 100px;
width: 200px;  float: left;
}
.c2{
background-color: green;  height: 100px;
width: 200px;  float: right;
}

.c3{
background-color: pink;
height: 100px;
width: 100%;}
塌陷解決

父級標簽沒有高度了,子標簽一浮動,會讓下麵的標簽頂上來

方式1：給父級標簽加高度 不常用

方式2：清除浮動(clear屬性) 不常用

.c3{
background-color: pink;  height: 100px;
width: 100%;
clear: both;    （這個標簽上面不允許有浮動的元素）
}

方式3：子標簽底下加一個空白的帶clear屬性的div標簽 常用

html代碼:

<div class="cc clearfix">
<div class="c1"></div>
<div class="c2"></div>
<div style="clear: both;"></div>
</div>
<div class="c3"></div>

方式4:div標簽後面用after拼一個內容為空的帶clear屬性的塊

需要先用偽元素選擇器

html代碼:

<div class="cc clearfix">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
<div class="c3"></div>

css代碼:

.clearfix:after{
    content:'';         設置內容
    display:block;       設置塊
    clear:both;         設置clear屬性
}

偽元素 after

html代碼:

<div>
    一段文字
<div>

css代碼:

div{
    background-color:pink;
    height:100px;
    width:200px;}
div:after{
content:'?';
color:white;}

偽類 hover

html代碼:

<divclass="c1">

</div>

css寫法:

.c1{
    background-color:red;
    height:300px;
    width:300px;}

.c1:hover{                                     /*滑鼠懸浮時設置效果*/
/*background-color:green;*/
background-image:url("a.png");
cursor:pointer;}      pointer 手
                      default 箭頭，crosshair 十字，progress 箭頭和沙漏

懸浮顯示其他標簽效果

html代碼:

<divclass="c1">
<divclass="c2">  </div>

</div>

css寫法:

.c1{background:black;
    height:400px;
    width:400px;
}

.c2{background:aqua;
    height:40px;
    width:40px;
    display:none;          改display為隱藏屬性
}

.c1:hover.c2{
    display:block;          滑鼠懸浮時顯示c2,改display為塊屬性
}

positon 定位

做一些小的範圍佈局

html代碼:

<div class="cc ">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
<div class="c3"></div>

static 靜態定位

也就是標簽預設

relative 相對定位

相對於父級標簽移動,原來的位置還占著,不會造成下麵的標簽頂上去的情況

css代碼:

position:relative;
left:100px;   離左邊
top:-100px;   離上面
/*bottom:*/   離下麵
/*right:*/    離右邊

absolute 絕對定位

相對於父級標簽移動,原來的位置不占著,會造成下麵的標簽頂上去的情況

css代碼:

position:absolute;
top:20px;
left:80px;

fixed 固定定位

按照瀏覽器視窗的位置進行移動

html代碼:

<spanclass="s1"><ahref="">返回頂部</a></span>

css代碼:

.s1{
position:fixed;
left:40px;
bottom:20px;
}

優先順序

!important>行內樣式>ID選擇器>類選擇器>標簽

越精準的定位優先順序越高

繼承

標簽

類

id

!important

無敵

練習（下周一之前完成即可）：

通過html和css完成小米商城首頁的開發,暫不需要完成動態效果,有頁

面展示效果就可以（https://www.mi.com/）

註意：前端頁面效果可以通過很多種方式實現，沒有標準答案，大家

可以參考小米官網源碼，也可以根據自己想法去實現


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

-Advertisement-
Play Games
更多相關文章
  • Kotlin實戰案例：帶你實現RecyclerView分頁查詢功能（仿照主流電商APP，可切換列表和網格效果）
    隨著Kotlin的推廣，一些國內公司的安卓項目開發，已經從Java完全切成Kotlin了。雖然Kotlin在各類編程語言中的排名比較靠後（據TIOBE發佈了 19 年 8 月份的編程語言排行榜，Kotlin竟然排名45位），但是作為安卓開發者，掌握該語言，卻已是大勢所趨了。 Kotlin的基礎用法， ...
  • Kotlin協程通信機制: Channel
    協程中的Channel用於協程間的通信, 它的宗旨是: ``` Do not communicate by sharing memory; instead, share memory by communicating. ``` ...
  • MVVM解析
    閑來無事看到了一個關於Vue的MVVM的簡單講解，覺得寫得不錯，做個分享。 文章地址 https://github.com/DMQ/mvvm 文章內容我就不貼出，比較簡潔明瞭，我記錄一下我的一些思考總結。 PS：建議先仔細讀這篇文章。 MVVM MVVM即雙向數據綁定，是一種設計模式，一般是Web前 ...
  • 使用three.js創建大小不隨著場景變化的文字
    使用three.js創建大小不隨著場景變化的文字，需要以下兩步： 1、將文字繪製到畫布上。 2、創建著色器材質，把文字放到三維場景中。 優點： 1、跟用html實現文字相比，這些文字可以被模型遮擋，更具有三維效果。 2、不會隨著場景旋轉縮放改變尺寸，不存在遠處看不清的情況，適用於三維標註。 效果圖： ...
  • 【前端詞典】進階必備的網路基礎
    五類 IP 地址 TOP 網路地址：用於識別主機所在的網路； 主機地址：用於識別該網路中的主機。 IP地址分為五類： A 類保留給政府機構 B 類分配給中等規模的公司 C 類分配給任何需要的人 D 類用於用於特殊用途. 又稱做廣播地址 E 類暫時保留 各類可容納的地址數目不同。其中A類、B類、和C類 ...
  • cookie，sessionstorage，localstorage區別
    cookie，sessionstorage，localstorage區別 ...
  • js數組對象過濾——filter,find,some,every
    1、filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。 原數組不變 不會對空數組進行檢測 2、find() 對於空數組，函數是不會執行的。 不會改變原數組 返回符合測試條件的第一個數組元素值 3、some 用於檢測數組中的元素是否滿足指定條件會依次執行數組 ...
  • JS基礎語法---基本包裝類型
    基本包裝類型 普通變數不能直接調用屬性或者方法 對象可以直接調用屬性和方法 基本包裝類型: 本身是基本類型, 但是在執行代碼的過程中, 如果這種類型的變數調用了屬性或者是方法, 那麼這種類型就不再是基本類型了, 而是基本包裝類型, 這個變數也不是普通的變數了, 而是基本包裝類型對象 string n ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類