成都企業(yè)網(wǎng)站設計
2022-07-16 分類： 網(wǎng)站建設
CSS簡介
CSS是層疊樣式表的縮寫，是網(wǎng)頁設計師的重要工具。在CSS簡介中，我們將介紹您對該語言應該了解的重點。但是在開始之前，您應該知道開發(fā)人員在CSS之前經(jīng)歷的痛苦。過去，我們直接在標記中設置應用程序的樣式，這很難維護。這是CSS旨在解決的第一個問題：通過將樣式與內(nèi)容分離，我們可以一次更新許多頁面的演示文稿。
早期，CSS充斥著各種漏洞，以解決渲染引擎中的錯誤并以CSS規(guī)范的不一致實現(xiàn)來支持各種瀏覽器。這導致CSS作為hacky，legacy和奧術(shù)語言的聲譽很差。
但是，我們目前生活在CSS的黃金時代?，F(xiàn)在它是一種成熟的語言，并且仍在幕后發(fā)展和發(fā)展。
通過CSS簡介，您將了解CSS在Web應用程序中的角色，CSS如何應用樣式以及最常用概念及其相關(guān)屬性的細分。
掌握CSS需要花費一些時間，但是通過這篇文章的指導，您將可以成為一名熟練的CSS專家。
在這篇文章中
Web應用程序的4層
Web應用程序樣式的基礎
矩形的概念
該display物業(yè)
文件流程
版式
盒子模型
版面
堆碼
多媒體
轉(zhuǎn)變
過渡和動畫
條件設計
Web應用程序的4層
Web應用程序包括四個部分：
商業(yè)邏輯
內(nèi)容（HTML）
互動（JavaScript）
簡報（CSS）
業(yè)務邏輯是最模糊的，因此在本文中，我們假定它是服務器端代碼或與服務器交互的代碼。
CSS Web應用程序?qū)?/div>
Web應用程序的四層。
每次瀏覽器請求網(wǎng)頁時，業(yè)務邏輯都會向下發(fā)送HTML，我們將其稱為內(nèi)容。此內(nèi)容此時是白色背景上的無樣式黑色文本。
加載HTML時，瀏覽器將加載更多資產(chǎn)，例如圖像和視頻，但更重要的是JavaScript和CSS。
JavaScript是一門通用的編程語言，因此可以做很多偉大的事情。作為核心，在Web瀏覽器中，JavaScript用于處理用戶交互。例如，如果用戶單擊一個按鈕，則會發(fā)生某些情況。從提交表單到更改HTML文檔，這一切都是“事”。
CSS使用HTML的結(jié)構(gòu)來設置網(wǎng)頁樣式。讀取CSS代碼后，內(nèi)容將從白色背景上的黑色文本轉(zhuǎn)換為樣式集描述的任何創(chuàng)作。
要查看CSS原始功能的一些示例，請瀏覽CSS Zen Garden上的示例。
通過Shopify合作伙伴計劃發(fā)展您的業(yè)務
無論您提供市場營銷，定制服務還是網(wǎng)站設計和開發(fā)服務，Shopify合作伙伴計劃都將助您成功。免費加入并獲得收益分享機會，發(fā)展業(yè)務的工具以及充滿激情的商業(yè)社區(qū)。
在CSS的幕后
為我們的Web應用程序編寫可伸縮CSS的基礎是規(guī)則集。規(guī)則集包含一個或多個選擇器以及一個帶有聲明集合的聲明塊。聲明包含鍵/值對語法中的屬性和值。
CSS規(guī)則集
CSS中規(guī)則集的細分。
選擇器是CSS用于將規(guī)則集與HTML文檔中的元素進行匹配的接口。多個選擇器和規(guī)則集可能適用于同一元素，這就是CSS的“層疊”部分起作用的地方。
級聯(lián)是裁判，它根據(jù)選擇器的特殊性和可能的繼承屬性來確定將哪些屬性應用于給定元素。如果規(guī)則沖突，我們需要一名裁判來確定哪種樣式優(yōu)先。
根據(jù)經(jīng)驗，級聯(lián)決定按以下順序應用哪些屬性：
選擇器特異性水平
規(guī)則集的源順序
繼承值
有關(guān)級聯(lián)的深入方法，請查看有關(guān)級聯(lián)和繼承的MDN文章，或者更進一步，請閱讀有關(guān)級聯(lián)和繼承的最新規(guī)范。
對于僅關(guān)于特異性的介紹，CSS Tricks撰寫了一篇很棒的文章，稱為CSS特異性的Specifics。
知識登記
至此，您應該對CSS，它在Web應用程序中的作用以及瀏覽器如何將樣式應用到元素上有一個高級的了解。您可能想知道的是如何實際設置內(nèi)容樣式。在CSS簡介的下一部分中，您將了解一些屬性以及它們?nèi)绾螏椭鷺?gòu)建網(wǎng)頁的出色視覺體驗。
您可能還會喜歡： CSS Pt的現(xiàn)代方法。1：工具和組織。
Web應用程序樣式的基礎
在介紹更復雜的CSS概念之前，讓我們介紹一些樣式和呈現(xiàn)內(nèi)容的基本知識。
1.矩形的概念
在對內(nèi)容進行樣式設置時，需要牢記一些注意事項，以幫助構(gòu)建關(guān)于如何呈現(xiàn)內(nèi)容的可靠思維模型：
一切都是矩形。即使它看起來不像矩形，也受一個邊界限制。
每個矩形都以某種方式與另一個矩形相關(guān)。
默認情況下，嵌套（子）矩形在其包含（父）矩形上方。
設置這些準則將在您布置網(wǎng)頁時為您提供幫助。
2. display財產(chǎn)
在CSS簡介中，我們應該了解的第一個屬性是該display屬性。有許多不同的值display，下面我們將介紹其中的一些，但是我們現(xiàn)在應該知道的兩個是block和inline。默認情況下，所有HTML元素都將具有這兩個值之一。
塊級元素將從其父矩形的頂部到底部呈現(xiàn)，每個塊級同級從上一個元素的下方開始。
考慮一個標題，然后是一個段落，另一個標題，然后是最后一個段落。我們從上到下查看這些元素。
CSS塊和內(nèi)聯(lián)元素
CSS中的塊和內(nèi)聯(lián)元素。
內(nèi)聯(lián)元素將從左向右呈現(xiàn)（對于本機閱讀的語言，則是從右向左呈現(xiàn)），其內(nèi)容將包裹到下一行，并且其下一個內(nèi)聯(lián)同級元素將在上一個內(nèi)容之后開始。
考慮一些粗體文本，然后是帶下劃線的文本，一個鏈接，然后是一些普通文本。我們在閱讀方向上然后從上到下查看這些元素。
您可以在Mozilla的網(wǎng)絡文檔中閱讀有關(guān)塊級元素和內(nèi)聯(lián)元素的更多信息。在每個頁面的底部，是所有元素的列表以及它們各自的默認顯示屬性。
3.文件流程
文檔流的基礎是如何呈現(xiàn)塊級和內(nèi)聯(lián)元素。要知道的重要一點是，對于每種顯示類型，矩形分別從上到下或沿讀取方向放置。
但是，有時候我們不希望我們的內(nèi)容遵循這種直接的文檔流方法，因此CSS提供了不同的方式來操縱它。稍后我們將介紹這些細節(jié)，但是現(xiàn)在，僅意識到這種可能性就足夠了。
為了更好地理解文檔流，您可以閱讀有關(guān)流入和流出的文章。
4.版式
網(wǎng)絡的基礎是內(nèi)容，而最簡單的內(nèi)容形式是文本。在網(wǎng)絡上使用排版時，要記住一些要使您的設計實用且有吸引力的事情。
為了提高可讀性和可訪問性，我們需要考慮文本顏色與背景顏色的對比度以及字體大小（取決于字體系列）。對于像素好，重要的是要知道line-height在font-size影響較小的同時控制行距。
相關(guān)屬性
這是要熟悉的相關(guān)屬性的列表：
font-family：字體的優(yōu)先列表，將使用第一個可用字體
color：文字的顏色
text-align：元素中文本的對齊方式
font-size：文字本身的高度
line-height：文字行的高度，其中不可見空間基于該文字和 font-size
font-weight：文字的粗細，例如粗體
font-style：文字樣式，例如斜體
text-decoration：文字的裝飾，如帶下劃線的
letter-spacing：字母之間的空格
word-spacing：單詞之間的間隔
text-shadow：文字周圍的陰影效果
注意：所有這些與排版相關(guān)的屬性都將繼承，這意味著，如果我們將它們設置在父規(guī)則集上，則它們將應用于所有后代。
5.盒子模型
矩形樣式最基本的方面是框模型，它與每個矩形相關(guān)的屬性有關(guān)?？蚰Ｐ偷暮诵氖莾?nèi)容，它可以是子矩形或空矩形。內(nèi)容周圍是填充，接著是邊框，最后是邊距，就像更多矩形中的矩形一樣。現(xiàn)在，我們將介紹該模型的更多細節(jié)。
box-sizing
該box-sizing屬性控制框模型的計算方式。有兩個主要值box-sizing：content-box和border-box。content-box是所有元素的默認值。
content-box通過在內(nèi)容的寬度和高度上添加填充和邊框來計算矩形的盒子模型。content-box對于許多人來說是一個陷阱，因為由于填充，邊框和邊距，它允許寬度為100％的元素變得大于100％。
border-box通過吸收邊框的寬度和高度的元素填充來計算盒模型。因此，寬度為100％的元素將包括填充和邊框在內(nèi)為100％，但是邊距仍會使元素大于100％的寬度。如果邊距使元素溢出，則應考慮向父級添加填充或邊距。
相關(guān)屬性
這是Box模型的幾個相關(guān)屬性：
width：元素的寬度*
height：元素的高度*
max-width：元素的大寬度*
max-height：元素的大高度*
padding：元素內(nèi)容周圍的空間（注意：設置背景會繪制元素的填充空間）
border：圍繞元素填充空間的邊界
border-radius：元素任何給定角的圓度
margin：元素周圍的空白區(qū)域
outline：其他不影響文檔流或框模型大小的類似邊框的屬性
outline-offset：從元素邊界到輪廓起點的距離
box-shadow：元素中或元素周圍的陰影效果
*關(guān)于箱型
盒子模型的挑戰(zhàn)
更新與箱模型相關(guān)的屬性時，應牢記兩個主要挑戰(zhàn)：
內(nèi)聯(lián)元素忽略邊距。
元素之間共享的頂部和/或底部邊距可以“折疊”并僅使用大值。您可以閱讀更多有關(guān)保證金崩潰的信息，以了解原因。
6.布局
掌握了盒模型之后，我們在CSS入門中的下一步就是構(gòu)建布局。兩種最實用的布局方法是使用Flexbox（Flex）或Grid，它們都是顯示屬性。雙方flex并grid影響子元素的定位，同時也有兩者之間有很多相似之處，他們的目的不同。
兩者本身都是非常深入的主題，因此最好的學習方法是通過實驗。Flexbox Froggy是一款通過將青蛙放在lilypads上來學習Flexbox的游戲，而Grid Garden通過在花園上工作來幫助教授CSS Grid。
除了Grid和Flex，還值得一提的方向和編寫模式。方向控制是應從左向右還是從右向左書寫文本，這是內(nèi)聯(lián)方向。寫入模式更進一步，可以控制塊的流動方向和行內(nèi)方向。有關(guān)CSS寫作模式的更多信息，請參見本文。
您可能還會喜歡： 使用HTML和CSS擁抱本地化和多語言內(nèi)容。
相關(guān)屬性
這是布局時要牢記的幾個重要的相關(guān)屬性：
display：確定元素及其子元素的塊格式化上下文
place-content：設置內(nèi)容之間及其周圍的空間
place-items：place-self為所有直系子女設置屬性
place-self：相對于其各自的軸定位內(nèi)容
gap：設置行和列之間的裝訂線
overflow：控制應如何處理大于元素的內(nèi)容
direction：設置文本的流動方向，例如從左到右（LTR）或從右到左（RTL）
writing-mode：控制塊和內(nèi)聯(lián)內(nèi)容方向
注意： place- *屬性用于Flex和Grid，但對于其他display值將被忽略。
7.堆疊
除了所有內(nèi)容都遵循標準文檔流程的布局之外，還可以將元素彼此堆疊。它的基礎是Stacking Context，它在元素具有某些屬性（例如靜態(tài)以外的位置值或網(wǎng)格或flex容器的子代）時形成。
相關(guān)屬性
這里是一些重要的相關(guān)屬性，請記?。?/div>
position:：確定可以在其中放置元素的上下文
top，right，bottom，left：適用有關(guān)當前堆疊內(nèi)容輕推的位置
z-index：指定沿z軸的堆疊層，較高的值位于較低的值之上
mix-blend-mode：混合堆疊的圖層與復合照明效果
注意：z-index元素的值僅在其各自的堆棧上下文中起作用，而并非在所有堆棧上下文中都有作用。這意味著有時較高的z-index值將低于較低的值，因為它在不同的堆疊上下文中。
8.多媒體
當使用![]()
和標簽將圖像和視頻放入網(wǎng)頁時，默認情況下它們將以嵌入式方式顯示。浮動元素將允許其他內(nèi)容環(huán)繞它。為了防止元素的內(nèi)容環(huán)繞浮動元素，可以將其清除。
到尺寸的圖像或相對于其容器視頻，object-fit提供了類似的值background-size，而cover與contain兩個保持縱橫比。cover會用對象填充容器，并沿較大的尺寸進行裁剪，而contain沿較小的尺寸顯示整個對象的空白區(qū)域。
相關(guān)屬性
這是多媒體要記住的一些重要的相關(guān)屬性：
float： 從文檔流中刪除一個元素，從而允許內(nèi)容在其周圍流動
clear：忽略先前設置的浮動
object-fit：確定媒體對象應如何適合其包含元素
background：設置元素的背景圖像或顏色
background-size：確定背景應如何適合其元素
clip-path：允許掩蓋元素的內(nèi)容
shape-outside：允許自定義形狀綁定元素
9.轉(zhuǎn)變
在掌握了布局和堆棧之后，在CSS入門中，下一步的轉(zhuǎn)換非常有用。它們使我們能夠以各種方式操縱內(nèi)容，而無需更改其在文檔流中的位置。例如，當通過將不透明度更改為0隱藏元素時，它仍然存在，但完全不可見。
transform允許元素平移，傾斜，旋轉(zhuǎn)和縮放。它還使元素可以在三個維度（3D）中進行轉(zhuǎn)換。這要求父元素具有perspective屬性集，該屬性集實際上是3D空間的視口。
相關(guān)屬性
在進行轉(zhuǎn)換時，請牢記一些重要的相關(guān)屬性：
opacity： 控制元素及其子元素的透明度
transform：修改CSS 視覺格式模型的坐標空間
transform-origin：設置要應用的轉(zhuǎn)換點
transform-style：控制3D元素是否應該重疊或相交
perspective：啟用3D元素的觀看并設置觀看距離
perspective-origin：更改3D元素的消失點
backface-visibility：允許元素的背面可見和鏡像
注意： opacity和transform是最活躍的動畫屬性。有關(guān)此問題的一些信息可以在有關(guān)渲染性能的本文中找到，有用的備忘單是CSS Triggers。
10.過渡和動畫
為了獲得流暢的用戶體驗，動畫可以為您的網(wǎng)站添加微妙而優(yōu)美的效果。動畫也可以在一組屬性中一起使用，因此可以和諧地轉(zhuǎn)換，縮放和淡化內(nèi)容。
另一方面，過渡對于將屬性從一個值過渡到另一個值很有用，例如當用戶將鼠標懸停在按鈕上時，按鈕的背景會變暗。
[email protected]/* */，[email protected]/* */imate屬性應用動畫時，將根據(jù)持續(xù)時間依次觸發(fā)每個規(guī)則集。
相關(guān)屬性
在過渡和動畫方面，請牢記一些重要的相關(guān)屬性：
transition：控制屬性在其值更新時應如何更改
transition-delay：控制過渡開始之前的延遲
transition-duration：控制過渡的時間長度
transition-property：控制要轉(zhuǎn)換的屬性
transition-timing-function：控制用于過渡的緩動功能
animation：將微調(diào)的關(guān)鍵幀動畫應用于規(guī)則集
animation-delay：控制動畫開始之前的延遲
animation-direction：控制動畫如何遍歷關(guān)鍵幀
animation-duration：控制動畫的時間長度
animation-fill-mode：控制完成后動畫應停在的位置
animation-iteration-count：控制動畫應重復多少次
animation-name：控制使用聲明的動畫的名稱 @keyframes
animation-play-state：控制動畫是暫停還是運行
animation-timing-function：控制用于動畫的緩動功能
11.條件設計
盡管CSS不像其他編程語言那樣具有典型的控制流，但它確實具有一些有條件的“規(guī)則”。這些功能使您可以指定在滿足給定條件的情況下要應用的嵌套CSS規(guī)則集。兩個示例是：
@media：關(guān)于響應式設計，[email protected]/* */，它使我們能夠檢查瀏覽器的窗口大小，屏幕像素密度，寬高比以及設備的媒體類型。
@supports：由于CSS是一種不斷發(fā)展的語言，因此并非所有瀏覽器都支持最新的CSS功能。如果瀏覽器無法理解新屬性，CSS不會破壞它們，[email protected]/* */，[email protected]/* */
文章名稱：成都企業(yè)網(wǎng)站設計
本文URL：http://www.rwnh.cn/news/179944.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、虛擬主機、搜索引擎優(yōu)化、用戶體驗、網(wǎng)站設計公司、網(wǎng)站收錄
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 網(wǎng)站優(yōu)化過度怎么辦成都網(wǎng)絡優(yōu)化公司告訴您 2022-07-16
- 什么是文件匹配？ 2022-07-16
- 內(nèi)容電商結(jié)合小程序運營怎么做？ 2022-07-16
- 建設網(wǎng)站的好處？ 2022-07-16
- 關(guān)于HTML5的優(yōu)勢分析 2022-07-16
- 成都小程序個人開發(fā)，要注意什么？ 2022-07-16
- 如何給網(wǎng)站選擇空間？ 2022-07-16
- SEO團隊成員結(jié)構(gòu) 2022-07-16
- 造成武漢網(wǎng)站建設低轉(zhuǎn)化率的3個錯誤 2022-07-16
- 成都網(wǎng)站設計：專注軟硬結(jié)合基礎技術(shù) 速位互動如何撬動交互未來 2022-07-16
- 怎樣建網(wǎng)站才能得到源源不絕的流量 2022-07-16
- 無線寬帶聯(lián)盟：不應狹隘看待5G 可與Wi-Fi 6融洽相處 2022-07-16
- 高端網(wǎng)站建站：如何確定域名后綴 2022-07-16
- 什么樣的網(wǎng)站需要辦理icp證? 2022-07-16
- 大品牌當先！.Store域名的終端應用之道 2022-07-16
- seo其實并沒有那么復雜 2022-07-16
- 好口碑真的能成為企業(yè)發(fā)展動力嗎 2022-07-16
- 網(wǎng)站SEO優(yōu)化對于網(wǎng)站的重要性 2022-07-16
- 談談企業(yè)網(wǎng)站網(wǎng)絡推廣的瓶頸 2022-07-16