CSS基礎內容 學習筆記

2021-09-26 20:06:04 字數 2339 閱讀 5474

cascading style sheets 層疊樣式表!

樣式表:顯示的效果!

層疊:可以對同一元素設定相同屬性的不同值(更改其顯示效果!)

html:頁面顯示內容的骨架! 沒毛的鸚鵡!

css:對頁面顯示的骨架內容進行美化! 長了一身很漂亮羽毛的鸚鵡!

方式一:行內引入(直接將css**寫在標籤的內部)【每乙個html標籤都有乙個style,然後就可以在style屬性中書寫css**!】

明天好好複習!

css**由:

css屬性:屬性值

構成!!!

上圖為行內引入

方式二:內部引入(需要在當前html頁面中書寫乙個style標籤)// 標籤一般放在head標籤的內部!style標籤的type屬性和值可寫可不寫!預設就是type="text/css"

格式:標籤

方式三:外部引入(在外面單獨定義乙個css檔案,然後在html檔案中使用link標籤引入這個css檔案)

styel.css檔案,內容如下:

divhtml檔案:href指定css檔案的位置

三種引入方式有區別!!!【優先順序的問題!】

就近原則!(樣式**與需要設定樣式的標籤越近,就按照其樣式顯示!)

行內引入方式優先順序最高!

選擇器:目的是為了獲得我們需要操作的那個標籤!!!

1.1 基本選擇器

元素選擇器(標籤選擇器)

元素/標籤名稱

類選擇器  【需要在標籤中定義乙個class屬性,並賦值;多個標籤定義的class屬性值可以相同,所有的標籤具有相同的樣式!】

.class屬性值

id選擇器  【需要在標籤中定義乙個id屬性,並賦值;建議id屬性值唯一!不唯一也有效果!!】

#id屬性值

1.2 擴充套件選擇器

層級選擇器

屬性選擇器

元素名稱[屬性名稱=『屬性值』]

多個選擇器求並集

偽類選擇器(了解) *****>>>針對於超連結的!
去下劃線: text-decoration: none

背景樣式:

background:設定背景

文字樣式:

color:設定文字的顏色

text-align:設定文字的水平對齊方式

字型樣式:

font-size:設定文字的大小

font-family: 設定文字的字型

font-weight: 設定文字的粗細

其它的文字樣式,請自行查詢!!

none:隱藏

inline:顯示在同一行

block:單獨顯示一行!

CSS基礎學習筆記

個人理解 距被控制的元素越近,優先順序越高 css基礎語法 選擇器 即需要改變樣式的 html 元素宣告 屬性和值 即css 規則格式為 selector property value porperty2 value 值的不同寫法和單位 值為單詞 風格 空格和大小寫 css高階語法 繼承及其問題 擺...

CSS基礎學習筆記

1.css樣式優先順序 元素上的樣式 style中嵌入的樣式 外部樣式檔案,其實不太準確,應當是當嵌入式出現在外部樣式的後面時,按照style出現的順序來渲染的,後面出現的會覆蓋前面的。同乙個樣式檔案中,元素選擇器越精確優先順序越高,id選擇器 100 類選擇器 10 元素選擇器 1 根據權值 累計...

CSS基礎學習筆記

初學css所以就以部落格的形式記錄下來,權當是個記事本了。css規則由倆個主要部分構成 選擇器,以及一條或多條宣告 selector 其中選擇器通常是你需要改變的html元素,例如 p 或 h1 這些 每條宣告由乙個屬性和乙個值組成 其中屬性 property 是希望您設定的樣式屬性。每個屬性都有乙...