css入门1 css简介

最新推荐文章于 2024-07-21 20:52:32 发布

Lexi_Alexander

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量125

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/Lexi_Alexander/article/details/108759353

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css简介

1.1css引入方式

想要在网页中引入css，共有三种方法

外部样式表
内部样式表
行内样式表

外部样式表

外部样式表是css最理想的引入方式。在实际开发中，我为了提升网站的性能速度和可维护性，一般都会使用外部样式表。
语法

<link rel="stylesheet" type="text/css" href="文件路径" />

说明
rel属性的取值是固定的，既“stylesheet”，表示引入的是一个样式表文件，既css文件
type属性的取值也是固定的，既“text/css”，表示这是标准的css
href属性表示css的路径。
如果要使用外部样式表，必须使用link标签来引用，而link标签是放在head标签中的

内部样式表

内部样式表是指把HTML代码和css代码放在同一个html文件中，其中css放在style标签内，style标签是放在head标签内部的
语法：

<style type="text/css">
	....
</style>

说明
type="text/css"是必须添加的，表示这是标准的css
css样式必须放在style标签内定义，而style放在head标签内
举例

<!!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			div{color:red;}
			p{color: aqua;}
		</style>
	</head>
	<body>
		<div>hello css</div>
		<div>hello css</div>
		<p>hello css</p>
	</body>
</html>

效果：
在这里插入图片描述

行内样式表

举例：

<!!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8" />
		</style>
	</head>
	<body>
		<div style="color: red;">hello css</div>
		<div style="color: blueviolet;">hello css</div>
		<div style="color: brown;">hello css</div>
	</body>
</html>

样式：
在这里插入图片描述

Lexi_Alexander

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css入门1 css简介

css简介1.1css引入方式想要在网页中引入css，共有三种方法外部样式表内部样式表行内样式表外部样式表外部样式表是css最理想的引入方式。在实际开发中，我为了提升网站的性能速度和可维护性，一般都会使用外部样式表。语法<link rel="stylesheet" type="text/css" href="文件路径" />说明rel属性的取值是固定的，既“stylesheet”，表示引入的是一个样式表文件，既css文件type属性的取值也是固定的，既“text/c
复制链接

扫一扫

专栏目录