柚子快報邀請碼778899分享：前端 CSS3詳解

http://yzkb.51969.com/

1.什么是CSS

css的優(yōu)勢

1、內(nèi)容和表現(xiàn)分離 2、網(wǎng)頁結(jié)構(gòu)表現(xiàn)統(tǒng)一，可以實現(xiàn)復用 3、樣式十分的豐富 4、建議使用獨立于html的css文件 5、利用SE0,容易被搜索引擎收錄！

CSS的幾種導入方法

內(nèi)部式

外部式

嵌入式

2.選擇器?

選擇頁面上的某一個或者某一類標簽

1.基本選擇器

優(yōu)先級關(guān)系

id 選擇器>class 選擇器 >標簽選擇器

1.標簽選擇器

標簽選擇器會選擇到頁面上所有的這個標簽

2.類選擇器

標題一

標題二

3.id選擇器

第一標題

第二標題

2.層次選擇器

1.后代選擇器

?2.子代選擇器

3.相鄰兄弟選擇器

4.通用選擇器

3.結(jié)構(gòu)偽類選擇器

?4.屬性選擇器

= 是絕對等于

*=是包含等于?

^=是開頭

$=是結(jié)尾

/*class 中含有l(wèi)inks的元素*/

選中href中以HTTP開頭的元素

href中以ccc結(jié)尾的

3.美化網(wǎng)頁的元素?

1.字體樣式

????????font-fami1y:字體 ????????font-size:?字體大小 ????????font-weight:字體粗細 ????????co1or:字體顏色

小故事

有一個男孩和一個女孩，他們相愛了?？墒呛芸炷泻⒌搅四挲g，要去軍隊服役三年。男孩臨走之前在一片海灘上對女孩說：“親愛的，等到三年后的今天我回來的時候，我們就在這里見面，好嗎？”女孩答應(yīng)了，淚流滿面地目送男孩離開。

三年以后，男孩回來了，他帶著鉆戒在海灘上等待女孩來赴約并向她求婚?？墒桥⒃缫延辛诵碌男纳先耍K究沒有來。男孩絕望的把鉆戒拋進了大海，從此在這里安下家靠打漁為生。

2.文本樣式

顏色

? ? ? ? 1.單詞

? ? ? ? ?2.RGB 0-F

? ? ? ? 3.RGBA? A:0-1

text-align? ? ? ? 排版 居中

text-indent? ? ? ? 段落首行縮進

height? ? ? ? ? ? ?塊高

line-height? ? ? ? ?行高

塊高與行高的高度一致就可以上下居中

3.文本陰影與超鏈接偽類

4.列表

List-style: ????????none 去掉原點 ????????circle 空心圓 ????????decimal 數(shù)字 ????????square 正方形?

#nav{

/*標簽*/

width:300px;

background: gray;

}

.title{

font-size:18px;

font-weight:bold;

text-indent:1em;

line-height:35px;

background:red;

}

ul{

background: gray;

}

ul li{

height:30px;

/*列表格式*/

list-style: none;

text-indent: 1em;

}

a{

text-decoration: none;

font-size:14px;

color: #000;

}

a:hover{

color: yellow;

}

5.盒子模型

margin:外邊距

padding：內(nèi)邊距

border:邊框

1.border邊框

/*border:粗細，樣式，顏色*/

border:1px solid red;

2.內(nèi)外邊距

margin的參數(shù)： 上 右 下 左

/*邊距*/

margin: 1px 2px 3px 4px;

盒子計算方式：你的盒子有多大

margin+border+padding+內(nèi)容

3.圓角邊框

border-radius:左上 右上 右下 左下

4.陰影

6.浮動

塊級元素：獨占一行

h1~h6? p? ?div? ?列表

行內(nèi)元素：不獨占一行

span a img strong

行內(nèi)元素，可以被包含在 塊級元素中，反之則不可以

display

block 塊元素

inline 行內(nèi)元素

inline-block 是塊元素，但是可以內(nèi)聯(lián)，在一行

float

什么是css Float？

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。

元素怎樣浮動

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之后的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果圖像是右浮動，下面的文本流將環(huán)繞在它左邊：

img

{

float:right;

}

清除浮動 - 使用 clear

元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。

clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動元素。

.text_line

{

clear:both;

}

如何解決父標簽塌陷

1.給父標簽設(shè)置一個高度

2.在浮動標簽下邊設(shè)置一個div標簽，并且清除浮動

3.overfloat

4.在父類里添加一個偽類after?

7.定位

1.相對定位

相對定位元素的定位是相對其正常位置。

原來的位置會被保留，不會出現(xiàn)父標簽塌陷

h2.pos_left

{

position:relative;

left:-20px;

}

h2.pos_right

{

position:relative;

left:20px;

}

2.絕對定位

定位基于XXX定位，上下左右

1.沒有父級元素定位的前提下，相對于瀏覽器定位

2.假設(shè)父級元素存在定位，我們通常相對于父級元素進行偏移

3.在父級元素范圍內(nèi)移動，相對于父級元素或者瀏覽器的位置，進行指定的偏移，他不在標準文檔流中，原來的位置不會被保留

3.固定定位

div:nth-of-type(2){

width:50px;

height: 50px;

background: yellow;

position: fixed;

right:0;

bottom: 0;

}

3.z-index

圖層

/*圖層設(shè)置*/

z-index:999；

透明度：

????????opacity:0.5

柚子快報邀請碼778899分享：前端 CSS3詳解

http://yzkb.51969.com/

文章鏈接