前端知識之CSS內容

前端基礎之CSS

CSS介紹

CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素弥喉。

當瀏覽器讀到一個樣式表艇搀，它就會按照這個樣式表來對文檔進行格式化（渲染）。

CSS語法

CSS實例

每個CSS樣式由兩個組成部分：選擇器和聲明繁成。聲明又包括屬性和屬性值忆嗜。每個聲明之后用分號結束己儒。

1.png

CSS注釋

/*這是注釋*/

注釋是代碼之母。--摘自哪吒語錄

CSS的幾種引入方式

行內樣式

行內式是在標記的style屬性中設定CSS樣式捆毫。不推薦大規(guī)模使用闪湾。

<p style="color: red">Hello world.</p>

內部樣式

嵌入式是將CSS樣式集中寫在網(wǎng)頁的<head></head>標簽對的<style></style>標簽對中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部樣式

外部樣式就是將css寫在一個單獨的文件中冻璃，然后在頁面進行引入即可响谓。推薦使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS選擇器

基本選擇器

元素選擇器

p {color: "red";}

ID選擇器

#i1 {
  background-color: red;
}

類選擇器

.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}

注意：

樣式類名不要用數(shù)字開頭（有的瀏覽器不認）省艳。

標簽中的class屬性如果有多個娘纷，要用空格分隔。

通用選擇器

* {
  color: white;
}

組合選擇器

后代選擇器

/*li內部的a標簽設置字體顏色*/
li a {
  color: green;
}

兒子選擇器

div>p {
  font-family: "Arial Black", arial-black, cursive;
}

毗鄰選擇器

/*選擇所有緊接著<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
}

弟弟選擇器

/*i1后面所有的兄弟p標簽*/
#i1~p {
  border: 2px solid royalblue;
}

屬性選擇器

/*用于選取帶有指定屬性的元素跋炕。*/
p[title] {
  color: red;
}
/*用于選取帶有指定屬性和值的元素赖晶。*/
p[title="213"] {
  color: green;
}

不常使用的屬性選擇器

