CSS在网页设计中的使用方法及其特点

  给初学者介绍一下css特点及如何在网页中使用已经设置的css。

  W3C(The World Wide Web Consortium)把动态HTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表

  层叠样式表的特点

  且不说过去的网页缺少动感,就是在网页内容的排版布局上也有很多困难,如果不是专业人员或特别有耐心的人,很难让网页按自己的构思和创意来显示信息。即便是掌握了HTML语言精髓的人也要通过多次地测试,才能驾驭好这些信息的排版,过程十分漫长和痛苦。

  样式表就是在这种需求下诞生的,它首先要做的是为网页上的元素精确地定位,可以让网页设计者象导演一样,轻易地控制由文字、图片组成的演员们,在网页这个舞台上按剧本要求好好地表演。

  其次,它把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构,而为了让浏览者更好地看到这些信息,就要通过格式控制来帮忙了。以前两者在网页上的分布是交错结合的,查看修改很不方便,而现在把两者分开就会大大方便网页的设计者。内容结构和格式控制相分离,使得网页可以光由内容构成,而将所有网页的格式控制指向某个CSS样式表文件。这样一来的好出表现在两个方面:

立即学习“前端免费学习笔记(深入)”;

  第一,简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。

  第二,只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色,在修改页面数量庞大的站点时,显得格外有用。避免了一个一个网页的修改,大大减少了重复劳动的工作量

  添加层叠样式表的方法

  我们为网页添加样式表的方法有四种:

  1.最简单的方法是直接添加在HTML的标识符(tag)里:

  网页内容

  举个例子:

  CSS实例

  代码说明:用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直观,但是这种方法不怎么常用,因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。

  2.添加在HTML的头信息标识符里:

以下是引用片段:  @@######@@  type=”text/css”表示样式表采用MIME类型,帮助不支持CSS的浏览器过滤掉CSS代码,避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生,还是有必要在样式表里加上注释标识符“”。

  3、链接样式表

  同样是添加在HTML的头信息标识符里:

以下是引用片段:  @@######@@
  *.css是单独保存的样式表文件,其中不能包含标识符,并且只能以css为后缀。

  Media是可选的属性,表示使用样式表的网页将用什么媒体输出。取值范围:

  ·Screen(默认):输出到电脑屏幕

  ·Print:输出到打印机

  ·TV:输出到电视机

  ·Projection:输出到投影仪

  ·Aural:输出到扬声器

  ·Braille:输出到凸字触觉感知设备

  ·Tty:输出到电传打字机

  ·All:输出到以上所有设备

  如果要输出到多种媒体,可以用逗号分隔取值表。

  Rel属性表示样式表将以何种方式与HTML文档结合。取值范围:

  ·Stylesheet:指定一个外部的样式表

  ·Alternate stylesheet:指定使用一个交互样式表

  4、联合使用样式表

  同样是添加在HTML的头信息标识符里:

以下是引用片段:  @@######@@  以@import开头的联合样式表输入方法和链接样式表的方法很相似,但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时,针对该网页的具体情况,做出别的网页不需要的样式规则。

  需要注意的是:

  ·联合法输入样式表必须以@import开头。

  ·如果同时输入多个样式表有冲突的时候,将按照第一个输入的样式表对网页排版。

  ·如果输入的样式表和网页里的样式规则冲突时,使用外部的样式表。

            

登录后复制登录后复制

      

登录后复制

            

登录后复制登录后复制

以上就是CSS在网页设计中的使用方法及其特点的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3122158.html

(0)
上一篇 2025年3月29日 18:08:28
下一篇 2025年3月13日 02:46:16

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css技巧之链接的标注

          css越来越广泛的被运用,层叠样式表拥有很多表格布局所没有的优势,首先从布局或者页面的设计与出现在页面中的信息中作严格的分离,从而让页面的设计能够很容易被改变,仅用一个css文件更换另一个。随之很多的技巧被应用者所重用,减少一定…

    编程技术 2025年3月29日
    100
  • css实现进行中打点效果代码分享

    这篇文章主要介绍了css进行中打点效果,附上代码让大家更简单易懂得看明白样式设置,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。 代码如下: nbsp;html>进行中…dot { display:inlin…

    编程技术 2025年3月29日
    100
  • CSS3中media媒体查询器使用详解

    最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多。但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器。 那么什么是media媒体查询器呢? Media媒体查询…

    编程技术 2025年3月29日
    100
  • 关于CSS布局技巧的总结分享

    单列布局 水平居中 父元素text-align:center;子元素:inline-block; 优点:兼容性好; 不足:需要同时设置子元素和父元素 nbsp;html>水平居中1 .parent { width: 500px; he…

    编程技术 2025年3月29日
    100
  • 利用html+css3制作心的跳动动画

    nbsp;html>            模拟心的跳动 * { margin: 0; padding: 0;}body { background-color: #D4CECE;}.big { width: 200px; height…

    编程技术 2025年3月29日
    100
  • 总结解决css边距重叠的方法

    本篇文章主要介绍了详解css边距重叠的几种解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 今天整理了一下用css防止边距重叠的几种方法 先假设一组dom结构          登录后复制 通常情况下,如…

    编程技术 2025年3月29日
    100
  • CSS3中calc()做响应模式布局方法介绍

    这篇文章主要介绍了 css3的calc()做响应模式布局的实现方法,需要的朋友可以参考下  REM方法 calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新…

    编程技术 2025年3月29日
    100
  • 总结CSS3的新特性(面试必备)

    css是一门不断在发展的“语言”,在我们日常面试前端工作的时候是必不可少的一个知识点,下面这篇文章主要给大家分享介绍了关于前端面试必备之css3新特性的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。 前…

    编程技术 2025年3月29日
    100
  • CSS中可以及不可以继承的属性有哪些

    一、无继承性的属性 1、display:规定元素应该生成的框的类型 2、文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shadow:文本阴影效果 white-spac…

    编程技术 2025年3月29日
    100
  • 利用Css+jQuery 制作下拉菜单

    html      登录后复制        请选择        百货        生活用品        电脑外设        数码产品     css a{        text-decoration: none;}#selec…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论