搜尋
首頁web前端前端問答css代表什麼意思

css代表什麼意思

Apr 27, 2021 pm 03:22 PM
css

css代表層疊樣式表,英文全名為“Cascading Style Sheets”,是一種用來表現HTML或XML等文件樣式的電腦語言;css不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。

css代表什麼意思

本文操作環境:windows7系統、css3版、Dell G3電腦。

層疊樣式表(英文全名:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。 CSS不僅可以靜態修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。

CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支援幾乎所有的字體字號樣式,擁有對網頁物件和模型樣式編輯的能力。

語言特點

CSS為HTML標記語言提供了一個樣式描述,定義了其中元素的顯示方式。 CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。

整體來說,CSS具有以下特點:

  • 豐富的樣式定義

CSS提供了豐富的文件樣式外觀,以及設定文字和背景屬性的能力;允許為任何元素建立邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素內容間的距離;允許隨意改變文字的大小寫方式、修飾方式以及其他頁面效果。

  • 易於使用和修改

CSS可以將樣式定義在HTML元素的style屬性中,也可以定義在HTML文檔的header部分,也可以將樣式宣告在一個專門的CSS檔案中,以供HTML頁面引用。總之,CSS樣式表可以將所有的樣式聲明統一存放,進行統一管理。

另外,可以將相同樣式的元素進行歸類,使用同一個樣式定義,也可以將某個樣式套用到所有同名的HTML標籤中,也可以將一個CSS樣式指定到某個頁面元素中。如果要修改樣式,我們只需要在樣式清單中找到相應的樣式聲明進行修改。

  • 多頁面應用程式

CSS樣式表可以單獨存放在一個CSS檔案中,這樣我們就可以在多個頁面中使用同一個CSS樣式表。 CSS樣式表理論上不屬於任何頁面文件,在任何頁面文件中都可以將其引用。這樣就可以實現多個頁面風格的統一。

  • 層疊

簡單的說,層疊就是對一個元素多次設定同一個樣式,這將使用最後一次設定的屬性值。例如對一個網站中的多個頁面使用了同一套CSS樣式表,而某些頁面中的某些元素想使用其他樣式,就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些後來定義的樣式將對前面的樣式設定進行重寫,在瀏覽器中看到的將是最後面設定的樣式效果。

  • 頁面壓縮

在使用HTML定義頁面效果的網站中,往往需要大量或重複的表格和font元素形成各種規格的文字樣式,這樣做的後果就是會產生大量的HTML標籤,進而使頁面檔案的大小增加。而將樣式的聲明單獨放到CSS樣式表中,可以大大的減少頁面的體積,這樣在載入頁面時使用的時間也會大大的減少。另外,CSS樣式表的複用更大程度的縮減了頁面的體積,減少下載的時間。

【推薦學習:css影片教學

#語言基礎

##屬性與屬性值

屬性

屬性的名字是一個合法的標識符,它們是CSS語法中的關鍵字。一種屬性規定了格式修飾的一個面向。例如:color是文字的顏色屬性,而text-indent則規定了段落的縮排。

要掌握一個屬性的用法,有六個面向要了解。具體敘述如下:

①該屬性的合法屬性值(legal value)。顯然段落縮排屬性text-indent只能賦給一個表示長度的值,而表示背景圖案的background. image屬性則應該取一個表示圖片位置連結的值或是關鍵字none表示不用背景圖案。

②該屬性的預設值(initial value)。當在樣式表單中沒有規定該屬性,而且該屬性不能從它的父級元素那裡繼承的時候,則瀏覽器將認為該屬性取它的預設值。

③該屬性所適用的元素(Applies to)。有的屬性只適用於某些個別的元素,例如white-space屬性就只適用於區塊級元素。 white-space屬性可以取normal、pre和nowrap三個值。當取normal的時候,瀏覽器將忽略掉連續的空白字符,而只顯示一個空白字符。當取pre的時候,則保留連續的空白字元。而取nowrap的時候,連續的空白字元被忽略,而且不自動換行。

④該屬性的值是否被下一層繼承(inherited)。

⑤如果該屬性能取百分值(percentage),那麼該百分值將如何解釋。也就是百分值所相對的標準是什麼。如margin屬性可以取百分值,它是相對於margin所存元素的容器的寬度。

⑥該屬性所屬的媒介類型群組(media groups)。

屬性值

①整數和實數

這和普通意義上的整數和實數沒有太大區別。在CSS中只能使用浮點小數,而不能像其他程式語言一樣使用科學記數法表示實數,即1.2E3在CSS中將是不合法的。以下是幾個正確的例子,整數:128、-313,實數:12.20、1415、-12.03。

②長度量

一個長度量由整數或實數加上對應的長度單位組成。長度量常用來對元素定位。而定位分為絕對定位和相對定位,因而長度單位也分為相對長度單位和絕對長度單位。

相對長度單位有:em-目前字體的高度,也就是font.size屬性的值;ex-目前字體中小寫字母x的高度;Dx-一個像素的長度,其實際的長度由顯示器的設定決定。

另一一點值得注意的是,子級元素不繼承父級元素的相對長度值,只繼承它們的實際計算值。

③百分數(percentages)

百分數就是數字加上百分號。顯然,百分數量總是相對的,所以和相對長度量一樣,百分數量不被子級元素繼承。 [10] 

選擇器

類型選擇器

CSS中的一個選擇器是元素類型的名稱。使用這種選擇器(稱為類型選擇器),可以向這種元素類型的每個實例上應用聲明。例如,以下簡單規則的選擇器是H1,因此規則作用於文件中所有的H1元素:

H1 {color:red}

   

簡單屬性選擇器

#CLASS屬性

CLASS屬性允許向一組在CLASS屬性上具有相同值的元素套用宣告。 BODY內的所有元素都有CLASS屬性。從本質上講,可以使用CLASS屬性來分類元素,在樣式表中建立規則來引用CLASS屬性的值,然後瀏覽器自動將這些屬性套用到該群組元素。

類別選擇器以標誌符(句點)開頭,用於指示後面是哪種類型的選擇器。對於類別選擇器,之所以選擇句點是因為在許多程式語言中它與術語「類別」相關聯。翻譯成英語,標誌符表示“帶有類別名稱的元素”。

ID屬性

ID屬性的操作類似CLASS屬性,但有一點重要的差異:ID屬性的值在整篇文件中必須是唯一的。這使得ID屬性可用於設定單一元素的樣式規則。包含ID屬性的選擇器稱為ID選擇器。

要注意的是,ID選擇器的標誌符號是雜湊符號(#)。標誌符號用來提醒瀏覽器接下來出現的是ID值。

STYLE屬性

儘管在選擇器中可以使用CLASS和ID屬性值,STYLE屬性實際上可以取代整個選擇器機制。不是只具有一個能夠在選擇器中引用的值(這正是ID和CLASS具有的值),STYLE屬性的值實際上是一個或多個CSS聲明。

通常情況下,使用CSS,設計者會將所有的樣式規則置於一個樣式表中,該樣式表位於文件頂部的STYLE元素內(或在外部進行連結)。但是,使用STYLE屬性能夠繞過樣式表將聲明直接放置到文件的開始標記中。

組合選擇器類型

可以將類型選擇器、ID選擇器和類別選擇器組合成不同的選擇器類型來構成更複雜的選擇器。透過組合選擇器,可以更精確地處理希望賦予某種表示的元素。例如,要組合類型選擇器和類別選擇器,一個元素必須滿足兩個要求:它必須是正確的類型和正確的類別以便使樣式規則可以作用於它。

外部資訊:偽類別和偽元素

在CSS1中,樣式通常是基於在HTML原始碼中出現的標記和屬性。對於許多設計情境而言這種做法完全可行,但是它無法實現設計者希望獲得的一些常見的設計效果。

設計偽類和偽元素可以實現其中的一些效果。這兩種機制擴充了CSS的表現能力。在CSS1中,使用偽類可以根據一些情況改變文件中連結的樣式,例如根據連結是否被訪問,何時被訪問以及使用者和文件的互動方式來應用變更。借助於偽元素,可以更改元素的第一個字母和第一行的樣式,或添​​加來源文件中沒有出現過的元素。

偽類別和偽元素都不存在於HTML;也就是說,它們在HTML程式碼中是看不見的。這兩種機制都得到了精心設計以便能夠在CSS以後的版本中做進一步地擴充;也就是說實現更多的效果。

以上是css代表什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
React強大的社區和生態系統的好處React強大的社區和生態系統的好處Apr 29, 2025 am 12:46 AM

React'sstrongCommunityAndecoSystemoffernumerBeneFits:1)age awealthoflibrariesandgithub; 2)AwealthoflibrariesandTools,sustasuicomponentLibontlibemontLibrariesLikeChakaAkraUii; 3)

反應移動開發的本地:構建跨平台應用程序反應移動開發的本地:構建跨平台應用程序Apr 29, 2025 am 12:43 AM

ReactNativeischosenformobiledevelopmentbecauseitallowsdeveloperstowritecodeonceanddeployitonmultipleplatforms,reducingdevelopmenttimeandcosts.Itoffersnear-nativeperformance,athrivingcommunity,andleveragesexistingwebdevelopmentskills.KeytomasteringRea

用react中的usestate()正確更新狀態用react中的usestate()正確更新狀態Apr 29, 2025 am 12:42 AM

在React中正確更新useState()狀態需要理解狀態管理的細節。 1)使用函數式更新來處理異步更新。 2)創建新狀態對像或數組來避免直接修改狀態。 3)使用單一狀態對像管理複雜表單。 4)使用防抖技術優化性能。這些方法能幫助開發者避免常見問題,編寫更robust的React應用。

