前端之CSS

raise_yang 發(fā)布于2019-04-23 13:22 / 563人閱讀

摘要：不管你是滾動(dòng)頁(yè)面還是背景設(shè)置的元素，它都會(huì)保持在相同的位置。當(dāng)滾動(dòng)元素時(shí)，背景會(huì)隨之滾動(dòng)。

一.css三種引用方式
- 1.行間式
- 2.內(nèi)聯(lián)式
- 3.外聯(lián)式
- 4.三種方式的優(yōu)先級(jí)
二.樣式與長(zhǎng)度顏色
- 1.基本樣式
- 2.長(zhǎng)度
- 3.顏色
三.常用樣式
- 1.字體樣式
- 2.文本樣式
- 3.背景樣式
四.CSS選擇器
- 1.基礎(chǔ)選擇器
- 2.基礎(chǔ)選擇器優(yōu)先級(jí)

一.css三種引用方式

1.行間式

1.在標(biāo)簽頭部的style屬性內(nèi)
2.屬性值滿足css語(yǔ)法
3.屬性值用key:value形式賦值
4.屬性值之間用";"號(hào)隔開(kāi)




    
    Document

2.內(nèi)聯(lián)式

1.在style標(biāo)簽內(nèi)(style標(biāo)簽一般作為head的子標(biāo)簽)
2.屬性值滿足css語(yǔ)法
3.屬性值用key:value形式賦值
4.屬性值之間用";"號(hào)隔開(kāi)
5.格式:選擇器{樣式塊}




    
    Document

3.外聯(lián)式

1.在外部css文件中
2.屬性值滿足css語(yǔ)法
3.屬性值用key:value形式賦值
4.屬性值之間用";"號(hào)隔開(kāi)
5.格式:選擇器{樣式塊}
6.將html與css文件建立聯(lián)系,通過(guò)link標(biāo)簽鏈接外部css(一般出現(xiàn)在head中)




    
    Document

css文件(01.css)

div{
    width: 200px;
    height: 200px;
    background-color: green;
}

4.三種方式的優(yōu)先級(jí)

? 三種方式間沒(méi)有優(yōu)先級(jí),三種方式協(xié)同布局,不重復(fù)的屬性都可以存在,重復(fù)的屬性采用覆蓋賦值,保留最后位置的屬性值,行間式一定是邏輯上最后被解析的,!important會(huì)影響解析順序.

二.樣式與長(zhǎng)度顏色

1.基本樣式

2.長(zhǎng)度

px:像素(pixel),屏幕上顯示的最小單位
mm:毫米
cm:厘米
in:英寸
pt:點(diǎn)(point),一個(gè)標(biāo)準(zhǔn)的長(zhǎng)度單位,1in = 72pt
em:相對(duì)長(zhǎng)度,1em=16px

推薦使用px(像素)作為網(wǎng)頁(yè)制作單位

3.顏色

英文單詞:如red,green,yellow等
rgb():r表示red,g表示green,b表示bule,色彩三原色,三個(gè)值可為[0-255]數(shù)值或百分比,以逗號(hào)相隔
rgba():前三個(gè)值可為像素或百分比,最后一個(gè)為[0,1]數(shù)值,表示透明度
hsl():h為Hue,表示色相,s為Saturation,表示飽和度,l為L(zhǎng)ightness,表示明度,第一個(gè)值為[0,360]數(shù)值,后兩個(gè)值為百分比
在#后跟六個(gè)十六進(jìn)制數(shù),如#AABBCC,每?jī)晌灰徽w,分別表示色彩三原色,可以簡(jiǎn)寫(xiě)為#abc

三.常用樣式

1.字體樣式

font-size:字體大小
font-weight:字重,就是字體粗細(xì) bold加粗/normal正常/lighter加細(xì)/100~900
line-height:行高.設(shè)置時(shí)大于等于字體大小,字體在行高中垂直居中顯示
font-style:字體風(fēng)格 normal正常/italic斜體
font-family:字族,設(shè)置字體類(lèi)型,可設(shè)置多個(gè)值,如果前面的字體不存在或不起作用,會(huì)選擇后面的字體
font:字重風(fēng)格大小/行高字族

2.文本樣式

color:文本顏色
text-decoration:字劃線 underline下劃線/line-through中劃線/overline上劃線
letter-spacing:字間距
word-spacing:詞間距
text-align:文本對(duì)齊方式.橫向排列 left居左/center居中/right居右
vertical-align：縱向排列

baseline：將支持valign特性的對(duì)象的內(nèi)容與基線對(duì)齊 
sub：垂直對(duì)齊文本的下標(biāo) 
super：垂直對(duì)齊文本的上標(biāo) 
top：將支持valign特性的對(duì)象的內(nèi)容與對(duì)象頂端對(duì)齊 
text-top：將支持valign特性的對(duì)象的文本與對(duì)象頂端對(duì)齊 
middle：將支持valign特性的對(duì)象的內(nèi)容與對(duì)象中部對(duì)齊 
bottom：將支持valign特性的對(duì)象的文本與對(duì)象底端對(duì)齊 
text-bottom：將支持valign特性的對(duì)象的文本與對(duì)象底端對(duì)齊

