CSS基礎知識點總結

2021-08-15 16:16:16 字數 3482 閱讀 7829

一、css的簡介

1、什麼是css

層疊樣式表,css是對html進行樣式修飾語言

層疊:就是層層覆蓋疊加,如果不同的css樣式對同一html標籤進行修飾,樣式有衝突的部分應用優先順序高的,不衝突的部分共同作用

樣式表:就是css屬性樣式的集合

2、css的作用

(1)修飾html的 使其html樣式更加好看

(2)提高樣式**的復用性

(3)html的內容與樣式相分離 便於後期維護

3、css的引入方式和書寫規範

(1)內嵌樣式

內嵌樣式是把css的**嵌入到html標籤中

你好!2018

語法:

(1)使用style屬性將樣式嵌入到html標籤中

(2)屬性的寫法:屬性:屬性值

(3)多個屬性之間使用分號;隔開

不建議使用

(2)內部樣式

在head標籤中使用style標籤進行css的引入

語法:

(1)使用style標籤進行css的引入

link與@import方式的區別:

(1)link所有瀏覽器都支援 import部分低版本ie不支援

(2)import方式是等待html載入完畢之後再載入

(3)import方式不支援js的動態修改

二、css選擇器

1、基本選擇器

(1)元素選擇器

語法:html標籤名

示例:

hello css!!!
(2)id選擇器

id唯一性

語法:#id的值

示例:              

hello css1!!!

hello css2!!!

(3)class選擇器

語法:.class的值

示例:

div1

div2

div3

注意*:選擇器的優先順序:id>class>元素,優先順序高的會把優先順序低的樣式覆蓋掉,只對該選擇器指定的屬性覆蓋,對不存在於較高選擇器但存在於較低選擇器的屬性仍然起作用。

2、屬性選擇器

語法:基本選擇器[元素屬性=『屬性值』]

示例:

3、偽元素選擇器

a標籤的偽元素選擇器

語法:靜止狀態

a:link

懸浮狀態

a:hover

觸發狀態

a:active

完成狀態

a:visited

示例:

click me!
用於標籤的狀態切換(ps:href="#"表示跳轉當前頁面)

4、層級選擇器

語法:父級選擇器 子級選擇器 .....用空格隔開。

示例:

span1-1

span1-2

span1-1

span1-2

三、css屬性

1、文字屬性

font-size:字型大小,解決html裡font標籤字型有最大限制的方法

font-family:字型型別

2、文字屬性

color:顏色

text-decoration:下劃線(a標籤href預設帶下劃線)

屬性值:none

underline

text-align:對齊方式

屬性值:left  center  right

hello css!!!

click me!!!

3、背景屬性

background-color:背景顏色

background-image:背景

background-repeat:平鋪方式

屬性值:預設橫向縱向平鋪,滿屏

repeat:橫向縱向平鋪

no-repeat:不平鋪

repeat-y:縱向

repeat-x:橫向

body

4、列表屬性

list-style-type:列表項前的小標誌

屬性值:太多了

list-style-image:列表項前的小

5、尺寸屬性

width:寬度

height:高度

div1

div2

6、顯示屬性

display:

屬性值:none:隱藏

block:塊級顯示

inline:行級顯示

7、浮動屬性

以父標籤為參照物(比如在body裡面的div,那麼父標籤就是body)

float:

屬性值:left  right

clear:清除浮動 left right both

缺點:(1)影響相鄰元素不能正常顯示

(2)影響父元素不能正常顯示

四、css盒子模型

border:

border-width:邊框的寬度

border-color:邊框的顏色

border-style:邊框的線型

border-top:上邊框

border-bottom:下邊框

border-left:左邊框

border-right:右邊框

padding:

代表邊框內壁與內部元素之間的距離

padding:10px;代表上下左右都是10px

padding:1px 2px 3px 4px;上右下左

padding:1px 2px;上下/左右

padding:1px 2px 3px;

padding-top:單獨設定

margin:

代表邊框外壁與其他元素之間的距離

margin:10px;代表上下左右都是10px

margin:1px 2px 3px 4px;上右下左

margin:1px 2px;上下/左右

margin:1px 2px 3px;

margin-top:單獨設定

CSS基礎知識點

1.css基礎 1.css選擇器 元素選擇器 p id選擇器 p1 類選擇器 pre 2.css注釋 注釋 3.css尺寸 width 寬度height 高度 4.css背景 background color 背景顏色 background image url imagepath 做背景 url b...

CSS基礎知識點記錄

css參考手冊 2.1 內聯 2.2 頁面嵌入 所有input標籤都被設定成該樣式。2.3 外部引用 例如 對於非元素內聯的樣式需要定義樣式選擇器。5.1 標籤選擇器 對於指定的標籤採用統一的樣式 例如 input5.2 class選擇器 定義乙個命名的樣式,然後在用到它的時候設定元素的class屬...

Java基礎知識點總結

一 方法的過載 方法的過載與返回值型別無關,只需滿足兩個條件即可 一是方法名相同,二是引數個數或型別不同。二 陣列初始化 動態初始化 在定義陣列時,只指定陣列長度,由系統自動為元素賦值的方式。靜態初始化 在定義陣列時為每個元素賦值。有兩種方式 陣列靜態初始化的方式有兩種 1.型別 陣列名 new 型...