2.css的引入方式
网页中引用CSS样式
内联样式
行内样式表
外部样式表
..链接式
..导入式
内嵌方式
style
标签
<!doctype html>
<html>
<head>
<meta charset="utf8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签!</p>
</body>
</html>
行内样式
<!doctype html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">这是一个p标签!</p>
</body>
</html>
外联样式表-链接式
link
标签
index.css
p {
color: green;
}
注意:这里是另建一个css文件
然后在HTML文件中通过link标签引入:
<!doctype html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>这是一个p标签!</p>
</body>
</html>
外联样式表-@import url()方式 导入式
了解即可。
index.css
@import url(other.css)
注意:@import url()
必须写在文件最开始的位置。
链接式与导入式的区别
1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中,再进行编译显示
3、使用@import导入的css文件,客户端显示HTML结构,再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的
2.css的引入方式的更多相关文章
- CSS的引入方式
再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- CSS的引入方式和样式
CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...
- 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...
- Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器
CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...
- CSS的引入方式和复合选择器
CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...
- css样式引入方式,及常用设置标签样式
一. 三种样式引入方式 1. 内联式-直接写在div标签中,不推荐用 <div style="color:red;font-size:20px;font-family:'Micro ...
- CSS 从入门到放弃系列:CSS的引入方式
css的四种引入方式 内联方式(行间样式) <div style="width:100px;height: 100px; background-color: red"> ...
- 5.CSS的引入方式
CSS的三种样式表 按照CSS样式书写的位置(或者引入的方式),CSS的样式表可以分为三大类: 1.行内样式表(行内式) <div style="color:red: font-siz ...
随机推荐
- 【原】Coursera—Andrew Ng机器学习—编程作业 Programming Exercise 4—反向传播神经网络
课程笔记 Coursera—Andrew Ng机器学习—课程笔记 Lecture 9_Neural Networks learning 作业说明 Exercise 4,Week 5,实现反向传播 ba ...
- 添加 MyEclipse Persistence Tools 类库
1).右键点击你的项目,然后选择Properties.2).在 Java Build Path 页面, 在 Libraries 面板下选择 Add Library….3).选择 MyEclipse L ...
- DBArtist之Oracle入门第2步: 了解Oracle的Database Control
之前安装好数据库后,会有下面这个弹窗,然后根据Database Control URL地址进入瞧一瞧,看一看! 根据地址进入以后,是一个登录界面,用system账户登录,密码就是安装Oracle的时候 ...
- Redhat Cluster Suite原理介绍
RedHat Cluster Suite简称RHCS,是一个能够提供高可用性.高可靠性.负载均衡.存储共享且经济廉价的集群工具集合,基于RHCS可以搭建高可用性集群.负载均衡集群.存储集群和高性能 ...
- SpringBoot自定义拦截器实现
1.编写拦截器实现类,此类必须实现接口 HandlerInterceptor,然后重写里面需要的三个比较常用的方法,实现自己的业务逻辑代码 如:OneInterceptor package com ...
- fseek效率
http://www.zhihu.com/question/36675524?sort=created C++怎样读取文件才有最快的速度 获取文件大小,然后分配相应大小的内存,一次性读取文件到此内存 ...
- networkX用法整
无向图,有向图,加权图等例子代码 [http://www.cnblogs.com/kaituorensheng/p/5423131.html#_label1] 数据分析学习笔记(三)-NetworkX ...
- 通过input上传图片,判断不同浏览器及图片类型和大小的js代码
1.jsp页面代码 <form id="userPhoto" name="userPhoto" method="post" actio ...
- jar包打包成exe示例(基于maven项目)
jar包打包成exe示例(基于maven项目) 说明 针对基于maven的Java项目,通常会打包成jar, 如果要把jar文件包装成exe文件,仅需要在pom.xml配置文件中增加一个插件即可 这里 ...
- python基础借鉴
这是一个链接 这个是egon的链接 吴沛其的博客