imovies
当前位置:首 页>> 百 宝 箱 >>DIV+CSS 学习心得<5>:Style大刀开耍!

DIV+CSS 学习心得<5>:Style大刀开耍!

  这回说的Style是基于网页内容的,也就是前面说的块中内容区里的东西,比如文字的颜色、大小、粗细,图片、列表、链接的样式,网页背景,块的背景等。耍刀之前,先说一下和样式有关的一些样式值的单位,关于颜色:1、name,2、RGB,3、Hex;name就是颜色的英文名了,比如red,blue,yellow等等,我就记住这么几个,至于css到底支持多少英文名还得自己个琢磨。RGB是一个眼色的RGB三色的值,比如“rgb(255,255,255)”,这就表示纯白色,具体用什么值,根据自己需要,有很多可以取色的工具可用。最后Hex是十六进制的颜色值,比如“#ff0000”,这表示红色,DW里默认就是使用这种十六进制数来表示颜色的。具体使用看下面列子,虽然是三种写法,但都把样式的背景色设置成红色了。只要牵扯到设置颜色的地方,用这三种颜色表示方式都可以,看你自己。

h1 {background-color:red;}
p {background-color:#ff0000;}
div {background-color:rgb(255,0,0);}

  下面就一一介绍一下具体网页内容的style了,分为:background/text/fonts/link/list。先说background,每个HTML元素(俺说的块,以或者是box)基本都可以设置背景色,当然,有些特殊功能的除外,比如<br /><b><i>等。关于background的属性看下面:

background-color 块的背景色
background-image 块的背景图片(这里是图片地址,又有传说中的相对和绝对地址问题。)
background-repeat 块的背景图片重复方式,可以repeat-x(横向)/repeat-y(纵向),默认是双向重复。
background-attachment 块的背景图片是固定的还是随页面滚动。
background-position 块的背景图片开始位置和对齐方式

  可以给一个块定义的背景参数就是上面这些了,每种参数都有很多值可以使用,具体有哪些值可用,还得你在DW里定义样式的时候查看,DW里会根据你选择参数不同而提示相应参数有哪些值可用,看下图,左边13行结束后回车,DW就会提示你设置其他参数。右边13行就是你选择了background-attachment之后,自动提示可以设置的值供你选择,你要能全都记住当然更好了,直接手写更NB。我也只是记住了部分常用的,不常用的还得靠DW提示。至于每个参数有啥具体表现,请自行在DW定义,然后用浏览器测试,俺就不一一细说了,关键的事情还得自己动手啊,这样才记忆深刻。

  background的定义还可以直接使用简洁方式定义,如下:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

  用简洁方式定义的时候,顺序依照上面background的属性列表的顺序,不是每个值都需要定义,你需要什么就定义什么,只要按照顺序即可。
  然后是text文字相关的样式定义了,这个得和fonts一起说。常用的属性就是下面列表的这几个:

color 文字的颜色(颜色值使用方式同上所说三种都可以)
line-height 文字的行高
text-align 文字水平方向对齐方式
vertical-align。文字垂直方向对齐方式

font-family 文字的字体
font-size 文字的大小 (文字大小的单位有什么px,em,百分比,看个人喜好,我喜欢px)
font-style 文字的风格(斜体还是正常,和<i></i>这个效果一样)
font-weight 文字的重量,这样翻译看得有点别扭,其实就是粗细了。

  和文字有关的样式定义也可以使用简洁方式,如下:


p.ex2{
font:italic bold 12px/30px Georgia, serif;
}

  简洁方式定义时顺序:“font-style font-variant font-weight font-size/line-height font-family”这样定义时,font-size和font-family必须要写,其他的不定义的话用默认值。
  下面说说Links,也就是咱们平时说的网页上的链接,有文字链接,有图片链接等等。链接的样式可定义的很多,也可以把它看成一个块来定义样式。但是链接比较特殊,它有四个状态:


a:link {color:#FF0000;}      /* 未访问链接 */
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 当鼠标停留在链接上 */
a:active {color:#0000FF;}  /* 激活的链接(鼠标点击链接的那一刻) */

  上面的样式定义了链接的文字颜色,不过是四个状态的,上面都一一说明了,具体效果可以自己实验一下,当然,除了颜色参数可以定义,其他还有更多参数可以定义哦,链接文字大小,粗细,是否有下划线,链接背景颜色,背景图片都可以,要搞什么花样就看你折腾的程度了^_^
  最后就是列表了,这玩意也很常用,基本分两种,有序<ol>(ordered lists)和无序<ul>(unordered lists)。不管有序还是无序,列表里的项目前面都有个mark,就是list-style-type,具体值看下图:

  实际使用代码如下,什么效果自己复制粘贴到DW里,保存文件然后F12就可以预览了。或者直接点击运行代码按钮即可查看。




  另外,这个mark是可以自己指定用图片代替的,看下面代码,效果自己测试,mark小图标的图片自己准备好替换掉即可。


ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

  最后说一下list的属性吧,不多,就三种:list-style-type/list-style-position/list-style-image。每种属性对应的值有什么,还是需要你自己去DW里面看看自动提示。属性的值也可以简洁定义,顺序就上面列出的顺序,按需定义,不是三个都要给定值,没给的就用默认值。见下面代码:

ul
{
list-style: square url("sqpurple.gif");
}

  此回书就着落与此吧,最后给一个<ul>做的导航菜单吧,代码如下,复制粘贴到DW里,保存然后F12。或者直接点击运行代码按钮查看。自己感觉一下<ul>和<li>是怎么工作的,然后你自己可以折腾出更给力的导航菜单,因为能设置的样式还有很多,就看你自己怎么把大刀耍的更给力了。



[Edit on 2011-2-9 20:29:22 By 笑傲江湖]
微信支付宝

标 签:CSSDIV

评 论0 引 用0 浏 览2567

上一篇DIV+CSS 学习心得<6>:度量单位和颜色值

下一篇DIV+CSS 学习心得<4>:神奇的盒子

说点什么:

正文内容:

 

图片博文

The Shanghai Restoration Project - The Classics

订阅Rss

人到穷途应一笑,几凡失意仍能傲。成败何须问江湖,我心依旧任逍遥。
这一生只想好好做个平凡的人,有个家有个梦,陪我迎接每一个早晨。
这一生只想好好做个平凡的人,何必争何必问,只有快乐开心才是真。