柚子快報激活碼778899分享：前端 CSS

http://yzkb.51969.com/

目錄

選擇器?

?復合選擇器

偽類-超鏈接

結(jié)構(gòu)偽裝選擇器

偽元素選擇器

畫盒子

字體屬性

CSS三大屬性

Emmet寫法

背景屬性

顯示模式

盒子模型

盒子模型-組成

盒子模型-向外溢出

盒子模型-圓角

盒子模型-陰影

flex

position定位

CSS小精靈

字體圖標

垂直對齊方式

過渡 transition

透明度 opacity

光標類型 cursor

transform 平面轉(zhuǎn)換

漸變

空間轉(zhuǎn)換

動畫-animation

手機端移動適配方案

rem適配方案

less

vm與vw適配方案

前言

本文章將講述前端CSS的屬性和用法,內(nèi)容非常齊全,希望大家可以從中學到知識,也非常希望大家可以和我一起探討!

?個人主頁:?心.c

?文章專題:前端

?歡迎大家點贊?拾收藏?

? ?層罍樣式表(Cascading stvle sheets，縮寫為 CSS)，是一種 樣式表 語言，用來描述 HTML 文檔的呈現(xiàn)(美化內(nèi)容)。

書寫位置:title 標簽下方添加?style 雙標簽，style 標簽里面書寫 CSS 代碼。

選擇器?

作用:查找標簽,選擇樣式,都寫在style標簽里面

基礎選擇器:

標簽選擇器選擇標簽名作為選擇器,選中同名標簽設置相同樣式類選擇器作用:查找標簽，差異化設置標簽的顯示效果，id選擇器類似于類選擇器,第一個用#表示,同一個id只能用一次通配符選擇器*{}表示,自動查找所有標簽,設置相同樣式

步驟:

定義類選擇器 →.類名使用類選擇器 → 標簽添加 class="類名"

一個標簽不可以寫多個class文件,但是class類中可以寫多個屬性

?復合選擇器

由多個基礎選擇器組合而成,更高效的選擇目標標簽

后代選擇器格式:父選擇器 子選擇器{},中間用空格隔開,所有相同后代都可以選中子代選擇器格式:父選擇器>子選擇器{},中間用>隔開,只能選自己的一個后代(離自己最近的一個)并集選擇器格式:選擇器1,選擇器2......選擇器N{}交集選擇器選中同時滿足多個條件的元素,格式:選擇器1選擇器2{},標簽選擇器必需寫在最前面?,兩個選擇器中間沒有任何符號偽類選擇器偽類表示狀態(tài),? ?選中元素某個狀態(tài)設置樣式,鼠標懸停時發(fā)生某種狀態(tài),格式:? 選擇器:hover{},選擇器也可以是類選擇器

偽類-超鏈接

元素 a標簽

書寫方式:元素名:hover

:link?訪問前:visited訪問后:hover?鼠標懸停:active?點擊時(激活)

結(jié)構(gòu)偽裝選擇器

選擇器名用E來表示

選擇器 名 E:first-child??查找第一個E元素選擇器名 E:first-child?查找最后一個E元素選擇器名 E:nth-child(N)? ?查找第N個E元素

查找第n個元素公式值:

可用于給某個無序列表添加一個css屬性,實現(xiàn)單一性

偽元素選擇器

選擇器 E::before?在E元素里面最前面添加一個偽元素選擇器 E::after在E元素里面最后面添加一個偽元素

注意點:

必須設置 content:””屬性，用來設置偽元素的內(nèi)容，如果沒有內(nèi)容，則引號留空即可.偽元素默認是行內(nèi)顯示模式權(quán)重和標簽選擇器相同

畫盒子

使用合適的選擇器畫盒子

屬性作用width設置盒子寬度height設置盒子高度background-color設置盒子背景色

字體屬性

?1.font-weight

正常屬性值為400,字體粗細不用px,它是用來表示字體大小而非粗細

?2.line-height

大小可以寫像素也可以寫數(shù)字,數(shù)字代表原來行高的倍數(shù),行高是一行文字的頂部到下一行文字的頂部

一端文字使用行高也可以實現(xiàn)居中對齊的效果,(當一個盒子行高為100px,當我們將一段文字行高設置為100px,那么該文字在該盒子中就會起到居中對齊的效果)

3.font-size

屬性值:字體名

4.font(復合屬性值)

屬性的簡寫方式,一個font可以對應多個屬性值,每個屬性值用空格(不是逗號)隔開,屬性中字號和字體值都要寫,否者font不生效

