常用的有:
成都創(chuàng)新互聯(lián)服務項目包括杭州網(wǎng)站建設、杭州網(wǎng)站制作、杭州網(wǎng)頁制作以及杭州網(wǎng)絡營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等,向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案,杭州網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前,我們服務的客戶以成都為中心已經(jīng)輻射到杭州省份的部分城市,未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任!
尺寸屬性width,height
背景屬性background
邊框?qū)傩詁order 和 outline
文本屬性text 字體屬性font
內(nèi),外邊距屬性padding,margin
列表屬性,表格屬性
定位屬性(Positioning)
偽類,偽元素等
大小 font-size: x-large;(特大) xx-small;(極小) 一般中文用不到,只要用數(shù)值就可以,單位:PX、PD
樣式 font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)
行高 line-height: normal;(正常) 單位:PX、PD、EM
粗細 font-weight: bold;(粗體) lighter;(細體) normal;(正常)
色彩background-color: #FFFFFF;
圖片background-image: url();border-style: dotted;(點線) dashed;(虛線) solid;(實線) double;(雙線) groove;(凹槽) ridge;(脊狀) inset;(邊框) outset;(邊框)
類型list-style-type: disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數(shù)字) none(無)text-align:right; /*文字右對齊*/
text-align:left; /*文字左對齊*/
text-align:center; /*文字居中對齊*/
text-align:justify; /*文字分散對齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對齊*/
vertical-align:bottom; /*垂直向下對齊*/
vertical-align:middle; /*垂直居中對齊*/
vertical-align:text-top; /*文字垂直向上對齊*/
vertical-align:text-bottom; /*文字垂直向下對齊*/這些都是比較常用的如果你要把樣式做的很漂亮這些還是不夠的自己去看看文檔吧慢慢學習
CSS 字體屬性(Font)
屬性 描述 CSS
font 在一個聲明中設置所有字體屬性。 1
font-family 規(guī)定文本的字體系列。 1
font-size 規(guī)定文本的字體尺寸。 1
font-size-adjust 為元素規(guī)定 aspect 值。 2
font-stretch 收縮或拉伸當前的字體系列。 2
font-style 規(guī)定文本的字體樣式。 1
font-variant 規(guī)定是否以小型大寫字母的字體顯示文本。 1
font-weight 規(guī)定字體的粗細。 1
css樣式表中字體加粗的屬性是:“font-weight”。
語法:font-weight:normal | bold | bolder | lighter | integer
normal:正常的字體。相當于數(shù)字值400
bold:粗體。相當于數(shù)字值700。
bolder:定義比繼承值更重的值(特粗體)
lighter:定義比繼承值更輕的值(細體)
integer:用數(shù)字表示文本字體粗細。取值范圍:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
設置或檢索對象中的文本字體的粗細。作用由客戶端系統(tǒng)安裝的字體的特定字體變量映射決定。系統(tǒng)選擇最近的匹配。也就是說,用戶可能看不到不同值之間的差異。
擴展資料
CSS font 屬性
在一個聲明中設置所有字體屬性:
p.ex2
{ font:italic bold 12px/20px arial,sans-serif; }
“font”簡寫屬性在一個聲明中設置所有字體屬性。
這個簡寫屬性用于一次設置元素字體的兩個或更多方面。使用 icon 等關鍵字可以適當?shù)卦O置元素的字體,使之與用戶計算機環(huán)境中的某個方面一致。注意,如果沒有使用這些關鍵詞,至少要指定字體大小和字體系列。
可以按順序設置如下屬性:
font-style
font-variant
font-weight
font-size/line-height
font-family
可以不設置其中的某個值,比如 font:100% verdana; 也是允許的。未設置的屬性會使用其默認值。
參考資料:百度百科-CSS樣式
css縮寫的主要規(guī)則如下:
margin/padding
通常寫法,會遇到以下三種情況
margin-top:1px;
margin-right:10px;
margin-bottom:5px;
margin-left:20px;
margin-top:5px;
margin-right:5px;
margin-bottom:5px;
margin-left:5px;
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:5px;
那么我們進行CSS縮寫后會讓你目驚口呆的效果.如下
margin:1px
10px
5px
20px;
margin:5px;
margin:0
10px
5px;
書寫順序是
margin:上
右
下
左
,
在CSS中.值為0的時候可以將單位省略不寫就像第三種寫法一樣.
其中padding和margin基本是一樣的寫法
怎么樣.是不是大吃一驚.是的.CSS縮寫就是這樣做到的.
border
通常寫法:
border-width:1px;
border-style:solid;
border-color:#000;
縮寫后:
border:1px
solid
#000;
書寫順序:border:寬度
邊框線種類
顏色;
Background
通常寫法:
background-image:url(bg.png);
background-color:#00f;
background-repeat:no-repeat;
background-position:0
0;
縮寫后:
background:url(bg.png)
#00f
no-repeat
0;
書寫順序:background:背景圖片
顏色
重復類型
定位;
background:image
color
repeat
position;
Font
通常寫法:
font-family:"宋體";
font-size:2em;
line-height:180%;
font-weight:800;
縮寫后:
font:800
2em/180%
"宋體";
書寫順序:font:加粗
字體大小/行高
字體;
在使用Font縮寫時至少要有
字體大小和字體這兩項
font:字體大小
字體;
Color
通常寫法:
color:#000000;
color:#001188;
縮寫后:
color:#000;
color:#018;
16進制的色彩值時,如果每兩位的值相同,可以縮寫一個
盒子模型是CSS中一個很重要的概念,頁面中的所有元素都可以看成一個盒子,并占據(jù)一定的頁面空間,一個頁面由很多盒子組成,盒子之間會互相影響。只有掌握盒模型以及其中每個屬性的用法,才能真正控制好頁面元素。
盒子模型主要定義四個區(qū)域: 內(nèi)容(content)、內(nèi)邊距/填充(padding)、邊框(border)和外邊距(margin) 。
盒子的內(nèi)容區(qū)域存放文本和圖片等頁面元素,擁有如下屬性:
邊框基本屬性:
通過一個屬性設置四個方向邊框的寬度、樣式、顏色
屬性:border
取值:width style color;
只設置某一條邊框的寬度、樣式、顏色
語法:border-方向(top/right/bottom/left):width style color;
只設置邊框的寬度、樣式、顏色中的一種
語法:border-屬性(width/style/color):取值;
只設置某一條邊框的寬度、樣式、顏色中的一種
語法:border-方向(top/right/bottom/left)-屬性(width/style/color):取值;
屬性:border-radius
作用:設置倒角位置處圓的半徑,半徑越大,弧度越大。
取值:
屬性:border-image
語法:
border-image-source :引入背景圖片
取值:
默認值:無圖片
url(圖片URL地址)
border-image-slice :切割引入背景圖片,把邊框背景切成9份
取值:
number:默認單位px
百分比:
fill:保留邊框圖像的中間部分
border-image-width :指定邊框圖片的寬度
border-image-repeat :指定邊框背景圖片的排列方式,可定義2個參數(shù),即水平和垂直方向
取值:
Stretch:默認值,拉伸
Repeat:平鋪
Round:取整平鋪
內(nèi)容區(qū)域和邊框(邊緣)之間的距離
語法:padding: 值;
單邊設置:padding-方向(top/right/bottom/left):值;
取值:
數(shù)值px
百分比
內(nèi)邊距的簡寫方式:
padding:value;
四個方向內(nèi)邊距的值均為value
padding:value1 value2;
Value1為上下內(nèi)邊距的值,value2為左右內(nèi)邊距的值
padding:value1 value2 value3;
Value1為上內(nèi)邊距的值,value2為左右內(nèi)邊距的值,value3為下內(nèi)邊距的值
padding:value1 value2 value3 value4;
上右下左內(nèi)邊距的值分別為value1, value2, value3, value4
外邊距指元素與元素之間的距離,即圍繞在元素邊框之外的空白區(qū)域,通過外邊距可以為元素創(chuàng)建額外的“空間”。默認不能被其他元素所占據(jù),用于拉伸兩個元素間的距離。
語法:margin: 值;
單邊設置:margin-方向(top/right/bottom/left):值;
取值:
重新制定元素尺寸計算模式
屬性:box-sizing
取值:
屬性:resize
取值:
位于元素邊框之外的一條線
屬性:
outline:width style color;
屬性:box-shadow
語法:
box-shadow: h-shadow v-shadow blur spread color inset;
取值:由一組值構成的值列表
屬性:background-color
取值:顏色值或transparent
注意:背景顏色是從邊框位置處開始繪制
屬性:background-image
取值:url(背景圖像URL)
屬性:background-repeat
取值:
屬性:background-attchment
取值:
scroll:默認值,滾動
fixed:固定
屬性:background-position
取值:
屬性:background-size
取值:
屬性:background-origin
取值:
屬性:background-clip
取值:
CSS3多背景通過為每個背景屬性提供多個屬性值實現(xiàn)。
font 簡寫屬性語法:
將所有字體屬性合寫為一行,其中font-family是復合屬性中必不可少的屬性。
可以不設置其中的某個值,如果省略值地話,就使用屬性的默認值。
②文本屬性:
(2)CSS3文本陰影屬性:
屬性:text-shadow
作用:產(chǎn)生陰影和模糊主體
語法:
作用:定義列表的編號樣式
屬性:list-style-type
作用:用于設置列表項的圖像屬性
語法:
圖像URL地址:圖像的相對路徑或絕對路徑
none:默認值,不指定圖像
注意:圖片圖標與文字之間的距離在不同瀏覽器中是不一樣的,因此,一般情況下不采用這種方式來設置列表的圖片樣式。
通過設置li的背景圖片的方式來設置列表圖片基本步驟:
設置list-style-type屬性值為none
設置li標記的背景屬性backgruond
作用:用于聲明列表標志相對于列表項內(nèi)容的位置
語法:
作用:可以同時設定列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。
語法:
注意:
可以不設置其中的某個值,未設置的屬性采用默認值
同時指定list-style-image和list-style-type時,list-style-image優(yōu)先顯示,除非list-style-image設置為none,或圖片路徑錯誤無法顯示
當列表與列表項目同時使用樣式時,列表項目的樣式優(yōu)先顯示
特點:
可以設置寬度和高度
默認情況下每個塊級元素獨占一行
作用:
塊級元素主要用于頁面布局
常用塊級元素:
div、p、h1~h6、ol、ul等
特點:
不可以設置寬度和高度,其寬度就是自身文字或圖片的寬度
默認情況下多個行內(nèi)元素會在一行內(nèi)顯示,遇父元素邊界時會自動換行
作用:
行內(nèi)元素主要用于設置文樣式
常用行內(nèi)元素:
a、span、em、b、i、strong、img、input等
作用:控制頁面元素脫離原有文檔流,實現(xiàn)向左或向右移動,直到該元素外邊緣碰到其包含框或另一個浮動框的邊緣停止,標準流中的其他盒子將頂?shù)礁雍凶拥奈恢谩8拥脑夭徽紦?jù)實際空間。
屬性: float
取值:
浮動元素不會相互重疊;
浮動元素不會上下浮動,如果一個浮動元素在另一個浮動元素之后顯示,而且會超出容納塊,則它下降到低于先前任何浮動元素的位置。
作用:規(guī)定元素的哪一側(cè)不允許出現(xiàn)其他浮動元素。
取值:
作用:控制頁面元素在頁面中的位置。
屬性:position
取值:static/relative/absolute/fiexed
默認屬性值,元素按照標準文檔流進行排列,塊級元素獨占一行, 行內(nèi)元素位于一行內(nèi)顯示,一行顯示不下,自動換行。
特點:
相對于自身原有位置進行偏移
仍處于標準文檔流中
隨即擁有偏移屬性和z-idex屬性
偏移屬性:
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
當元素相對定位后會產(chǎn)生Z軸上的堆疊,不設置z-index屬性時,默認該元素出現(xiàn)在X軸和Y軸構成的平面上。
特點:
建立了以包含塊為基準的定位
絕對定位的元素的位置相對于最近的已定位祖先元素(設定了絕對定位、相對定位或固定定位中的任何一種),如果元素沒有已定位的祖先元素,則該元素的位置相對于瀏覽器窗口。
完全脫離了標準文檔流
隨即擁有偏移屬性和z-idex屬性
偏移屬性:
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
絕對定位未設置偏移量的特點:
無論是否存在已經(jīng)定位的祖先元素,都保持在元素的初始位置
脫離了標準文檔流
設定固定定位的元素框的表現(xiàn)類似于將position設置為absolute,不過其包含塊是瀏覽器窗口本身。
在計算機顯示中把垂直于屏幕平面的方向稱為Z方向,CSS絕對定位容器的z-index屬性即對應該方向。
作用:用于控制元素的層疊次序,使得某個元素浮于其他元素之上。
語法:
auto:遵循其父元素的定位
number:整數(shù),可負,值大者疊加在上層
注意:使用z-index屬性時,要求該元素的position屬性值為absolute、relative或fixed。
作用:用于定義建立布局時元素生成的顯示框類型
語法:dispaly:值;
作用:用于定義建立布局時元素生成的顯示框類型
語法:visibility:值;