前端——CSS

時間 2020-02-19

標籤前端 css 欄目 CSS 简体版

原文原文鏈接

　　CSS全稱爲層疊樣式表(Cascading Style Sheets)，與HTML相輔相成，CSS負責實現網頁的排版佈局與樣式美化，使用CSS樣式建議在當前文件夾下建立一個CSS文件夾, 而後在CSS文件夾在建立.css文件, 在css文件中填寫網頁的樣式。css

樣式特徵

層疊性: 多組CSS樣式共同做用於一個元素html

繼承性: 後代元素能夠繼承祖先元素中的某些樣式例 : 大部分的文本屬性均可以被繼承小程序

樣式表的優先級: 優先級用來解決樣式衝突問題。同一個元素的同一個樣式(例如文本色)，在不一樣地方屢次進行設置，哪種樣式表的優先級高選用哪種。後端

離元素最近的樣式優先級最高（就近原則）
文檔內嵌與外鏈樣式表，優先級一致，看代碼書寫順序，後來者居上
瀏覽器默認樣式和繼承樣式優先級較低

　　CSS樣式分爲行內樣式（也稱爲內聯樣式），主要在單個頁面中使用，還有就是內嵌樣式以及外鏈樣式。內嵌樣式用的最多，外鏈樣式主要用在項目當中，接下來咱們詳細瞭解一下。api

樣式表

插入樣式表的方法有三種：瀏覽器

行內樣式
內嵌樣式表
外鏈樣式

行內樣式

　　藉助於HTML中style標籤屬性，爲當前的標籤元素添加樣式聲明，行內樣式的style值由字符串包含CSS屬性和值得鍵值對組成。網絡

<標籤名 style="屬性:值;屬性:值;">
<div style="background-color:red;color: white">容器</div>

內嵌樣式

　　內嵌樣式在單個網頁中是用的比較多的。有了內嵌樣式，咱們就不須要在html標籤中填寫樣式，那樣會顯得html代碼濃重，影響觀看閱讀代碼，而經過內嵌樣式，在<head>標籤中嵌入CSS樣式代碼。在<style>中經過CSS選擇器匹配到HTML代碼中對應的標籤元素。能夠實現樣式代碼和HTML標籤代碼分離，讓代碼看起來更加美觀。前後端分離

 <style>
    選擇器{
          屬性:值;
          屬性:值;
        }
 </style>

外鏈樣式

　　外部連接CSS樣式，多用於大型的項目網站中，用外部連接CSS樣式能夠實現先後端分離。若是使用外部連接樣式須要在當前文件夾中建立css文件夾，而後把後綴名爲.css的樣式文件放進去。最後在HTML文件中使用<link>標籤引入外部樣式表，外部樣式文件中一樣藉助選擇器匹配元素應用樣式ssh

<link rel="stylesheet" href="CSS URL" type="text/css">

優先級：行內樣式 > 內嵌樣式 > 外鏈樣式 > 瀏覽器默認樣式ide

CSS 選擇器

　　經過元素名、類名、id名選擇到頁面中選取相應的元素標籤，爲其添加CSS樣式

* 號選擇器

表明全部

/*去除全部標籤元素的內外邊框值*/
*{
   margin:0;
   padding:0;
}

標籤選擇器

根據標籤名匹配文檔中全部該標籤元素樣式:

標籤名{
  　　  屬性:值;
　　  }
/*爲全部p標籤添加樣式*/
p{
    color: red;
}

id選擇器

　　ID選擇器能夠根據元素的 id 屬性值匹配文檔中唯一的標籤元素，而後指定樣式。

CSS 中 id 選擇器以 "#" 來定義。

#標籤id名{
    屬性:值;
}
/*例如*/
#div2{
   color:red;
}

注意 : 元素id具備惟一性，不能使用相同的ID名；標籤id名能夠由數字，字母，下劃線，- 組成，不能以數字開頭; 儘可能見名知意，多個單詞組成時，可使用鏈接符，下劃線，小駝峯表示。

class選擇器/類選擇器

　　根據元素的class屬性值匹配相應的元素,class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class能夠在多個元素中使用，實現多個標籤相一樣式的複用。

CSS 中 class 選擇器以 "." 來定義。

.元素class名{
    屬性:值;
}
/*例如*/
.blue{
   color:red;
}

