css手册总结（二）

2023-02-27 12:34:01html-css018

css手册总结（二）,第1张

分拆纵向独立属性。为元素设置上、下外边距。

分拆横向独立属性。为元素设置上、下外边距。

分拆独立属性。为元素单独设置上、右、下、左4个方向的内边距。

属性值描述:

1.阴影类型：此参数可选，默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影。

2.X-offset:是指阴影水平偏移量,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边

3.Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部。

4.阴影模糊半径：此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊

5.阴影扩展半径：此参数可选，其值可为正负值，正值，则整个阴影都延展扩大，反之，则缩小

6.阴影颜色：此参数可选，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

注：多层阴影，最内层优先级最高，之后依次降低。使用逗号“，”隔开。

3.border-image-width：定义元素边框图像的厚度。

该属性用于指定使用多厚的边框来承载被裁剪后的图像。

当该属性省略未定义时，因为默认值是 1 ，所以该属性的计算值会是 1 * border-width ，相当于会直接使用 border-width 的定义。

4.border-image-outset：定义边框图像从边框边界向外偏移的距离。

5.border-image-repeat：定义分割图像怎样填充边框图像区域。

2.background-image:定义元素使用的背景图像。

3.background-repeat:定义元素的背景图像如何填充。

4.background-attachment：定义滚动时背景图像相对于谁固定。

5.background-position:指定背景图像在元素中出现的位置。

example:假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px

要注意的是：设置3个或4个值，偏移量前必须有边界关键字。也就是说，形如：10px bottom 20px，这样的参数设置是错误的，因为10px前面没有关键字。

6.background-origin:指定的背景图像计算background-position时的参考原点(位置)。

取值：

border-box：从border区域（含border）开始显示背景图像。

padding-box：从padding区域（含padding）开始显示背景图像。（默认）

content-box：从content区域开始显示背景图像。

注意，如果设置background-origin后，设置background-position会相对于background-origin设置的位置做参考来偏移背景图，比如设置在border开始显示图片，这是设置background-position：left 10px top 10px是相对于边框进行左边偏移10px上面偏移10px，如果没设置background-origin，默认是相对于padding处进行偏移。

7.background-clip：指定对象的背景图像向外裁剪的区域。

取值：

border-box：从border区域（含border）开始向外裁剪背景。(默认)

padding-box：从padding区域（含padding）开始向外裁剪背景。

content-box：从content区域开始向外裁剪背景。

text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。

8.background-size：定义背景图像的尺寸大小

