網(wǎng)頁中css 常用樣式（二）

2016/8/12 8:51:12 閱讀：1735 發(fā)布者：1735

font-family 設置字體名稱

可以使用多個名稱，用逗號分隔，瀏覽器則按照先后順序依次使用可用字體

p { font-family:'宋體','黑體','Arial'; }

font-size 設置字體大小

length 用長度值指定文字大小，不允許負值

percentage 用百分比指定文字大小，其百分比取值是基于父對象中字體的尺寸，不允許負值

p { font-size:14px;}

font-weight 控制字體粗細

normal 正常的字體，相當于數(shù)字值400

bold 粗體，相當于數(shù)字值700

100~900 定義由細到粗的字符

p { font-weight:bold;}

font-style 控制字體是否傾斜

normal 指定文本字體樣式為正常的字體

italic 指定文本字體樣式為斜體，對于沒有設計斜體的特殊字體，如果要使用斜體外觀將應用oblique

oblique 指定文本字體樣式為傾斜的字體，人為的使文字傾斜，而不是去選取字體中的斜體字

p { font-style: italic;}

p{
　　font-style:italic;
　　font-weight:bold;
　　font-size:14px;
　　line-height:22px;
　　font-family:'宋體';
}
縮寫：
p { font: italic bold 14px/22px '宋體';}

color 文本顏色

英文單詞，比如：red，yellow，green …
十六進制表示方式，#開頭，6個十六進制的字符或數(shù)字組合，比如：#FFFFFF，#000000 …
RGB模式，紅 0-255，綠 0-255，藍 0-255，比如：RGB(120,33,234)
RGBA模式，比如：RGBA(255,0,0,0.5)，最后的A表示透明度50%

text-decoration 文本裝飾線條

none 默認。定義標準的文本

underline 定義文本下的一條線

overline 定義文本上的一條線

line-through 定義穿過文本的一條線

blink 定義閃爍的文本

p { text-decoration:overline;}

text-shadow 文本陰影

h-shadow 必需。水平陰影的位置。允許負值

v-shadow 必需。垂直陰影的位置。允許負值

blur 可選。模糊的距離

color 可選。陰影的顏色

h1{ text-shadow: 2px 2px 2px #ff0000;}

寬度 width : auto | length

高度 height : auto | length

外邊距 margin : auto | length

margin-top 設置上邊的外邊距

margin-bottom 設置下邊的外邊距

margin-left 設置左邊的外邊距

margin-right 設置右邊的外邊距

縮寫型式：

margin: 上邊距右邊距下邊距左邊距

margin: 上下邊距左右邊距

margin: 上邊距左右邊距下邊距

css外邊距合并

內(nèi)邊距 padding : length

padding-top 設置上邊的內(nèi)邊距

padding-bottom 設置下邊的內(nèi)邊距

padding-left 設置左邊的內(nèi)邊距

padding-right 設置右邊的內(nèi)邊距

透明度 opacity :

number值為 0.0-1.0 之間的小數(shù)

兼容全瀏覽器的寫法：

div{ filter:alpha(opacity=50); } /* IE6-IE8 */

div{ opacity:0.5; } /* 現(xiàn)代瀏覽器 */

border-style 邊框樣式

none 定義無邊框

hidden 與"none"相同。不過應用于表時除外，對于表，hidden用于解決邊框沖突

dotted 定義點狀邊框

dashed 定義虛線

solid 定義實線

double 定義雙線。雙線的寬度等于border-width的值

groove 定義3D凹槽邊框。其效果取決于border-color的值

ridge 定義3D壟狀邊框。其效果取決于border-color的值

inset 定義3D inset邊框。其效果取決于border-color的值

outset 定義 3D outset邊框。其效果取決于border-color的值

border-top-style 設置上邊框線

border-bottom-style 設置下邊框線

border-left-style 設置左邊框線

border-right-style 設置右邊框線

border-width 邊框?qū)挾?/SPAN>

thin 定義細的邊框