特殊用法 :

類選擇器與其餘選擇器結合使用時，標籤在前, 類選擇器在後例 : a.c1{ }
class屬性值能夠寫多個，共同應用類選擇器的樣式例 : .c1{ } .c2{ }

羣組選擇器

　　爲一組標籤元素設置統一的樣式，不用類別之間用逗號「，」分隔。

選擇器1,選擇器2,選擇器3{ 
 
}

條件後代選擇器

　　條件後代選擇器：匹配在知足條件選擇器的狀況下的全部後代元素(包含直接子元素和間接子元素)，後代選擇器與父代選擇器用空格隔開。

/*匹配"選擇器1"中全部知足"選擇器2"的後代標籤元素*/
選擇器1 選擇器2{

}

子代選擇器

　　父代選擇器與子代選擇器用" > "號鏈接，匹配知足選擇器的全部直接子代元素

父代選擇器>子代選擇器{

}

僞類選擇器

爲元素的不一樣狀態分別設置樣式，僞類選擇器必須與基礎選擇器結合使用

:nth-child(n)　　匹配屬於其父元素的第 n 個子元素，不論元素的類型。
p:first-child　　匹配第一個p元素
:link 超連接訪問前的狀態
:visited 超連接訪問後的狀態
:hover 鼠標滑過期的狀態
:active 鼠標點下去可是不擡起時的狀態(激活)
:focus 焦點狀態(文本框被編輯時就稱爲獲取焦點)
:after　　在元素以後添加內容，配合content屬性使用

/*第一個div元素*/
div:nth-child(1){
    }
/*超連接訪問前的狀態*/
a:link{
    }
/*超連接訪問後的狀態*/
a:visited{
    }
/*鼠標滑過期的狀態*/
.c1:hover{ 
    }
/*每一個<p>元素以後插入內容*/
p:after
{
  content:"要添加的內容"  
}

注意 :

超連接若是須要爲四種狀態分別設置樣式,必須按照如下順序書寫

  :link　　　　　　 /*訪問前*/
  :visited　　　　 /*訪問後*/
  :hover　　　　　  /*鼠標滑過期*/
  :active　　　　  /*鼠標點下去可是不擡起來*/

屬性選擇器

　　根據屬性來選擇元素的選擇器。

選擇包含屬性 title 的全部元素

[title]
{
    color:blue;
}

選擇包含屬性 title="never" 的全部元素

[title=never]
{
    border:5px solid green;
}

選擇title屬性值包含hello的全部元素，使用（~）分隔屬性和值:

[title~=hello] { color:blue; }

選擇器的優先級

　　使用選擇器爲元素設置樣式，發生樣式衝突時，主要看選擇器的權重，權重越大，優先級越高

選擇器	權重
標籤選擇器	1
(僞)類選擇器	10
id選擇器	100
行內樣式	1000

　　複雜選擇器(後代,子代,僞類)最終的權重爲各個選擇器權重值之和，羣組選擇器權重以每一個選擇器單獨的權重爲準，不進行相加計算例 :

/*羣組選擇器之間互相獨立，不影響優先級*/
body,h1,p{ /*標籤選擇器權重爲 1 */
 color:red;
}
.c1 a{ /*當前組合選擇器權重爲 10+1  */
 color:green;
}
#d1>.c2{ /*當前組合選擇器權重爲 100+10 */
 color:blue;
}

元素的尺寸和顏色

元素的尺寸

px 像素單位
% 百分比相對父元素
em 相對單位 1 em=16px 一般用於移動端的頁面開發經常使用1.5em
rpx 小程序頁面的單位

當頁面元素的內容大小超出了元素的寬度，可使用 overflow 屬性來解決超出部分的顯示方式，建議使用auto;

顏色

元素的字體，背景，邊框都會使用到顏色。使用方式 color:red;

顏色有如下幾種表達方法：

英文單詞 red
rgb：R G B 是紅藍綠三基色, 三個值的大小分別在(0~225)之間，
rgba: a是透明度值在(0~1)之間。a的值越小，越透明。
長16進製表明顏色：#ffffff; #000000
短16進製表明顏色：#fff;#000

盒子模型

　　盒模型是針對塊元素的，由於每個塊元素就至關於一個盒子，有邊框(border)、外邊距(margin)和內邊距(padding)。

