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