新手前端指南:一小時搞懂 CSS 屬性應(yīng)用
CSS 包含了非常多的屬性和規(guī)則,學(xué)習(xí) CSS 就是學(xué)習(xí)這些屬性的用法,今天我們會挑選出最常用的屬性做說明。
文字相關(guān)屬性
1. 文本屬性
在 CSS 中,文本指的是標簽中的文字內(nèi)容,我們可以控制一些特定的文本屬性,常用的包含:
color:標簽中的文本顏色,使用顏色名或 #212131 這樣的編碼
line-height:每行文本的高度,用像素單位設(shè)置
text-align:文本的對齊屬性,包含 left、right、center(居中)
text-decoration:文本的修飾內(nèi)容,包含 none、underline(下劃線)、line-through(刪除線) 等設(shè)置
word-spacing:字間距,用像素單位設(shè)置
這里就不每個屬性都演示一次了,大家可以自己動手試試。我們主要關(guān)注 text-align 這個屬性。
text-align 這個屬性有向下繼承的特性,即我們在父標簽中定義了對齊方向,那么子標簽也會遵守這個方向。
2. 字體屬性
在 CSS 中,字體屬性和文本屬性是分開的,這是很容易搞混的東西。字體屬性用的是 font 屬性,而在 font 下還包含若干常用的屬性:
font-family: 設(shè)置文字的字體
font-size:文字的字號,用像素表示
font-style:字體風(fēng)格,包含 normal(默認)、italic(斜體)、oblique(傾斜)
font-weight:字體的字重,可以用數(shù)字也可以字體自帶字種
在字體設(shè)置的規(guī)則上,并不是我們想怎么設(shè)置都可以,而是考慮用戶有什么字體。
因為瀏覽器對文字的渲染是通過用戶本地的字庫來完成的,這也是為什么我們設(shè)計 UI 和網(wǎng)頁的時候不能隨心所欲用字體的原因之一。
在中文界面中,通常我們不用去設(shè)置中文字體,但可以為英文或數(shù)字文本設(shè)置一些常見的英文字體,例如 「Arial」,「Futura」 等。
并且可以設(shè)置多個字體,通過逗號隔開,如果第一個字體用戶沒有,那么會自動替換成下一個字體。
3. 列表屬性
列表在實際應(yīng)用中非常的普遍,CSS 有專門針對列表的屬性設(shè)置,即 list-style 屬性,它還包含下面一些屬性類型:
list-style-image:列表項符號替換成圖片的設(shè)置;
list-style-postion:列表項符號圖片所處的位置;
list-style-type:列表項符號的類型,包含none、disc(實心圓)、circle(空心圓)、suqare(方形)、decimal(數(shù)字)等;
list-style 這個屬性只能作用在 ul、ol、li 標簽,對其它標簽無效。對于列表項的圖像設(shè)置我們先撇開不談,我們設(shè)置最多的數(shù)值就是采用 none,否則瀏覽器會自帶列表項符號(很丑)。
背景設(shè)置
前面為了展示模塊實際區(qū)域,我們應(yīng)用過很多次 background 屬性來定義背景色,相信大家已經(jīng)有所了解。但是,background 的作用可不僅僅只是定義背景色而已,它包含:
background-color:定義背景色的屬性
background-image:定義背景圖片的屬性,使用 “url ( img/logo.png )” 的方法
background-position:定義背景圖片的x、y軸距離標簽左上角的距離
backgorund-repeat:定義圖片重復(fù)的規(guī)則
背景色我們已經(jīng)知道,關(guān)鍵就在背景圖的使用上。比如淘寶中包含了各種酷炫的圖片,雖然多數(shù)圖片是內(nèi)容圖,但是,也有少部分圖片是網(wǎng)站本來的基礎(chǔ)設(shè)計內(nèi)容之一,也就是——切圖。
排版定位屬性
如果我們通過瀏覽器的檢查功能去查看界面的框架,就會發(fā)現(xiàn)實際上一個完整的網(wǎng)頁是由無數(shù)矩形拼接起來的,我在自己的教學(xué)中為了方便大家理解稱其為 —— 矩陣視圖。
要把這些矩形框架合理搭建起來,就需要應(yīng)用到定位相關(guān)的屬性,來控制它們的順序和位置,主要應(yīng)用到的屬性包含下面幾個:
position:定位類型設(shè)置,主要有 static(默認)、 relative(相對定位)、absoulte(絕對定位)、fixed(固定定位) 屬性。
z-index:頁面的 z 軸層級設(shè)置,用數(shù)字表示序列。
float:元素的浮動定位設(shè)置,可以設(shè)置 left、right。
clear:清除浮動元素的屬性,包含 left、right、both、none。
top/left/right/bottom:上左右下方向的偏移距離設(shè)置。
1. 定位類型
我們主要在 postion 中會使用的幾種定位類型,是絕對能把新手繞暈的內(nèi)容,先簡單介紹一下:
position:static 是定位的默認值,也就是沒有定位
position:relative 相對定位,對于該元素原本的位置進行定位
position:absolute 絕對位置,對于上一級父元素的位置進行定位
position:fixed 固定定位,是對于瀏覽器畫布區(qū)域進行定位
這么簡單的解釋大家肯定已經(jīng)被繞暈了,所以我們換個角度,一個元素的坐標軸數(shù)值,完全是由其 「 中心點」來確定,但是這個中心點并不是只固定在畫布左上定點 (fixed),有可能是畫布中任意一點(relative),也可能是關(guān)聯(lián)了上級圖層(absolute)。
不同中心點制定邏輯,就會造成不同的元素運動效果,但這和網(wǎng)頁布局有什么關(guān)系?
確實在一個固定了寬高的頁面中,定位沒太多使用的必要,但是,有「 響應(yīng)式」布局的概念,我們可以拖動瀏覽器大小修改畫布尺寸,以及類似蘋果詳情頁這種喜歡使用大量動效的騷操作,這些都是 「運動」 的過程。
于是我們就必須采取定位的措施,確保元素的顯示正?!?/span>
應(yīng)用 static 以外的定位類型以后,z-index、top/left/right/bottom 等其它屬性才能生效,這四個位置屬性只是設(shè)置相對 「中心點」 的移動方向,但是 z-index 就比較有趣了。
它可以制定元素間堆疊的順序,因為當我們使用特殊的定位類型以后,元素之間就可以相交,比如我們在 Sketch 中添加了很多圖層,這些圖層也能相交,但上方的圖層會覆蓋下方的圖層,包括上面的蘋果官網(wǎng)案例也是,安卓 MD 規(guī)范中也有應(yīng)用。
Z-index 就是就是由正常的數(shù)字序號決定優(yōu)先級,它可以是正數(shù),也可以是負數(shù)(負數(shù)就處于頁面水平層下方,優(yōu)先級比正常標簽更低)。
2. 浮動元素
講完定位方式,然后我們就要聊聊浮動屬性 float 了。大家可以放心,它可沒有前面的 Position 屬性復(fù)雜(但也沒簡單到哪里去?。?。
對于網(wǎng)頁標簽來說,多數(shù)標簽(具有 block 特性的)有獨占一行的特征,即使它的寬度并不是100%,但它們也不會允許別的標簽和自己并列,大家可以自己輸入兩個 h1 標簽,看看它們是不是有了 「換行效果」。
而 float 屬性的主要作用,就是讓它們可以根據(jù)某個方向進行對齊,并且不會再排斥有別的元素和自己出現(xiàn)在同一行中。
而 clear 屬性,則是用來清除特定方向浮動元素的屬性,指定左右 left、right,或者兩側(cè) both 都清除浮動元素。
動畫相關(guān)設(shè)置
1. 過渡效果
動效在 web 2.0 以后的需求越來越強,尤其是對于交互的反饋表現(xiàn),在過去,我們只能依托 JS 來實現(xiàn)操作的動效,但在更新到了 CSS3 以后,就為我們提供了直接操控動效的屬性 —— transition。它包含了 4 個下級屬性,分別是:
transition-property:需要過渡的 CSS 名稱,填寫屬性名
transition-duration:動畫執(zhí)行的時長,填寫秒數(shù)即可
transition-timing-function:動畫緩動設(shè)置,如 ease-in、ease-out 等
transition-delay:動畫延遲設(shè)置,填寫秒數(shù)即可
看一個鼠標懸浮在按鈕上,背景色在2秒從灰色過渡成紅色的代碼案例:
默認和 hover 相當于制定了兩個關(guān)鍵幀,而我們把需要制作成補間動畫的參數(shù)在起始幀(div選擇器)進行聲明,那么動畫效果就可以實現(xiàn)。
當然,這個效果還可以包含寬、高、字號、邊框、角度等其它屬性。一條 transition 屬性中可以聲明多個需要執(zhí)行過度動畫的元素和對應(yīng)參數(shù),用逗號隔開:
在設(shè)置緩動效果上,transition 除了默認自帶的幾種標準緩動外,還支持創(chuàng)建貝塞爾曲線的函數(shù),其輸入格式為 —— cubic-bezier(n,n,n,n),在很多動效軟件中都有提供該數(shù)值方便我們直接輸入。
2. 動畫屬性
前面的過度,是通過 hover 的定制來實現(xiàn)兩個關(guān)鍵幀之間的補間。但是,部分情況下我們也會希望什么操作也不做,元素自己會執(zhí)行動畫事件,或者出現(xiàn)更多的關(guān)鍵幀。
于是,就引入了 animation 屬性,它主要包含下面幾種下級屬性:
animation-name:定義動畫事件名
animation-duration:動畫完成時間
animation-timing-function:動畫的緩動效果
animation-iteration-count:動畫的播放次數(shù),可是指定數(shù)字,也可以是 infinte (無限)
然后我們會用一個專門的動畫控制指令 @keyframes 來對動畫實現(xiàn)具體的定義,可以看看下面的代碼案例:
也就是說,我們對一個需要發(fā)生動畫的標簽進行 animation 的設(shè)置,先聲明一個動畫事件的名稱和執(zhí)行規(guī)則,然后通過 @keyframes 來關(guān)聯(lián)這個動畫,并具體定義動畫關(guān)鍵幀的開始和結(jié)束屬性值。
上方案例的 from 和 to,就是起始關(guān)鍵幀和結(jié)束關(guān)鍵幀的屬性值,補間的內(nèi)容會自動生成。但除了只設(shè)置這兩個幀以外,@keyframes 也允許我們設(shè)置一些更具體的關(guān)鍵幀出來,通過使用 % 的形式來制定時間線上的關(guān)鍵幀。
這就等于在這兩秒中,我們關(guān)鍵幀制定在了 0秒、0.5秒、1秒、1.5秒、2秒 上,補間動畫就會根據(jù)這些關(guān)鍵幀開始執(zhí)行,這就可以幫助我們制作出豐富多樣的動畫。
其它常用樣式屬性
復(fù)雜的東西告一段落,最后再整理一些基本的內(nèi)容,讓大家緩緩。
1. 色彩設(shè)置原理
前面我們使用的 color、background-color 等屬性,都是用來指定色彩的屬性。但是設(shè)置色彩本身,不僅僅只是 16 進制色或者已經(jīng)給出的顏色命名,還包括可以使用 RGB 和 RGBA 色值。
RGB設(shè)置:color: rgb(255,255,0); 復(fù)制軟件中rgb參數(shù)到小括號內(nèi)即可
RGBA設(shè)置:color: rgba(255,255,0,0.5); 在rgb后面增加了一個透明度,0.0 是完全透明,1是不透明
2. 邊框其它屬性
boder 除了我們看到的描邊設(shè)置外,還可以用來控制元素圓角的大小,雖然字面理解起來它們關(guān)聯(lián)不是太大,但是 CSS3 中提供了 boder-radius 屬性定義元素的四個邊角,除了它本身外還包含下級:
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
我們可以通過增加對應(yīng)的像素數(shù)值,來實現(xiàn)圓角矩形的效果,尤其在按鈕的實現(xiàn)中。例如:
除了圓角,同屬于這個類型的屬性中還有一個陰影的屬性,那就是 box-shadow 屬性。它的設(shè)置和 XD 以及 Sketch 的陰影設(shè)置是一樣的,下方案例分別是陰影的 X軸距、Y軸距離、BLUR模糊值、色彩:
3. 元素透明度設(shè)置
CSS 中提供了一個 Opacity 屬性專門用來控制元素的透明度,透明度的值和 RGBA 的使用方法一致,并且,這個透明度會影響下級元素,相當于我們?yōu)?Sketch 中制作的編組設(shè)置了透明度。
4. 盒子屬性
在頁面的展示中,經(jīng)常要實現(xiàn)一個遮罩的效果,那么我們就會用到 overflow 盒子屬性,這個屬性主要用來對標簽內(nèi)的元素狀態(tài)做應(yīng)對,比如下面這些設(shè)置:
hidden:元素內(nèi)容超出標簽盒子大小,那么就被隱藏(裁切)
scroll:為這個標簽盒子提供內(nèi)部滾動條的機制
auto:如果內(nèi)容超出標簽盒子的大小,那么自動增加內(nèi)部的滾動條
5. 長寬的具體設(shè)置
之前的演示我們應(yīng)該都知道了,元素尺寸中寬和高的具體設(shè)置屬性是 width 和 heigh,但是這兩個屬性的設(shè)置除了使用數(shù)值外,同時還可以設(shè)置百分比,比如:
這樣子,這個 div 的寬就是整個瀏覽器視圖區(qū)域的 50% 寬,我們變更瀏覽器寬度的時候,它的寬也會一起變更。也就是說,百分比設(shè)置,是根據(jù)它的上層標簽寬來決定的,50%的寬即上級標簽實際尺寸寬度的一半。
除了百分比外,寬和高都提供了一個最小和最大值的設(shè)定,即 min-width、max-width、min-height、max-height,它可以限定標簽的長寬在一個特定的范圍中。
比如上方的設(shè)置中,就是基于瀏覽器視圖50%的情況下,最大的尺寸只到 300px,就不會再超出了。min和max兩個設(shè)置也是自適應(yīng)中的重要環(huán)節(jié)。
我們從以下三個方面,對比純靜態(tài)和偽靜態(tài)兩種靜態(tài)頁面生成方式,逐一展開分析。
用JS的正則表達式如何判斷輸入框內(nèi)為中文或者是英文數(shù)字,或者是三者混編
css制作扇形
純CSS3文字Loading動畫特效
PhpStorm 2022.1 EAP 3 在 PHPDoc 和屬性中添加了對多行和嵌套數(shù)組形狀的完全支持:在這種情況下,可以使用數(shù)組形狀注釋定義數(shù)組結(jié)構(gòu),以獲得鍵的代碼補全并推斷值的類型。
PHP作為Web界第一大語言近年來熱度不夠,但是這幾年的進步和成長卻沒有中斷。在2022伊始,我們來一起學(xué)習(xí)一下目前PHP的現(xiàn)狀以及最新版本帶來的特性。
Linux程序前臺后臺切換:在Linux終端運行命令的時候,在命令末尾加上 & 符號,就可以讓程序在后臺運行Ubuntu$">root@Ubuntu$ ./tcpserv01 &
Python 的正則表達式支持 多行模式,將每行文字分別匹配。然而各種操作系統(tǒng)里,換行符的表示法各不相同,會導(dǎo)致 Python 不能正確使用多行模式。