/*找到所有title屬性以hello開頭的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title屬性以hello結尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title屬性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素：*/
[title~="hello"] {
  color: green;

分組和嵌套

分組

當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統(tǒng)一設置元素樣式遏插。

例如：

div, p {
  color: red;
}

上面的代碼為div標簽和p標簽統(tǒng)一設置字體為紅色捂贿。

通常，我們會分兩行來寫胳嘲，更清晰:

div,
p {
  color: red;
}

嵌套

多種選擇器可以混合起來使用厂僧，比如：.c1類內部所有p標簽設置字體顏色為紅色。

.c1 p {
  color: red;
}

偽類選擇器

/* 未訪問的鏈接 */
a:link {
  color: #FF0000
}

/* 已訪問的鏈接 */
a:visited {
  color: #00FF00
} 

/* 鼠標移動到鏈接上 */
a:hover {
  color: #FF00FF
} 

/* 選定的鏈接 */ 
a:active {
  color: #0000FF
}

/*input輸入框獲取焦點時樣式*/
input:focus {
  outline: none;
  background-color: #eee;
}

偽元素選擇器

first-letter

常用的給首字母設置特殊樣式：

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每個<p>元素之前插入內容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每個<p>元素之后插入內容*/
p:after {
  content:"[?]";
  color:blue;
}

before和after多用于清除浮動

選擇器的優(yōu)先級

CSS繼承

繼承是CSS的一個主要特征了牛，它是依賴于祖先-后代的關系的颜屠。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素鹰祸，還可以應用于它的后代甫窟。例如一個body定義了的字體顏色值也會應用到段落的文本中。

body {
  color: red;
}

此時頁面上所有標簽都會繼承body的字體顏色蛙婴。然而CSS繼承性的權重是非常低的粗井，是比普通元素的權重還要低的0。

我們只要給對應的標簽設置字體顏色就可覆蓋掉它繼承的樣式街图。

p {
  color: green;
}

此外浇衬，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承扬卷，如：border, margin, padding, background等期贫。

選擇器的優(yōu)先級

我們上面學了很多的選擇器，也就是說在一個HTML頁面中有很多種方式找到一個元素并且為其設置樣式赞赖，那瀏覽器根據(jù)什么來決定應該應用哪個樣式呢滚朵？

其實是按照不同選擇器的權重來決定的，具體的選擇器權重計算方式如下圖：

2.png

除此之外還可以通過添加 !important方式來強制讓樣式生效前域，但并不推薦使用辕近。因為如果過多的使用!important會使樣式文件混亂不易維護。

萬不得已可以使用!important

CSS屬性相關

寬和高

width屬性可以為元素設置寬度匿垄。

height屬性可以為元素設置高度移宅。

塊級標簽才能設置寬度，內聯(lián)標簽的寬度由內容來決定椿疗。

字體屬性

文字字體

font-family可以把多個字體名稱作為一個“回退”系統(tǒng)來保存漏峰。如果瀏覽器不支持第一個字體，則會嘗試下一個届榄。瀏覽器會使用它可識別的第一個值浅乔。

簡單實例:

body {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}

字體大小

p {
  font-size: 14px;
}

如果設置成inherit表示繼承父元素的字體大小值。

字重(粗細)

font-weight用來設置字體的字重（粗細）。

值	描述
normal	默認值靖苇，標準粗細
bold	粗體
bolder	更粗
lighter	更細
100~900	設置具體粗細席噩，400等同于normal，而700等同于bold
inherit	繼承父元素字體的粗細值

文本顏色

顏色屬性被用來設置文字的顏色贤壁。

顏色是通過CSS最經(jīng)常的指定：

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

還有rgba(255,0,0,0.3)悼枢，第四個值為alpha, 指定了色彩的透明度/不透明度，它的范圍為0.0到1.0之間脾拆。

文字屬性

文字對齊

text-align 屬性規(guī)定元素中的文本的水平對齊方式馒索。

值	描述
left	左邊對齊默認值
right	右對齊
center	居中對齊
justify	兩端對齊

文字裝飾

text-decoration 屬性用來給文字添加特殊效果。

值	描述
none	默認假丧。定義標準的文本双揪。
underline	定義文本下的一條線。
overline	定義文本上的一條線包帚。
line-through	定義穿過文本下的一條線渔期。
inherit	繼承父元素的text-decoration屬性的值。

常用的為去掉a標簽默認的自劃線：

a {
  text-decoration: none;
}

首行縮進

將段落的第一行縮進 32像素：

p {
  text-indent: 32px;
}

背景屬性

/*背景顏色*/
background-color: red;
/*背景圖片*/
background-image: url('1.jpg');
/*
 背景重復
 repeat(默認):背景圖片平鋪排滿整個網(wǎng)頁
 repeat-x：背景圖片只在水平方向上平鋪
 repeat-y：背景圖片只在垂直方向上平鋪
 no-repeat：背景圖片不平鋪
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/

支持簡寫：

background:#ffffff url('1.png') no-repeat right top;

使用背景圖片的一個常見案例就是很多網(wǎng)站會把很多小圖標放在一張圖片上渴邦，然后根據(jù)位置去顯示圖片疯趟。減少頻繁的圖片請求。

一個有趣的例子：

<!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>滾動背景圖示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

邊框

邊框屬性

border-width
border-style
border-color

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

通常使用簡寫方式：

#i1 {
  border: 2px solid red;
}

邊框樣式

值	描述
none	無邊框谋梭。
dotted	點狀虛線邊框信峻。
dashed	矩形虛線邊框。
solid	實線邊框瓮床。

除了可以統(tǒng)一設置邊框外還可以單獨為某一個邊框設置樣式盹舞，如下所示：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-radius

用這個屬性能實現(xiàn)圓角邊框的效果。

將border-radius設置為長或高的一半即可得到一個圓形隘庄。

display屬性

用于控制HTML元素的顯示效果踢步。

值	意義
display:"none"	HTML文檔中元素存在，但是在瀏覽器中不顯示丑掺。一般用于配合JavaScript代碼使用获印。
display:"block"	默認占滿整個頁面寬度，如果設置了指定寬度街州，則會用margin填充剩下的部分兼丰。
display:"inline"	按行內元素顯示，此時再設置元素的width唆缴、height鳍征、margin-top、margin-bottom和float屬性都不會有什么影響琐谤。
display:"inline-block"	使元素同時具有行內元素和塊級元素的特點蟆技。

display:"none"與visibility:hidden的區(qū)別：

visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說质礼，該元素雖然被隱藏了旺聚，但仍然會影響布局。

display:none: 可以隱藏某個元素眶蕉，且隱藏的元素不會占用任何空間砰粹。也就是說，該元素不但被隱藏了造挽，而且該元素原本占用的空間也會從頁面布局中消失碱璃。

CSS盒子模型

margin: 用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔饭入，從視覺角度上達到相互隔開的目的嵌器。
padding: 用于控制內容與邊框之間的距離；
Border(邊框): 圍繞在內邊距和內容外的邊框谐丢。
Content(內容): 盒子的內容爽航，顯示文本和圖像。

看圖吧：

3.png

margin外邊距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推薦使用簡寫：

.margin-test {
  margin: 5px 10px 15px 20px;
}

順序：上右下左

常見居中：

.mycenter {
  margin: 0 auto;
}

padding內填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推薦使用簡寫：

.padding-test {
  padding: 5px 10px 15px 20px;
}

順序：上右下左

補充padding的常用簡寫方式：

提供一個乾忱，用于四邊讥珍；
提供兩個，第一個用于上－下窄瘟，第二個用于左－右衷佃；
如果提供三個，第一個用于上蹄葱，第二個用于左－右氏义，第三個用于下；
提供四個參數(shù)值图云，將按上－右－下－左的順序作用于四邊觅赊；

標準文檔流

什么是標準文檔流

宏觀的講，我們的web頁面和ps等設計軟件有本質的區(qū)別琼稻，web 網(wǎng)頁的制作，是個“流”饶囚，從上而下帕翻，像 “織毛衣”。而設計軟件萝风，想往哪里畫東西嘀掸，就去哪里畫

標準文檔流下有哪些微觀現(xiàn)象？

空白折疊現(xiàn)象
多個空格會被合并成一個空格顯示到瀏覽器頁面中规惰。img標簽換行寫睬塌。會發(fā)現(xiàn)每張圖片之間有間隙，如果在一行內寫img標簽，就解決了這個問題揩晴，但是我們不會這樣去寫我們的html結構勋陪。這種現(xiàn)象稱為空白折疊現(xiàn)象。
高矮不齊,底邊對齊
文字還有圖片大小不一硫兰，都會讓我們頁面的元素出現(xiàn)高矮不齊的現(xiàn)象诅愚，但是在瀏覽器查看我們的頁面總會發(fā)現(xiàn)底邊對齊
自動換行,一行寫不滿,換行寫
如果在一行內寫文字，文字過多劫映，那么瀏覽器會自動換行去顯示我們的文字违孝。

float

在 CSS 中，任何元素都可以浮動泳赋。

浮動元素會生成一個塊級框雌桑，而不論它本身是何種元素。

關于浮動的兩個特點：

浮動的框可以向左或向右移動祖今，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止校坑。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣衅鹿。

三種取值

left：向左浮動

right：向右浮動

none：默認值撒踪，不浮動

參考示例

clear

clear屬性規(guī)定元素的哪一側不允許其他浮動元素。

值	描述
left	在左側不允許浮動元素大渤。
right	在右側不允許浮動元素制妄。
both	在左右兩側均不允許浮動元素。
none	默認值泵三。允許浮動元素出現(xiàn)在兩側耕捞。
inherit	規(guī)定應該從父元素繼承 clear 屬性的值。

注意：clear屬性只會對自身起作用烫幕，而不會影響其他元素俺抽。

清除浮動

清除浮動的副作用（父標簽塌陷問題）

主要有三種方式：

固定高度
偽元素清除法
overflow:hidden

偽元素清除法（使用較多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

overflow溢出屬性

值	描述
visible	默認值。內容不會被修剪较曼，會呈現(xiàn)在元素框之外磷斧。
hidden	內容會被修剪，并且其余內容是不可見的捷犹。
scroll	內容會被修剪弛饭，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪萍歉，則瀏覽器會顯示滾動條以便查看其余的內容侣颂。
inherit	規(guī)定應該從父元素繼承 overflow 屬性的值。

overflow（水平和垂直均設置）
overflow-x（設置水平方向）
overflow-y（設置垂直方向）

圓形頭像示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圓形的頭像示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      background-color: #eeeeee;
    }
    .header-img {
      width: 150px;
      height: 150px;
      border: 3px solid white;
      border-radius: 50%;
      overflow: hidden;
    }
    .header-img>img {
      max-width: 100%;
    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt="">
</div>

</body>
</html>

定位(position)

static

static 默認值枪孩，無定位憔晒，不能當作絕對定位的參照物藻肄，并且設置標簽對象的left、top等值是不起作用的的拒担。

relative(相對定位)

相對定位是相對于該元素在文檔流中的原始位置嘹屯，即以自己原始位置為參照物。有趣的是澎蛛，即使設定了元素的相對定位以及偏移值抚垄，元素還占有著原來的位置，即占據(jù)文檔流空間谋逻。對象遵循正常文檔流呆馁，但將依據(jù)top，right毁兆，bottom浙滤，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義气堕。

注意：position：relative的一個主要用法：方便絕對定位元素找到參照物纺腊。

absolute(絕對定位)

定義：設置為絕對定位的元素框從文檔流完全刪除，并相對于最近的已定位祖先元素定位茎芭，如果元素沒有已定位的祖先元素揖膜，那么它的位置相對于最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉梅桩，就好像該元素原來不存在一樣壹粟。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框宿百。

重點：如果父級設置了position屬性趁仙，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位垦页。這樣能很好的解決自適應網(wǎng)站的標簽偏離問題雀费，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;痊焊，然后Top盏袄、Right、Bottom薄啥、Left用百分比寬度表示貌矿。

另外，對象脫離正常文檔流罪佳，使用top，right黑低，bottom赘艳，left等屬性進行絕對定位酌毡。而其層疊通過z-index屬性定義。

fixed(固定)

fixed：對象脫離正常文檔流蕾管，使用top枷踏，right，bottom掰曾，left等屬性以窗口為參考點進行定位旭蠕，當出現(xiàn)滾動條時，對象不會隨著滾動旷坦。而其層疊通過z-index屬性定義掏熬。注意點：一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點秒梅，因為這是兩個不同的流旗芬，一個是浮動流，另一個是“定位流”捆蜀。但是 relative 卻可以疮丛。因為它原本所占的空間仍然占據(jù)文檔流。

在理論上辆它，被設置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標誊薄，不論窗口是否滾動，它都會固定在這個位置锰茉。

示例代碼：

返回頂部按鈕樣式示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>返回頂部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;
      position: fixed;
      right: 10px;
      bottom: 20px;
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回頂部</div>
</body>
</html>

z-index

#i2 {
  z-index: 999;
}

設置對象的層疊順序呢蔫。

z-index 值表示誰壓著誰，數(shù)值大的壓蓋住數(shù)值小的洞辣，
只有定位了的元素咐刨，才能有z-index,也就是說，不管相對定位扬霜，絕對定位定鸟，固定定位，都可以使用z-index著瓶，而浮動元素不能使用z-index
z-index值沒有單位联予，就是一個正整數(shù)，默認的z-index值為0如果大家都沒有z-index值材原，或者z-index值一樣沸久，那么誰寫在HTML后面，誰在上面壓著別人余蟹，定位了元素卷胯，永遠壓住沒有定位的元素。
從父現(xiàn)象：父親慫了威酒，兒子再牛逼也沒用

自定義模態(tài)框示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定義模態(tài)框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

opacity

用來定義透明效果窑睁。取值范圍是0~1挺峡，0是完全透明，1是完全不透明担钮。

綜合示例

頂部導航菜單

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>li標簽的float示例</title>
  <style>
    /*清除瀏覽器默認外邊距和內填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a標簽默認的下劃線*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*刪除列表默認的圓點樣式*/
      margin: 0; /*刪除列表默認的外邊距*/
      padding: 0; /*刪除列表默認的內填充*/
    }
    /*li元素向左浮動*/
    li {
      float: left;
    }

    li > a {
      display: block; /*讓鏈接顯示為塊級標簽*/
      padding: 0 15px; /*設置左右各15像素的填充*/
      color: #b0b0b0; /*設置字體顏色*/
      line-height: 40px; /*設置行高*/
    }
    /*鼠標移上去顏色變白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮動 解決父級塌陷問題*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 頂部導航欄 開始 -->
<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">ioT</a></li>
    <li><a href="">云服務</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">優(yōu)品</a></li>
  </ul>
</div>
<!-- 頂部導航欄 結束 -->
</body>
</html>

頂部導航菜單示例

最后編輯于：2019.03.27 14:51:14

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末橱赠，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子箫津，更是在濱河造成了極大的恐慌狭姨，老刑警劉巖，帶你破解...
沈念sama閱讀 207,113評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件苏遥，死亡現(xiàn)場離奇詭異饼拍，居然都是意外死亡，警方通過查閱死者的電腦和手機暖眼，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,644評論 2贊 381
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門惕耕，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人诫肠，你說我怎么就攤上這事司澎。” “怎么了栋豫？”我有些...
開封第一講書人閱讀 153,340評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵挤安，是天一觀的道長。經(jīng)常有香客問我丧鸯，道長蛤铜，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 55,449評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任丛肢，我火速辦了婚禮围肥，結果婚禮上，老公的妹妹穿的比我還像新娘蜂怎。我一直安慰自己穆刻，他們只是感情好，可當我...
茶點故事閱讀 64,445評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布杠步。她就那樣靜靜地躺著氢伟，像睡著了一般。火紅的嫁衣襯著肌膚如雪幽歼。梳的紋絲不亂的頭發(fā)上朵锣，一...
開封第一講書人閱讀 49,166評論 1贊 284
城市分裂傳說
那天，我揣著相機與錄音甸私，去河邊找鬼诚些。笑死，一個胖子當著我的面吹牛皇型，可吹牛的內容都是我干的泣刹。我是一名探鬼主播助析，決...
沈念sama閱讀 38,442評論 3贊 401
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼椅您！你這毒婦竟也來了？” 一聲冷哼從身側響起寡键，我...
開封第一講書人閱讀 37,105評論 0贊 261
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤掀泳，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后西轩，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體员舵，經(jīng)...
沈念sama閱讀 43,601評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 36,066評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年藕畔，在試婚紗的時候發(fā)現(xiàn)自己被綠了马僻。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,161評論 1贊 334
活死人
序言：一個原本活蹦亂跳的男人離奇死亡注服，死狀恐怖韭邓，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情溶弟，我是刑警寧澤女淑，帶...
沈念sama閱讀 33,792評論 4贊 323
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站辜御，受9級特大地震影響鸭你，放射性物質發(fā)生泄漏。R本人自食惡果不足惜擒权，卻給世界環(huán)境...
茶點故事閱讀 39,351評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一袱巨、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧碳抄，春花似錦愉老、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,352評論 0贊 19
一樁弒父案俺夕，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至贱鄙，卻和暖如春劝贸，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背逗宁。一陣腳步聲響...
開封第一講書人閱讀 31,584評論 1贊 261
情欲美人皮
我被黑心中介騙來泰國打工映九，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人瞎颗。一個月前我還...
沈念sama閱讀 45,618評論 2贊 355
代替公主和親
正文我出身青樓件甥，卻偏偏與公主長得像捌议，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子引有，可洞房花燭夜當晚...
茶點故事閱讀 42,916評論 2贊 344

前端知識之CSS內容

前端基礎之CSS

CSS介紹

CSS語法

CSS實例

CSS注釋

CSS的幾種引入方式

行內樣式

內部樣式

外部樣式

CSS選擇器

基本選擇器

元素選擇器

ID選擇器

類選擇器

通用選擇器

組合選擇器

后代選擇器

兒子選擇器

毗鄰選擇器

弟弟選擇器

屬性選擇器

分組和嵌套

分組

嵌套

偽類選擇器

偽元素選擇器

first-letter

before

after

選擇器的優(yōu)先級

CSS繼承

選擇器的優(yōu)先級

CSS屬性相關

寬和高

字體屬性

文字字體

字體大小

字重(粗細)

文本顏色

文字屬性

文字對齊

文字裝飾

首行縮進

背景屬性

邊框

border-radius

display屬性

CSS盒子模型

margin外邊距

padding內填充

標準文檔流

什么是標準文檔流

float

三種取值

clear

清除浮動

overflow溢出屬性

圓形頭像示例

定位(position)

static

relative(相對定位)

absolute(絕對定位)

fixed(固定)

z-index

opacity

綜合示例

頂部導航菜單

推薦閱讀更多精彩內容