CSS——＞CSS简介

最新推荐文章于 2023-03-11 18:29:18 发布

省级干饭王

最新推荐文章于 2023-03-11 18:29:18 发布

阅读量92

点赞数 1

分类专栏：笔记 css

本文链接：https://blog.csdn.net/qq_55016379/article/details/116667157

版权

笔记同时被 2 个专栏收录

94 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

CSS简介

“HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript控制的是网页的行为”

所以，虽然HTML中也有外观控制的标签，不过我们更习惯于通过CSS来控制网页的外观

CSS的引入方式

想过要在CSS中引入CSS一共有三种方式：

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

外部样式表

外部样式表是最理想的

是将CSS标签和HTMl标签放在不同的文件中，然后在HTML文件中使用link标签来引用CSS文件

当样式需要被应用到多个网页时，外部标签时最理想的选择。使用外部标签可以通过更改一个CSS文件来更改整个网页的外观

语法结构：

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

属性说明：

rel：即relative的缩写，其取值是固定的，即“stylesheet”，表示引入一个样式表文件

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

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<style type="text/css">
			div{color:red;}
		</style>
	</head>
	<body>
		<div>绿叶，给你初恋般的感觉</div>
		<div>绿叶，给你初恋般的感觉</div>
		<div>绿叶，给你初恋般的感觉</div>
	</body>
</html>

行内样式表

行内样式表的CSS是在“标签的style属性”中定义的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="color: red;">绿叶，给你初恋般的感觉</div>
		<div style="color: green;">绿叶，给你初恋般的感觉</div>
		<div style="color: violet;">绿叶，给你初恋般的感觉</div>
	</body>
</html>

绿叶，给你初恋般的感觉

省级干饭王

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——＞CSS简介

CSS简介CSS简介“HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript控制的是网页的行为”所以，虽然HTML中也有外观控制的标签，不过我们更习惯于通过CSS来控制网页的外观CSS的引入方式想过要在CSS中引入CSS一共有三种方式：外部样式表内部样式表行内样式表外部样式表外部样式表是最理想的是将CSS标签和HTMl标签放在不同的文件中，然后在HTML文件中使用link标签来引用CSS文件当样式需要被应用到多个网页时，外部标签时最理想的选择。使用外部标签可以
复制链接

扫一扫