WordPress主题(模板)修改教程(六):需要了解的css样式

十一月 26
磊子 2011年 11 条评论

今天接着昨天的需要了解的html标签和属性 为大家继续讲解基础性的知识,常用到的css样式和属性。可以说很多。让我一一道来。

首先说下写法。给大家看个例子就明白了。

//定义一个div标签 里面给个id值,或者class值
<div class="test" id="mytest">这是一个测试</div>
//然后在css文件中定义样式
.test{ color:#FF000; background:#000000; }
//或者
#mytest{ color:#FF000; background:#000000; }
//可以看到样式是写在{}里面的,class用点,id值用'#'号

一.文本属性
1.word-spacing: 单词之间的距离
2.letter-spacing: 字母之间的距离
3.text-decoration: 定义文字的装饰: none(没有)/underline(下划线)/overline(上划线)
4.vertical-align: 元素在垂直方向的位置: baseline(基线)/top(顶部)/text-top(文本顶部)/middle(中间)/bottom(底部)/text-bottom(文本顶部)
5.text-transform:使文本转换为其它方式: capitalize(字母全部大写)/uppercase(首字母大写)/lowercase(字母全部小写)/none(无)
6.text-align:文字的对齐: left(左)/right(右)/center(居中)
7.text-indent: 文本的首行缩进
8.line-height:10px 文本的行高

二.字体属性
1.font-family:使用什么字体
2.font-style:字体的样式:normal/italic(斜体)/
3.font-variant:字体大小写:normal/small-caps
4.font-weight:字体的粗细:normal/bold
5.font-size:字体的大小

三.颜色和背景属性(backgroud)
1.color:定义字体颜色
2.background-color: 定义背景色
3.background-image:定义背景图片
4.background-repeat:背景图案重复方式:repeat-x/repeat-y/no-repeat
5.background-attachment:设置滚动:scroll(滚动)/fixed(固定的)
6.background-position:背景图案的初始位置:top/left/right/bottom

四.块属性(block)
边距属性:
1.margin-top:设置顶部边距
2.margin-right:设置右边距
3.margin-bottom:设置底边距
4.margin-left:设置左边距
填充距属性:
5.padding-top:设置顶端填充距
6.padding-right:设置顶端填充距
7.padding-bottom:设置顶端填充距
8.padding-left:设置顶端填充距

五.定义超链接:
a:link { color:green;text-decoration:nore} 未访问过的状态
a:visited { color:ren;text-decoration:underline;16px} 访问过的状态
a:hover { color:blue;text-decoration:underline;16px} 鼠标激活的状态

六.边框属性(border)
border-top-width(顶端边框宽度)
border-right-width(右端边框宽度)
border-bottom-width(底端边框宽度)
border-left-width(d左边框宽度)
border-width(一次定义边框宽度)
border-color(设置边框颜色)
border-style(设置边框样式)
border-top(一次定义顶端各种属性)
border-right(一次定义右端各种属性)
border-bottom(一次定义底端各种属性)
border-left(一次定义左端各种属性)

七.项目符号和编号
display:定义是否显示 none(不显示),block(块状显示)
white-space: 属性设置如何处理元素内的空白
list-style-type:在列表前加项目符号,disc(圆点),circle(圈),square(方形),decimal(阿拉伯数字),lower-roman:(小写罗马数字),upper-roman(大写罗马数字),lower-alpha(小写英文字母),upper-alpha:大写英文字母),none
list-style-tyle:在列表前加图标或者符号
list-style-position:决定列表位置
list-style:一次性定义列表样式

八.定位(positioning)即层属性
类型:设定对象的定位方式。
有三种方式:Absolute(绝对定位)、Relative(相对定位)、Static(无特殊定位)。相对应的CSS属性是”position”,如:position:relative。
1.Visibility:设定对象定位层的最初显示状态,有三种状态:Inherit(继承父层的显示属性)Visible(对象可视),Hidden隐藏对象。相对应的CSS属性是”visibility”。
2.Z-Index:设置对象的层叠顺序。编号较大的层会显示在编号较小的层上边。变量值可以是正值也可以是负值。相对应的CSS属性是”z-index”。
3.Overflow:设置如果层的内容超出了层的大小时如何处理。有四种处理方式:visible,增加层的大小,从而将层的所有内容显示出来,hidden,保持层的大小不变,将超出层的内容剪裁掉;Scroll,总是显示滚动;Auto,只有在内容超出层的边界时才显示滚动条。

九.其他
width:定义宽度属性
height:定义高度属性
float:浮动,left(左浮动),right(右浮动)
clear:清除浮动

以上便是一些比较常用到的css属性了,这些就需要大家多多去写去做,这样才印象深刻点,建议大家使用Dreamweaver ,主要是使用软件里面的提示功能。有些东西我们不必要都记住,但是知道怎么使用就可以,也可以在网上找些css手册来看。这些基础性的东西磊子就说到这里了,其他的就需要自己来学习了,我这里的并不是很全。以上这些有什么问题的可以留言,我会一一解答的,下篇就开始主要讲解主题修改方面的东西了。欢迎大家前来支持。

» 版权所有©转载必须以链接形式注明作者和原始出处:磊子的博客 » WordPress主题(模板)修改教程(六):需要了解的css样式
» 地址:( Ctrl+C 复制 )
» 如果对本站感兴趣,请到网站右下方订阅本站,将为你带来更多精彩和实用的文章
» 如果您对这篇文章感兴趣,不妨小小的 捐助(Donate)一下博主吧,不管多少都是对博主最大的支持和鼓励哟,博主-磊子感谢大家的支持!!!

11 条留言 其中:访客:6 条, 博主:5 条

  1. 李生说:

    能不能把链接文章整理一下,我看我爱水煮鱼在这方面就做的很好

  2. talor说:

    你用的是那家的空间啊,推荐下

    • 磊子说:

      我这个空间一般啦!单线的。如果你感觉不错!可以联系我哟!

  3. 123说:

    float:浮动,left(左浮动),right(有浮动)
    错别字

  4. talor说:

    文章写的不错,收获很多,最近正好在学wordpress主题,正好就来到你这,话说,我叫祁磊,还正是有缘分啊,悄悄的点了下ad支持下, :grin:

  5. 收藏了、好东西!

  6. “清楚浮动”,清除浮动呃

说点什么吧




订阅本站