CSS样式表详解-优快云博客

本文链接：https://blog.youkuaiyun.com/corion460/article/details/7671991

css层叠样式表简介

小菜最近整理了一下有关于四种css的样式。

<html>
	<head>
		<title></title>
	</head>
	<body>
	
		<!--
			css（Cascading Style Sheets
层叠样式表）
			弥补了HTML中的样式不足，HTML的不足包括
				-》维护困难
				-》标记不足
				-》页面过胖
				-》定位困难
			css的作用：为网页设置外观，相当于华丽的外套
			1、css的集中设置方式
				有四种方式可以将样式表加入到HTML文档中，每种凡是都有自己的优点和缺点。
					a：内联样式表（inline style sheets）
					b：嵌入样式表（cmbedded style sheets）
					c：外部样式表（linked style sheets）
					d：输入样式表（imported stryle sheets）
					
		-->
		
		<!--
			a:内联样式：
				内联样式可以也称作为行内样式
				直接设置HTML正文标签的style 属性的方法称为内联样式表，在本章开始部分就是通过这种方式来帮助读者理解什么是样式表的。
				<p style="color:#FFFFFF;font-style:normal;">行内样式</p>
				分析总结：行内样式是最为简单的css使用方式，但由于需要为每一个标记设置style属性，后期维护成本依然很高，而且页面文件容易过大，因此不推荐使用
		-->
		
		
		<!--
			b:嵌入式演示表
			嵌入式样式表就是将css写在<head>与</head>之间，并且用<style>和</style>标记进行声明。
			<html>
				<head>
				<title>页面标题</title>
				<style type="text/css">
				p{
					color:#FFFFFF;
					text-decoration:underline;
					font-weight:normal;
					font-size:normal
				}
				</head>
				<body>
				<p>嵌入式样式表</p>
				</body>
			</html>
		-->
		
		<!--
			c：链接式样式表
			链接式CSS样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计都也可以很好的分工合作。而且对于同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中，使得网站整体风格统一协调，并且后期维护的工作量也大大减少
			
			示例如下：
			一、HTML文件如下：
			<html>
				<head>
				<title>页面标题</title>
				<link href="1.css" type="text/css" rel="stylesheet">
				</head>
				<body>
				<h1>链接式样式表h1</h1>
				<p>链接式样式表p</p>
				</body>
			</html>
			
			二、CSS文件如下：
				h1{
				　　color:#FFFFFF;
				}
				p{
				　　color:#FF00FF;
				　　text-decoration:underline;
				　　font-weight:bold;
				　　font-size:24px;
				}
			

			分析总结：链接式样式表的最大优势在于CSS代码与HTML代码完全分离，并且同一个CSS文件可以被不同的HTML所链接使用。因此在设计整个网站时，可以将所有页面都链接到同一个CSS文件，使用相同的样式风格。如果整个网站需要进行样式上的修改，就仅仅只需要修改这一个CSS文件即可。
		-->
		
		
		
		<!--
			d：输入样式表
				可以使用css的@import声明将一个外部样式表文件（css文件）输入到的css文件的一部分。也可以使用@import声明将一个css文件输入到网页文件的<style></style>标签中，被输入的css文件中的样式规则定义语句就成了<style></style>标签中的语句。
		-->
		
	</body>
	
</html>

表述可能有些不全～不足之处请补充～