必備前端知識 二css

2021-09-26 21:29:38 字數 1111 閱讀 4888

2.css

cascading style sheets 層疊樣式表

層疊:多個樣式可以作用在同乙個html元素上,同時生效

好處:1.功能比較強大

2.將元素展示和樣式控制分離降低耦合度。解耦,讓分工合作更容易,提高開發效率

css的使用:css、與html的結合方式

1.內聯

hello css

2.內部《在head>標籤內,定義乙個style標籤

3.外聯 1.先定義乙個css檔案

2.在head中 定義link標籤,在src中引入標籤

css語法

選擇器選擇器:選擇具有相似特徵的元素

注意:每一對分號必須寫

1.分類

1.基本選擇器

1.id選擇器

#div1

2.元素選擇器

標籤名稱{} div{}

id選擇器高於元素

3.類選擇器

.cls1

類選擇器優先於元素選擇器

2.擴充套件選擇器

1.選擇所有元素

*{}2.並集選擇器

選擇器1,選擇器2{}

3.子選擇器 div下的p標籤

選擇器1 選擇器2{}

4.父選擇器 有p的 div盒子

選擇器1>選擇器2{}

5.屬性選擇器 選擇元素名稱 屬性名等於屬性值

元素名稱【屬性名=屬性值】{}

6.偽類選擇器

a:狀態

屬性:1.字型文字

font-size:字型大小

color:顏色

text-align 字型位置

line-height 行高

2.背景

background:url(路徑) no repeat center;

3.邊框

border 邊框 復合屬性

border 1px solid red;

4.尺寸

height

width

5.盒子模型

margin外邊距,但是會改變盒子大小

box-sizing:border-box;

padding:內邊距

float:浮動

前端必備 二 CSS篇

當對乙個文件進行布局的時候,瀏覽器的渲染引擎會根據盒模型將所有元素表示為乙個個矩形的盒子,css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子有4個區域 從內到外是content padding border margin。margin區域用於分開相鄰元素。border使用b...

前端必備知識點 SVG

基本內容 什麼是svg?全稱為scalable vector graphics,是一種使用xml技術描述二維圖形的語言,簡單來說 向量圖 不失真 svg與html5的關係 早在html5之前,存在svg技術 svg擴充套件名為 svg 在html5出現之前,要在html頁面中引入svg檔案 在htm...

Web前端必備 Nginx知識彙總

nginx是乙個高效能 輕量級的web和反向 伺服器,其特點是占有記憶體及資源少 抗併發能力強。nginx安裝簡單 配置簡潔 啟動快速便捷 支援熱部署 支援 ssl 擁有高度模組化的設計。nginx的主要功能有 備註 以下命令中的 usr local nginx 是nginx二進位制檔案的絕對路徑,...