word-break:自動(dòng)換行 normal默認(rèn)換行規(guī)則/break-all允許在單詞內(nèi)換行
text-transform:英文字母大小寫(xiě)的轉(zhuǎn)換 capitalize首字母大寫(xiě)/upercase所有字母大寫(xiě)/lowercase所有字母小寫(xiě)
text-indent:可以控制段落的首行縮進(jìn)與縮進(jìn)的距離
margin:設(shè)置段落之間的距離

3.背景樣式

background-color:設(shè)置背景顏色

background-image:指定在元素的背景中出現(xiàn)的背景圖片

background-repeat:背景重復(fù),通常配合background-image使用 no-repeat圖片不重復(fù)/repeat-x圖片水平地重復(fù)/repeat-y圖片垂直地重復(fù)

background-position:背景定位,該屬性將使用兩個(gè)通過(guò)空格分隔的值,指定了圖像的水平(x)和垂直(y)坐標(biāo),該屬性可以接收不同的值類(lèi)型

background-position:200px 25px
background-position:60% 35%
/*關(guān)鍵字 top|bottom|left|right|center*/
background-position:right top

background-attachment:背景附著

background-attachment:scroll|fixed|local;
scroll: 這將把背景修改為頁(yè)面視圖，因此它將在頁(yè)面滾動(dòng)時(shí)滾動(dòng)。
fixed: 不管你是滾動(dòng)頁(yè)面還是背景設(shè)置的元素，它都會(huì)保持在相同的位置。
local:當(dāng)滾動(dòng)元素時(shí)，背景會(huì)隨之滾動(dòng)。

background:背景簡(jiǎn)寫(xiě),將背景屬性設(shè)置在一個(gè)聲明中

body {
  background:
     url(a.jpg)               /* image */
     top center / 200px 200px /* position / size */
     no-repeat                /* repeat */
     fixed                    /* attachment */
     padding-box              /* origin */
     content-box              /* clip */
     red;                     /* color */
}

四.CSS選擇器

1.基礎(chǔ)選擇器

通配選擇器

? 匹配文檔中所有標(biāo)簽,指html.body以及body中所有具有顯示效果的標(biāo)簽.

*{
    border:solid
}

標(biāo)簽選擇器

? 匹配文檔中所有與標(biāo)簽名匹配的標(biāo)簽:如div{}會(huì)匹配文檔中全部div

div{
    color:green;
    font-size:20px;
}

類(lèi)選擇器

? 匹配文檔中所有擁有class屬性且class屬性值為類(lèi)選擇器名的標(biāo)簽

.red{
    color:red
}
如:會(huì)匹配red類(lèi)選擇器

id選擇器

? 匹配文檔中所有擁有id屬性且屬性值為id選擇器名的標(biāo)簽

#div{
    text-align:center;
}
如:
均會(huì)匹配到名為div的id選擇器

2.基礎(chǔ)選擇器優(yōu)先級(jí)

基礎(chǔ)選擇器優(yōu)先級(jí)大致與選擇器匹配范圍成反比，匹配范圍越小，優(yōu)先級(jí)越高
基礎(chǔ)選擇器優(yōu)先級(jí)大致與選擇器匹配精度成正比，匹配精度越高，優(yōu)先級(jí)越高
基礎(chǔ)選擇器優(yōu)先級(jí)：id選擇器 > 類(lèi)選擇器 > 標(biāo)簽選擇器 > 通配選擇器

云服務(wù)器 GPU云服務(wù)器前端css css前端前端css框架浮動(dòng)-前端-css

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1778.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

raise_yang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

刪除tensorflow環(huán)境

閱讀 2624·2023-04-25 20:50
安裝指定版本的tensorflow

閱讀 4019·2023-04-25 18:45
性能優(yōu)化 | Go Ballast 讓內(nèi)存控制更加絲滑

閱讀 2253·2021-11-17 17:00
德國(guó)IT安全監(jiān)管機(jī)構(gòu)審查小米手機(jī)

閱讀 3362·2021-10-08 10:05
力軟移動(dòng)框架 ionic cordova插件jpush-phonegap-plugin 極光推送配置

閱讀 3108·2019-08-30 15:55
前端面試每日 3+1 —— 第131天

閱讀 3530·2019-08-30 15:44
簡(jiǎn)單動(dòng)態(tài)啟停圖 js jquery css3

閱讀 2381·2019-08-29 13:51
前端工程師的知識(shí)體系

閱讀 1142·2019-08-29 12:47

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！