在容器模型中，它規定了元素處理內容、內邊距、邊框和外邊距的大小
最裏面是內容，包圍內容的是內邊距，內邊距的邊緣是邊框
邊框之外是外邊距，外邊距默認是透明的

盒模型相關的屬性會影響元素在文檔中的實際佔位，進而影響佈局

邊框

border:width style color;

當border-color設置爲transparent時，爲透明，隱藏邊框。

邊框樣式border-style屬性經常使用的取值：

solid：實線邊框
dotted：點線邊框
dashed：虛線邊框
double：雙線邊框

CSS邊框屬性容許單獨設置某一方向的邊框屬性

border-top：設置上邊框
border-bottom：設置下邊框
border-left：設置左邊框
border-right：設置右邊框

一些特殊的邊框案例：

網頁三角標製做：標籤元素設置寬高爲0、統一設置四個方向透明邊框、調整某個方向邊框顏色

width: 0;
height: 0;
margin: 0 auto;
border: 50px solid blue;
border-bottom-color:transparent; 
border-left-color:transparent;
border-right-color:transparent;

圓角邊框：border-radius 指定邊框角的圓角半徑

width: 0;
height: 0;
border: 50px solid red;
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: green;

當border-radius爲長寬的一半時，就是圓了，若是要設置圓角邊框能夠把邊框圓半徑border-radius的值設置小一點。

當某個屬性能夠取四個方向的值得時候，分別對應如下規律，

一個值表示統一設置上右下左
兩個值表示分別設置上下左右
三個值表示分別設置上右下，左右保持一致
四個值表示分別設置上右下左

能夠取四個值得經常使用屬性有：border-style、border-width 、 border-color、padding、margin。

輪廓線

屬性：outline

取值：width style color

線邊框實際佔位，輪廓不佔位，取none能夠取消文本輸入框默認輪廓線

盒陰影

屬性：box-shadow

取值：h-shadow v-shadow blur spread color;

h-shadow 取像素值，陰影的水平偏移距離
v-shadow 取像素值，陰影的垂直偏移距離
blur 取像素值，表示陰影的模糊程度，值越大越模糊
spread 選填，取像素值，陰影的尺寸
color 設置陰影顏色,默認爲黑色

內邊距

屬性：padding

做用：調整元素內容框與邊框之間的距離

取值：單位是 px 或百分比，但不容許使用負值。內邊距padding支持上右下左取值。

內邊距也能夠單方向取值：padding-top、padding-right、padding-bottom、padding-left

外邊距

屬性：margin

做用：調整本元素與其餘元素之間的距離

margin:0; 取消默認外邊距

margin:0 auto; 左右自動外邊距，實現元素在父元素範圍內水平居中

margin:-10px;元素位置的微調

內邊距也能夠單方向取值：margin-top、margin-right、margin-bottom、margin-left

外邊距合併問題：當一個元素包含在另外一個元素中時，它們的上和包含上/或下和包含下外邊距也會發生合併。元素之間同時設置垂直方向的外邊距，最終取較大的值包含合併

盒模型最終尺寸的計算= width/height+padding+border+margin

頁面佈局

默認佈局方式，按照代碼書寫順序及標籤類型從上到下，從左到右依次顯示

定位佈局 position

結合定位屬性調整元素的顯示位置

position: static;

屬性值：

static：默認，沒有定位
fixed（固定定位）：參照瀏覽器窗口進行定位,不跟隨網頁滾動而滾動；
relative（相對定位）：可參照元素在文檔中的原始位置進行偏移
absolute（絕對定位）：參照離他最近的已經定位的祖先元素進行偏移,若是沒有,則參照窗口進行偏移；在文檔中不佔位,能夠手動設置寬高

設置好定位後，就能夠開始設置偏移屬性了，設置定位的元素可使用偏移屬性調整距離參照物的位置

top 距參照物的頂部
right 距參照物的右側
bottom 距參照物的底部
left 距參照物的左側

h2.pos_top
{
    position:relative;
    top:-50px;
}

通常狀況才採用 "父相子絕" : 父元素設置相對定位,子元素絕對定位，參照已定位的父元素偏移。

重疊次序

元素髮生堆疊時可使用 z-index 屬性調整已定位元素的顯示位置，值越大元素越靠上：

