前端技术之如何网页中使用CSS样式表发布者：本站 时间：2020-05-16 09:05:29
CSS英文全称Cascading Style Sheet，中文翻译为：层叠样式表单。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 是网站前端开发必备的技术。CSS/DIV布局设计已经完全替代过去的table布局，并被纳入W3C标准。作为一名前端开发人员或者即将踏入前端开发行业的你是否熟练掌握这一技能，能够熟练运用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>
以上三种样式表的优先级是：内嵌样式表>内部样式表>外部样式表。当然优先级高的并不一定代表是最好的，在实际开发过程中我们可以灵活来运用，如果你一定要问我哪种方法用得最多，我会告诉你是前面两种。
选择我们，优质服务，不容错过
1. 优秀的网络资源，强大的网站优化技术，稳定的网站和速度保证
2. 15年上海网站建设经验，优秀的技术和设计水平，更放心
3. 全程省心服务，不必担心自己不懂网络，更省心。
------------------------------------------------------------
24小时联系电话：021-58370032