黑龍江網(wǎng)站建設(shè)多少錢僅需500元(css代碼意思)完整的css代碼案例,
常用CSS代碼大全(工作必備)用html+css可以很方便的進(jìn)行網(wǎng)頁(yè)的排版布局,但不是每一種屬性或者代碼我們都銘記于心,最近我把CSS中的常用代碼進(jìn)行了歸納總結(jié),方便自己以后查看,同時(shí)也分享給大家,希望對(duì)你們有用。
一.文本設(shè)置1、font-size: 字號(hào)參數(shù) 2、font-style: 字體格式 3、font-weight: 字體粗細(xì) 4、顏色屬性 color: 參數(shù) 注意使用網(wǎng)頁(yè)安全色二、超鏈接設(shè)置
text-decoration: 參數(shù) 主要用途是改變?yōu)g覽器顯示文字鏈接時(shí)的下劃線 參數(shù)取值范圍: underline:為文字加下劃線 overline:為文字加上劃線 line-through:為文字加刪除線 。
blink:使文字閃爍 none:不顯示上述任何效果三、背景1、背景顏色 padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
color: rgb(61, 70, 77); font-size: 16px;border-left: 1px solid rgb(128, 128, 128); background: rgb(238, 238, 238);
box-shadow: rgba(7, 17, 27, 0.05) 0px 4px 8px 0px; box-sizing: border-box; border-radius: 8px; font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微軟雅黑, Tahoma, Arial, sans-serif;">
2、背景圖片 background-image: url(URL) URL就是背景圖片的存放路徑,none表示無(wú) 3、背景圖片重復(fù) background-repeat: 參數(shù) 參數(shù)取值范圍 : 。
no-repeat:不重復(fù)平鋪背景圖片 repeat-x:使圖片只在水平方向上平鋪 repeat-y:使圖片只在垂直方向上平鋪 如果不指定背景圖片重復(fù)屬性,瀏覽器默認(rèn)的是背景圖片向水平、垂直兩個(gè)方向上平鋪。
4、背景圖片固定 背景圖片固定控制背景圖片是否隨網(wǎng)頁(yè)的滾動(dòng)而滾動(dòng)如果不設(shè)置背景圖片固定屬性,瀏覽器默認(rèn)背景圖片隨網(wǎng)頁(yè)的滾動(dòng)而滾動(dòng)為了避免過于花哨的背景圖片在滾動(dòng)時(shí)轉(zhuǎn)移瀏覽者的注意力,一般都設(shè)為固定 background-attachment: 參數(shù) 。
參數(shù)取值范圍: fixed:網(wǎng)頁(yè)滾動(dòng)時(shí),背景圖片相對(duì)于瀏覽器的窗口而言,固定不動(dòng) scroll:網(wǎng)頁(yè)滾動(dòng)時(shí),背景圖片相對(duì)于瀏覽器的窗口而言,一起滾動(dòng)四、區(qū)塊1、單詞間距 word-spacing: 間隔距離
2、字母間距 letter-spacing: 字母間距 3、文本對(duì)齊 text-align: 參數(shù) 參數(shù)的取值: left:左對(duì)齊 right:右對(duì)齊 center:居中對(duì)齊 justify:相對(duì)左右對(duì)齊
4、垂直對(duì)齊 vertical-align: 參數(shù) top:頂對(duì)齊 bottom:底對(duì)齊 text-top:相對(duì)文本頂對(duì)齊 text-bottom:相對(duì)文本底對(duì)齊 baseline:基準(zhǔn)線對(duì)齊
middle:中心對(duì)齊 sub:以下標(biāo)的形式顯示 super:以上標(biāo)的形式顯示 5、文本縮進(jìn) text-indent: 縮進(jìn)距離 12px相當(dāng)于一個(gè)文字距離 6、空格 white-space: 參數(shù)
normal 正常 pre 保留 nowrap 不換行 7、顯示樣式 display: 參數(shù) 參數(shù)取值范圍: block:塊級(jí)元素,在對(duì)象前后都換行 inline:在對(duì)象前后都不換行 list-item:在對(duì)象前后都換行,增加了項(xiàng)目符號(hào)
none:無(wú)顯示五、方框1、height 高度 2、width 寬度 3、padding 內(nèi)邊距 4、margin 外邊距 5、float(浮動(dòng)):可以讓塊級(jí)元素在一行中排列,例如橫向菜單 6、clear 清除浮動(dòng)
六、邊框1、樣式 border style 參數(shù) 邊框樣式的參數(shù): none:無(wú)邊框 dotted:邊框?yàn)辄c(diǎn)線 dashed:邊框?yàn)殚L(zhǎng)短線 solid:邊框?yàn)閷?shí)線 double:邊框?yàn)殡p線
2、寬度 border width 參數(shù) 3、顏色 border color 參數(shù)七、列表list-style-type 列表樣式 不同瀏覽器的列表符可能不相同,可能會(huì)影響到網(wǎng)頁(yè),所以網(wǎng)頁(yè)中的列表大多都是由背景圖片顯示。
控制用戶界面的樣式八、鼠標(biāo)cursor:鼠標(biāo)形狀參數(shù) CSS鼠標(biāo)形狀參數(shù)表: 鼠標(biāo)形狀:CSS代碼 style="cursor:hand" 手形 style="cursor:crosshair" 十字形
style="cursor:text" 文本形 style="cursor:wait" 沙漏形 style="cursor:move" 十字箭頭形 style="cursor:help" 問號(hào)形
style="cursor:e-resize" 右箭頭形 style="cursor:n-resize" 上箭頭形 style="cursor:nw-resize" 左上箭頭形 style="cursor:w-resize" 左箭頭形
style="cursor:s-resize" 下箭頭形 style="cursor:se-resize" 右下箭頭形 style="cursor:sw-resize" 左下箭頭形