CCS学习(三)

边框样式

 边框线 dorder-style (top 上; bottom 下;  left 左; right 右)  样式:none | hidden | dotted | dashed | solid | double | groove |ridge | inset  | outset 

 不显示上边框  例如:<style type="text/css">
div{border-top-style: none;}
</style>

边框宽 border-width  (top 上; bottom 下;  left 左; right 右) 样式:medium | thin | thick | length 

  上边框宽度   例如:<style type="text/css">
div{border-top-width: 100px;}
</style>

 边框颜色 border-color (top 上; bottom 下;  left 左; right 右)  

  上边框为红色  例如:<style type="text/css">
div{widows: 100px; height: 100px; border-style: solid; border-top-color: red;}
</style>

 边框缩写  border:1px solid #FF0000;    1px为边距   solid为风格   后面是颜色

 圆角效果 border-radius   例如:{ border-radius:1px;}所有边角都以半径为1px的圆角,  {border-radius: 1px 2px 3px 4px;}以顺时针方向设置,   {border-radius:50%}圆

 边框图片 border-image   样式:source, slice,width,outset,repeat     注意:在设置了border-image后则border-style不显示

  盒子阴影(背景图片颜色阴影) box-shadow   设置的样式: box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径]  [阴影颜色 rgba(0,0,0,.5)这里的.5是透明度 ] [投影方式 inset;]            (字体阴影  text-shadow )

段落样式

 行高 line-height     可用单位:px %   (内容到边框border的高度叫行高)

 段落首行缩进  text-indent    可用单位:em    (一般文章第一行的第一个字都会后退两格 2em)

 段落对齐  text-align  样式:left   right   center   justify自动调整不齐的地方 

 文字间距 letter-spacing  文字与文字的空隙

 文字溢出  text-overflow     样式:cilp 把溢出框外的文字剪掉, elliptical  把溢出框外的文字改成.... (如要改成...必须强制定义文本【white-space:nowrap】和隐藏溢出【overflow-hidden】才会实现elliptical的效果)

                例如:<style type="text/css">
.p{
width: 100px;
height: 30px;
border:1px solid red;
overflow:hidden;
word-spacing: nowrap;
text-overflow: ellipsis;
}
</style>

段落换行  word-wrap    样式:normal 允许内容顶开或溢出指定的容器边界, breap-word 内容将在边界内换行,如果需要,单词内部允许断行。

 背景样式    

   定位 position:       static:无特殊定位,对象遵循正常文档流。toprightbottomleft等属性不会被应用。

  ( 定位用于让多个border重叠效果)  relative:对象遵循正常文档流,但将依据toprightbottomleft等属性在正常文档流中偏移位置。

                                  absolute:对象脱离正常文档流,使用toprightbottomleft等属性进行绝对定位。而其层叠通过z-index属性定义。

                                  fixed:对象脱离正常文档流,使用toprightbottomleft等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。

 背景颜色 background-color:颜色;   还有一种   rgba  red 红色  green 绿色 blue 蓝色  a 代表的是透明度 (a的取值范围为0-1)   语法是:color:ragb(0,0,0,.1)  border-color:rgba         background-color:rgba

 渐变色    background-image:linear-gradient( to top,red 10%,blue)

CCS学习(三)

背景图片 background-image:none / URL(图片地址)

    背景平铺方式  background-repeat:repeat默认多重图片 / no-repeat 一张图片/ repeat-X  X轴多重图片 / repeat-Y  Y轴多重图片

背景图片对齐方式  background-position:左右对齐 上下对齐;  还可以用 :%  px;

    背景原点

上一篇:springMVC源码分析--SimpleControllerHandlerAdapter(三)


下一篇:springMVC源码分析--RequestMappingHandlerAdapter(五)