四种方式可以引用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样式的四种类型及其权值： 1. 内联样式表（InLine style）：权值为1000，这是通过在HTML元素的`style`属性中定义的样式，如`;">`，具有最高的优先级。 2. 内部样式表（Internal style sheet）...
CSS样式是构建网页外观和布局的重要工具，其中背景和文本属性是样式表中最常用的属性之一。在给定的文档中，详细的介绍了如何使用CSS来设计网页中的背景和文本。 首先来看背景部分，CSS提供了多种方式来设置元素的...
CSS选择器用于指定要应用样式的元素，如`p {color: blue;}`会将所有段落文本颜色设置为蓝色。CSS还有层叠性，这意味着可以有多个样式规则，浏览器会根据优先级决定哪个规则生效。此外，CSS3引入了更多高级功能，如...
CSS选择符是CSS语法的核心部分，用于选取页面中的元素，以应用相应的样式规则。文章中提到的“属性及剩余的选择符”是指CSS中除了常见的类型、类和ID选择符之外的，根据元素的属性以及特定条件进行选择的其他选择符...
在CSS编程中，OOCSS（Object-Oriented CSS）和SMACSS（Scalable and Modular Architecture for CSS）是两种重要的设计模式，它们旨在提高CSS代码的可维护性和可扩展性。这两种模式都是为了优化CSS编写方式，降低对...
关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法，首先我们先看个例子： XML/HTML Code复制内容到剪贴板 <!DOCTYPE HTML> <html lang="en-US"> <head>...
虽然现在有现成的 UI 框架，但有时候写个小东西不想用那么庞大的 UI 框架,这篇文章介绍解决一些样式问题，最后将给出完整的重置样式表; 如果有遇到其它样式问题，评论区提建议，我将持续更新 样式问题解决 浏览器...
**“eric meyer谈css”这个主题涉及到的知识点广泛，包括但不限于以下几点：** 1. **CSS基础**： Eric Meyer经常强调的基础概念，如选择器、属性和值，这些都是编写CSS的基石。理解如何有效地使用类选择器、ID选择...
Eric Meyer，作为前端开发界的知名人物，对CSS的讲解和理解深入浅出，具有很高的参考价值。CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML或XML文档的样式的语言。它不仅可以静态地修饰网页，还可以...
### 浅谈HTML5标签与CSS3的常用样式 #### HTML5标签概述 HTML5作为超文本标记语言的最新标准，引入了许多新的标签和技术来增强Web页面的表现力和功能。这些新特性使得开发者能够创建更加丰富的用户体验，并且更加...
**层叠样式表CSS简介** 层叠样式表（Cascading Style Sheets，简称CSS）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS控制网页元素的布局，使其呈现出丰富的视觉效果。通过CSS...
"浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法" 本文将为大家详细介绍Vue-cli单文件组件引入less、sass、css样式的不同方法，并提供实践经验。 首先，在Vue-cli中已经内置配置好了sass和less的配置。...
可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我们就一起来分析一下。 原理解析 那么为什么会出现上面的现象呢？我们从浏览器的渲染过程来解析下。 不同的浏览器...
- 浅谈JS函数实现动态添加CSS样式表文件 - javascript 动态修改css样式方法汇总(四种方法) - 纯css+js写的一个简单的tab标签页带样式 - JavaScript改变HTML元素的样式改变CSS及元素属性 - JavaScript修改css样式...
在JavaScript中，修改CSS样式主要有三种方法：改变直接样式、改变className和改变cssText。每种方法都有其适用场景和注意事项。 1. 改变直接样式： 这是最直接的方法，通过访问DOM元素的`style`属性，然后指定具体...
因为在css中可能会有多个样式同时影响同一个元素的某个属性，层叠机制可以解决作者（写代码的人），用户（浏览页面的人）和用户代理（一般指浏览器）的样式冲突。 在层叠中每个样式规则都有一个权重值，当其中几条...
- **分离CSS和JavaScript**：JavaScript用于操作样式时，应通过添加或删除类，而不是直接修改样式。建议使用js-前缀标识JavaScript专有类。 4. **CSS盒模型** - 选择合适的盒模型（content-box或border-box），并...
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码： XML/HTML Code复制内容到剪贴板 p{color:red;} .first{color:green;} 三年级时，我还是一个胆小如鼠...