CSS简单的四种引入方式
CSS一共有四种引入方式
(1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{background-color:red;
color: black}
</style>
<!--这里是修饰所有的P标签里面的内容,这是引入方法的一种-->
<style>
div{background-color:chartreuse;
color: coral}
</style> </head>
<body> <p style="background-color: aquamarine;color: black">Jay</p>
<!--在css里面,要用分号区别各种属性,虽然这个P标签有css样式,但是文本的样式是就近原则,这是最简单的css引入方式--> <p>Bob</p> <div>spider
<p>我是个P</p>
</div>
<!--div里面的P标签在上面有div的样式而没有P标签样式时,按div标签的样式,否则按P标签的样式--> </body>
</html>
结果如图
(2)可以用导入方法
先创建一个stylesheet文件,也就是css文件,在里面编辑好css样式,这里如图
然后代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "css3.css";
</style>
<p>你好,我是导入的css</p>
</head>
<body> </body>
</html>
这样关于P标签的样式就导入进去了
(4)通过link方式导入样式
这种方法跟import的就会一模一样,但是@import有数量限制,且是先等网页加载完再引入样式,如果网页足够大,则可能出现闪烁,就是漫长的无样式网页加载之后,css突然出来
而link不会出现这样的情况,他是网页主题装载前就先装载CSS的
link方式如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css3.css" type="text/css" rel="stylesheet">
<!--type声明引入的文本是css,stylesheet声明引入的是css代码块-->
<p>你好,我是导入的css</p>
</head>
<body> </body>
</html>
效果和第三种方式一样
CSS简单的四种引入方式的更多相关文章
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- 《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解 一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
- CSS的四种引入方式
1.使用link标签引入css文件: <head> <link rel="stylesheet" type="text/css" href=& ...
- 页面中CSS的四种引入方式的介绍与比较
转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...
- CSS文件的三种引入方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...
- CSS 文件的4种引入方式
(1)链接式 : 在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css (用得比较多) : < ...
- CSS布局的四种定位方式
1.static(静态定位): 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).参考上篇随笔. 2.relative(相对 ...
- CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...
- require 4种引入方式的区别
以下四种引入方式的区别: 自己创建的包里面封装了一些方法,只是把aa文件夹放在了node_modules文件夹里,所以在引用时,不需要写上相对路径,也不能在网上下载 这是网上别人封装好了的包,下载好了 ...
随机推荐
- pta 编程题10 Root of AVL Tree
其它pta数据结构编程题请参见:pta 这道题考察平衡二叉查找树的插入. 为了保证二叉查找树的平衡,当一个结点的左右子树的高度差大于1时就要进行调整. 分为以下四种情况: 插入新节点后,以及旋转之后, ...
- leetcode——1
1. 题目 Two Sum Given an array of integers, find two numbers such that they add up to a specific targ ...
- IOS UIButton常用属性
//1.添加按钮 UIButton *nameView=[UIButton buttonWithType:UIButtonTypeCustom]; //nameView.backgroundColor ...
- PAT (Basic Level) Practise (中文)- 1001. 害死人不偿命的(3n+1)猜想 (15)
http://www.patest.cn/contests/pat-b-practise/1001 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那 ...
- git出现误修改如何撤销
场景1:当你改乱了工作区某个文件的内容,想直接丢弃工作区的修改时,用命令git checkout -- file. 场景2:当你不但改乱了工作区某个文件的内容,还添加到了暂存区时,想丢弃修改,分两步, ...
- SAP事件 Event Flow(转载)
1 报表过程事件 报表过程事件是在报表运行过程中由系统自动控制,按照一定次序被触发的事件,其目的是从数据库中选择数据并整理,准备进行列表输出.这些事件从报表程序启动开始就被系统顺序触发,现分述如下: ...
- 该网页无法正常运作 目前无法处理此请求HTTP ERROR 500?
由于php.ini配置文件中错误显示关闭导致. 将下值由Off 变更为 On display_errors = On display_startup_errors = On
- (原创)task和function语法的使用讨论(Verilog,CPLD/FPGA)
1. Abstract function和task语句的功能有很多的相似之处,在需要有多个相同的电路生成时,可以考虑使用它们来实现.因为个人使用它们比较少,所以对它们没有进行更深的了解,现在时间比较充 ...
- 在VIM 里面编辑和保存
#查看a.sh 的内容 cat a.sh #编辑a.sh的内容 键入i,下面会出现 insert,输入内容之后按下esc会退出编辑模式(此时下面的insert没有了) 再输入:wq保存
- 百度之星初赛A 今夕何夕
今夕何夕 今天是2017年8月6日,农历闰六月十五. 小度独自凭栏,望着一轮圆月,发出了"今夕何夕,见此良人"的寂寞感慨. 为了排遣郁结,它决定思考一个数学问题:接下来最近的哪一年 ...