CSS知識點總結

2021-08-02 21:43:36 字數 2798 閱讀 4006

css匯入方式 1.標籤內聯2.內部放置3.外部放置4.@import url()

css選擇器 1.標籤選擇器2.id選擇器3.class選擇器4.組合選擇器

css優先順序 就近原則 標籤》id>class>*

為了防止不支援css的瀏覽器將...標籤間的css規則當成普通字串,

而顯示在網頁上,應將css的規則**插入標籤之間

font-family 字型

font-size:30px 字型大小

font-style 字型樣式

font-weight normal 不加粗 bold 加粗 bolder 更加粗 lighter 更細

background-color 背景顏色

background-image 背景

background-repeat: no-repeat; 不平鋪 repeat-x 水平平鋪 repeat-y垂直平鋪

background-attachment 設定背景影象是否固定或者隨著頁面的其餘部分滾動

background-position 設定背景影象的起始位置

letter-spacing 字間距 必須加空格才能看出效果

word-spacing 詞間距

text-decoration:none none用來把a標籤的下劃線去掉

underline 下劃線 overline 上劃線 line-through 刪除線

text-align: left center right 文字左對齊/居中/右對齊

text-indent p標籤段落首行縮排

line-height 文字的高

color 文字顏色

cursor 滑鼠指向變化

1、行內元素和塊元素

行內元素: 又叫內聯元素,只能容納文字和其他內聯元素,,

塊元素:塊元素一般從新的一行開始,可容納文字,其他內聯元素和塊元素。即使內 容不滿一行,塊元素也要把整行填滿。,

2、塊元素的特點

每個塊級元素都從新的一行開始,並且其後的元素也另起一行。

元素的高度、寬度、行高以及頂和底邊距都可設定。

元素寬度在不設定的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定乙個寬度。

list-style-type: none; 去掉列表前面的點

square; 正方形

disc; 實心圓

circle 空心圓

decimal 預設數字

decimal-leading-zero; 帶0的數字

lower-alpha; 小寫字母

upper-alpha; 大寫字母

lower-roman; 小寫羅馬數字

upper-roman; 大寫羅馬數字

list-style-image: 加入

margin 外邊距

padding 內邊距

width 寬度

height 高度

margin-left 左邊距

margin-right 上邊距

text-align 左右居中

line-height 上下居中

margin10%或者padding10%用來寫上下左右的距離 如果單a 只寫左邊即可:margin-left:10%

position:relative 相對定位

position:absolute 絕對定位

大小 border-width:5px;

線條 border-style:dotted; 相當於 border: 5px dotted red;

顏色 border-color:red;

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

vertical-align : top 相對上對齊

middle 相對垂直居中

bottom 相對下對齊

position:relative; 相對定位 相對於原來的位置

position:fixed; 固定定位 相對於螢幕來說

position: absolute; 絕對定位 脫離文件流

margin: 0 auto; 居中 與position:absolute;不能同時設著

div1和div2 必須設定相同的position

z-index: 設定元素的堆疊順序

text-align--文字居中

clear:both--清除浮動

display:none;--隱藏

display:block;--顯示

overflow:hidden;--隱藏多餘的部分 也可以清除浮動

auto;--增加滾動條

scroll;--強制增加滾動條

:hover--事件 (滑鼠指向)

.div:hover img滑鼠指向放大10px

margin:0 auto; 塊元素水平居中

text-align:center;文字水平居中

(height:10px;line-height:10px;)文字垂直居中

list-style-position:inside;把加入的圖示放在裡面

border-radius:20px 20px 20px 20px ; 圓圈

cursor:pointer 滑鼠指向變小手

cursor: not-allowed; 滑鼠指向不能使用

opacity:透明度 0到1

CSS知識點總結

1 內聯樣式 行內樣式 將樣式宣告在元素的style屬性中 2.內部樣式 將樣式宣告定義在頁面的style屬性中 3.外部樣式表 步驟 建立乙個新的css檔案 建立和html檔案的關聯 css樣式表的特徵 繼承性 1 子級元素可以直接使用父級元素宣告好的樣式 這裡不是所有的樣式都可以被繼承 層疊性 ...

CSS 知識點總結

問題1 什麼是css?問題2 css能做什麼?css 的語法雖然非常簡單,但根據其 可以出現的位置,可以將css分為3種型別 內聯樣式,外聯樣式,行內樣式 行內樣式 內嵌樣式 外聯樣式 屬性名作用 color 文字顏色 前景色 font size 文字大小 px font family 字型 黑體,...

實用的css知識點總結

1.text indent 屬性規定文字塊中首行文字的縮排。注釋 允許使用負值。如果使用負值,那麼首行會被縮排到左邊。text indent 2em 首行文字縮排 2字元 em是相當單位,用 em可以實現動態改變。不論字型調大還是調小,都能實現首行文字縮排的是 2字元。一般都建議用標準的html來顯...