#phx{FILTER:Alpha(Opacity=66,FinishOpacity=26,Style=2,StartX=20,StartY=40,FinishX=0,FinishY=0)gray()WIDTH: 225pxHEIGHT:45pxmargin-top:12px}.f14 {color:#0E5990}BODY { SCROLLBAR-FACE-COLOR: #BAEEFCSCROLLBAR-HIGHLIGHT-COLOR: #ffffffSCROLLBAR-SHADOW-COLOR: #ffffffSCROLLBAR-3DLIGHT-COLOR: #ffffffSCROLLBAR-ARROW-COLOR:#ffffffSCROLLBAR-TRACK-COLOR: #ffffffSCROLLBAR-DARKSHADOW-COLOR: #ffffffPADDING-RIGHT: 0pxPADDING-LEFT: 0pxFONT-SIZE: 12pxPADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-TOP: 0pxFONT-FAMILY: Verdana, Arial, Helvetica, sans-serifcolor:#5cbce7background:#D4F0FD}#main {BACKGROUND: url(http://hiphotos.baidu.com/coocoo/pic/item/b9e1d8f921c91a59242df2b7.jpg

) no-repeat 18px 0px}#header{ HEIGHT: 297pxmargin-left:223px}#header div.tit a.titlink{font-size:14pxcolor:#fffffftext-decoration:none}#header div.tit a.titlink:visited{font-size:14pxcolor:#fffffftext-decoration:none}#header div.desc{top:136pxleft:53pxcolor:#fffffffont-size:12px}#header div.tit{top:116pxleft:53px}#tab{top:248px}#tab a.on,#tab a.on:link,#tab a.on:visited{line-height:150%background-color:color:#fffffffont-size:13px}#tab span{color:#fffffffont-size:13pxline-height:120%display:none}#tab a:link{color:#fffffftext-decoration:nonefont-size:13pxvertical-align:topline-height:150%}#tab a:visited{color:#fffffftext-decoration:nonefont-size:13pxvertical-align:topline-height:150%}#tab2 span{color:#176A8Dfont-size:13pxfont-weight:bold}#tab2 a{font-size:12pxfont-weight:bold}#tab2 a:link{color:#330000}#tab2 a:visited{color:#330000}.stagepad {width:633pxmargin-left:44px }.stagepad a:link{text-decoration:nonefont-weight:bold}.stagepad a:visited{text-decoration:nonefont-weight:bold}#layout {width:926pxmargin-left:0pxbackground:url(http://hiphotos.baidu.com/coocoo/pic/item/3fc46159ddceae2a2934f0b7.jpg

) no-repeat bottom 8pxpadding-bottom:50px}#m_blog {padding-top:30px}.stage {background:url(http://hiphotos.baidu.com/coocoo/pic/item/3117d62a97ba5f2dd52af1b7.jpg

) repeat-y 8px 0px}#m_blog div.cnt a {text-decoration:nonecolor:#176A8D}#m_blog div.cnt a:visited {text-decoration:nonecolor:#176A8D}#m_blog div.cnt a:hover {border-bottom:1px #176A8D dashedcolor:#176A8D}#layout td.c2t3{padding-right:14pxwidth:234px}#layout td.c2t1{padding-left:55pxwidth:100%border-right:#930000 0px solid}#layout td.c2t2{width:22px}#mod_bloglist{}#comm_info{color:#176A8Dfont-family:Arialtext-align:centerpadding-top:19pxTEXT-INDENT:px}#comm_info div.line{margin-top:0pxborder-top:0px solid #5C85BB}#comm_info a{color:#176A8Dtext-decoration:none}#comm_info a:visited{color:#176A8Dtext-decoration:none}#page{height:30pxfont-size:12pxfont-family:Arialtext-align:center}#page span{padding:3pxcolor:#1a4a8afont-size:14pxfont-weight:bold}#page a.pc{color:#176A8Dfont-size:14pxfont-weight:bold}#page a.pc:visited{color:#176A8D}#page a.pi{padding:3pxcolor:#176A8Dfont-size:14px}#page a.pi:visited{color:#176A8D}.mod{margin-bottom:28px}.modhandle{cursor:move}.modth{height:0px}.modhead{padding:0px 4px 0 4pxpadding-top:0pxpadding-bottom:6pxbackground:url(http://hiphotos.baidu.com/iyaya/abpic/item/1dd54323b6c5d5529822edc0.jpg

