CSS 基礎樣式

来源:https://www.cnblogs.com/chy18883701161/archive/2019/08/10/11330175.html
-Advertisement-
Play Games

文本 背景 可使用總屬性background來設置： 邊框 列表樣式 表格樣式 設置單元格間距： border-spacing是對<table>使用的，對<td>、<th>使用無效。 border-spacing不能和border-collapse一起使用，一起使用時border-spacing無效 ...


 

文本

p{
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";   /*字體*/
    font-size: 20px;   /*字型大小*/
    color: red;  /*字體顏色*/
    font-style: italic;  /*字體樣式*/
    font-weight: bold  /*字體粗細*/    
}

 

 

p{
    text-align: left;   /*文本的對齊方式*/

    text-decoration-line:underline;  /*文本裝飾*/
    /*也可以這樣來設置  text-decoration: underline;  */
    text-decoration-style:solid;  /*預設就是單實線*/
    text-decoration-color: red; /*線顏色*/
    
    text-transform: capitalize;  /*大小寫轉換，每個單詞的首字母都大寫*/
    
    text-indent: 40px;   /*首行縮進*/
    
    letter-spacing: 2px;  /*字元間距*/
    word-spacing: 10px;  /*單詞間距*/
    
    line-height: 150%;  /*行高（行間距）*/
    
    white-space: nowrap  /*空格、換行處理*/
}

 

 

 

背景

body{
    background-color: red;  /*背景顏色*/

    background-image: url("bg.png"); /*背景圖片，url()中的路徑可引可不引。可以設置多個url()，用逗號隔開即可*/
    background-repeat:no-repeat;  /*背景填充*/
    background-position: left;  /*背景圖片的位置，這個屬性需要和background-repeat: no-repeat搭配使用*/
    background-attachment:fixed;  /*背景圖片是否隨內容的上下滾動而滾動*/
    background-size:80px 60px;  /*設置背景圖片的尺寸，可使用百分比*/

    background-origin:content-box;  /*設置背景圖片填充的範圍，只能為背景圖片，不能是背景顏色*/
    background-clip: content-box;   /*設置背景的填充範圍，可以是背景圖片或顏色*/
　　/*element=content+padding+border，content-box是填充content，padding-box是填充padding+content，border-box是填充border+padding+content*/

}

 

可使用總屬性background來設置：

background: url("bg.png") no-repeat fixed left;

 

 

 

邊框

    /*同時設置4條邊線*/
    border: 1px red solid;   


    /*同時設置4條邊線的線寬|線型|線顏色*/
    border-width: 1px;
    border-style: sold;
    border-color: red;


    /*設置一條邊線，預設是沒有邊線的，我們可以用此來實現分隔線*/
    border-bottom: 1px red solid; 


    /*分開設置某條邊線的線寬、線型、線顏色*/
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: red;

 

 

 

列表樣式

ul>li{
    list-style-type: disc;   /*可通過此屬性來指定列表項標記*/
    list-style-image: url("logo.jpg") /*以圖片作為列表項標記*/
    /*這2個屬性是矛盾的，一般只設置其中一個。如果同時設置，後設置的屬性會覆蓋前面設置的屬性*/        
}

 

 

 

表格樣式

th,td{border: 1px red solid}
table{
    border-collapse: collapse   /*摺疊邊框（合併多餘的邊框線），因為給所有單元格設置border後，會出現多餘的邊框線*/
}

 

設置單元格間距：

  th,td{border: 1px red solid}
  table{
  　　border-spacing: 10px 10px   /*設置單元格的間距，第一個參數設置水平間距，第二個設置垂直間距*/
  }

border-spacing是對<table>使用的，對<td>、<th>使用無效。

border-spacing不能和border-collapse一起使用，一起使用時border-spacing無效。

 

 

 

盒子模型

 

標準盒子模型：

width、hight指的是content的寬、高。

 

低版本IE盒子模型（IE9.0以下）：要算上內邊距、border的線寬

width=content的寬+（padding-left + padding-right）+（border-left-width + border-right-width）

height=content的高+（padding-top + padding-bottom）+（border-top-width + border-bottom-width）

 

 

 

padding、margin

