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