CSS常見樣式-html教學-PHP中文網

首頁

web前端

html教學

CSS常見樣式

php中世界最好的语言

Mar 08, 2018 pm 03:40 PM

css 樣式

這次帶給大家CSS常見樣式，使用CSS常見樣式的注意事項有哪些，以下就是實戰案例，一起來看一下。

CSS Sprite(雪碧圖)指什麼?有什麼作用

CSS雪碧圖即CSS Sprite，也有人叫它CSS精靈圖，是一種CSS影像合併技術，該方法是將小圖示和背景影像合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。

img標籤和CSS背景使用圖片在使用場景上有何區別

img作為html標籤，img使用的圖片一般作為內容。
而CSS背景使用圖片一般是用來修飾。
往更詳細的方向上來說在網頁加載的過程中，以css背景圖存在的圖片會等到結構加載完成（網頁的內容全部顯示以後）才開始加載，而html裡的img標籤是網頁結構（內容）的一部分會在載入結構的過程中載入。圖片做為背景，在圖片沒載入的時候或載入失敗的時候，不會有個圖片的佔位標記，不會出現紅叉。

title和alt屬性分別有什麼作用

title 屬性規定關於元素的額外資訊。這些資訊通常會在滑鼠移到元素上時顯示一段工具提示文字。 alt屬性它規定在圖像無法顯示時的替代文字。

background:url(abc.png) 0 0 no-repeat;這句話是什麼意思

這句話為background的簡寫形式，url代表的是background- image插入背景圖片的位址，0 0代表的是background-position的值，表示背景圖的定位，前後兩個分別是橫向定位和縱向定位。左上角是 0 0，no-repeat代表background-repeat的值。可使用的值有repeat、no-repeat、repeat-x、repeat-y、inherit。分別表示水平垂直重複、不重複、僅水平重複、僅垂直重複、繼承自父輩元素。

background-size有什麼作用? 相容性如何? 常用的值是?

background-size相容性

如何讓一個div水平居中？如何讓圖片水平居中

div水平居中：
1.外邊距法：透過對div設定外邊距，margin:0 auto;
2.display:inline-block法:父元素設定text-align:center。需要劇中的div設定display:inline-block即可。
3.浮動法：對div及其父元素float:left，相對定位，父元素left50%，div right 50%。
圖片水平居中：將圖片放入區塊級元素中，使用上述方法。

如何設定元素透明? 相容性？

可以透過rgba和opcity設定語速透明度，針對ie8及更糟版本的瀏覽器需要增加 filter:alpha(opacity=x)。

opacity和rgba都能設定透明，有什麼差別？

opacity會繼承父元素的 opacity 屬性，而RGBA設定的元素的後代元素不會繼承不透明屬性。

<html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">
           .rgba,.opacity{                 margin:0 auto;                 width:200px;                 height: 200px;                 text-align: center;                 line-height: 200px;                 font-size: 20px;                 border:1px solid black;             }             .rgba{                 background: rgba(255,0,0,0.5);             }             .opacity{                 background: red;                 opacity: 0.5;             }         </style>     </head>     <body>         <div class="rgba">             这是RGBA不透明度         </div>         <div class="opacity">             这是opacity不透明度         </div>     </body>     </html>

登入後複製

，可以證明opacity可以繼承父元素的屬性。此外，opacity也可以設定圖片的透明度。

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7781

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1296

PHP教程

1234

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。