首页 > 代码库 > css 层叠式样式表(3)

css 层叠式样式表(3)

样式分类

大小 -- 调整div大小,长 width,高 height。长可以直接100%横向沾满屏幕,高不可以。

背景  

      background-color  背景色

      background-image  背景图片  后面接url() 括号里填图片位置

      background-repeat  背景图片的平铺方式  :no repeat  让图片只显示一次,

      background-position  背景图片的位置   center 居中

      background-size  背景图片的大小  设置图片的长高,可以写百分比,如果写具体的必须加上单位px;

      background-attachment  设置背景图片是否滚动

字体

     font-family  字体样式

     font-size  字体大小

     font- style  italic 字体倾斜

     font-weight  字体加粗

     text-decoration  -- underline 下划线;overline 上划线;line-through 删除线;none 没有,用来清除超链接的下划线;

     color  字体颜色

对齐方式

     text-align  水平对齐方式

     verticl-align 垂直对齐方式,middle 配合display:table-cell(把文本内容当做标记来使用,会清除掉一些流和浮动);

     line-height   行高     如果只有一行文字,那么边框设置多高就输入多高,就会垂直居中

     text-indent  缩进,单位像素。

边界边框

     margin  外边距  四个参数,上右下左(顺时针顺序)

     padding  内边距  上右下左,如果加入了内边距,该元素会相应的变大

     border  边框  三个参数  , 边框粗细,边框大小,边框颜色。

列表方块

<ul>

    <li>

    <li>

</ul>

     list-style  none将列表前面的序号去掉

     list-style-image 将列表前的序号改为图片

格式布局

    位置    position: fixed固定  absolute绝对位置(浏览器,绝对定位的上级)   relative相对位置  相对与自身应该出现的位置

              top  距离上边的距离;left 距离左边的距离; right 右边;  bottom下边;

    流   float:left  向左流 right 向右流   流式布局,会根据浏览器变换排列

          clear: both  清除流

    分层   z-index   值越大越靠上

 

其他

display  显示biock,隐藏none,不占位置

visibility 显示visible  隐藏hidden,占位置

overflow  超出范围 hidden隐藏,超出边框范围的会隐藏 scroll滚动条

css3中的样式,ie可能不兼容

透明:opacty:0.5(对应谷歌浏览器)  -moz-opacty:0.5(对应火狐浏览器)  filter:alpha(opacty=50)(对于ie浏览器)

圆角:border-radius:5px;  最多就变成圆

阴影:box-shadow:0 0 5px white;

 

css 层叠式样式表(3)