字型及文字屬性
邊距和填充
邊框屬性
列表屬性
背景屬性
背景的漸變
陰影屬性
字型屬性
type
="text/css"
>
font:設定字型是所有樣式
font-family:設定字型型別
font-size:設定字型大小
font-weight:設定字型粗細
color:設定字型顏色
font-family 和 font-size都是font的子屬性,一般常用字型屬性的縮寫形式,如: font
:bold 12px 宋體 ;注意三個屬性的順序依次為字型粗細,大小,樣式
style
>
文字屬性
type
="text/css"
>
line-height:設定行高
常用屬性值:3px,8px,設定 line-height 與 heigh值一直時,樣式為垂直中
text-align:設定對齊方式,
常用屬性值:left,right,center
letter-spacing:設定字元間距
常用屬性值:3px,8px
text-decoration:設定文字修飾
常用屬性值:none,underline,line-through
style
>
邊距:頁面中元素與元素直接的距離
type
="text/css"
>
margin:
設定乙個值:上、下、左、右邊距
設定兩個值:上下,左右邊距
設定三個值:上,左右,下邊距
設定四個值,上,右,下,左順序分別對應邊距
margin-bottom:下邊距
margin-left:左邊距
margin-right:右邊距
margin-top:上邊距
margin
: 0 auto;局中
style
>
填充:元素內容與邊框之間的距離
type
="text/css"
>
padding:
設定乙個值:上、下、左、右邊距
設定兩個值:上下,左右邊距
設定三個值:上,左右,下邊距
設定四個值,上,右,下,左順序分別對應邊距
padding-bottom:下邊距
padding-left:左邊距
padding-right:右邊距
padding-top:上邊距
padding
: 0 auto;局中
style
>
border屬性
type
="text/css"
>
border-style:邊框樣式
常用屬性值:none,soild,dashed
border-width:邊框寬度
常用屬性值:1px ,5px
border-color:邊框顏色
常用屬性值:red,black
border:符合屬性,用於設定邊框寬度,樣式,顏色
常用屬性值:border
:1px solid red ;
也可單獨設定某個方向的值:
border-bottom:下邊框
border-left:左邊框
border-right:右邊框
border-top:上邊框
style
>
border-radius屬性:圓角邊框( 半徑畫素越大,圓角越明顯)
type
="text/css"
>
border-radius:
設定乙個引數:四個角
設定兩個引數:引數1:左上和右下角 ,引數2:右上和左下角
設定三個引數:引數1:左上角 ,引數2:左下和右上角,引數3:右下角
設定四個引數:順序依次為:左上,右上,右下,左下
border-top-left-radius
:左上角
border-top-right-radius
:右上角
border-bottom-left-radius
:左下角
border-bottom-right-radius
:右下角
style
>
type
="text/css"
>
list-style-image:作為列表項的符號,其值為物件對應的url
list-style-type:設定列表項的符號
常用屬性值:none(無),disc(實心圓),circle(空心圓) ,square(實心方塊)
list-style-position:符號在列表項的位置
常用屬性:inside(內),outside(外)
list-style
:circle inside url()
;style
>
type
="text/css"
>
background:符合屬性
常用屬性值:background-image
:url(名稱)
; 常用屬性值:repeat:水平和垂直反向平鋪
no-repeat:不平鋪
repeat-x:只在水平方向上平鋪
repeat-y:只在水垂直方向上平鋪
常用屬性值:關鍵字:水平方向:left,center,right
垂直方向:top,center,bottom
百分比:水平方向:0%(左) 50%(中) 100%(右)
垂直方向:0%(上) 50%(中) 100%(下)
畫素值: 水平方向:正數向右偏移,負數向左偏移
垂直方向:正數向下偏移,負數向上偏移
style
>
線向漸變
type
="text/css"
>
background
:linear-gradient
(起點位置或方向,起始顏色,(過渡顏色),終止顏色);
向右,顏色紅色過渡到白色在過渡到黑色:
background
:linear-gradient
(to right,red,white,black)
;style
>
徑向漸變
type
="text/css"
>
background
:radial-gradient
(形狀,起點位置,起始顏色,(過渡顏色),終止顏色);
圓形漸變,以中心點為圓心預設大小,顏色紅色過渡到白色在過渡到黑色:
background
:radial-gradient
(circle at center ,red,white,black)
style
>
文字陰影 text-shadow
type
="text/css"
>
text-shadow
: h-shadow v-shadow blur color;
h-shadow:必須存在:陰影的水平距離
v-shadow:必須存在:陰影的垂直距離
blur:可有可無:陰影的模糊半徑
color:可有可無:陰影的顏色
style
>
盒子陰影 box-shadow
type
="text/css"
>
box-shadow: h-shadow v-shadow blur spread color;
h-shadow:必須存在:陰影的水平距離
v-shadow:必須存在:陰影的垂直距離
blur:可有可無:陰影的模糊半徑
spread:可有可無:陰影的大小
color:可有可無:陰影的顏色
style
>
邊框陰影 box-shadow
type
="text/css"
>
box-shadow: [投影方式] x-offset y-offset 陰影模糊半徑 陰影擴充套件半徑 陰影顏色
x-offset:陰影水平偏移量,正值在物件右邊,負值,在物件左邊
y-offset:陰影垂直偏移量,正值在物件底部,負值,在物件頂部
陰影模糊半徑:正值,值為 0 時,沒有模糊效果,值越大,邊緣越模糊
陰影擴充套件半徑:正值,陰影擴大,負值,陰影縮小
陰影顏色:不設定,瀏覽器會預設取色
style
>
html5移動端知識點總結
1.1使用 查詢,不同解析度設定不同的html的font size min width 320px min width 360px min width 400px min width 640px 優點 使用css即可實現,不需要js 缺點 只能匹配部分機型 1.2使用js 控制html的font s...
html5移動端製作知識點總結
固屏類流體設計 1.京東 2.網 全屏 固屏,導航一般用全屏 四 標籤,放在之間 name viewport 視窗設定 width device width 頁面大小螢幕等寬 initial scale 1.0 初始縮放比例,1.0 表示原始比例大小 minimum scale 1.0 允許縮放的最...
HTML5新知識點
html5 中的新標籤 標籤描述 定義注釋。定義文件型別。定義錨。定義縮寫。定義只取首字母的縮寫。定義文件作者或擁有者的聯絡資訊。定義影象對映內部的區域。定義文章。定義頁面內容之外的內容。定義聲音內容。定義粗體字。定義頁面中所有鏈結的預設位址或缺省目標。不贊成使用。定義頁面中文字的預設字型 顏色或尺...