默認 去掉 ant sid 刪除線 外邊距 小應用 空格 -c

一、CSS概述

1.css是什麽？？

層疊樣式表

2.css的引入方式

1.行內樣式 在標簽上加屬性style="屬性名1:屬性值1;屬性名2:屬性值2;..."

2.內嵌式 在head裏加<style></style> 所有的樣式寫在標簽內

3.外鏈式 單獨的css文件(後綴名 css名字.css) <link href="css文件的路徑" rel="stylesheet" type="text/css" />

4.導入式 @import url(css路徑) 或者 @import css路徑

3.css語法

選擇器{聲明1;聲明2;...} 聲明====>屬性名:屬性值

4、常用.選擇器

1.標簽(元素)選擇器

標簽名{屬性名1:屬性值1;屬性名2:屬性值2;...}

2.通配符選擇器 *

選擇所有的標簽

*{屬性名1:屬性值1;屬性名2:屬性值2;...}

3.id選擇器

#id名{ }

4.類選擇器

.類名{ } 標簽名.類名{ } 例子：div.box{ } 類名叫box的div

5.包含選擇器

父元素 子元素{ } 此時的子元素可能是父元素的直接子元素 也可能是子元素的子元素

例如：div .box{ } div

下方 所有類名叫box的元素

選擇直接子元素 父元素>子元素{ }

二、css中的屬性

1、單位

1.px 像素

2.em 字大小的倍數

2.表示顏色的英文單詞

2.rgb值 取值範圍0-255 例如：綠色 =====> rgb(0,255,0)

rbga(數值1，數值2，數值3，透明度) 透明度取值範圍0-1

3.十六進制表示法 取值範圍0-f 例如:藍色 =======>#0000ff

3.字體樣式的設置

1.font-family 字體系列

指定多個字體時 用“,”隔開 例如:font-family:"New Times","

微軟雅黑",....;

2.font-size 字體大小

單位 px 、 em 例如：font-size:30px;

3.font-style 字體傾斜效果

值：

normal 正常（默認）

oblique 傾斜體

italic 斜體

4.font-weight 字體加粗

值：

normal 正常（默認）

bold 粗體

bolder 加粗體

lighter 細體

100-900 數字越大 字體越粗

5.text-transform 字體英文大小寫轉換

值：

uppercase 全大寫

lowercase 全小寫

capitalize 首字母大寫

6.text-decoration 字體的修飾

值：

none 去除下劃線

underline 增加下劃線

line-through 中劃線（刪除線）

overline 上劃線

7.text-align 文本水平對齊方式

值：

left 左對齊

center 居中對齊

right 右對齊

justify 兩端對齊（一般常用與英文）

8.line-height 行高

文字在一行內垂直居中 line-height:height的值

9.vertical-align 垂直居中

行內塊級元素與行內元素或文本的垂直對齊

值：

baseline

top

middle

bottom

10.overflow 內容溢出處理

值：

visible 超出部分 可見

hidden 超出部分 隱藏

scroll 出現滾動條

auto 瀏覽器自動處理

11.text-overflow 文本溢出處理

值：

clip 超出部分 剪切

ellipsis 超出部分 顯示省略號

12.white-space 空白處理

值：

normal

pre 保留空格

nowrap 不換行 =====》<nobr>強制不換行</nobr>

13.text-indent 文本縮進

值：正負都可以

14.letter-spacing 字母與字母之間的間距/中文的字與字之間的間距

值：正負都可以

15.word-spacing 單詞與單詞之間的間距（英文）

三、權重問題

* 通配符選擇器 權重 0.5

標簽選擇器 權重 1

類選擇器 權重 10

id選擇器 權重 100

行內樣式 權重 1000

樣式裏的值後面 !important 權重最大

包含選擇 權重相加

誰的權重大 誰的樣式起作用

四、盒子模型

1.什麽是盒子模型？

具有內邊距 外邊距 內容 邊框等屬性的假想的盒子

2、padding

2.padding 內邊距（內補丁）

padding-top

padding-right

padding-bottom

padding-left

padding:上下左右; （一個值）

padding:上下 左右; (兩個值)

padding:上 左右 下; (三個值)

padding:上 右 下 左; (四個值) 遵循順時針次序

-------------------------------------------------border

3.border 邊框

border-width 邊框的寬度

border-color 邊框的顏色

border-style 邊框的樣式 （值：solid實心 dotted小圓點 dashed虛線 ...）

border:border-width border-color border-style;

border-left: border-width border-color border-style;

border-right、border-top、border-bottom

例如：border:2px solid red;

border-right:1px dotted blue;

border:none;

border:1px solid red;

border-bottom:none;

邊框的小應用：

小三角：

width:0;

