四种方式可以引用CSS 达到页面控制效果
1.内联式引用
2.内部引用
3.外部引用{1>.链接式引用 2>.导入式引用
<head>
<style type="text/css">
<!-- /*作用：不支持CSS的浏览器会当作注释
支持CSS的浏览器会忽略注解读取CSS样式表*/
p{
font-size:24px;
color:#ff0000;
font-family:"黑体";
}
-->
</style>
</head>
例子：
1.内联式引用：<p style="font-size=16px;color=#0000ff;">内联式引用</p>
2.内部引用：
<head>
<style type="text/css">
.font1{
color:blue;
font-size:12px;
}
.font2{
color:red;
font-size:18px;
}
</style>
/*定义的是class所以font前要加'.'
任意标签都可以引用class 如h1标签引用时为 <h1 class="font1">...</h1>
*/
</head>
<body>
<p class="font1">内部引用示例</p>
<p class="font2">内部引用示例</p>
</body>
</head>
3.外部链接式引用：
使用.css作为文件拓展名,如以下.font*代码为styleTest.css,然后用HTML的Link对象在页面中引用它
好处：可以将所有页面都连接到同一个CSS文件从而形成整体的页面风格
.font1{
color:blue;
font-size:12px;
}
.font2{
color:red;
font-size:18px;
}
引用方法：<head><link rel="stylesheet" tyle="text/css" href="./style/styleTest.css" />
</head>
/*rel="stylesheet"
在<link>标签中，“rel=stylesheet”，rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用。一般这里是不需要改动的.
*/
4.外部导入式引用
用import方式导入的样式表，在HTML文件初始化的时候导入到页面中，作为文件的一部分
与链接式引用的区别：链接式引用只有在HTML标签需要样式时才被引用
好处：可以在一个HTML文件中导入多个样式表
例子：<head>
<style type="text/css">
@import url("./style/styleTest.css");
</style>
</head>
导入多个的例子：
css_red.css ， css_blue.css ， css_green.css
这样你就可以写一个主样式 stylemain.css 把三个样式表都装进去：
@import "css_red.css";
@import "css_blue.css";
@import "css_green.css";
调用的时候只调用 stylemain.css 就行了。
相关推荐
下面小编就为大家带来一篇浅谈CSS样式权值。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家带来一篇浅谈CSS样式之背景、文本。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法，首先我们先看个例子： XML/HTML Code复制内容到剪贴板 <!DOCTYPE HTML> <html lang="en-US"> <head>...
虽然现在有现成的 UI 框架，但有时候写个小东西不想用那么庞大的 UI 框架,这篇文章介绍解决一些样式问题，最后将给出完整的重置样式表; 如果有遇到其它样式问题，评论区提建议，我将持续更新 样式问题解决 浏览器...
浅谈CSS样式表和html文档的关系.
主要介绍了浅谈CSS中的百分比,在定义CSS样式的时候经常会用的 “%”这个长度单位，但是这个百分比到底是相对于谁的百分比呢
css和@import都是调用外部样式表的方法。 一、用法 （1）link: <link rel="stylesheet" type="text/css" href="css文件路径"/> （2）@import: ...<style type="text/css"&...（2）link引用CSS样式，是和页面加载
因为在css中可能会有多个样式同时影响同一个元素的某个属性，层叠机制可以解决作者（写代码的人），用户（浏览页面的人）和用户代理（一般指浏览器）的样式冲突。 在层叠中每个样式规则都有一个权重值，当其中几条...
网站规划与网页设计 课程实验--使用层叠样式表CSS（code+report）凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数
下面小编就为大家分享一篇浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码： XML/HTML Code复制内容到剪贴板 p{color:red;} .first{color:green;} 三年级时，我还是一个胆小如鼠...
一、局部改变样式 分为改变直接样式，改变className和改变cssText三种。需要注意的是： 注意大小写： javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法...
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定 html 标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于 p 标签，这个颜色设置不仅应用 p 标签，还应用...
下面小编就为大家带来一篇浅谈HTML（css基础样式）。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
优先级： 外部样式 < 内部样式表 < 内联样式表； 优先级，即：同名的选择器右边的会覆盖左边 1.内部样式表 CSS Code复制内容到剪贴板 <head> ... /*内部样式表，一般用于覆盖公用...css外部样式表指定编码的
伪类选择器：CSS中已经定义好的选择器,不能随便取名 :link 伪类将应用于未被访问过的链接，与:visited互斥。 :hover 伪类将应用于有鼠标指针悬停于其上的元素。 :active 伪类将应用于被激活的元素，如被点击的链接、...