亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端之CSS

raise_yang / 618人閱讀

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

目錄

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

一.css三種引用方式

1.行間式

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



    
    Document

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

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



    
    Document

3.外聯(lián)式

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



    
    Document

css文件(01.css)

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

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

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

二.樣式與長度顏色

1.基本樣式

2.長度

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

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

3.顏色

  • 英文單詞:如red,green,yellow等
  • rgb():r表示red,g表示green,b表示bule,色彩三原色,三個值可為[0-255]數(shù)值或百分比,以逗號相隔
  • rgba():前三個值可為像素或百分比,最后一個為[0,1]數(shù)值,表示透明度
  • hsl():h為Hue,表示色相,s為Saturation,表示飽和度,l為Lightness,表示明度,第一個值為[0,360]數(shù)值,后兩個值為百分比
  • 在#后跟六個十六進制數(shù),如#AABBCC,每兩位一整體,分別表示色彩三原色,可以簡寫為#abc

三.常用樣式

1.字體樣式

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

2.文本樣式

  • color:文本顏色
  • text-decoration:字劃線 underline下劃線/line-through中劃線/overline上劃線
  • letter-spacing:字間距
  • word-spacing:詞間距
  • text-align:文本對齊方式.橫向排列 left居左/center居中/right居右
  • vertical-align：縱向排列
baseline：將支持valign特性的對象的內(nèi)容與基線對齊 
sub：垂直對齊文本的下標(biāo) 
super：垂直對齊文本的上標(biāo) 
top：將支持valign特性的對象的內(nèi)容與對象頂端對齊 
text-top：將支持valign特性的對象的文本與對象頂端對齊 
middle：將支持valign特性的對象的內(nèi)容與對象中部對齊 
bottom：將支持valign特性的對象的文本與對象底端對齊 
text-bottom：將支持valign特性的對象的文本與對象底端對齊
  • word-break:自動換行 normal默認換行規(guī)則/break-all允許在單詞內(nèi)換行
  • text-transform:英文字母大小寫的轉(zhuǎn)換 capitalize首字母大寫/upercase所有字母大寫/lowercase所有字母小寫
  • text-indent:可以控制段落的首行縮進與縮進的距離
  • 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:背景定位,該屬性將使用兩個通過空格分隔的值,指定了圖像的水平(x)和垂直(y)坐標(biāo),該屬性可以接收不同的值類型

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: 這將把背景修改為頁面視圖，因此它將在頁面滾動時滾動。
fixed: 不管你是滾動頁面還是背景設(shè)置的元素，它都會保持在相同的位置。
local:當(dāng)滾動元素時，背景會隨之滾動。

background:背景簡寫,將背景屬性設(shè)置在一個聲明中

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{}會匹配文檔中全部div

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

類選擇器

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

.red{
    color:red
}
如:會匹配red類選擇器

id選擇器

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

#div{
    text-align:center;
}
如:

均會匹配到名為div的id選擇器

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/1778.html

相關(guān)文章

  • 【前端Talkking】CSS系列——CSS深入理解之relative定位

    摘要：前言在前面的兩篇文章深入理解之浮動和深入理解之定位中，介紹了和的特性和使用方法，如果大家仔細閱讀完了這兩篇文章，相信你的打怪技能又提高的一大截，那么趁著自己最近狀態(tài)不錯，就多給大家分享點自己平時所學(xué)的技能。 1.前言 在前面的兩篇文章：CSS深入理解之float浮動和CSS深入理解之a(chǎn)bsolute定位中，介紹了float和absolute的特性和使用方法，如果大家仔細閱讀完了這兩篇文...

    魏憲會 評論0 收藏0

  • 淺談網(wǎng)站性能之前端性能優(yōu)化

    摘要：淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請求數(shù)量基本原理在瀏覽器與服務(wù)器進行通信時，主要是通過進行通信。 最近項目慢慢走上正軌，需求趨于平穩(wěn)，這才想起需要對整站進行性能優(yōu)化。經(jīng)過一段時間的學(xué)習(xí)，結(jié)合現(xiàn)在項目的實際性能情況，發(fā)現(xiàn)確實有許多地方可以進行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...

    Winer 評論0 收藏0

  • 淺談網(wǎng)站性能之前端性能優(yōu)化

    摘要：淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請求數(shù)量基本原理在瀏覽器與服務(wù)器進行通信時，主要是通過進行通信。 最近項目慢慢走上正軌，需求趨于平穩(wěn)，這才想起需要對整站進行性能優(yōu)化。經(jīng)過一段時間的學(xué)習(xí)，結(jié)合現(xiàn)在項目的實際性能情況，發(fā)現(xiàn)確實有許多地方可以進行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...

    philadelphia 評論0 收藏0

  • 前端之CSS基礎(chǔ)學(xué)習(xí)

    摘要：上面五個問題就是我總結(jié)的基礎(chǔ)概念，學(xué)習(xí)過程中一定要把它們弄明白別忘了有哦。 請帶著以下幾個問題進行學(xué)習(xí) CSS是什么 CSS的引用方式 CSS選擇器 CSS優(yōu)先級 CSS盒模型 基礎(chǔ)知識學(xué)習(xí)和實例演練教程 MDN中css教程CSS基礎(chǔ)學(xué)習(xí)教程（css快速入門）CSS參考手冊（便于了解更多css屬性）CSS3教程（適用于移動端開發(fā)的css新特性） 入門學(xué)習(xí)，一定要快，沒有必要花大量時...

    Hwg 評論0 收藏0

  • 前端編碼規(guī)范之：樣式（scss）編碼規(guī)范

    摘要：前端編碼規(guī)范之使用規(guī)范前端編碼規(guī)范之樣式編碼規(guī)范前端編碼規(guī)范之結(jié)構(gòu)規(guī)范前端編碼規(guī)范之最佳實踐前端編碼規(guī)范之編碼規(guī)范命名的原則是通俗易懂，盡量保持不重復(fù)沖突，盡量不要用。我覺得應(yīng)該避免出現(xiàn)出現(xiàn)這種方式用預(yù)處理器拼接出來的名稱，會生成。 前端編碼規(guī)范之：Git使用規(guī)范 前端編碼規(guī)范之：樣式（scss）編碼規(guī)范 前端編碼規(guī)范之：HTML結(jié)構(gòu)規(guī)范 前端編碼規(guī)范之：Vue最佳實踐 前端編碼規(guī)范...

    reclay 評論0 收藏0

  • 前端每周清單第 48 期：Slack Webpack 構(gòu)建優(yōu)化，CSS 命名規(guī)范與用戶追蹤，Vue.

    摘要：發(fā)布是由團隊開源的，操作接口庫，已成為事實上的瀏覽器操作標(biāo)準(zhǔn)。本周正式發(fā)布，為我們帶來了，，支持自定義頭部與腳部，支持增強，兼容原生協(xié)議等特性變化。新特性介紹日前發(fā)布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...

    sean 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<