CSS基礎內容（一）

2021-10-03 11:47:21 字數 1542 閱讀 7185

一入**深世海，不知禿頭何時來！又是深夜來臨了，這一天又不知不覺過去了。整理一下今天css主要關鍵點內容，以便後續隨時複習，加油！

①簡介

css（cascading style sheets）層疊樣式表。負責頁面的表現給頁面增加樣式 如字型顏色、寬高、背景色…

②引入css

a.行內樣式

大家都是年輕人嘛。相互傷害
b.內嵌式

在head標籤內部放置

注：選擇器（幫我們選擇到操作的元素）
c.外鏈式

把樣式寫到乙個或多個css檔案中，在網頁中通過link引用需要的樣式檔案

③選擇器

選中我們要設定樣式的標籤

a.標籤選擇器（標籤名）

div
​ 特點：選中頁面所有的div標籤

b.id選擇器

​ 先給作用元素設定id，然後通過#id值

#div1
​ 特點：選中唯一的元素

c.類選擇器

給需要設定該類樣式的標籤 新增class=「類名」，設定類的時候盡量原子化

格式：.類名 

.font60 


.green
​ 特點：一般情況把某一樣樣式定義乙個類，這樣以後可以復用，也就是可以組合使用

d.萬用字元選擇器

*
注：*

*代表所有元素，設定所有的元素

e.後代選擇器

/* div標籤的後代p */


div p 


/* div的親兒子p */


div>p 


ul li p
f.交集選擇器
/* 交集選擇器 p.p3--即是p元素class又是p3 */	


ul li p.p3 


/* p.p3--即是p元素id又是p3 */	 


ul li p#p3
g.並集選擇器
/* 並集選擇器:用逗號隔開--即是滿足p元素又是滿足span元素*/


p,span
h.偽類選擇器

不同狀態下顯示的樣子

/* 未訪問前 */


a:link 


/* 鏈結訪問過的狀態 */


a:visited 


/* 滑鼠放入超連結狀態 */


a:hover 


/* 按住超連結不鬆手的狀態 */


a:active
明天做點小案例鞏固前面學習內容。

CSS基礎內容 學習筆記

cascading style sheets 層疊樣式表！樣式表 顯示的效果！層疊 可以對同一元素設定相同屬性的不同值 更改其顯示效果！html 頁面顯示內容的骨架！沒毛的鸚鵡！css 對頁面顯示的骨架內容進行美化！長了一身很漂亮羽毛的鸚鵡！方式一 行內引入 直接將css 寫在標籤的內部 每乙個ht...

關於CSS的一些基礎內容

最近用到了css，剛好學學。css cascading style sheet 中文名層疊樣式表，用於為html文件新增樣式控制，也是一種計算機語言。一 css語法 a css規則由選擇器和宣告組成，構造為selector，多個宣告之間用分號隔開。declaration又包含屬性property和值...

CSS部分基礎知識內容

css 外部樣式表rel stylesheet href css 外部樣式表.css type texts rel 當前關聯的檔案型別 stylesheet 樣式表 href css檔案的路徑 type 檔案型別 預設就是css檔案型別 css語法 選擇器 樣式表的權重 優先順序 樣式表的選擇 選擇...