CSS是什么东东?,在网页设计里?

pasu 2000-06-16 12:24:00
CSS是什么东东?,在网页设计里?
...全文
130 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
bluewater 2000-07-09
  • 打赏
  • 举报
回复
样式表的建立要符合CSS规则,它们一般被定义成以下形式的句法:

  HTML标志{标志属性:属性值;标志属性:属性值;标志属性:属性值;标志属性:属性值;...}

下面我们分别讲述:
  .HTML标志:在上一节我们已简要地介绍了一下, 有点需要注意的是,这些标志不带尖括号,如P,Div、Table等而不是<P>、<Div>以及<Table>。
  .标志属性:属性值,这是一一对应的,每个属性与属性值对之间用分号隔开。有一点要说明的是,在CSS的属性设置与脚本语言中对属性设置有一点不同,即属性名称的写法,在CSS中,凡属性名为两个或两个以上的单词构成时,单词之间以"-"隔开,比如,背景颜色属性background-color, 而在脚本中,对象属性则连写成backgroundColor,第二个单词首字母大写,如有三个单词则第三个单词首字母也要大写,注意,在Javascript中,是严格区分大小写的。
下面看一个具体的例子,比如我们对一个段落建立一个样式表:
   P{background-color:#0000ff;font-size:12pt;color:#ffff00},效果如下

网页陶吧欢迎你;网页陶吧欢迎你;网页陶吧欢迎你;网页陶吧欢迎你;

上面我们分别设置了背景色,字体大小,以及字体颜色等。
为了看起来直观一些,上边的例子还可以写成:
  P{background-color:#0000ff;
   font-size:12pt;
   color:#ffff00}

  有一点值得注意的是,有些属性可以表示多个属性的值,如字体设置,有字体字样:font-family、字体大小:font-size、字体风格:font-style,这些可用一个font属性来表示,
  如:H2{font-size:15pt;
      font-family:'宋体';
     font-style:italic }
可直接用 H2{font:15pt 宋体 italic}来表示,类似的情况还有关于背景方面的设置,在以后的章节中我们会一一详细讲解的。


下面以一段比较典型的CSS代码为例介绍其具体用法。
  例:这段代码 中间的部分共七行,可看出有这样的特点:前两行的格式分别为P {……} 和 TD {……} 。后五行均是 A:命令词 {……} 的格式。其中前两行的作用是对网页文字的字体、大小、颜色等的控制,而后五行则是对链接的色彩及下划线的控制。
  1.文字控制
  例中的前两行:
  P {FONT-FAMILY: 宋体; FONT-SIZE: 9pt; LINE-HEIGHT: 12pt; color:#000000} TD {FONT-FAMILY: 宋体; FONT-SIZE: 9pt} 说明:FONT-FAMILY:宋体;(指定网页文字的字体) FONT-SIZE:9pt;(指定网页文字的字号大小,pt是表示大小的单位)LINE-HEIGHT:12pt;(指定行与行的垂直距离,即行高)color:#000000(指定网页文字的颜色,#000000 代表黑色,为十六进制数)TD {FONT-FAMILY:宋体;FONT-SIZE:9pt}(对网页表格里的文字进行控制)
  2.链接色彩变化及下划线的控制
  例中的后5行说明:
  A:hover {BACKGROUND-COLOR: #ffccff; COLOR: #0080ff}
  (hover表示鼠标指示时,链接文字背景色为#ffccff;前景色为#0080ff)
  A:link {color:#000000;TEXT-DECORATION: none}
  (link表示未被访问时,链接颜色为黑色,链接无下划线.)
  A:visited {color:gray;TEXT-DECORATION: none}
  (visited表示被访问后,链接颜色为灰色,链接无下划线.)
  A:active {color:green;text-decoration: none}
  (active表示鼠标点击时,链接颜色为绿色,链接无下划线.)
  A:hover {TEXT-DECORATION: underline}
  (hover表示鼠标指示时,链接显示下划线)
  注释:
  none——没有下划线
  underline——下划线
  overline——上划线
  line-through——中划线
  以上是比较典型的一段CSS代码,代码中的参数值可随意更换调试。有了CSS的预先设置,你会发现制作网页变得更轻松了。
x86 2000-06-16
  • 打赏
  • 举报
回复
Cascading Style Sheet.
分为CSS 1和CSS 2,是一个国际标准.不过浏览器都还支持不够,
IE勉强支持CSS 1,NS根本就支持不全.

Style Sheets allow the HTML author to separate presentation definitions from content in HTML documents. HTML was designed primarily as a content based mark up language and the introduction of various text level formatting elements and attributes only served to confuse the issue.

一个简单的应用就是IE支持的style sheet,
<HTML>
<HEAD>
<TITLE>The HTML Reference Library</TITLE>
<STYLE>
P.main {font-family : Arial;
font-size : 12pt}
P.info { font-family : Arial;
font-style : italic}
</STYLE>
</HEAD>
<BODY>
<P CLASS="main">The HTML Reference Library is a Windows HLP file, detailing all currently useable HTML syntax. It is available in the following formats :
<UL>
<LI>Windows 3.x
<LI>Windows 95/NT
</UL>
<P CLASS="info">For more information about the HTMLib, contact <A HREF="mailto:htmlib@htmlib.demon.co.uk">htmlib@htmlib.demon.co.uk</A>
</BODY>
</HTML>



TopHead 2000-06-16
  • 打赏
  • 举报
回复
是层叠样式表,可以控制网页显示等很多方面的内容。
pasu 2000-06-16
  • 打赏
  • 举报
回复
在网页中运用在哪方面
Dreamweaver 外部插件 名称 简介 Alwaysontop 可以使弹出的窗口始终位于顶端 Browse4redirct 页面自动重定向到某个地址 Moustrail 鼠标移动带有"轨迹" windowresizer 指定窗口的分辨率 Pageborder 设定页边距 ColourDethRedirect 根据访问者的的屏幕颜色数选定相应页面 Framewizard 制作各种样式的帧结构 FrameBuster 监测是否现在在一个帧中,如果在跳出帧结构 Makemaillink 建立邮件连接 Makenewslink 建立新闻组连接 Fullscreen Opener 在新窗口中以全屏幕方式打开页面 close onblur 光标移出窗口时自动关闭该窗口 CSS on resolution 根据不同的分辨率调入相应的外部css文件 Css on platform 根据不同的操作系统调入相应的外部css文件 Css on Browser 根据不同的浏览器调入相应的外部css文件 FontTagKiller 将页面中所有的标记清除 jsonbrowser 根据不同的浏览器选择不同的js代码 Remove lines from maps IE4会在可点图激活时候显示虚线框,该命令移走这个框 Tag killer 将指定的标签从页面中清除 InsertCustom Tag 插入自定义标签 set global Var 在head标签中设置javascript的全局变量 windwo mover 将窗口移到屏幕的指定地方 dreamshow 使图片像播放幻灯一样顺序播放 Show-HideallLayers 隐藏或者显示所有的层 OpenerLocation 在新窗口中打开指定的url Flash3_detector 监测是否支持flash3 redirect 可以根据浏览器操作系统等多种条件调入相应页面 Centrewindow 自动将窗口置中 One by one(behavior+command) 在显示当前层的时候,自动隐藏前一个层 maxmizewindow 最大化窗口 Open full screen window 打开一个新的全屏幕的窗口 printcrossbrowser 弹出打印对话框 Audioembed 可以嵌入midi文件并设置为循环播放 Background_that_fit 不论怎样缩放窗口背景图片总是和窗口一样大 Basetarget 设定页面的的base URL Timestamp 为页面加上时间戳,这下最新更动时间不用每次再自己写了 guestbook-o-matic 不用cgi制作自己的留言本 quicktimeobj 插入quicktime文件 Flash3embedder 插入Flash3文件 realvideo 插入real文件 js depending on browser 根据不同的浏览器选择不同的javascript代码 Externel CSS file 插入外部的CSS文件 Externel Javascript file 插入外部的js文件 Video embed 插入activemovie windowsMaxmizer 最大化窗口   名称 简介 Reverse Timeline Reverse Timeline可以从TIMELINE的帧15倒放到帧1,但必须将其放到TIMELINE的文件夹下,否则它不会工作 Layer f(x) Behavior 这个Behavior 可以让一个层(layer)按照一个圆形、螺旋形或一些 特殊的轨迹运动。 Align Layers 这个Action的功能是让用户可以将一个layer象table一样的在屏幕上 进行竖直或水平排列对齐,同时这个插件还可以设置整个html页面的边距。 Layer Transitions 包含了12种网页中常见的层变化效果的插件,在IE和NN内都能够正常 显示。 Back to my frame 在网页中加入这个action后浏览器将会判断当前的页面是否包含在一 个帧中,如果结果为否则会自动跳转到指定的url地址。 History Go 2.0 这个Behavior的作用是在网页中增加一个“History Go”的javascri pt,从而可以实现类似于浏览器中的“前进”和“后退”按钮的功能。 Print 3.0

4,354

社区成员

发帖
与我相关
我的任务
社区描述
通信技术相关讨论
社区管理员
  • 网络通信
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