" target="_blank" >http://hiphotos.baidu.com/iyaya/abpic/item/1dd54323b6c5d5529822edc0.jpg

) no-repeat 40px 0pxTEXT-INDENT: 0pxLINE-HEIGHT:17pxborder-bottom:#76B7D3 1px dashedtext-align:center}.modopt{padding:4px 4px 0 0}.modtit{color:#0E5990font-size:13pxfont-weight:bold}a.modtit{color:#176A8D}a.modtit:visited{color:#176A8D}.modtitlink{color:#0E5990font-size:12pxfont-weight:bold}a.modtitlink{color:#0E5990text-decoration:none}a.modtitlink:visited{color:#0E5990text-decoration:none}a.modtitlink:hover{color:#FF5100text-decoration:none}.modact{color:#176A8Dfont-size:12pxtext-align:center}a.modact:link{color:#176A8D}a.modact:visited{color:#176A8D}.modbox{padding:0px 0px 0 0px}.modtl{}.modtc{}.modtr{}.modbl{line-height:1px}.modbc{line-height:1px}.modbr{line-height:1px}#m_blog {padding-left:15pxpadding-right:15pxmargin-top:10px}#m_blog div.tit{padding-top:1pxqpadding-bottom:3pxcolor:#3A9BC5font-size:13pxfont-weight:boldtext-decoration:noneborder-bottom:1px dashed #3295BFborder-top:1px dashed #3295BFTEXT-INDENT: 119pxline-height:25pxbackground:#D6EEFA}#m_blog div.tit a{color:#3A9BC5font-size:13pxfont-weight:boldtext-decoration:none}#m_blog div.tit a:visited{color:#3A9BC5text-decoration:none}#m_blog div.date{font-size:13pxmargin:-23px 0 8px 0color:#3A9BC5TEXT-INDENT: 7pxfont-weight:bold}#m_blog div.cnt{color:#176A8Dline-height:20pxfont-size:13pxPADDING-RIGHT: 10pxPADDING-LEFT: 10pxPADDING-TOP: 10pxPADDING-bottom: 10px}#m_blog div.more{margin:14px 0 16px 0text-decoration:nonefont-weight:bold}#m_blog div.more a{color:#3A9BC5font-size:14pxtext-decoration:nonefont-weight:bold}#m_blog div.more a:visited{color:#3A9BC5text-decoration:nonefont-weight:bold}#m_blog div.opt{color:#176A8Dfont-size:12px}#m_blog div.opt a{color:#176A8Dfont-size:12pxtext-decoration:none}#m_blog div.opt a:visited{color:#176A8Dtext-decoration:none}#m_blog div.line{margin-top:17pxline-height:17px}#m_blog div.none{padding:100px 0 100px 0color:#1a4a8afont-size:14px}#m_pro {text-align:centerpadding-left:15pxpadding-right:10px}#m_pro a{color:#176A8Dfont-weight:boldtext-decoration:nonetext-align:center}#m_pro a:visited{color:#176A8Dfont-weight:boldtext-decoration:none}#m_pro div.image{text-align:centerborder-bottom:#76B7D3 1px solidpadding-top:10pxpadding-bottom:10px}#m_pro div.act{margin-top:10px}#m_pro div.user{color:#176A8Dfont-size:12pxfont-weight:bold}#m_pro div.desc{color:#176A8Dfont-size:12px}#m_pro div.line{margin-top:17pxline-height:17pxborder-top:1px solid #1A4A8A}#m_pro td{color:#176A8Dline-height:24pxfont-size:14px}#m_album div.image{text-align:centerpadding-top:30px}#m_album div.page{color:#176A8Dfont-size:12pxtext-align:center}#m_album div.page a{color:#330000font-size:12px}#m_album div.page a:visited{color:#330000}#m_links {padding-left:18pxpadding-right:18pxtext-align:centerborder-top:0px solid #76B7D3}#m_links div.item{color:#7EBBD7font-size:12pxLINE-HEIGHT: 21px}#m_links div.item a{color:#176A8Dfont-size:12pxtext-decoration:none}#m_links div.item a:visited{color:#176A8D}#m_links div.line{display:none}#m_artclg {border-top:0px solid #5C85BBpadding-top:5px}#m_artclg div.item{color:#176A8Dfont-size:12pxtext-align:centerpadding-left:0px}#m_artclg div.item a{color:#176A8Dfont-size:12pxtext-decoration:none}#m_artclg div.item a:visited{color:#176A8Dtext-decoration:none}#m_artclg div.line{margin-top:0pxline-height:5pxborder-top:0px solid #76B7D3}#m_comment {padding-top:10px}#m_comment div.item{color:#176A8Dfont-size:12pxpadding-left:10pxpadding-right:10pxborder-top:1px solid #76B7D3TEXT-INDENT: 0pxLINE-HEIGHT: 20pxmargin-left:7pxmargin-right:7pxpadding-top:5px}#m_comment div.item a{color:#176A8Dfont-size:12pxtext-decoration:nonefont-weight:boldpadding-left:60pxpadding-bottom:43pxbackground:url(http://hiphotos.baidu.com/iyaya/abpic/item/1dd54323b6c5d5529822edc0.jpg