border:10px solid transparent;

border-bottom-color:red;

4.a元素的偽類

a:link{} 未訪問狀態

a:visited{} 訪問過後的狀態

a:hover{} 鼠標懸停時的狀態

a:active{} 激活時的狀態

遵循原則：LoVe HAte

5.元素間的轉換

a.任何元素轉換為塊級元素 display:block

b.任何元素轉換為行內塊級元素 display:inline-block（ie7及以下版本不支持）

c.任何元素轉換為行內元素 display:inline

d.任何元素消失不見 display:none

-----------------------------------------------margin外邊距

用法同padding

註意：

1.左右橫排的盒子之間的間距是 兩者的外邊距相加

2.上下排列的盒子之間的間距是 以最大的為準（大的會把小的給吞掉）

3.一個盒子包著裏一個盒子 他們都有margin-top 以最大的為準（大的會把小的給吞掉）

解決方案:給父元素加overflow:hidden

塊居中 margin:0 auto;

五、關於background背景

1.背景顏色 background-color

值:

1,2,3,4

2.背景圖片 background-image

值:

url(圖片的路徑)

默認情況下 圖片垂直水平都平鋪（重復）

3.背景平鋪 background-repeat

值:

repeat 默認 圖片垂直水平都平鋪（重復）

no-repeat 不平鋪

repeat-x 水平平鋪

repeat-y 垂直平鋪

4.背景圖片位置 background-position

值：

a.表示位置的英文單詞 left right center top bottom

b.百分比

c.具體有單位的數值

left top ====> 0 0 左上角

center top =====>50% 0 頂部中間

right top =====>100% 0 右上角

left center ====>0 50% 左中

center center=====>50% 50% 正中間

right center====>100% 50% 右中

left bottom=====>0 100% 左下角

center bottom====>50% 100% 下中

right bottom===>100% 100% 右下角

5.背景圖片渲染的位置 background-origin

值：

padding-box 從內邊距位置開始渲染圖片（默認）

content-box 從內容區域開始渲染圖片

border-box 從邊框區域開始渲染圖片

6.背景圖片的大小 background-size

值:

a.百分比

b.數值+單位

c.cover 等比例擴展圖片至足夠大 （圖片可能被裁減）

d.contain 等比例擴展圖片至足夠大（圖片可以完整顯示，可能會引起區域內空白）

7.背景圖片是否固定 background-attachment

值:

a.scroll 背景圖片會隨著正常的文檔流滾動（默認）

b.fixed 背景圖片固定不動 不會隨正常的文檔滾動

簡寫： background:background-color background-image background-repeat background-position;

background:背景顏色 url(圖片路徑) 是否重鋪 背景圖片的位置;

例子： background:#fff url(img/1.jpg) no-repeat center center;

css精靈--sprite雪碧圖

六、浮動

浮動的元素脫離正常的文檔流

float:

值:

left 左浮動

right 右浮動

none 不浮動

任何元素加了浮動後（left,right）,變成了塊級元素

清除浮動

1.給父元素加height

2.給父元素加overflow:hidden

3.在浮動元素後面加一個空的塊級元素 給它加樣式 clear:both clear(left清除左浮動 right清除右浮動 both清除左右浮動）

a.給父元素加偽類 :after

父元素:after{

content:"";

display:block;

clear:left;

}

七、定位

position定位：

值：

static 不定位（默認 正常文檔流）

relative 相對定位 （相對於自身）

absolute 絕對定位

1.有定位的元素的外面包著它的元素（可能是直接元素，也可能是間接元素）有定位，相對於有定位的那個元素定位

2.有定位的元素的外面包著它的元素沒有定位，相對於瀏覽器定位

fixed 固定定位 （相對於瀏覽器定位）

多個定位元素的覆蓋次序 通過z-index來判斷 z-index的值是一個沒有單位的數值

誰的z-index的值越大，誰就在最上層

八、列表樣式

1.list-style-type 列表樣式類型

值：

a.disc 實心原點

b.none 去掉樣式

c.circle 空心圓

d.square 實心方形

2.list-style-image 列表樣式圖片

值：

url(圖片路徑)

3.list-style-position 列表樣式的位置

值：

outside 列表樣式在內容的外面

inside 使列表樣式在內容再裏面

元素隱藏

1.display ：none 元素在頁面不顯示 位置也不見了

2.visibility:hidden 元素在頁面不顯示 位置還在

3.opacity:0 元素在頁面看不見 位置還在

4.z-index ： -999999 元素在頁面也看不見

鼠標光標的樣式

1.cursor 光標

值：

pointer 小手樣式

wait 等待

help 幫助

url(圖片路徑),auto 光標變成所需要的小圖片

CSS基礎全薈