5.text-indent

對文章進行文本縮進,屬性名:text-indent,屬性值:數(shù)字+px/em;1em就是一個字體的大小

6.text-align

屬性值:

左對齊left?居中 center右對齊right

7.text-decoration

屬性值:

none無underline 下劃線?overline上劃線?line-through? 刪除線

其中使用none可以去掉a元素的下劃線

8.color

改變字體顏色

CSS三大屬性

繼承性:比如將body作為選擇器,在body里面子集都會有所改變,但是一些標簽不受限制,比如h1因為他本身有自己的字號層疊性:如果設置了兩個相同屬性的標簽選擇器,那么后面的屬性會覆蓋前面的屬性,但是如果是不同的屬性,那么兩個標簽會疊加優(yōu)先級:通配符選擇器<標簽選擇器<類選擇器

Emmet寫法

代碼的簡寫方式

1.html

1.css

單詞的首字母

背景屬性

1.background-image

? ? ?屬性值? url(地址)

2.background-repeat

no-repeat 不平鋪? ? ? ?repeat 平鋪? ? ? ? ?repeat-x? 水平平鋪? ? ? ?repeat-y 垂直平鋪

3.background-position

屬性值:

關鍵字 top center left bottom...數(shù)字+px

4.background-size

屬性值 :

關鍵字百分比數(shù)字px

5.background-attachment

? ? 屬性值:fixed

6.background復合屬性

? ? 屬性位置與縮放之間用/隔開,其他屬性之間用空格

顯示模式

