引入CSS样式的五种方式

一、使用STYLE属性

将STYLE属性直接加在个别的元件标签里，<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}

例如：
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>
这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。

二、使用STYLE标签

将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/CSS">
<!--
样式规则表
-->
</STYLE>
例如：
<STYLE TYPE="text/css">
<!--
BODY {
　　color: BLUE;
　　background: #FFFFCC;
　　font-size: 9pt}
TD, P {
　　COLOR: GREEN;
　　font-size: 9pt}
-->
</STYLE>
通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

三、使用 LINK标签

将样式规则写在.css的样式档案中，再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<head></head>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

四、使用@import引入

跟LINK用法很像，但必　放在<STYLE>...</STYLE> 中。
<STYLE TYPE="text/css">
<!--
　　@import url(引入的样式表的位址、路径与档名);
-->
</STYLE>
例如：
<STYLE TYPE="text/css">
<!--
　　@import url(http://yourweb/ example.css);
-->
</STYLE>
要注意的是，行末的分号是绝对不可少的！

五、使用<span></span>标记引入样式

例如：<span style="font:12px/20px  宋体 #000000;">WEB标准</span>

赞 (0)

相关推荐

  • 引入CSS样式的五种方式

    一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签 将样式规则写在<

  • 原生js更改css样式的两种方式

    原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  "的方式直接更改CSS样式. 2. 先在CSS样式表中对特定的类如"active类"设置样式(这里的active类是假定的,暂时不存在),然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设

  • 关于React动态修改元素样式的三种方式

    关于React动态修改元素样式的三种方式

    目录 React动态修改元素样式 1.借助ref动态修改样式 2.通过动态控制状态的变化修改元素的样式(两种方式) 3.通过在DOM中使用JS代码(三元运算符) React样式冲突问题 css-样式私有化 cssModules-维持类名 css modules-最佳实践 React动态修改元素样式 React动态修改元素样式常用的方式有两种:借助ref和通过动态控制状态的变化修改元素的样式 1.借助ref动态修改样式 在需要修改样式的元素上添加ref <div className='scroll

  • javaScript中定义类或对象的五种方式总结

    第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂函数(factory function). function createCar(sColor){ var oTempCar = new Object; oTempCar.color = sColor; oTempCar.showColor = function (){ alert(this.color); }; return oTempCar; } var oCar1 = createCar(); var oCar2 = createCa

  • js改变css样式的三种方法推荐

    共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s

  • 详解五种方式让你在java中读取properties文件内容不再是难题

    详解五种方式让你在java中读取properties文件内容不再是难题

    一.背景 最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供java程序动态的读取,修改变量,不再需要修改代码的问题.就借此机会把Spring+SpringMVC+Mybatis整合开发的项目中通过java程序读取properties文件内容的方式进行了梳理和分析,先和大家共享. 二.项目环境介绍 Spring 4.2.6.RELEASE SpringMvc 4.2.6.RELEASE Mybatis 3.2.8 Maven 3.3.9 Jdk 1.7 Id

  • iOS 实现类似QQ分组样式的两种方式

    iOS 实现类似QQ分组样式的两种方式

    思路 思路很简单,对模型数据操作或则控制界面显示 先看下json部分数据 "chapterDtoList": [{ "token": null, "id": 1295, "chapterName": "第一章", "parentId": 0, "chapterLevel": 0, "attachmentUrl": "", &qu

  • PHP读取文件内容的五种方式

    php读取文件内容的五种方式 分享下php读取文件内容的五种方法:好吧,写完后发现文件全部没有关闭.实际应用当中,请注意关闭 fclose($fp); -- php读取文件内容: -----第一种方法-----fread()-------- <?php $file_path = "test.txt"; if(file_exists($file_path)){ $fp = fopen($file_path,"r"); $str = fread($fp,files

  • 详解Spring配置事务的五种方式

    详解Spring配置事务的五种方式

    Spring配置文件中关于事务配置总是由三个组成部分,分别是 DataSource .TransactionManager  和 代理机制 这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSource.TransactionManager这两部分只是会根据数据访问方式有所变化,比如使用Hibernate进行数据访问时,DataSource实际为SessionFactory,TransactionManager的实现为HibernateTransactionManager. 具

  • Laravel基础-关于引入公共文件的两种方式

    (1).首先在app\Http\routes.php中定义路由: Route::get('view','ViewController@view'); Route::get('article','ViewController@article'); Route::get('layout','ViewController@layout'); (2).然后在Http\Controllers\ViewController.php中写入方法: public function view(){ return v

随机推荐