css中三種樣式的方法(id,class,style)的實例分析-css教學-PHP中文網

首頁

web前端

css教學

css中三種樣式的方法(id,class,style)的實例分析

黄舟

Jul 20, 2017 am 09:17 AM

class style

我們可以使用三種方法來給一個物件(例如div,span,table)應用樣式。

1：使用#定義樣式，並使用id為物件套用樣式。
範例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Id</title> 
<style type="text/css"><!-- 
#STYLE_1 { font-size: 20px; } 
--></style> 
</head> 
<body> 
<div id="STYLE_1">用Id来给对象应用样式</div> 
</body> 
</html>

登入後複製

2：使用.定義樣式，並使用class為物件套用樣式。
範例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Id</title> 
<style type="text/css"><!-- 
.STYLE_1 { font-size: 20px; } 
--></style> 
</head> 
<body> 
<div class="STYLE_1">用class来给对象应用样式</div> 
</body> 
</html>

登入後複製

3：不定義樣式，直接使用style為物件套用樣式。
範例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Id</title> 
</head> 
<body> 
<div style="font-size:20px">用style来给对象应用样式</div> 
</body> 
</html>

登入後複製

使用這三種方法所產生的效果是相同的，但我們需要注意的是，這三種方法間的優先問題。
如果我們對一個物件同時使用上述三種方法定義樣式，會怎麼樣呢？
例如我們先定義一個#STYLE { font-size:12px; }再定義一個.STYLE { font-size:14px; }最後在物件上使用style="font-size:16px;"程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Id</title> 
<style type="text/css"><!-- 
#STYLE { font-size: 12px; } 
.STYLE { font-size: 14px; } 
--></style> 
</head> 
<body> 
<div id="STYLE" class="STYLE" style="font-size:16px">用三种方式同时来给对象应用样式</div> 
</body> 
</html>

登入後複製

這種情況下，瀏覽器會根據三種方式的優先級，即style>id>class來為物件套用樣式。上述例子中，div中的文字會顯示為16px大小。

以上是css中三種樣式的方法(id,class,style)的實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7499

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

Python中的class類別和method方法的使用方法 Apr 21, 2023 pm 02:28 PM

類別和方法的概念和實例類別(Class)：用來描述具有相同的屬性和方法的物件的集合。它定義了該集合中每個物件所共有的屬性和方法。物件是類別的實例。方法：類別中定義的函數。類別的建構方法__init__()：類別有一個名為init()的特殊方法（建構方法），該方法在類別實例化時會自動呼叫。實例變數：在類別的宣告中，屬性是用變數來表示的，這種變數就稱為實例變量，實例變數就是用self修飾的變數。實例化：建立一個類別的實例，類別的具體物件。繼承：即一個派生類別（derivedclass）繼承基底類別（baseclass）的

element.style怎麼修改 Nov 24, 2023 am 11:15 AM

element.style修改元素的方法：1、修改元素的背景顏色；2、修改元素的字體大小；3、修改元素的邊框樣式；4、修改元素的字體樣式；5、修改元素的水平對齊方式。詳細介紹：1、修改元素的背景顏色，其語法為「document.getElementById("myElement").style.backgroundColor = "red";」；2、修改元素的字體大小等等。

react 怎麼動態修改style Dec 28, 2022 am 10:44 AM

react動態修改style的方法：1、在需要修改樣式的元素上新增ref，其語法如「<div className='scroll-title clear-fix' ref={ this.manage }>」；2、透過動態控制狀態的變化修改元素的樣式；3、透過在DOM中使用JS程式碼實現不同DOM的展示與隱藏轉換。

python中class是什麼意思 May 21, 2019 pm 05:10 PM

class是python中的一個關鍵字，用來定義一個類，定義類別的方法：class後面加一個空格然後加類名；類名規則：首字母大寫，如果多個單字用駝峰命名法，如【class Dog()】。

使用jQuery替換元素的class名稱 Feb 24, 2024 pm 11:03 PM

jQuery是一種經典的JavaScript庫，被廣泛應用於網頁開發中，它簡化了在網頁上處理事件、操作DOM元素和執行動畫等操作。在使用jQuery時，常會遇到需要取代元素的class名稱的情況，本文將介紹一些實用的方法，以及具體的程式碼範例。 1.使用removeClass()和addClass()方法jQuery提供了removeClass()方法來刪除

Vue3 style新增的特性有哪些及怎麼用 May 14, 2023 pm 10:52 PM

style新特性Vue3.2版本對單一檔案元件的style樣式進行了許多升級，例如局部樣式、css變數以及樣式暴露給模板使用等。（學習影片分享：vue影片教學）一、局部樣式當標籤有scopedattribute的時候，它的CSS只會應用到目前元件的元素：hi.example{color:red;}二、深度選擇器在scoped樣式中的選擇器如果想要做更「深度」的選擇，也即：影響到子元件，可以使用:deep()這個偽類：.a:deep(.b){/*...*/ }透過v-html創建的DOM內容不會被

PHP Class用法詳解：讓你的程式碼更清楚易讀 Mar 10, 2024 pm 12:03 PM

在編寫PHP程式碼時，使用類別（Class）是一個非常常見的做法。透過使用類，我們可以將相關的功能和資料封裝在一個單獨的單元中，使程式碼更加清晰、易於閱讀和易於維護。本文將詳細介紹PHPClass的用法，並提供具體的程式碼範例，幫助讀者更好地理解如何在實際專案中應用類別來優化程式碼。 1.建立和使用類別在PHP中，可以使用關鍵字class來定義一個類，並在類別中定義屬性和方法。

Vue報錯：無法正確使用v-bind綁定class和style，怎麼解決？ Aug 26, 2023 pm 10:58 PM

Vue報錯：無法正確使用v-bind綁定class和style，怎麼解決？在Vue開發中，我們常常會用到v-bind指令來動態綁定class和style，但是有時候我們可能會遇到一些問題，如無法正確使用v-bind綁定class和style。在本篇文章中，我將為你解釋這個問題的原因，並提供解決方案。首先，讓我們先來了解v-bind指令。 v-bind用於將V

See all articles

css中三種樣式的方法(id,class,style)的實例分析

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題