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文件夹里,所以在引用时,不需要写上相对路径,也不能在网上下载 这是网上别人封装好了的包,下载好了 ...
随机推荐
- IDA逆向:数组的逆向
阅读<IDA Pro权威指南>第八章,整理的一些笔记,作为逆向的基础,可能有很多认识不足. //全局分配数组 *************************************** ...
- select into outfile
语法格式如下: SELECT [列名] FROM table [WHERE 语句] INTO OUTFILE '目标文件' [OPTION]; FIELDS TERMINATED ...
- solr数据分片相关
solr操作url 使用正常的core,使用命令生成coillection solr create_collection -c students2 -d ../server/solr/my/conf ...
- Luogu [P2814] 家谱
题目链接 这个题不难,但是有点小小坑. 首先并查集肯定能看出来. 然后字符串的话,一开始我想用 hash 来处理,但想了想,离散化不好搞,人也太多了,一不小心就hash重了,还是算了. 然后就想到了S ...
- Servlet 的生命周期 及 注意事项 总结
Servlet的生命周期 图解Servlet的生命周期 生命周期的各个阶段 实例化 :Servlet 容器创建 Servlet 的实例 初始化 :该容器调用init() 方法 请求处理 :如果请求Se ...
- SummerVocation_Learning--java的基本概念
基本数据类型:四类八种. 四类:整数型(默认int),浮点型(默认double),逻辑型(布尔型),文本型(字符型). 八种:int, byte, short, long; double, float ...
- 1042: [HAOI2008]硬币购物
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3209 Solved: 2001[Submit][Status][Discuss] Descript ...
- Linux系统故障分析与排查--日志分析
处理Linux系统出现的各种故障时,故障的症状是最先发现的,而导致这以故障的原因才是最终排除故障的关键.熟悉Linux系统的日志管理,了解常见故障的分析与解决办法,将有助于管理员快速定位故障点,“对症 ...
- Linux更改文件权限(二)
更改文件权限(二)============================== (参考于千锋教育教学笔记) 命令umask [root@aminglinux ~]# umask 0022 [root@ ...
- 如何使用koa实现socket.io官网的例子
socket.io官网中使用express实现了一个最简单的IM即时聊天,今天我们使用koa来实现一下 ### 框架准备 确保你本地已经安装好了nodejs和npm,使用koa要求node版本> ...