塊級元素:獨占一行,默認是父級的100%,添加高寬屬性生效,比如div標簽行內(nèi)元素:添加寬高不生效,背景色生效,但是背景色寬高不受盒子寬高的限制,比如span,改變行內(nèi)元素垂直`方向的位置,可以加line-height進行改變行內(nèi)塊元素:一行存多個,默認尺寸由內(nèi)容撐開,添加寬高生效,比如,image

轉(zhuǎn)換顯示模式

屬性:display

屬性值種類block塊級inline行內(nèi)inline-block行內(nèi)塊

盒子模型

盒子模型-組成

直接放在創(chuàng)建盒子的里面

內(nèi)容區(qū)域?屬性名:width&heigth內(nèi)邊距屬性名:padding邊框線屬性名:border外邊距屬性名:margin

1.padding

作用:添加某個方向的內(nèi)邊距

屬性名

padding

1.添加方位名詞:

toprightleftbottom

2.padding的多值寫法:

2.border

屬性值:樣式 邊框粗細 顏色(不區(qū)分順序,中間仍用空格隔開)

border: #8fa0ff 1px solid;

樣式線類solid實線dashed虛線dotted點線

設置單方向邊界線,將屬性名改為border加上方位名詞:top? left right? bottom

border-top: #8fa0ff 1px solid;

3.margin

添加某個方向的外邊距,與padding用法一模一樣,只有一處不一樣,就是想要實現(xiàn)盒子居中,左右設置auto,要求要有寬度

但有事我們使用margin時會出現(xiàn)一些問題:

外邊距的合并問題,如果上下兩個圖片都設置了margin,上圖片設置了下margin,下圖片設置了上margin,那么兩個margin合并,以最大值為主外邊距問題:塌陷問題,如果給子級添加上邊距,會拖聯(lián)父級下水

解決方法:

4.在制作網(wǎng)頁時會經(jīng)常用到的屬性:

清除內(nèi)外邊距,添加css屬性,margin:0? padding:0? 最后會在添加一個自動減法box-sizing:bord-box;

因為用于border和padding會撐大盒子,如果不想讓盒子被撐大,可添加自動減法模式:box-sizing:bord-box;

盒子模型-向外溢出

屬性名:overflow

屬性值 :hidden溢出隱藏屬性值? :scroll?溢出滾動(無論是否溢出,都顯示滾動條位置)屬性值 :auto?溢出滾動(溢出才顯示滾動條位置)

盒子模型-圓角

屬性名:

border-radius

屬性值:

數(shù)字+px /百分比

/* 記憶:從左上角順時針賦值，沒有取值的角與對角取值相同* */

/* 四值:左上右上右下左下 */

border-radius: 10px 20px 40px 80px;

/*三值:左上右上+左下右下*/

border-radius: 10px 40px 80px;

/*兩值:左上+右下 右上+左下*/

border-radius: 10px 80px;

設置正圓形狀:(只有正方型才可以設置)

屬性值

設置50%,設置盒子高度的一半

設置膠囊形狀:(只有長方型才可以設置)

設置盒子高度的一半

盒子模型-陰影

屬性名:box-shadow

屬性值:X軸偏移量 Y軸偏移量 模糊半徑 擴散半徑 顏色 內(nèi)外陰影(中間用空格隔開)

注意:

X軸偏移量 Y軸偏移量必須要寫默認狀態(tài)為外陰影,內(nèi)陰影用insert,位置在內(nèi)陰影加一個空格后面加

flex

Flex 布局也叫彈性布局，是瀏覽器提倡的布局模型，非常適合結(jié)構(gòu)化布局，提供了強大的空間分布和對齊能力,Flex 模型不會產(chǎn)生浮動布中脫標現(xiàn)象，布局網(wǎng)頁更簡單、更靈活

1.創(chuàng)建flex容器

給父級元素設置display:flex 子元素可以自動擠壓或拉伸

2.主軸對齊方式

3.側(cè)軸對齊方式

當前彈性容器內(nèi)所有彈性盒子的側(cè)軸對齊方式(給彈性容器設置)

4.某個彈性盒子側(cè)軸對齊方式

單獨控制某個彈性盒子的側(cè)軸對齊方式(給彈性盒子設置)

5.修改主軸方向

6.彈性伸縮比

控制彈性盒子主軸方向的尺寸

屬性值:整數(shù)數(shù)字,表示占用父級主軸的剩余尺寸的份數(shù)

7.彈性盒子換行

flex-wrap: wrap;

屬性值:(該屬性默認不換行,如果主軸上的內(nèi)容足夠多,會對內(nèi)容起到擠壓的作用,就會一直在一排,無論內(nèi)容有多少,都不會換行)

wrap 換行nowrap 不換行

position定位

靈活地改變盒子在頁面中的位置

相對定位

屬性值:relative

不脫標原圖片位置任然有占位效果

絕對定位

屬性值:absolute

脫標不具有占位效果絕對定位會改變元素的顯示模式,寬高會生效

定位居中

固定定位

屬性值:fixed? 脫標不占行?一直在頁面中顯示,固定定位具有行內(nèi)塊的特點? ?行內(nèi)塊靠內(nèi)容撐開,需要寬自己加

圖片疊加順序

使用position屬性將圖片設置為相對或絕對定位，然后使用z-index屬性來調(diào)整它們的疊放順序。

屬性值可以為做以下參考:

z-index: 1;：將元素置于默認層級之上。z-index: 0;：將元素置于默認層級。z-index: -1;：將元素置于默認層級之下

CSS小精靈

div {

width: 112px;

height: 110px;

background-color:pink;

background-image:url(./images/abcd.jpg)

background-position:-256px -276pX;

}

使用該被背景圖片,可以把N準確的顯示出來

字體圖標

在iconfont網(wǎng)站下載所需要的圖標,將下載文件夾引入到VScode中,然后再引入iconfont.css文件,在html中class? ?iconfont和圖標名(在fontclass中復制就可以了),就可以實現(xiàn)小圖標的使用了

垂直對齊方式

屬性名:vertical-align

過渡 transition

透明度 opacity

設置整個元素的透明度,屬性值:0-1

光標類型 cursor

transform 平面轉(zhuǎn)換

為元素添加動態(tài)效果,一般與過度配合使用,改變合照在平面內(nèi)的形態(tài)(位移,旋轉(zhuǎn),縮放,傾斜)

平面轉(zhuǎn)換-平移

屬性 transform:translate(x軸平移距離,y軸平移距離)

取值:像素單位數(shù)值,百分比, (參照盒子自身尺寸)??

平面轉(zhuǎn)換-旋轉(zhuǎn)

屬性 transform:rotate(旋轉(zhuǎn)角度)? ?角度單位是deg

技巧:取值正負均可,正順負逆

平面轉(zhuǎn)換-改變轉(zhuǎn)換原點

默認情況下,轉(zhuǎn)換位置是盒子中心點

屬性: transform-origin:水平原點位置 垂直原點位置

方位名詞百分比像素單位數(shù)值

平面轉(zhuǎn)換-縮放

屬性:

transform:scale(縮放倍數(shù))transform:scale(X軸縮放倍數(shù),Y軸縮放倍數(shù));

縮放倍數(shù)值大于1放大,小于1縮小

平面轉(zhuǎn)換-傾斜

transform:skew();

角度度數(shù)deg

想要實現(xiàn)多重轉(zhuǎn)換必須用一個transform復合屬性

想要同時實現(xiàn)平移和旋轉(zhuǎn)效果先平移后旋轉(zhuǎn)

漸變

線性漸變

徑向漸變(一個圓點向外散發(fā))

終點位置用百分比,表示占位多少

空間轉(zhuǎn)換

xyz三條坐標軸構(gòu)成了一個立體空間,z與視線方向相同

屬性值transform(x,y,z)

空間轉(zhuǎn)換-縮放

復合寫法 scale3D(x,y,z)

分開寫

scaleX()? ?scaleY()?scaleZ()?

空間-旋轉(zhuǎn)

屬性

transform:rotate()關于z軸旋轉(zhuǎn),關于平面旋轉(zhuǎn)xoytransform:rotate()關于x旋轉(zhuǎn),平面zoytransform:rotate()關于y軸旋轉(zhuǎn),平面zoxrotate3d(x,y,z,角度度數(shù)) 用來設置自定義旋轉(zhuǎn)角度 其中x,y,z取0-1之間的數(shù)值

立體呈現(xiàn)-transform-style(該屬性設置在父級上)

作用:設置元素的子元素是位于3D空間中還是位于平面中

flat :子級處于平面中persevere:子級位于3D空間中

視距屬性

?指定觀察者與z-0平面的距離,,為元素添加透視效果近大遠小,近實遠虛

屬性:perspective:視距,(添加給父級,只能是父級取值范圍800-1200)

動畫-animation

實現(xiàn)兩個狀態(tài)間的變化過程, 可操控(重復播放,最終畫面,是否暫停)

定義動畫(兩種)

使用動畫?

animation:動畫名稱 動畫時長

animation復合屬性 :

animatio:動畫名稱 動畫時長 速度曲線 延長時間 重復次數(shù) 動畫方向 執(zhí)行完畢時狀態(tài)(提示 動畫名稱和動畫時長必須賦值 2 取值不分先后 3 如果有兩個時間值 第一個表示時長 第二個表示延遲時間)

?代碼演示:

多組動畫

在每組中加一個,即可

手機端移動適配方案

通過網(wǎng)頁檢查從而實現(xiàn)手機端的配置(正常情況下我們制作手機端大多都是以寬為375為標準開始制作的)

rem適配方案

要想實現(xiàn)移動端效果,我們就要所有單位都換成rem,不能使用數(shù)字+px

html的標簽字號應該設置為網(wǎng)頁寬度的1/10?

如果要使用rem從而實現(xiàn)移動端的配置,我們需要配合媒體查詢才能實現(xiàn)

書寫媒體屬性時,min-width(從小到大)? max-width(從大到小)順序不要亂

當我們的需求很多時,我們就要寫很多媒體查詢屬性,會很麻煩,這時我們就可以引用js文件不在使用媒體查詢就可以實現(xiàn)我們rem的移動端實現(xiàn)了

?JS的下載可以在我的是一個博客bootstrap文件里面找前端-Bootstrap-的下載和使用-CSDN博客

但是還是面臨一個很大的問題,就是當我們細寫某一個尺寸時,我們就要通過計算機算出我們需要的值然后再填寫進去,就會很麻煩,所以為了更加方便進行計算,我們可以用less來寫我們的css文件

less

注釋

單行注釋

語法:// 注釋內(nèi)容快捷鍵:ctrl +/

塊注釋

語法:/* 注釋內(nèi)容 */快捷鍵: Shift + Alt +A

css不支持//注釋,所以less轉(zhuǎn)成css時候只有塊注釋

VScode插件 Easy LESS(這樣我們寫的less文件就可以自動生成css文件)

less支持加減乘除的運算,除法比較特殊

less文件導入(less文件導入less文件)

less文件導出

less禁止導出

less變量

概念: 容器，存儲數(shù)據(jù) 作用: 存儲數(shù)據(jù)，方便使用和修改 語法:

定義變量:@變量名:數(shù)據(jù);使用變量:CSS屬性:@變量名;

vm與vw適配方案

不需要引入JS就可以使用

vw 布局(當我們寫相對大小時vw與vm不混用,我們一般使用vw)

確定設計稿對應的vw尺寸(1/100視口寬度)查看設計稿寬度?確定參考設備寬度 (視口寬度)?確定 vw 尺寸 (1/100 視口寬度)vw單位的尺寸=px 單位數(shù)值/(1/100 視口寬度)

OK家人們到這里就講完了,如果覺得我講的還不錯,請給我一個免費的贊吧,非常感謝支持

柚子快報激活碼778899分享：前端 CSS

http://yzkb.51969.com/

文章鏈接