" target="_blank" >http://hiphotos.baidu.com/iyaya/abpic/item/1dd54323b6c5d5529822edc0.jpg

) 32px -1px no-repeatline-height:21px}#m_comment div.item a:visited{color:#176A8Dtext-decoration:none}#m_comment div.item a.cnt{color:#176A8Dfont-size:12pxtext-decoration:nonefont-weight:normaltext-align:leftpadding-left:0pxbackground:url() top left no-repeat}#m_comment div.item a.cnt:visited{color:#176A8Dtext-decoration:nonefont-weight:normaltext-align:center}#m_comment div.item a.cnt:hover{color:#176A8Dtext-decoration:underlinetext-align:left}#m_comment div.line{display:none}#m_albumlist div.note{color:#176A8Dfont-size:14px}#m_albumlist div.desc{margin-bottom:12pxpadding:3px 10px 3px 10pxline-height:22pxbackground-color:#F2F2F2font-size:14px}#m_albumlist div.none{padding:100px 0 100px 0color:#176A8Dfont-size:14px}#m_albumlist div.line{margin-top:10pxline-height:16pxborder-top:1px solid #76B7D3}#m_albumlist div.tit{margin:6px 0 7px 0color:#176A8Dfont-size:14px}#m_albumlist div.tit a{color:#176A8Dfont-size:14px}#m_albumlist div.tit a:visited{color:#176A8D}#m_albumlist span.count{color:#176A8Dfont-size:12pxfont-weight:bold}#m_albumlist span.size{color:#999999font-size:12pxfont-family:Arial}#m_albumlist a.act{color:#176A8Dfont-size:12px}#m_albumlist a.act:visited{color:#176A8D}#m_albumlist a.page{color:#330000font-size:14px}#m_albumlist a.page:visited{color:#330000}#m_albumlist td.image{padding:5pxborder:1px solid #999999background:#0E5990}#m_friend div.filter{margin-bottom:10pxpadding-left:10pxpadding-top:10pxheight:27pxline-height:27px}#m_friend div.catalog{margin-bottom:10pxpadding-left:10pxheight:27pxline-height:27pxbackground-color:#F2F2F2font-size:14px}#m_friend div.user{margin-top:4pxcolor:#176A8Dfont-size:12px}#m_friend div.user a{color:#176A8Dfont-size:12px}#m_friend div.user a:visited{color:#176A8D}#m_friend div.line{margin-top:10pxline-height:16pxborder-top:1px solid #76B7D3}#m_setting a{color:#176A8D}#m_setting a:visited{color:#176A8D}#m_setting{line-height:22pxcolor:#176A8Dfont-size:14px}#m_setting img.sel{border:4px solid #FFDB7B}#m_setting img.unsel{border:1px solid #D2D2D2}#m_setting span.tit{font-size:14px}#m_setting span.usr{color:#176A8D}#m_setting div.sel{padding-top:6pxfont-size:14pxfont-weight:bold}#m_setting div.line{margin-top:20pxline-height:16pxborder-top:1px solid #76B7D3}#m_sysinfo a{color:#176A8D}#m_sysinfo a:visited{color:#176A8D}#m_sysinfo{line-height:22pxcolor:#176A8Dfont-size:14px}#m_sysinfo span.new{color:#FF0000font-size:10pxfont-family:Arial}#m_sysinfo span.date{color:#176A8Dfont-size:14px}#m_setbase{color:#176A8Dfont-size:14px}#m_setbase td{color:#176A8Dfont-size:14px}#m_setbase div.line{margin-top:5pxline-height:8pxborder-top:1px solid #76B7D3}{all rights reserved,http://www.yaaa.com.cn,http://hi.baidu.com/yaaa}#in_comment div.tit{margin-bottom:12pxcolor:#176A8Dfont-size:14pxfont-weight:bold}#in_comment div.user{margin-bottom:6pxcolor:#176A8Dfont-size:12px}#in_comment div.user a{color:#176A8Dfont-size:12px}#in_comment div.user a:visited{color:#176A8D}#in_comment div.user span.date{color:#176A8Dfont-size:12px}#in_comment div.desc{color:#176A8Dfont-size:12px}#in_comment div.line{margin-top:17pxline-height:17pxborder-top:1px solid #76B7D3}#in_send div.tit{margin:10px 0 10px 0color:#176A8Dfont-size:14pxfont-weight:bold}

关于CSS选择器，首先请看这里： CSS 选择器参考手册

通过以上，我们可以将CSS选择器分为以下几种：

示例：

说明：以下E表示元素，attr表示属性，val表示属性的值。

说明：以下E表示元素

示例：

E:not(s) ,匹配不符合当前选择器的任何元素

示例：

E:target ,匹配文档中特定"id"点击后的效果

示例：

这里我们简单讨论下后代元素选择器和子元素选择器的区别

示例