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;

上一篇:HTML+CSS基础 权重的计算 权重计算规则


下一篇:css系列,选择器权重计算方式