精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站设计>css教程>正文

与 CSS 亲密接触(CSS详解)


来源:网络搜集 时间:06-06-13 点击: 点击这里收藏本文
 

CSS全称Cascading Style Sheet。层叠式样式表。
一、CSS的四种实现方式:
1.内嵌式:

2.外链式:

3.导入式

4.属性式:

二.CSS的定义:
选择对象{属性1:值1;属性2:值2;属性3:值3;属性n:值n……}
如:
td{font-size:12px;color:#FFFF00}
.myname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}

三.四种选择对象
1.HTML selector (TagName)
2.class selector (.NAME)
3.ID selector (#IDname)
4.特殊对象 (a:hover a:link a:visited a:active)

1.HTML selector
HTML selector就是HTML的置标符,如:DIV、TD、H1。HTML selector的作用范围是应用了该样式的所有页面中的所有该置标符。
例:
td
{
color: #FF0000;
}
-->
注意:代码的作用是使表格单元格内文字自动变红色。

2.class selector
定义class selector需要往其名称其加一个点“.”。如“.classname”。class selector的作用范围是所有包含“class="classname"”的置标符。
例:
.fontRed
{
color: #FF0000;
}
-->
注意:在第二个中没有“class="fontRed"”,所以文字没有变红色。

3.ID selector
定义ID selector需要往其名称其加一个点“#”。如“#IDname”。ID selector的作用范围是所有包含“ID="classname"”的置标符。
例:

#fontRed
{
color: #FF0000;
}
-->  
注意:在第二个中没有“ID="fontRed"”,所以文字没有变红色。

4.特殊对象
特殊对象包括四种,是针对链接对象设置的:
a:hover 鼠标移上时的超链接
a:link 常规,非访问超链接
a:visited 访问过的超链接
a:active 鼠标点击时的超链接
特殊对象的作用范围是所有置标符(这句话有待商榷,因为下面很快就有一种方法可以把“所有”两个字推翻)。
例:
a:hover
{
color: #0000FF;
text-decoration: underline;
}
-->
注意下面,很有用!!!
a.classname:hover
a#IDname:hover
这两种写法,是分别配合.classname与#IDname使用的。它的作用范围变成了所有包含“class="classname"”或“ID="IDname"”的置标符。这种写法,可以帮助你在同一页面中实现多种a:hover效果,可以看一下艺网的主页上导航栏文字与普通文章标题在鼠标时的区别。

四.应用:
1.置标符 自动应用
2.特制类 class="NAME"
3.ID   ID="IDname"
4.特殊对象 自动应用
五.CSS属性
CSS的属性有很多,像上文中用到最多的color,表示文字的颜色。background-color表示背景色。这个是最主要的,但是因为没有什么难度,参考一下相关手册就可以了。

CSS 标签属性/属性参考
这里列出了目前支持的样式表(CSS)标签属性。

CSS 标签属性/属性

行为属性 behavior

字体和文本属性 direction
direction
font
font-family
font-size
font-style
font-variant
font-weight
ime-mode
layout-grid
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
letter-spacing
line-break
line-height
min-height
ruby-align
ruby-overhang
ruby-position
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-transform
text-underline-position
unicode-bidi
vertical-align
white-space
word-break
word-wrap
writing-mode

[本文共有 2 页,当前是第 1 页] <<上一页 下一页>>


  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.