一、css文字屬性
(1)文字大小{font-size:value;}
單位:pt:9pt=12px;瀏覽器預設字體大小為16px
中
xx-small:9px
x-small:11px
small:13px
x-large:23px
xx-large:27px
(2)字體顏色
注意:字體名為
瀏覽器按字體解讀
注意:字體名為
瀏覽器按字體解讀
注意:字體名為 瀏覽器以字體解讀注意:字體名為中文時加雙引號:「微軟雅黑」;單字單字可不加:Arial;英文有空格加引號:「Times New Romen」;
(4)字體加粗{font-weight:;}
屬性值:normal/500(常規);bold/600-900(加粗);bolder(更粗);
(5)文字傾斜
{font-style:itatic(斜體字)/oblique(傾斜的文字)/normal(取消傾斜)}
(6)水平對齊方式
{text-align:left/center/right/justify(兩端對齊);}
(7)垂直對齊方式
{vertical- align:top/bottom/middle;}
(8)文本行高
{line-height:normal/value;}
測量行高:本行文字的頂部到下一行文字的頂部;
單行文本測量行高:本行文字的頂部到下一行文字的頂部;
單行文本:行高=容器高時,垂直居中;行高說明:font簡寫順序: font-style font-weight font-size/line-height font-family; 16px "微軟雅黑";}
(9)文字修飾
{text-decoration:none/underline(底線)/overline(底線)/line-through(新增刪除線)}
擴充刪除:
新增刪除線
(11)字間距
{letter-spacing:value;}
控制英文字母與漢字之間的距離
延伸:{word-break:break-all;}=
換行
二、邊框框{border-top/bottom/right/left:1px solid/dotted/dashed/double;}
三、CSS列表屬性
(1)列表符號樣式
{list-style-type:disc(實心圓) /circle(空心圓)/squrare(空心方寬)/none(去掉列表符號);}
{list-style-type:none}同等於{list-style;none;}
(2)圖片作為列表符號
{list-style-image:url();}
(3)定義列表符號位置
{list-style-position:ouside/inside;}
(4)去掉列表符號
{list -style:none;}
四、背景屬性
(1)背景顏色{background-color:value;}
(2)背景圖片{background-image:url(路徑);}(3)背景圖平鋪{background-repeat:no-repeat(不平鋪)/repeat(平鋪)/repeat-x(水平鋪)/repeat-y(垂直平鋪);}
(4)背景圖固定{background-attachment :scroll(滾動)/fixed(固定);}
(5)背景圖位置{background-position:x y(數值:50px 50px;方向:right bottom;)}
方向位置有:水平(left/center/right )垂直(top/center/bottom)
(6)簡寫:{background:url() no-repeat center top fixed #f00;}
{background:url() no-eateatdenter 100ppeatx #falsroll;五、網頁常用的圖片格式
(1)jpg:有損壓縮損失品質適用色彩豐富的圖片
(3)png :損失圖片色彩較少,不支援動畫,支援透明,是fireworks;
說明:要求高存png,要求更高存gif,相容時使用gif;
六、浮動(讓豎立的元素橫著排)
{float:left/right/none}
說明:浮動之後的元素是脫離文檔流是懸浮在上面的,當你浮動元素的前面那個元素是標準流中的元素時(沒有浮動)
浮動之後的元素的位置是靠瀏覽器的,浮動元素後面的沒有浮動的元素會擠進浮動元素原來的位置。(2)解決高度塌陷
高度塌陷:產生的條件父級元素沒有寫高度,子元素浮動;
解決方法:(1)在浮動元素的最後加一個空的
,給這個div寫上聲明div{clear:both;}
(2)在css中加上父級元素聲明,div{overflow:hidden;}
七、盒模型
1、定義:網頁元素如何顯示以及相互關係。
邊框邊界 補白內容區
2、padding(補白)
(1)填滿:padding在設定頁中的一個元素中一個元素內容到元素的邊緣(邊框)之間的距離,補白;
(2 )用來調整內容在容器中的位置關係
(3)用來調整子元素在父級元素中的位置
(4)padding屬性加在父級元素上面
關於padding值減不減問題?
1、減:父級元素有寬高
2、不減:父級元素沒有寬高;
(5)如何減?
高-(top+bottom);寬-(left+right);
3、語法:
四個值:{padding:top right bottom left;}
一個值:{padding:20px}={padding:20px}={padding:20px}={padding 20px 20px 20px;}
二個值:{padding:20px 30px;}={padding:20px 30px 20px 30px;}
二個值:{padding:20px 30px 40px;
拆分:{padding-top/right/bottom/left:value;}
2、margin
(1)邊際:margin在設定頁中元素外邊的空白區;
(2)margin屬性加在子級元素上面
(3)語法:
四個值:{margin:top right bottom left;}
一個值:{margin:20px}={padding:20px 20px 20px 20px}={padding:20px 20px 20px 20px; 20px 30px;}={padding:20px 30px 20px 30px;}
二個值:{margin:20px 30px 40px;}={padding:20px 30px 40px 30px;}={padup/topdpx 30px 40px 30pbotx; left:value;}