屬性 : z-index

取值 : 無單位的數值,數值越大,越靠上

堆疊規則：

定位元素與文檔中正常元素髮生堆疊，永遠是已定位元素在上
同爲已定位元素髮生堆疊，按照 HTML 代碼的書寫順序，後來者居上

溢出佈局 overflow

　　overflow：用於控制內容溢出元素框時顯示的方式。

屬性值：

visible：默認值，不會修剪，內容會呈如今元素框以外
hidden：內容會被修剪，其他內容不可見
scroll：多出內容以滾動條形式查看
auto：會自動選擇，若是內容被修剪，多出部分以滾動條形式呈現

注意:overflow 屬性只工做於指定高度的塊元素上。

浮動佈局 float

主要用於設置塊元素的水平排列，因此若是要使用float，要把元素變成塊元素display:block;，或者元素已是塊元素。

屬性值：

float: left;　　設置元素向左浮動
float: right;　　設置元素向右浮動

特色

元素設置浮動會從原始位置脫流，向左或向右依次停靠在其餘元素邊緣，在文檔中再也不佔位
元素設置浮動，就具備塊元素的特徵，能夠手動調整寬高
"文字環繞"：浮動元素遮擋正常元素的位置，沒法遮擋正常內容的顯示，內容圍繞在浮動元素周圍顯示

常見問題

子元素所有設置浮動，致使父元素高度爲0，影響父元素背景色和背景圖片展現,影響頁面佈局

解決

對於內容固定的元素，若是子元素都浮動，能夠給父元素固定高度(例:導航欄)
指定元素兩側不能出現浮動元素。設置 clear:both; 清除浮動
爲父元素設置 overflow:hidden; 解決高度爲0

顯示(Display)與可見性(Visibility)

隱藏元素

隱藏元素有兩種實現方法

display：none
visibility：hidden

注意：這兩種方法會產生不一樣的結果，visibility:hidden隱藏的元素仍佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

塊元素和內聯元素的轉變

　　將元素變成內聯元素

display:inline;

　　將元素變成塊元素

display:block;

背景屬性

CSS 屬性定義背景效果：

background-color：背景顏色
background-image：背景圖片
background-repeat：設置平鋪方式
background-attachment：背景圖像是否固定或者隨着頁面的其他部分滾動。
background-position：顯示位置

背景顏色

background-color: red;

背景圖片

　　默認狀況下進行平鋪重複顯示，以覆蓋整個元素實體.

background-image : url("圖片路徑");

設置背景圖片，指定圖片路徑，若是路徑中出現中文或空格，須要加引號

設置顏色漸變

可使用兩個或兩個以上節點

/*上->下，紅變藍*/
background-image: linear-gradient(#e66465, #9198e5); 
/*左->右，紅變黃*/
background-image: linear-gradient(to right, red , yellow); 
/*從左上角開始，紅變黃*/
background-image: linear-gradient(to bottom right, red, yellow);  
/*帶有透明度的漸變*/
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 
/*徑向漸變*/
background-image: radial-gradient(red, yellow, green);

設置背景圖片的平鋪重複方式

默認背景圖片從元素的左上角顯示，若是圖片尺寸與元素尺寸不匹配時，會出現如下狀況：

若是元素尺寸大於圖片尺寸，會自動重複平鋪，直至鋪滿整個元素
若是元素尺寸小於圖片尺寸，圖片默認從元素左上角開始顯示，超出部分不可見

平鋪方式

background-repeat

取值：

repeat：默認值，沿水平和垂直方向重複平鋪
repeat-x：沿X軸重複平鋪
repeat-y：沿Y軸重複平鋪
no-repeat：不重複平鋪

背景是否固定

background-attachment:fixed;

屬性值：

fixed：固定，背景圖片不會隨着頁面滾動而滾動
scroll：隨着頁面滾動而滾動
local：隨着頁面元素滾動而滾動

顯示位置

默認顯示在元素左上角

background-position:x y;

取值方式：

　　1. 像素值
　　　　設置背景圖片的在元素座標系中的起點座標
　　2. 方位值
　　　　水平方向取值：left/center/right
　　　　垂直方向取值：top/center/bottom

注：若是隻設置某一個方向的方位值，另一個方向默認爲center

精靈圖技術：爲了減小網絡請求，能夠將全部的小圖標拼接在一張圖片上，一次網絡請求所有獲得；藉助於background-position 對背景圖片開始位置進行調整，實現顯示不一樣的圖標

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #sp {
            border: solid 1px red;
            /* 設置顯示背景圖片的寬度和高度 */
            width: 25px;
            height: 25px;
            margin: 0 auto;
            background-image: url("imgs/img07.png");
        }
        #sp2 {
            border: solid 1px red;
            /* 設置顯示背景圖片的寬度和高度 */
            width: 25px;
            height: 25px;
            margin: 0 auto;
            background-image: url("imgs/img07.png");
            background-position: 0 -25px;
        }
        #sp3 {
            border: solid 1px red;
            /* 設置顯示背景圖片的寬度和高度 */
            width: 25px;
            height: 25px;
            margin: 0 auto;
            background: url("imgs/img07.png") 0 -50px;
        }
    </style>
