CSS的幾種引入方式

行內(nèi)樣式

行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式。不推薦大規(guī)模使用。

成都創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今，先為民勤等服務(wù)建站，民勤等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為民勤企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

Hello world.

內(nèi)部樣式

嵌入式是將CSS樣式集中寫在網(wǎng)頁的標(biāo)簽對(duì)的標(biāo)簽對(duì)中。格式如下：

外部樣式

外部樣式就是將css寫在一個(gè)單獨(dú)的文件中，然后在頁面進(jìn)行引入即可。推薦使用此方式。

CSS選擇器

基本選擇器

1. 元素選擇器

   p {color: "red";}

2. ID選擇器

   #i1 {
   background-color: red;
   }

3. 類選擇器

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

   標(biāo)簽中的class屬性如果有多個(gè)，要用空格分隔

4. 通用選擇器

   * {
   color: white;
   }

組合選擇器

1. 后代選擇器

   /*li內(nèi)部的a標(biāo)簽設(shè)置字體顏色*/
   li a {
   color: green;
   }

2. 兒子選擇器

   /*選擇所有父級(jí)是 
    元素的 
    元素*/
   div>p {
   font-family: "Arial Black", arial-black, cursive;
   }

3. 毗鄰選擇器

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

4. 弟弟選擇器

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

屬性選擇器

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

分組和嵌套

1. 分組
   當(dāng)多個(gè)元素的樣式相同的時(shí)候，我們沒有必要重復(fù)地為每個(gè)元素都設(shè)置樣式，我們可以通過在多個(gè)選擇器之間使用逗號(hào)分隔的分組選擇器來統(tǒng)一設(shè)置元素樣式。
   例如：

   div, p {
   color: red;
   }

2. 嵌套
   多種選擇器可以混合起來使用，比如：.c1類內(nèi)部所有p標(biāo)簽設(shè)置字體顏色為紅色。

   .c1 p {
   color: red;
   }

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

同等選擇器，越靠近標(biāo)簽的優(yōu)先級(jí)越高（就近原則）

偽類選擇器

/* 鼠標(biāo)移動(dòng)到鏈接上 */
a:hover {
  color: #FF00FF
} 

/*input輸入框獲取焦點(diǎn)時(shí)樣式*/
input:focus {
  outline: none;
  background-color: #eee;
}

偽元素選擇器

first-letter
常用的給首字母設(shè)置特殊樣式：

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

before

/*在每個(gè)
元素之前插入內(nèi)容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每個(gè)
元素之后插入內(nèi)容*/
p:after {
  content:"[?]";
  color:blue;
}

before和after多用于清除浮動(dòng)。

CSS屬性相關(guān)

寬和高

width屬性可以為元素設(shè)置寬度。

height屬性可以為元素設(shè)置高度。

塊級(jí)標(biāo)簽才能設(shè)置寬度，內(nèi)聯(lián)標(biāo)簽的寬度由內(nèi)容來決定。

字體屬性

文字字體、字體大小

body {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}
p {
  font-size: 14px;
}

如果設(shè)置成inherit表示繼承父元素的字體大小值
字重（粗細(xì)）
font-weight用來設(shè)置字體的字重（粗細(xì)）。

文本顏色
顏色屬性被用來設(shè)置文字的顏色。

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

1. 十六進(jìn)制值 - 如: ＃FF0000
2. 一個(gè)RGB值 - 如: RGB(255,0,0)
3. 顏色的名稱 - 如: red

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

文字屬性

文字對(duì)齊

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

文字裝飾
text-decoration 屬性用來給文字添加特殊效果
常用的為去掉a標(biāo)簽?zāi)J(rèn)的自劃線：

a {
  text-decoration: none;
}

首行縮進(jìn)
將段落的第一行縮進(jìn) 32像素：

p {
  text-indent: 32px;
}

兩倍于font-size的設(shè)置就是縮進(jìn)兩個(gè)字體

背景屬性

https://www.cnblogs.com/liwenzhou/p/7999532.html

邊框

border-radius

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

將border-radius設(shè)置為長或高的一半即可得到一個(gè)圓形。

display屬性

CSS盒子模型

• margin: 用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，多用來調(diào)整標(biāo)簽和標(biāo)簽之間的距離，從視覺角度上達(dá)到相互隔開的目的。
• padding: 用于控制內(nèi)容與邊框之間的距離；
• Border(邊框): 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
• Content(內(nèi)容): 盒子的內(nèi)容，顯示文本和圖像。
  

margin外邊距

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

推薦使用簡(jiǎn)寫：

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

順序：上右下左

常見居中：

.mycenter {
  margin: 0 auto;
}

padding內(nèi)填充

示例：設(shè)置一個(gè)列表
效果：

    
大米商城
    
小魅商城
    
錘科商城
    
華為商城

float

在 CSS 中，任何元素都可以浮動(dòng)。

浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。
關(guān)于浮動(dòng)的兩個(gè)特點(diǎn)：

• 浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/li>
• 由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

三種取值

left：向左浮動(dòng)

right：向右浮動(dòng)

none：默認(rèn)值，不浮動(dòng)

.c2 {
    float: left;
    height: 100px;
    width: 100px;
}

clear

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

clear屬性只會(huì)對(duì)自身起作用，而不會(huì)影響其他元素。

舉例：解決父標(biāo)簽塌陷，清除浮動(dòng)

因?yàn)閏1和c2都是浮動(dòng)元素，所以撐不起父標(biāo)簽，此時(shí)利用偽元素添加一個(gè)元素，同事設(shè)置清除左側(cè)浮動(dòng)可以把父標(biāo)簽撐起來，這個(gè)偽元素本身不需要有高度

    
c1
    
c2

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

overflow溢出屬性

圓形頭像示例：

效果：

定位（position）

1. static --> 默認(rèn)的
2. relative --> 相對(duì)定位(相對(duì)于原來的位置來說)
3. absolute --> 絕對(duì)定位(相對(duì)于最近的一個(gè)被定位過的祖宗標(biāo)簽) (完全脫離文檔流)
4. fixed --> 固定在某個(gè)位置(返回頂部按鈕)

左 右 上 下
left right top bottom

示例：
返回頂部按鈕樣式示例

返回頂部

脫離文檔流補(bǔ)充

脫離文檔流的三種方式
float
absolute 絕對(duì)定位
fixed 固定定位

z-index

1. 數(shù)值越大,越靠近你
2. 只能作用于定位過的元素

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

.c1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
}

.c2 {
    height: 400px;
    width: 600px;
    position: fixed;
    background-color: white;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -300px;
    z-index: 1000;
}

opacity 不透明度

取值0~1
和rgba()的區(qū)別:

1. opacity改變?cè)豛子元素的透明度效果
2. rgba()只改變背景顏色的透明度效果