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.內邊距和外邊距 高度,寬度都是不可改變的,他的寬度是根據他...