CSS3

HTML+CSS+JavaScript

結構+表項+交互

如何學習？

CSS是什么

CSS怎么用(快速入門)

CSS選擇器(重點+難點)

美化網頁(文字、陰影、超鏈接、列表、漸變...)

盒子模型

浮動

定位

網頁動畫(特效效果)

1、初識CSS

1.1、什么是CSS

Cascading Style Sheet(層疊樣式表)

CSS：表現(美化網頁)

字體、顏色、邊距、高度、寬度、背景圖片、網頁定位、網頁浮動...

1.2、發展史

CSS1.0

CSS2.0 DIV(塊)+CSS，HTML與CSS結構分離，網頁變得簡單，利于SEO

CSS2.1 浮動和定位

CSS3.0 圓角邊框、陰影、動畫.... 瀏覽器兼容性

1.3、快速入門

Title

color:red;

}

我是標題

建議使用這種規范

CSS優勢：

內容和表現分離

網頁結構表現統一，可以實現復用

樣式十分豐富

建議使用獨立于HTML的css文件

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

1.4、css的三種導入方式

Title

color:green;

}

我是標題

拓展：外部樣式兩種寫法：

鏈接式：

導入式：

@import是CSS2.1特有的

2、選擇器

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

2.1、基本選擇器

2.1.1、標簽選擇器

選擇一類標簽

語法：

? 標簽名>

? 標簽名{

? 聲明1：；

? 聲明2：；

? }

Title

h1{

color: #dcff4f;

background: deepskyblue;

border-radius: 14px;

}

p{

font-size: 80px;

}

學Java

學Java

狂神說

2.1.2、類選擇器 class

選中所有class屬性一致的標簽，可以跨標簽

語法：

?

? .類名{

? 聲明1：；

? 聲明2：；

? }

Title

好處：可以多個標簽歸類，是同一個class，可以復用

*/

.one{

color:wheat;

}

.two{

color:red;

}

.three{

}

標題1

標題2

標題3

2.1.3、id選擇器

全局唯一

語法：

?

? #id名{

? 聲明1：；

? 聲明2：；

? }

Title

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

*/

#one{

color: aquamarine;

}

.style1{

color:red;

}

h1{

color: #dcff4f;

}

標題1

標題2

標題3

標題4

標題5

優先級：不遵循就近原則，固定的：id選擇器>類選擇器>標簽選擇器

2.2、層次選擇器

HTML

p0

p1

p2

p3

• p4

• p5

• p6

2.2.1、后代選擇器

在某個元素的后面 ：祖爺爺 爺爺 爸爸 我

/*后代選擇器*/

body p{

background: red;

}

2.2.2、子選擇器

只有當前選擇的下一代

/*子選擇器*/

body > p{

background: blueviolet;

}

2.2.3、相鄰兄弟選擇器

同輩 對下不對上，只有一個

/*相鄰兄弟選擇器*/

.active + p{

background: cadetblue;

}

2.2.4、通用選擇器

當前選中元素的向下的所有元素

/*通用兄弟選擇器*/

.active ~ p{

background: green;

}

2.3、結構偽類選擇器

偽類：條件

Title

ul li:first-child{

background: #dcff4f;

}

/*ul的第最后一個子元素*/

ul li:last-child{

background: blueviolet;

}

/*選中p1:定位到父元素，選中當前的第一個元素

選中當前元素的父級元素，選中父級元素的第n個，但第n個元素必須是是當前元素，否則選不中

*/

p:nth-child(3){

background: cadetblue;

}

/*先選中當前元素的父級元素，然后選中父級元素的第n個和當前元素同類型的元素*/

p:nth-of-type(3){

background: wheat;

}

/*鼠標移動到上面會發生變化*/

a:hover{

background: black;

}

12231

h1

p1

p2

p3

• li1
• li2
• li3

2.4、屬性選擇器(常用)

class+id結合

屬性名

屬性名 = 屬性值(正則)

**= 絕對等于 **

*= 包含

^= 以...開頭

$= 以...結尾

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.= 絕對等于 *= 包含

4.^= 以...開頭

5.$= 以...結尾

*/

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

a[id]{

background: #2be24e;

}

/*選中id=first*/

a[id=first]{

background: #ff0b2f;

}

/*class中有link的*/

a[class *= "link"]{

background: cadetblue;

}

/*選中href中以http開頭的*/

a[href^=http]{

background: #ff0b2f;

}

/* 選中href中以pdf結尾的*/

a[href$=pdf]{

background: #2be24e;

}

1

2

3

4

5

6

7

8

9

10

3、美化網頁元素

3.1、為什么要美化網頁

有效的傳遞頁面信息

美化網頁，頁面漂亮才能吸引用戶

凸顯頁面主題

提高用戶體驗

span標簽：重點要突出的字，使用span套起來

Title

font-size: 50px;

}

歡迎學習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/單詞;

對齊方式 text-align: center;水平居中

首行縮進 text-indent: 2em;

行高 height: 300px;塊高

??line-height: 300px;行高

??行高和塊高度一致，就可以實現單行文本上下居中

裝飾劃線 text-decoration:

文本圖片水平對齊 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;

}

/*水平對齊 參照物， a b */

img,span{

vertical-align: middle;

}

123

123123

123123

123123

總結

以上是生活随笔為你收集整理的css3是什么 ptml_CSS3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。