前端之CSS

raise_yang 發布于2019-04-23 13:22 / 533人閱讀

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

一.css三種引用方式
- 1.行間式
- 2.內聯式
- 3.外聯式
- 4.三種方式的優先級
二.樣式與長度顏色
- 1.基本樣式
- 2.長度
- 3.顏色
三.常用樣式
- 1.字體樣式
- 2.文本樣式
- 3.背景樣式
四.CSS選擇器
- 1.基礎選擇器
- 2.基礎選擇器優先級

一.css三種引用方式

1.行間式

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




    
    Document

2.內聯式

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




    
    Document

3.外聯式

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




    
    Document

css文件(01.css)

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

4.三種方式的優先級

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

二.樣式與長度顏色

1.基本樣式

2.長度

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

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

3.顏色

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

三.常用樣式

1.字體樣式

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

2.文本樣式

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

baseline：將支持valign特性的對象的內容與基線對齊 
sub：垂直對齊文本的下標 
super：垂直對齊文本的上標 
top：將支持valign特性的對象的內容與對象頂端對齊 
text-top：將支持valign特性的對象的文本與對象頂端對齊 
middle：將支持valign特性的對象的內容與對象中部對齊 
bottom：將支持valign特性的對象的文本與對象底端對齊 
text-bottom：將支持valign特性的對象的文本與對象底端對齊

word-break:自動換行 normal默認換行規則/break-all允許在單詞內換行
text-transform:英文字母大小寫的轉換 capitalize首字母大寫/upercase所有字母大寫/lowercase所有字母小寫
text-indent:可以控制段落的首行縮進與縮進的距離
margin:設置段落之間的距離

3.背景樣式

background-color:設置背景顏色

background-image:指定在元素的背景中出現的背景圖片

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

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

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

background-attachment:背景附著

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

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

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.基礎選擇器

通配選擇器

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

*{
    border:solid
}

標簽選擇器

? 匹配文檔中所有與標簽名匹配的標簽:如div{}會匹配文檔中全部div

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

類選擇器

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

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

id選擇器

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

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

2.基礎選擇器優先級

基礎選擇器優先級大致與選擇器匹配范圍成反比，匹配范圍越小，優先級越高
基礎選擇器優先級大致與選擇器匹配精度成正比，匹配精度越高，優先級越高
基礎選擇器優先級：id選擇器 > 類選擇器 > 標簽選擇器 > 通配選擇器

云服務器 GPU云服務器前端css css前端前端css框架浮動-前端-css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1778.html

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

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

魏憲會 2019-08-29 15:25 評論0 收藏0
淺談網站性能之前端性能優化

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

Winer 2019-08-20 11:04 評論0 收藏0
淺談網站性能之前端性能優化

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

philadelphia 2019-08-01 15:44 評論0 收藏0
前端之CSS基礎學習

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

Hwg 2019-08-29 12:32 評論0 收藏0
前端編碼規范之：樣式（scss）編碼規范

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

reclay 2019-08-29 16:58 評論0 收藏0
前端每周清單第 48 期：Slack Webpack 構建優化，CSS 命名規范與用戶追蹤，Vue.

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

sean 2019-08-22 13:57 評論0 收藏0