CSS3

HTML+CSS+JavaScript

結(jié)構(gòu)+表項(xiàng)+交互

如何學(xué)習(xí)？

CSS是什么

CSS怎么用(快速入門(mén))

CSS選擇器(重點(diǎn)+難點(diǎn))

美化網(wǎng)頁(yè)(文字、陰影、超鏈接、列表、漸變...)

盒子模型

浮動(dòng)

定位

網(wǎng)頁(yè)動(dòng)畫(huà)(特效效果)

1、初識(shí)CSS

1.1、什么是CSS

Cascading Style Sheet(層疊樣式表)

CSS：表現(xiàn)(美化網(wǎng)頁(yè))

字體、顏色、邊距、高度、寬度、背景圖片、網(wǎng)頁(yè)定位、網(wǎng)頁(yè)浮動(dòng)...

1.2、發(fā)展史

CSS1.0

CSS2.0 DIV(塊)+CSS，HTML與CSS結(jié)構(gòu)分離，網(wǎng)頁(yè)變得簡(jiǎn)單，利于SEO

CSS2.1 浮動(dòng)和定位

CSS3.0 圓角邊框、陰影、動(dòng)畫(huà).... 瀏覽器兼容性

1.3、快速入門(mén)

Title

color:red;

}

我是標(biāo)題

建議使用這種規(guī)范

CSS優(yōu)勢(shì)：

內(nèi)容和表現(xiàn)分離

網(wǎng)頁(yè)結(jié)構(gòu)表現(xiàn)統(tǒng)一，可以實(shí)現(xiàn)復(fù)用

樣式十分豐富

建議使用獨(dú)立于HTML的css文件

利于SEO，容易被搜索引擎收錄

1.4、css的三種導(dǎo)入方式

Title

color:green;

}

我是標(biāo)題

拓展：外部樣式兩種寫(xiě)法：

鏈接式：

導(dǎo)入式：

@import是CSS2.1特有的

2、選擇器

作用：選擇頁(yè)面上的某一種元素或者某一類元素

2.1、基本選擇器

2.1.1、標(biāo)簽選擇器

選擇一類標(biāo)簽

語(yǔ)法：

? 標(biāo)簽名>

? 標(biāo)簽名{

? 聲明1：；

? 聲明2：；

? }

Title

h1{

color: #dcff4f;

background: deepskyblue;

border-radius: 14px;

}

p{

font-size: 80px;

}

學(xué)Java

學(xué)Java

狂神說(shuō)

2.1.2、類選擇器 class

選中所有class屬性一致的標(biāo)簽，可以跨標(biāo)簽

語(yǔ)法：

?

? .類名{

? 聲明1：；

? 聲明2：；

? }

Title

好處：可以多個(gè)標(biāo)簽歸類，是同一個(gè)class，可以復(fù)用

*/

.one{

color:wheat;

}

.two{

color:red;

}

.three{

}

標(biāo)題1

標(biāo)題2

標(biāo)題3

2.1.3、id選擇器

全局唯一

語(yǔ)法：

?

? #id名{

? 聲明1：；

? 聲明2：；

? }

Title

不遵循就近原則，固定的：id選擇器>類選擇器>標(biāo)簽選擇器

*/

#one{

color: aquamarine;

}

.style1{

color:red;

}

h1{

color: #dcff4f;

}

標(biāo)題1

標(biāo)題2

標(biāo)題3

標(biāo)題4

標(biāo)題5

優(yōu)先級(jí)：不遵循就近原則，固定的：id選擇器>類選擇器>標(biāo)簽選擇器

2.2、層次選擇器

HTML

p0

p1

p2

p3

• p4

• p5

• p6

2.2.1、后代選擇器

在某個(gè)元素的后面 ：祖爺爺 爺爺 爸爸 我

/*后代選擇器*/

body p{

background: red;

}

2.2.2、子選擇器

只有當(dāng)前選擇的下一代

/*子選擇器*/

body > p{

background: blueviolet;

}

2.2.3、相鄰兄弟選擇器

同輩 對(duì)下不對(duì)上，只有一個(gè)

/*相鄰兄弟選擇器*/

.active + p{

background: cadetblue;

}