div{
    /*分別設置4個內邊距*/
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

    padding: 10px 20px 10px 20px;  /*一起設置，頂右底左*/
    padding:10px 20px;   /*參數不全時，預設取對邊的值，頂=底，左=右*/
    padding: 10px;  /*4個內邊距都是10px*/
}

margin的設置方式和padding相同。

 

 

 

display  元素的顯示方式

div{
    display: none;  /*不顯示元素，不再占據空間*/
    display: block;  /*作為塊級元素顯示，前後自動換行，可設置width、height*/
    display: inline;  /*作為行內元素顯示，前後不自動換行，不能設置width、height（設置了無效）*/
    display: inline-block; /*行內塊方式顯示，前後不會自動換行，但可以設置width、height*/
}

塊級、行內元素均可設置margin、padding。

塊級元素前後會自動換行，可以設置width、height。

行內元素前後不會自動換行，一般不能設置width、height（有特殊的，比如<img />）。

 

 

 

visibility  設置元素是否可見

div{
    visibility: hidden;  /*隱藏元素，元素不可見，但任然占據空間*/
    visibility: visible; /*預設值，元素可見*/
}

 

 

 

overflow  溢出的處理方式

div{
    overflow: hidden;  /*隱藏|剪掉溢出的部分，可能會出現殘缺文字*/
    overflow: scroll;  /*加滾動條，不管溢不溢出，都會出現滾動條*/
    overflow: auto;  /*這個用得最多，溢出時才出現滾動條*/
}

 可單獨設置水平、豎直方向溢出的處理方式：

div{
    overflow-x: auto;  /*設置水平方向溢出的處理方式*/
    overflow-y: hidden;  /*設置豎直方向溢出的處理方式*/
}

 

 

 

 

float  浮動

div{
    float:left; /*向左浮動*/
    float:right; /*向右浮動*/
 }

行內、塊級元素均可浮動，浮動是在父容器中浮動，左浮動向左，右浮動向右，直到碰到一個兄弟元素的邊緣或達到父容器的邊界。

浮動後，周圍元素的排列會改變，相鄰的不浮動的元素會受到影響，相鄰的不浮動的元素可使用clear清除浮動影響：

.clear{
     clear:left;  /*此元素的左邊不能有相鄰的浮動元素，如果有，會重起一行來顯示此元素*/
     clear:right;  /*此元素的右邊不能有相鄰的浮動元素，如果有，會重起一行來顯示右邊的浮動元素*/
     clear:both;  /*left+right*/
 }

clear是對相鄰的不浮動的元素使用的。

 

 

 

position   定位

1、static  正常顯示

div {
    position: static;  /*預設值，正常的文檔流顯示方式*/
}

如果定位方式是static（預設值），則設置的left|right|top|bottom屬性無效。

 

 

2、relative  相對於正常位置定位

div {
    position:relative;  /*相對於正常位置定位,需配合left|right|top|bottom使用*/
    left:50px;  /*距原來位置左側50px*/
    top:20px  /*距原來位置頂端20px*/
}

支持負數，負數表示朝反方向移動。css中的坐標系：

 

 

3、絕對定位    

div {
    position:absolute;  /*需配合left|right|top|bottom使用*/
    left:50px;  
    top:20px
}

絕對定位是一種特殊的相對定位，相對於（距離上）最近的已定位的祖先元素（父親、爺爺....）定位，這裡的已定位指的是使用static之外的方式來定位。

如果沒有已定位的祖先元素，則相對於<html>（整個頁面的頂|底端、左|右邊界）定位。

 

以上三種方式，元素會隨著頁面的上下滾動而移動。

 

 

4、fixed定位

div {
    position:fixed;  /*需配合left|right|top|bottom使用*/
    left:50px;  
    top:20px
}

相對於瀏覽器視窗（頂部、左|右邊界）定位，頂部指的是書簽欄下麵。

一直固定在指定位置，不隨頁面的滾動而移動。

 

 

 

z-index   設置元素的堆疊順序

 使用relative、absolute、fixed這些定位時，元素可能會堆疊到其他元素之上，會覆蓋掉下麵的元素。可以使用z-index指定元素的堆疊順序：

div {
    position:absolute;  /*需配合left|right|top|bottom使用*/
    left:50px;  
    top:20px;
    z-index:1   /*值為整數（支持負整數），預設為0，數值越大，優先順序越高，堆疊在越上面。*/     
}

 

 

 

 

