CSS引入

最新推荐文章于 2024-04-24 10:07:36 发布

agonililhy

最新推荐文章于 2024-04-24 10:07:36 发布

阅读量347

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/agonililhy/article/details/124646796

版权

css基本语法

<!DOCTYPE html> 
<html>
	<head>
		<style>
			p {
				font-size: 20px;
				}
			@media print {
				font-size: 60px;
				} 
  		</style>
   </head>
   <body>
   		<p>阿宇</p>
   </body>
</html>

引入方式一

通过link标签引用

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="UTF-8" >
			<title>CSS</title>
			<link rel="stylesheet" href="index.css">
   </head>
   <body>
   		<p>阿宇</p>
   </body>
</html>

引入方式二

通过CSS语法@import引入
- 放在style标签或者css文件中
- @import必须放在CSS文件开头
- 语法后面的分号必不可少

<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>

引入方式三

内部样式
- 将CSS放在页面的style标签中
- style标签可以放在head中，也可以放在body内任何地方

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>CSS</title>
	<style>
		h1 { background: orange; }
	</style>
	</head>
<body>
	<h1>Hello CSS!</h1>
</body>
</html>

引入方式四

内联样式
- 不推荐，但在某些情况下也是有用的

<p style="background: orange; font-size: 24px;">
	CSS
<p>

link方式和@import引入CSS有什么区别？

1.link是HTML的标签，在页面上代表一个元素，可以被JS选中修改；@import是CSS的语法，JS无法操控
2.两个link标签，文件会并行加载。一个link的CSS里包含一个@import，文件串行加载会更慢。因此不推荐用@import

agonililhy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