CSS样式表

最新推荐文章于 2024-07-15 12:00:00 发布

BlizCp

最新推荐文章于 2024-07-15 12:00:00 发布

阅读量205

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/BlizCp/article/details/110071167

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、CSS行内式又称内联式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS行内式</title>
</head>
<body>
	<!--
		行内式一般写在body标签中,无需选择器,其基本语法格式:
		<标记名 style="属性1：属性值1：属性2：属性值2.....">内容<、标记名>

		用途场景:行内式并没有做到结构与表现的分离,一般使用情况较少.
				通常只有在样式规则较少且只在该元素上使用一次,或者需要临时修改某个样式规则时才会去使用
	-->
	<p style="font-size: 14px;color: red">CSS以HTML为基础,提供了丰富的功能,如字体颜色背景控制以及整体排版</p>
	<p style="font-size: 16px;color: blue">通过更改CSS样式,可以轻松控制网页的表现样式</p>
</body>
</html>

2、CSS内嵌式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS内嵌式</title>
	<!--
		内嵌式一般写在head标签中,并且用style标记定义,其基本语法格式：
		<head>
		<style type="text/css">
		选择器{属性1：属性值1：属性2：属性值2.....}
		</style>
		</head>
		
		用途场景:内嵌式CSS样式只对其所在的HTML页面生效,因此,如果只是设计一个页面时,内嵌式是个不错的选择
				如果是一个网站，不建议使用这种方式,因为它不能充分发挥CSS代码的重用优势
	-->
	<style type="text/css">
		h2{text-align: center;color: red} /*定义标题记居中对齐*/
		p{font-family:"微软雅黑" font-size:16px;} /*定义段落标记样式*/
	</style>
</head>
<body>
	<h2>UI设计学院</h2>
	<p>传智博客UI设计学院一打造成会代码的全能设计师,领略前所未有的高薪体验。</p>
</body>
</html>

3、CSS链入式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS链入式</title>
	<!--
	链入式基本语法格式:
	<head>
	<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
	</head>

	链入式一般放于head标签中,在超链接href前面加"link",且必须指定<link />标记的三个属性,具体如下：
	1、href:定义所链接外部样式表文件的URL
	2、type：定义所链接文档的类型,在这里需要指定"text/css"表示链接的外部文件为CSS样式表
	3、rel：定义当前文档与被链接文档之间的关系,在这里需要指定为："stylesheet",表示被链接文档时一个样式表文件
	-->
	<link href="../HTML/网页设计与制作素材包/chapter03/flower shop/css/style03.css" type="text/css" rel="stylesheet"	/>
</head>

<body>
	<h2>清明</h2>
	<p>清明时节雨纷纷,路上行人欲断魂</p>
	<p>借问酒家何处有,牧童遥指杏花村</p>
</body>
</html>