元素的對齊方式

1、通過調節margin、padding、width、height來實現元素對齊。

常用margin的auto屬性來是實現元素在父容器中的居中（對齊）：

div{margin:auto}

元素的水平居中(對齊)需要把左右margin設置為auto，元素的垂直居中（對齊）需要把頂底margin設置為auto。

auto單獨使用不能實現居中，需要配合width|height使用，實現水平居中需要配合width使用（如果不設置，塊級的width預設為父容器的width，本身就占據了父容器的寬，怎麼水平居中？）；實現垂直居中需要配合height屬性使用。

 

 

2、通過float來實現元素的水平對齊

 

3、通過position: absolute;  來實現元素對齊

 

4、vertical-align   設置同一行（排）內元素的對齊方式

img{
    vertical-align: top;  /*與行中最高的元素的頂端對齊*/
    vertical-align: middle; /*與行的中間線對齊*/
    vertical-align: bottom; /*與行中最低的元素的底端對齊*/
    vertical-align: text-top;  /*與行中文本的頂端對齊*/
    vertical-align: text-bottom;/*與行中文本的底端對齊*/
}

 

 

5、text-align  設置文本的對齊方式

p{
    text-align:left;  /*左對齊*/
    text-align: right;  /*右對齊*/
    text-align: center;  /*居中對齊*/
    text-align: justify;  /*兩端對齊*/
}

 

 

 

 

opacity   透明度

img{opacity: 0.5}

可對所有元素使用，常用於圖片。

取值範圍[0,1]上的小數，0表示完全透明（不可見），1表示完全不透明（最清晰），數值越大越清晰。

 

 

 

width、height常用值

  • px    像素
  • 百分數     占父容器的百分比

 

 

應該給margin、padding等屬性設置初始值，因為各瀏覽器的css屬性預設初始值可能不同，如果不設置初始值，可能會導致在不同瀏覽器中頁面顯示效果存在差異。

 


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

-Advertisement-
Play Games
更多相關文章
  • ES 25 - Elasticsearch的分頁查詢及其深分頁問題 (deep paging)
    Elasticsearch 如何進行分頁查詢? 如果起始頁、頁大小很大會有性能上的損耗嗎? 本文從分頁查詢開始, 引出其deep paging (即深層分頁) 問題, 並分析其優劣, 給出解決方法. ...
  • spark學習(9)-spark的安裝與簡單使用
    spark和mapreduce差不多，都是一種計算引擎，spark相對於MapReduce來說，他的區別是，MapReduce會把計算結果放 在磁碟，spark把計算結果既放在磁碟中有放在記憶體中，mapreduce把可能會把一個大任務分成多個stage，瓶頸發生在IO，spark有一個叫DAG（有向 ...
  • Xamarin Android 監聽音量鍵（下）
    Xamarin Android 開發，獲取按鍵狀態，並利用publish-subscribe模式通知到子界面。 ...
  • HTML連載29-div和span標簽
    一、div標簽 1.作用：一般用於配合CSS完成網頁的基本佈局 2.例子： 二、span標簽 1.作用：一般用於配合css修改網頁中的一些局部信息 2.例子：span適用於修改我們單獨要求的一塊區域的屬性 三、div和span有什麼區別 1.div會單獨占領一行 2.div是容器級的標簽，而span ...
  • es6學習筆記（二）
    1、Promise 作用：解決非同步回調問題 Promise.resolve('aa') 將aa轉為Promise對象，且是resolve狀態 相當於：new Promise(resolve=>{resolve('aa')}) Promise.reject('bb') 將bb轉成Promsie對象，且 ...
  • javascript錯誤處理
    JavaScript 錯誤 - Throw、Try 和 Catch ...
  • 數組解構賦值，方法
    可以同時定義多個變數，值來源於已有的數組 //1. 定義的變數 數組的項數 let [a,b,c]=[1,2,3];//等同於let a=1,b=2,c=3; //2. 定義的變數>數組的項數 let [a,b,c]=[1,2];//a=1,b=2,c=undefined 定義的變數沒有對應的值就是 ...
  • 擲骰子
    圖片和css樣式已分別上傳至相冊和文件。 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類