第一個css程序

css程序都是在style標簽中書寫

打開該網頁，可以看到h1標簽中的我是標題被渲染成了紅色

可以在同級目錄下創建一個css目錄，專門存放css文件，可以和html分開編寫

然后在html頁面中，利用link標簽以及css文件地址，將該css文件引入html中，達到上述同樣效果

也可用下述import方式引入外部的css文件

css的優勢:
1、內容和表現分離
2、網頁結構表現統一，可以實現復用
3、樣式十分的豐富
4、建議使用獨立于html的css文件

css三種導入方式

1.內部樣式：在頁面中用style標簽中寫css樣式

2.行內樣式：在標簽元素中直接用style屬性編寫樣式

3.外部樣式：在外部css目錄中編寫css文件，再用上述link標簽引入css樣式

如果這多個css樣式對同一個內容進行渲染，則采取就近原則進行生效，誰離渲染內容近，用誰渲染

css選擇器

基本選擇器

1、標簽選擇器

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

2、類選擇器 class

類選擇器的格式.class的名稱{}

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

3、ld 選擇器

id選擇器 #id名稱{}?id必須保證全局唯一

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

層次選擇器

1、后代選擇器（在某個元素的后面祖爺爺 爺爺 爸爸 你）

在body標簽下的所有p標簽，不分層次級別

2、子選擇器（一代 兒子）

在body標簽下面的第一代p標簽，因為無序列表里的p標簽為第二級的標簽，故不在范圍內，不渲染

3、相鄰兄弟選擇器（相鄰向下的一個）

active類標簽的向下一個，的同級p標簽渲染

4、通用選擇器

通用兄弟選則器，當前選中元素的向下的所有兄弟元素

選中active類下的所有同級p標簽元素

結構偽類選擇器

ul的第一個子元素,ul的最后一子元素

選擇當前p元素的父級元素，選中父級元素的第2個，并且是當前元素才生效!

屬性選擇器(常用)

先通過后代選擇器，將demo類標簽下的所有a標簽元素渲染

a標簽中存在id屬性的元素a[id]{}

a標簽中，id=first的元素被渲染成黃色

a標簽中class屬性包含links的元素被渲染， class*=“links”

a標簽中href屬性以http開頭的元素被渲染 a[href^=http]{}

a標簽中href屬性以pdf結尾的元素被渲染a[href$=pdf]{}

?美化網頁元素

為什么要美化網頁

1、有效的傳遞頁面信息，凸顯頁面的主體
2、美化網頁，頁面漂亮，才能吸引用戶
3、凸顯頁面的主題
4、提高用戶的體驗

span標簽

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

字體樣式

font-family:字體

font-size:字體大小

font-weight:字體粗細

color:字體顏色

文本樣式

顏色 color rgb rgba

text-align :排版，居中

text-indent:2em;段落首行縮進

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

裝飾 text-decoration

text-decoration:none;可以讓a標簽的文本內容中的下劃線消失

鼠標懸浮的顏色，鼠標懸浮在a標簽的文本內容上時，顯示為橙色

a: hover

、

鼠標按住未釋放的狀態，a:active,鼠標選中不放手，a標簽文本內容顯示為綠色