</head>
<body>
    <div id="sp"></div>
    <div id="sp2"></div>
    <div id="sp3"></div>
</body>
</html>

案例代碼

設置背景圖片的尺寸

background-size:width height;

取值方式：

　　1. 像素值
　　　　500px 500px：同時指定寬高
　　　　500px：指定寬度，高度自適應
　　2. 百分比：參照元素的尺寸進行計算
　　　　50% 50%; 根據元素寬高,分別計算圖片的寬高
　　　　50%; 根據元素寬度計算圖片寬高,圖片高度等比例縮放

背景屬性簡寫

background:color url("") repeat position;

注意：

若是須要同時設置以上屬性值，遵守相應順序書寫
background-size 單獨設置

文本格式

字體樣式

字體系列

font-family:"黑體","Microsoft YaHei",Arial;

取值：

family-name：字體類型名稱：「宋體」、「微軟雅黑」。其實中文字體也有英文名，都是同樣的。
generic-family：字體系列名稱：「serif」、「sans-serif」、「monospace」...

注意：能夠指定多個字體名稱做爲備選字體，使用逗號隔開，若是瀏覽器不支持第一個字體，則會嘗試下一個；若是字體名稱爲中文，或者名稱中出現了空格，必須使用引號

Serif 和 Sans-serif 字體之間的區別

sans-serif 字體比較適合在屏幕上閱讀，而 serif 字體更容易在紙上閱讀。「sans」指無。

自定義字體

<style> 
@font-face
{
    font-family: myFirstFont;    /*自定義字體名*/
    src: url(sansation_light.woff);     /*自定義字體URL*/
}
 
div
{
    font-family:myFirstFont;
}
</style>

字體大小

font-size:20px;

瀏覽器默認字體大小是16px，1em=16px，

字體粗細

font-weight:normal;

normal（默認值）等價於400
bold (加粗) 等價於700

斜體

font-style:italic;

字體屬性

font : style weight size family;

注意 :

若是四個屬性值都必須設置，嚴格按照順序書
size family 是必填項

文本樣式

文本顏色

十六進制值，如: ＃FF0000
一個RGB值，如: RGB(255,0,0)
顏色的名稱，如: red

color:red;

文本裝飾線

/*刪除文本裝飾*/
text-decoration:none;

取值 :

underline：下劃線
overline：上劃線
line-through：刪除線
none：取消裝飾線

在CSS中，使用text-decoration屬性來定義段落文本的下劃線、刪除線和頂劃線。none即爲默認值，能夠用這個屬性值也能夠去掉已經有下劃線或刪除線或頂劃線的樣式。

水平對齊方式

text-align:center;

取值 :

left：左對齊(默認值)
center：居中對齊
right：右對齊
justify：兩端對齊

行高

line-height:30px;

使用 : 文本在當前行中永遠垂直居中，能夠藉助行高height調整文本在元素中的垂直顯示位置

line-height = height 設置一行文本在元素中垂直居中
line-height > height 文本下移顯示
line-height < height 文本靠上顯示

特殊：line-height能夠採用無單位的數值，表明當前字體大小的倍數,以此計算行高

字符間距

letter-spacing:2px   /*字母(漢字)與字母(漢字)  之間的間距*/
word-spacing:30px;　　/*單詞與單詞 之間的間距*/

文本縮進

text-indent:50px;

大小寫轉換

text-transform:uppercase;

屬性值：

