当前位置: 首页 > article >正文

css引入方式

按照css样式书写的位置(或者引入的方式),css样式表可分为三大类:

1.行内样式表(行内式)

2.内部样式表(嵌入式)

3.外部样式表(链接式)

一.内部样式表

内部样式表是写到html页面内部,将所有的css代码放到<style>标签中

<style>

        div {

        color: red;

        font-size: 12px;

}

</style>

  • <style>标签理论可以放在html文档的任何地方,但一般会放在<head>标签中
  • 通过此种方式,可以控制当前整个页面中的元素样式设置 
  • 代码结构清晰,但并没有实现结构与样式完全分离,通常成为嵌入式引入,这种方式是我们练习时常用的方式

 二.行内样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定css样式。适合修改简单样式

<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div> 

 

 

  • style其实就是当前标签的属性
  • 在双引号中间,写法要符合css样式规范
  • 可以控制当前的标签设置样式 

 三.外部样式表

实际开发都是外部样式表,适合样式比较多的情况,核心是:样式单独写到css文件中,之后把css文件引入到HTML页面中使用。

步骤

  1. 新建一个后缀名为.css的样式文件,把所有css代码放入到此文件中。
  2. 在html页面中,使用<link>标签引入这个文件

<link rel="stylesheet" href="css文件路径"> 

属性作用
rel全称relationship(关系),定义当前文档与被链接文档的关系,此处需要指定为"stylesheet",表示被链接的文档是一个样式表文件
href定义链接外部样式文件的url

http://www.kler.cn/a/553776.html

相关文章:

  • CentOS查看IP地址
  • Maven——Maven开发经验总结(1)
  • [数据结构]二叉搜索树详解
  • C++ Primer 类的作用域
  • 探索低空,旅游景区无人机应用技术详解
  • ​ ​rust学习四、控制语句
  • Java流星雨
  • (蓝桥杯——10. 小郑做志愿者)洛斯里克城志愿者问题详解
  • 数据结构-----双向链表
  • 面试知识点2
  • React useState 和 useEffect 使用坑点注意总结
  • 【微信小程序】订阅消息
  • 【DeepSeek服务器部署全攻略】Linux服务器部署DeepSeek R1模型、实现API调用、搭建Web页面以及专属知识库
  • 【数据挖掘】ARFF格式与数据收集
  • 健康养生:从生活细节开启活力之旅
  • Windows 启动 SSH 服务
  • android社畜模拟器
  • 信息学奥赛c++语言:数组逆序重存放
  • JavaScript 前端面试 3(等于、全等、instanceof、typeof 、原型、原型链)
  • 当一个后端下载了一个VUE开源项目,怎么开始着手玩一下