CSS 知識點整理1

2021-09-27 08:39:03 字數 3230 閱讀 6373

css提供了一種分層設計的思想,html提供具體的內容,而css對內容進行編輯,排版,更加方便管理。

一、css選擇器

元素選擇器
紅色

"c1">藍色

"c2">綠色

紅色

"c1">藍色

"c2">綠色

二、元素尺寸大小設定
html,body

獲取瀏覽器的定高。子元素的父元素是body,body的父元素是html,通過設定html的高度,就可以獲取瀏覽器的定高。

所以出現了html和body同時設定height:100%,通過這個方法就可以獲取瀏覽器的定高了。

三、背景設定

**解釋

值background-color

背景顏色

redbackground-image

做背景url(imagepath)

background-repeat

設定背景重複

repeat、repeat-x、repeat-y、no-repeat

background-size

設定背景的尺寸

contain、length、percentage

background-position

設定背景的起始位置

left center

注:

1、background-size:contain是將背景擴大到最大尺寸;background-size:length會設定背景影象的高度和寬度,第乙個值設定寬度,第二個值設定高度。如background-size:80px 60px;

2、background-position:設定背景影象的起始位置。需要設定水平和垂直兩個位置,否則為center。

四、字型格式

**解釋

值font-size

設定字型尺寸

50px

font-style

設定字型風格

normal、italic

font-weight

設定字型粗細

normal、bold

font-family

設定字型

new roman、宋體、黑體

font

將所有格式都宣告在一起

以空格分隔

五、文字格式

**解釋

值color

文字顏色

redtext-align

水平控制

center、right、left

vertical-align

垂直控制

top、middle、bottom

text-decoration

文字修飾

line-through、none

line-height

行間距200px

letter-spacing

字元間距

200px

word-spacing

單詞間距

200px

text-indent

首行縮排

50px

text-transform

大小寫uppercase、capitalize、lowercase

white-space

空白格pre、pre-wrap

注:

1、在text-decoration中,值overline代表上劃線、line-through是文字出現刪除效果、underline下劃線、none去掉超連結中的下劃線。

2、white-space 輸入空格,值pre輸入空格後不會換行,值pre-wrap輸入空格如果大於父容器的話會換行。

3、在text-transform中,uppercase表示全部大寫 ,capitalize 首字母大寫 ,lowercase 全部小寫 。

六、對元素**進行設定 **

解釋值border-style

邊框風格

solid: 實線 dotted:點狀 dashed:虛線 double:雙線

border-color

邊框顏色

red, #ff0000, rgb(255,0,0)

border-width

邊框寬度

50px

border

放在一起設定,如font

另外,通過制定位置可以使某一方向上有邊框,而其他方向上沒有.如:

我要學好css

**

解釋padding-left

左內邊距

padding-right

右內邊距

padding-top:

上內邊距

padding-bottom

下內邊距

padding

上 右 下 左

與下邊框距離為50px
**

解釋margin-left

左外邊距

margin-right

右外邊距

margin-top

上外邊距

margin-bottom

下外邊距

左外邊距

"p">左外邊距

text-decoration: none 去掉超連結的下劃線

七、css對table的操作
tr

(2)使用border-collapse屬性值解釋

separate

邊框會被分開

collapse

邊框會合併為乙個單一的邊框

inherit

規定應該從父元素繼承 border-collapse 屬性的值

注:

1、border-spacing只有在border-collapse被設定成separate時才有效果。

2、border-spacing的值:

規定相鄰單元的邊框之間的距離。

定義乙個 length,那麼定義的是水平和垂直間距。

定義兩個 length 引數,那麼第乙個設定水平間距,而第二個設定垂直間距。

CSS 知識點整理

本文是我整理的關於css的部分基礎知識點,適合正在準備前端工作面試的人做簡單回顧。css盒模型本質上是乙個盒子,封裝周圍的html元素,它包括 邊距,邊框,填充,和實際內容。利用css我們可以擺脫html標籤歸類的限制,自由地在不同標籤 元素上應用我們需要的屬性。主要用的css樣式有以下三個 pos...

CSS 知識點整理

均為外部引用css檔案 stylesheet href xx.css type text css import url xx.css 1 link屬於html標籤,而 import是css提供的 2 頁面被載入的時,link會同時被載入,而 import引用的css會等到頁面被載入完再載入 3 li...

CSS常見知識點整理

position的值 水平居中塊級元素 如 div 可以使用 margin auto css組合選擇符包括各種簡單選擇符的組合方式。在 css3 中包含了四種組合方式 ps 從外部載入樣式表 內聯元素的特點 1.和其他的元素顯示在一行上 2.內邊距和外邊距 高度,寬度都是不可改變的,他的寬度是根據他...