引入样式表(css)的四种方式
一、使用style属性: 将style属性直接加在html标签里。
<标签 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>
引入样式表(css)的四种方式的更多相关文章
- JavaScript表单提交四种方式
总结JavaScript表单提交四种方式 <!DOCTYPE html> <html> <head> <title>JavaScript表单提交四种方式 ...
- CSS学习(一)---使用CSS的四种方式
1. 行内样式 例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- sess文件编译输出css的四种方式以及使用
sess文件输出css有下面四种方式: :nested(嵌套) :compact(紧凑) :expanded(展开) :compressed(压缩) 如何使用: sass --watch style. ...
- 引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 <li ...
- C# MVC提交表单的四种方式(转)
Mvc 提交表单的4种方法全程详解(转) 一,MVC HtmlHelper方法 Html.BeginForm(actionName,controllerName,method,htmlAttribu ...
- 【总结-前台发送后台接收表单】MVC提交表单的四种方式
https://www.cnblogs.com/chenwolong/p/Form.html#commentform 后台控制器接收前台表单参数三种方法: 一.普通参数 HTML标签name 和参数名 ...
- CSS 四种引入样式表优缺点分析
CSS 四种引入样式表 CSS 有四种方式引入样式表,如下: 外部样式表 内部样式表 行内样式表 导入样式表 外部样式表优缺点 优点 实现了结构与表现的代码完全分离 方便复用及维护 因为分离到各自独立 ...
- 《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解 一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
随机推荐
- leetcode-117-填充每个节点的下一个右侧节点指针②
---恢复内容开始--- 题目描述: 方法一:层次遍历 """ # Definition for a Node. class Node: def __init__(sel ...
- 【Uva 12128】Perfect Service
[Link]: [Description] 给你n个机器组成的一棵树,然后,让你在某些机器上安装服务器. 要求,每个机器如果没有安装服务器,都要恰好和一个安装了服务器的机器连接. 问你,最少要安装多少 ...
- 异或前缀和,组合数学——cf1054D
/* 每个异或前缀和sum[i]只有两个值 区间异或和不为0,即两个不相等的前缀和 sum[i]的两个前缀和只要标记一个就可以了,为了去重只用map保存最小的那个来计数 最后统计相同的前缀和时,为了使 ...
- 小程序关闭时暂停webview里的音乐
document.addEventListener("visibilitychange", () => { if(document.hidden) { // 页面被 ...
- React项目开发经验汇总
博客来源 小寒的博客 定义好全局配置信息 环境变量不要提取出来,配置信息提取出来 UI样式变量 定义好变量的作用不用多说 样式库建设 工具样式,复用性强的样式,这些class成为会是真个网站样式的 ...
- VS2010-MFC(利用MFC向导生成单文档应用程序框架)
一.VC++与MFC 讲VC++免不了要提MFC,MFC全称Microsoft Foundation Classes,也就是微软基础类库.它是VC++的核心,是C++与Windows API的结合,很 ...
- 安装hadoop伪分布式
修改hosts cat /etc/hosts 127.0.0.1 mo.don.com 创建用户 useradd hadoop passwd hadoop sudo授权 visudo hadoop A ...
- Thrift(PHP)入门无错篇章(一)
一.安装篇 博主注:截至2017-10-10,官网上thrift最新版0.10.0一直无法成功编译.所以,请选择0.9.3版本,避免走各种弯路: wget http://apache.fayea.co ...
- 元素显示v-show
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- 《DSP using MATLAB》Problem 8.1
代码: %% ------------------------------------------------------------------------ %% Output Info about ...