您当前的位置: 首页 > 前端教程 > CSS教程 > 前端技术之如何网页中使用CSS样式表

前端技术之如何网页中使用CSS样式表

作者:xiaoxiao 来源:未知 发布时间: 2013-10-18 16:42 点击:
CSS英文全称Cascading Style Sheet,中文翻译为:层叠样式表单。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 是网站前端开发必备的技术。CSS/DIV布局设计已经完全替代过去的table布局,并被纳入W3C标准。作为一名前端开发人员或者即将踏

前端技术之如何网页中使用CSS样式表

    CSS英文全称Cascading Style Sheet,中文翻译为:层叠样式表单。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 是网站前端开发必备的技术。CSS/DIV布局设计已经完全替代过去的table布局,并被纳入W3C标准。作为一名前端开发人员或者即将踏入前端开发行业的你是否熟练掌握这一技能,能够熟练运用CSS进行网页设计呢?不管你熟练或者不熟练请先来看看下文,我将给大家简短的介绍如何在前端网页开发中使用CSS技术。

css
  
  目前,你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。
  
  1、外部调用样式表文件
  
  你可以先建立外部样式表文件(xxx.css),然后通过HTML的link方法,将其链接到要使用到的网页。示例如下:
  
  <head>
  
  <title>the title</title>
  
  <link rel=stylesheet href="xxx.css" type="text/css">
  
  </head>
  
  请记住,使用这种方法一定要注意引用路径问题,引用路径出错样式表文件就不会作用于当前网页。如果外部引入的CSS文件非常大,可能会影响到网页的加载速度,这时候如果你比较精通CSS的话,可以对样式文件进行精简瘦身,也可以使用压缩工具来压缩CSS文件。压缩工具网站上有,有兴趣的朋友可以上网上去搜一搜。
  
  2、内部定义样式文件
  
  你也可以在当前网页的头部文件<head></head>之间插入<style>...</style>块对象。定义方式请参阅样式表语法。示例如下:
  
  <head>
  
  <style type="text/css">
  
  body {font:14px "Arial"}
  
  h1{size:100%;color:#eee}
  
  a{color:#333;text-decoration:none}
  
  p{font:12px "宋体";color: black}
  
  </style>
  
  </head>
  
  请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。通常是都要写全的,如果不加上可能会发生意外错误。
  
  3、HTML对象元素内部定义CSS样式
  
  内部定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。内部定义样式表语法:<element style="property: value"></element>。参数说明:element——HTML对象;property:value——样式表定义属性和属性值之间用冒号(:)隔开、定义之间用分号(;)隔开。示例文件如下:
  
  <body>
  
  <p style="font-size:12px "Verdana";color:red">xxxooo</p>
  
  </body>
  
  以上三种样式表的优先级是:内嵌样式表>内部样式表>外部样式表。当然优先级高的并不一定代表是最好的,在实际开发过程中我们可以灵活来运用,如果你一定要问我哪种方法用得最多,我会告诉你是前面两种。

分享到:
本文"前端技术之如何网页中使用CSS样式表"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(2)
100%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4