React的基於組件的體系結構:可擴展UI開發的關鍵React的基於組件的體系結構:可擴展UI開發的關鍵Apr 29, 2025 am 12:33 AM

React的組件化架構通過模塊化、可重用性和可維護性使得可擴展UI開髮變得高效。 1)模塊化允許UI被分解成可獨立開發和測試的組件;2)組件的可重用性在不同項目中節省時間並保持一致性;3)可維護性使問題定位和更新更容易,但需避免組件過度複雜和深度嵌套。

用反應的聲明性編程:簡化UI邏輯用反應的聲明性編程:簡化UI邏輯Apr 29, 2025 am 12:06 AM

在React中,聲明式編程通過描述UI的期望狀態來簡化UI邏輯。 1)通過定義UI狀態,React會自動處理DOM更新。 2)這種方法使代碼更清晰、易維護。 3)但需要注意狀態管理複雜性和優化重渲染。

React的生態系統的大小:瀏覽複雜的景觀React的生態系統的大小:瀏覽複雜的景觀Apr 28, 2025 am 12:21 AM

TonavigateReact'scomplexecosystemeffectively,understandthetoolsandlibraries,recognizetheirstrengthsandweaknesses,andintegratethemtoenhancedevelopment.StartwithcoreReactconceptsanduseState,thengraduallyintroducemorecomplexsolutionslikeReduxorMobXasnee

React如何使用密鑰有效地識別列表項目React如何使用密鑰有效地識別列表項目Apr 28, 2025 am 12:20 AM

RectuseSkeyStoeficelyListifyListIdifyListItemsbyProvidistableIdentityToeachelement.1)keysallowReaeActTotRackChangEsInListSwithouterSwithoutreThoutreTheenteringTheEntirelist.2)selectuniqueandstablekeys,避免使用

在React中調試與密鑰相關的問題:識別和解決問題在React中調試與密鑰相關的問題:識別和解決問題Apr 28, 2025 am 12:17 AM

KeysinrectarecrucialforOptimizingTherEnderingProcessandManagingDynamicListSefectefection.tospotaTandFixKey與依賴的人:1)adduniqueKeykeystoliquekeystolistItemStoAvoidWarningSwarningSwarningSwarningSperformance和2)useuniqueIdentifiersIdentifiersIdentifiersIdentifiersFromdatainSteAtofIndicessuessuessessemessuessessemessemessemesseysemessekeys,3)

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具