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來顯...