2.2.4、通用選擇器

當(dāng)前選中元素的向下的所有元素

/*通用兄弟選擇器*/

.active ~ p{

background: green;

}

2.3、結(jié)構(gòu)偽類選擇器

偽類：條件

Title

ul li:first-child{

background: #dcff4f;

}

/*ul的第最后一個(gè)子元素*/

ul li:last-child{

background: blueviolet;

}

/*選中p1:定位到父元素，選中當(dāng)前的第一個(gè)元素

選中當(dāng)前元素的父級(jí)元素，選中父級(jí)元素的第n個(gè)，但第n個(gè)元素必須是是當(dāng)前元素，否則選不中

*/

p:nth-child(3){

background: cadetblue;

}

/*先選中當(dāng)前元素的父級(jí)元素，然后選中父級(jí)元素的第n個(gè)和當(dāng)前元素同類型的元素*/

p:nth-of-type(3){

background: wheat;

}

/*鼠標(biāo)移動(dòng)到上面會(huì)發(fā)生變化*/

a:hover{

background: black;

}

12231

h1

p1

p2

p3

• li1
• li2
• li3

2.4、屬性選擇器(常用)

class+id結(jié)合

屬性名

屬性名 = 屬性值(正則)

**= 絕對(duì)等于 **

*= 包含

^= 以...開(kāi)頭

$= 以...結(jié)尾

Title

float: left;

display: block;

height: 50px;

width: 50px;

border-radius: 10px;

background: blue;

text-align: center;

color: gainsboro;

text-decoration: none;

margin-right: 5px;

font: bold 20px/50px Arial;

}

/*

1.屬性名

2.屬性名=屬性值(正則)

3.= 絕對(duì)等于 *= 包含

4.^= 以...開(kāi)頭

5.$= 以...結(jié)尾

*/

/*選中存在id屬性的元素 a[]{} */

a[id]{

background: #2be24e;

}

/*選中id=first*/

a[id=first]{

background: #ff0b2f;

}

/*class中有l(wèi)ink的*/

a[class *= "link"]{

background: cadetblue;

}

/*選中href中以http開(kāi)頭的*/

a[href^=http]{

background: #ff0b2f;

}

/* 選中href中以pdf結(jié)尾的*/

a[href$=pdf]{

background: #2be24e;

}

1

2

3

4

5

6

7

8

9

10

3、美化網(wǎng)頁(yè)元素

3.1、為什么要美化網(wǎng)頁(yè)

有效的傳遞頁(yè)面信息

美化網(wǎng)頁(yè)，頁(yè)面漂亮才能吸引用戶

凸顯頁(yè)面主題

提高用戶體驗(yàn)

span標(biāo)簽：重點(diǎn)要突出的字，使用span套起來(lái)

Title

font-size: 50px;

}

歡迎學(xué)習(xí)java

3.2、字體樣式

font-family: "Arial Black", 楷體;

}

h1{

font-size: 50px;

color: #ff0b2f;

}

.p1{

font-weight: bold;

}

font: oblique bolder 16px "楷體" ;

}

3.3、文本樣式

顏色 color: rgb/rgba/單詞;

對(duì)齊方式 text-align: center;水平居中

首行縮進(jìn) text-indent: 2em;

行高 height: 300px;塊高

??line-height: 300px;行高

??行高和塊高度一致，就可以實(shí)現(xiàn)單行文本上下居中

裝飾劃線 text-decoration:

文本圖片水平對(duì)齊 vertical-align: middle;

Title

color: rgba(0,255,255,0.9);

text-align: center;/*文本居中*/

}

.p1{

text-indent: 2em;

}

.p3{

background: blue;

height: 300px;

line-height: 300px;

}

/*下劃線*/

.l1{

text-decoration: underline;

}

/*中劃線*/

.l2{

text-decoration: line-through;

}

/*上劃線*/

.l3{

text-decoration: overline;

}

/*超鏈接去下劃線*/

a{

text-decoration: none;

}

/*水平對(duì)齊 參照物， a b */

img,span{

vertical-align: middle;

}

123

123123

123123

123123

總結(jié)

以上是生活随笔為你收集整理的css3是什么 ptml_CSS3的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。