CSS基礎筆記

2021-10-03 04:51:38 字數 1226 閱讀 6101

行內樣式、檔案引入、style標籤

型別示例

權重行間樣式

1000

id選擇器

#id {}

100類選擇器

.class {}

10偽類選擇器

#id:hover {}

10屬性選擇器

[type=「text」]

10標籤選擇器

div1

偽元素選擇器

p:first-line

1後代(直接)選擇器

div p,div>p(直接)

0兄弟(直接)選擇器

div~p,div+p(直接)

0萬用字元權重也為0,繼承的樣式沒有權重。

選擇器可以進行分組h1,p1{},也可以進行巢狀h1.class1{}

小知識:偽類和偽元素很相似,但是不一樣的,乙個在於特定狀態(動態),乙個在於本體

基本要素:內邊距,外邊距,寬高,邊框(css3中有圓邊框),輪廓(outline)

常用尺寸:height,width,line-height(文字),最大/最小寬高(用於避免自適應導致的變

形),text-align

小知識:外邊距margin取負值可用於複雜布局,取auto可以自適應長度,可用於居中

flex(重點),用好flex,float就基本可以不用了,要用float一般要配合clear:both使用

inline(行內),block(塊級),inline-block(內聯塊級),none(相當於元素消失,與hidden不同,hidden是隱藏)

grid(重點),還有個column

絕對定位absolute,脫離文件流,相對於最近已定位祖先元素進行定位

相對定位relative,不脫離文件流,相對與自身原本位置進行定位

固定定位fix,脫離文件流,相對於視窗進行定位

黏性定位sticky ,在relative與fix間切換

垂直水平居中:水平居中讓margin為auto即可,垂直居中用50%加相對定位可以做到。

氣泡的寫法:利用大小為0邊框不為0的div進行上色可以構建三角形,然後想辦法各種拼接

雙飛翼等布局:利用flex可以輕鬆解決,或者利用float結合margin取負值進行拼接

移動端自適應:設定viewport,然後用**查詢,rem,vw等等單位,詳情看自適應篇章

相容問題:主要是要相容ie,主要解決各種顯示有問題的情況,所以用css3的話要對瀏覽器進行判斷,最好寫多套**。

css 基礎筆記

css 樣式的兩種引用方式 1.body h1,h22.attention用粗體顯示所有class屬性為 attention 的標記。3.聯合使用 p.attention 表示在p中有class attention 屬性時除了用粗體顯示以外,還應該用紅色顯示。4.除了class以外還用應用在指定id...

CSS 基礎筆記

css cascading style sheets 層疊樣式表 主要是用於定義html內容在瀏覽器內的顯示樣式,如文字大小 顏色 字型加粗等。示例 頂過枯燥無味的學習!css樣式 內聯式 直接把css 寫在html標籤裡 超酷的網際網路 嵌入式 把css 寫在標籤之間。外部式 外聯式 把css 寫...

CSS基礎筆記

1 常見css屬性1.1.background color 設定元素背景顏色 1.2.border 設定圍繞元素的邊框 1.3.color 設定元素的前置顏色 1.4.font size 設定元素文字的字型大小 1.5.height 設定元素的高度 1.6.padding 設定元素與邊框的間距 1....