uppercase：文本大小
lowercase：文本小寫
capitalize：首字母大寫

文字方向

direction:rtl;    /*right to left*/

屬性值：

ltr：默認，從左向右
rtl：從右向左

列表樣式

　　經過列表樣式，設置列表項標記的圖像（小黑點、小方框、數字、字母...）。

list-style-type: circle;    /*設置標記爲圓圈*/

經常使用屬性值：

none：無標記
disc：默認。標記是實心圓。
circle：標記是空心圓。
square：標記是實心方塊。
decimal：標記是數字。
lower-roman / upper-roman：小寫或大寫羅馬數字(i, ii, iii, iv, v, I, II, III, IV, V, )
lower-alpha / upper-alpha：小/大寫寫英文字母

鼠標箭頭樣式

cursor：default;

屬性值：

url：自定義光標的URL
default：默認光標
auto：瀏覽器默認光標
crosshair：十字線
move：可移動的圖標
wait：轉圈等待的光標
help：問號
text：可選文本的光標

提示工具

　　先讓提示文本隱藏，當鼠標劃過須要提示的地方的時候，再讓提示文本顯現。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 教程</title>
</head>
<style>
    /*鼠標移動到這*/
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }
    /*提示文本*/
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* 定位 */
        position: absolute;
        z-index: 1;
    }
　　 /*當鼠標劃過期，提示顯現*/
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
</style>
<body style="text-align:center;">

<div class="tooltip">
    鼠標移動到這<span class="tooltiptext">提示文本</span>
</div>

</body>
</html>

　　所以當咱們須要提示條出如今上下左右的時候，只須要在提示條的定位中進行修改。

右邊

.tooltip .tooltiptext {
    top: -5px;    /*提示條向上移動5px*/
    left: 105%;  /*提示條向右移動5px*/
}

左邊

.tooltip .tooltiptext {
    top: -5px;　　/*提示條向上移動5px*/
    right: 105%; /*提示條向右移動5px*/
}

上面

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;    /*底部撐滿，移到最上面*/
    left: 50%;              /*左邊取一半，到中間*/
    margin-left: -60px; /* 向左移，居中 */
}

下面

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;            /*上面取滿，到底部*/
    left: 50%;              /*到中間*/
    margin-left: -60px; /* 向左移居中 */
}

指向性箭頭

/*在後面添加樣式*/
.tooltip .tooltiptext:after {
content: " ";           /*內容爲空*/
position: absolute;
top: 100%;              /* 提示工具底部 */
left: 50%;              /* 到中間 */
margin-left: -5px;      /* 居中 */
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">

<br><br>

<div class="tooltip">鼠標移動到我這
  <span class="tooltiptext">提示文本</span>
</div>

</body>
</html>

完整代碼

其餘方向依次類推

透明屬性

opacity:0.5;

0是全透明，1是不透明。

過渡屬性

transition：將鼠標懸停在一個元素上，逐步該元素的屬性值：

/*逐步改變寬度從 100px 到 300px */
div
{
    width:100px;
    transition: width 2s;
}
div:hover {width:300px;}

transition-delay: 2s; 延遲2s再，變換。

媒體類型

　　媒體類型容許咱們指定HTML文檔將如何在不一樣媒體呈現。該文檔能夠以不一樣的方式顯示在電腦屏幕上，手機上、平板上和紙張上。

@media 規則

@media 屬性值：

all：用於全部媒體設備
print：用於打印機
handheld：用於很小的手持設備
screen：用於電腦顯示器
tv：用於電視

案例：在電腦屏幕上，字體14px，打印的時候，字體10px。

@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}

屏幕尺寸響應式佈局

/* 響應式佈局 - 屏幕尺寸小於 800px 時，兩列布局改成上下佈局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

動畫 @keyframes

　　@keyframes 規則是建立動畫，建立一個動畫演示，提供給animation屬性調用。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
div
{
    animation: myfirst 5s;
}

還可使用百分比來規定變化發生的時間，關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

1. 前端之CSS
2. Web前端-CSS
3. 前端css position
4. 前端 CSS
5. 前端篇---------CSS
6. python--前端CSS
7. 前端之css
8. python前端CSS
9. 前端-html、css
10. 前端-html/css
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• Docker容器實戰(一) - 封神Server端技術

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。