CSS的三种使用方式
一、行间样式表
行间样式表是指将CSS样式编码写在HTML标签中,格式如下
<h1 style="font-size:12px;color:#000FFF">
我的CSS样式。
</h1>
行间样式表由HTML元素的HTML元素的style支持,只需将CSS代码用分号隔开写在style=""之中。这是最基本的形式,但是它没有实现表现与内容分离且不能灵活的控制多个页面所以我们只是在调试CSS代码的时候使用。
二、内部样式表
内部样式表与行间样式表相似都是把CSS代码写在HTML页面中,稍微不同的是前者可以将样式表放在一个固定的位置,格式如下
<html>
<head>
<title>内部样式表</title>
<style type="text/css">
h1{font-size:12px;
color:#000FFF
}
</style>
</head>
<body>
<h1>我的CSS样式。</h1>
</body>
</html>
内部样式表编码是初级的应用形式,不能达到跨页面使用所以不适合使用。
三、外部样式表
外部样式表是CSS应用中最好的一中形式,它将CSS样式代码单独放在一个外部文件中,再由网页进行调用。多个网页可以调用一个样式文件表,这样能够实现代码的最大限度的重用及网站文件的最优化配置,格式如下
<html>
<head>
<title>外部样式表</title>
<link rel="stylesheet" rev="stylesheet" href="style.css">
</head>
<body>
<h1>我的CSS样式。</h1>
</body>
</html>
在style.css中的代码为
h1{font-size:12px;
color:#000FFF
}
我们在<head>中使用了<link>标签来调用外部样式表文件。将link指定为stylesheet方式,并使用了href="style.css"指明样式表文件的路径便可将该页面应用到在style.css中定义的样式。
CSS的三种使用方式相关推荐
- 外部导入方式添加背景图_web前端基础:CSS的三种导入方式说明
随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能.但是随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿.于是css便诞生了. Web前端基础教程,Web ...
- CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作 ...
- CSS的三种引入方式:外部样式、内部样式和行内样式
CSS的三种引入方式:外部样式.内部样式和行内样式 外部样式 链接式:link标签 导入式:@import 链接式与导入式的区别 内部样式 行内样式 样式优先级 外部样式 即CSS代码保存在外部,HT ...
- CSS的三种引入方式与JS的三种引入方式
CSS的三种引入方式 前端三剑客分为html,css,js, html作为骨架,楼体是观看者看到的第一元素,而css和js是美化并增加功能的肉体羽毛或者楼体工装,肉体羽毛需要安装到骨架上,才能使整体完 ...
- CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...
- css样式 三种引入方式 选择器 常用属性:背景属性 字体属性 边框属性 内间距 外间距 盒子模型
一.CSS简介 1.什么是css 重叠样式表 主要是负责标签的样式 美化页面 一个网页分三大部分 结构层: 主要由html负责 负责页面的结构 表现层: 主要由css负责 页面的展示样式 美化页面 行 ...
- Html CSS的三种链接方式
感谢原文:https://blog.csdn.net/abc5382334/article/details/24260817 感谢原文:https://blog.csdn.net/jiaqingge/ ...
- 简述css样式的三种引入html的方式,css-1,css的三种引入方式 基本选择器
css三种引入方式 和四种基本选择器 /*内接样式*/ /*1 选择器 选中的是 '共性'*/span{color:green;font-size:30px; } /*组合选择器*/ul,ol{lis ...
- css的三种引入方式
css三中引入方式: 行间样式>内部样式=外部样式(内部样式和外部样式优先级相同,文档后面的会覆盖前面的) <!DOCTYPE html> <html> <head ...
- CSS的三种链接方式(内联式、嵌入式、外部式)
内联式CSS样式 其实就是用html中style属性 <p style="color:blue">示例</p> 嵌入式CSS样式 嵌入式css样式,就是可以 ...
最新文章
- php static method,php 类方法用static::hello(); 等同于 $this-hello();吗?
- oracle之基本的过滤和排序数据
- 【连载】Django入门到实战(一)
- DLM - stackglue 层
- GIVE root password for maintenance
- QA:阿里云K8s启动容器后无法访问网络
- 原理图端口符号_接线图和原理图有什么区别,以电气的原理图和接线图来做详细解析...
- chrome浏览器js 导出excel
- ios 合并图片显示
- 电脑插上u盘计算机管理有显示,u盘在电脑上一直显示扫描怎么办
- 从零开始成为网络工程师,H3CNE从零学起
- 我靠!Semaphore里面居然有这么一个大坑!
- Is it Google Hacking? It's Google Dorking
- 想深入学习计算机需要看哪些经典书籍?
- 国内运营商的Sim卡在日版iPhone上的使用方法(卡贴安装方法)
- Android开发 个人开发者几大后端云比较
- 小鸟云服务器上线了新的操作系统
- 怎么压缩gif图大小?gif格式怎么压缩大小?
- (七)继续对话库检索的闲聊系统
- perl中grep用法总结
热门文章
- 【Java 泛型】泛型简介 ( 泛型类 | 泛型方法 | 静态方法的泛型 | 泛型类与泛型方法完整示例 )
- 【错误记录】Flutter 报错 ( Could not resolve io.flutter:flutter_embedding_debug:1.0.0. )
- 【OpenGL】十、OpenGL 绘制点 ( 初始化 OpenGL 矩阵 | 设置投影矩阵 | 设置模型视图矩阵 | 绘制点 | 清除缓冲区 | 设置当前颜色值 | 设置点大小 | 绘制点 )
- 【Android 电量优化】JobScheduler 相关源码分析 ( ConnectivityController 底层源码分析 | 构造函数 | 追踪任务更新 | 注册接收者监听连接变化 )
- 【数据挖掘】数据挖掘简介 ( 数据挖掘引入 | KDD 流程 | 数据源要求 | 技术特点 )
- 2017-2018-1 《信息安全系统设计基础》课下测试错题汇总
- setTimeout() setInterval()
- 【一个实体对象不能由多个 IEntityChangeTracker 实例引用】原因及解决方法
- 一种比较兼容的Excel报表导出方法
- C++ string类中的find()函数的简单使用