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. “清楚浮动”,清除浮动呃

说点什么吧




wireless earbuds moscow mule mugs bluetooth speakers waterproof camera best wireless earbuds best vacuum cleaner best drugstore foundation best dishwasher best waist trainer wireless headphones best vacuum 0594918 best bluetooth earbuds waterproof bluetooth speaker tattoo cover up action camera
订阅本站