medium 默認。定義中等的邊框

thick 定義粗的邊框

length 允許你自定義邊框的寬度

border-top-width 設置上邊框?qū)挾?/SPAN>

border-bottom-width 設置下邊框?qū)挾?/SPAN>

border-left-width 設置左邊框?qū)挾?/SPAN>

border-right-width 設置右邊框?qū)挾?/SPAN>

border-color 邊框顏色

transparent 默認值。邊框顏色為透明

border-top-color 設置上邊框顏色

border-bottom-color 設置下邊框顏色

border-left-color 設置左邊框顏色

border-right-color 設置右邊框顏色

三角形

<div class="demo"> div>
<style>
    .demo{
        width: 0px; height: 0px;
        border-top: 100px solid #000; border-left: 100px solid transparent;
        border-right: 100px solid transparent;
    }
    .demo:hover{
        border-top: none;
        border-bottom: 100px solid #ccc;
    }
style>

border-radius 邊框圓角

所有角都使用半徑為10px的圓角：
div{ border-radius:10px; }
四個半徑值分別是左上角、右上角、右下角和左下角，順時針：
div{ border-radius:5px 4px 3px 2px; }
分別設置每個角的水平半徑和垂直半徑，用斜杠隔開，第一個參數(shù)表示左上角開始順時針的水平半徑，第二個參數(shù)表示左上角開始順時針的垂直半徑：
div{ border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }
圓：
div{ border-radius:50%; }

半圓

<div class="demo"> div>
<style>
    .demo{
        width: 100px; height: 50px;
        background: red;
        border-radius: 50px 50px 0px 0px;
    }
    .demo:hover{
        background: blue;
        border-radius: 0px 0px 50px 50px;
        transition: 2s;
    }
style>

border-image 邊框圖片

設置了border-image之后，border-style則不顯示

border-image-source 用在邊框的圖片的路徑

border-image-slice 圖片邊框向內(nèi)偏移，是一個數(shù)值或百分比，不需要帶單位

border-image-width 圖片邊框的寬度

border-image-outset 邊框圖像區(qū)域超出邊框的量

border-image-repeat 圖像邊框是否應平鋪(repeated)鋪滿(rounded)拉伸(stretched)

box-shadow 盒子陰影

h-shadow 必需。水平陰影的位置。允許負值

v-shadow 必需。垂直陰影的位置。允許負值

blur 可選。模糊距離

spread 可選。陰影的尺寸

color 可選。陰影的顏色

inset 可選。將外部陰影(outset)改為內(nèi)部陰影

使用方法：box-shadow : X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];

<div class="demo">div>
<style>
    .demo{
        width: 100px; height: 100px;
        background: #ccc;
        , box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    }
    .demo:active{
        box-shadow: 5px 5px 5px rgba(0,0,0,0.5) inset;
    }
style>

line-height 設置行間的距離(行高)

p { line-height:25px;}

p { line-height:150%;}

text-indent 規(guī)定文本塊中首行文本的縮進

p { text-indent:2em;}

text-align 規(guī)定元素中的文本的水平對齊方式

left 把文本排列到左邊

right 把文本排列到右邊

center 把文本排列到中間

justify 實現(xiàn)兩端對齊文本效果

letter-spacing 增加或減少字符間的空白(字符間距)

p { letter-spacing:5px;}

text-overflow 規(guī)定當文本溢出包含元素時發(fā)生的事情

clip 當內(nèi)聯(lián)內(nèi)容溢出塊容器時，將溢出部分裁切掉

ellipsis 當內(nèi)聯(lián)內(nèi)容溢出塊容器時，將溢出部分替換為（...）

text-overflow只是用來說明文字溢出時用什么方式顯示，要實現(xiàn)溢出時產(chǎn)生省略號的效果，還須定義強制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden），只有這樣才能實現(xiàn)溢出文本顯示省略號的效果

<h2>一二三四五六七八九十h2>
<style>
    h2{
        width: 130px; border: 1px solid #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
style>