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

本文链接：https://blog.youkuaiyun.com/weixin_45938584/article/details/107150979

CSS语法，引入方式

什么是CSS?

Cascading Style sheet (层叠样式表)的缩写
用来控制网页外观。（修改和美化HTML）
HTML 超文本标记语言从语义的角度描述页面结构
CSS 层叠样式表从审美的角度负责页面样式
JavaScript 从交互的角度描述页面行为

为什么要使用CSS？

使页面代码更少，网页下载更快
实现了内容与样式的分离，使网站维护更快捷
使网页与浏览器的兼容性更好

怎么设置CSS样式？

CSS的思想就是首先指定对什么“对象"进行设置，设置属性CSS。最后给出该设置的”值“。

	可以说CSS就是由三个基本部分组成的--”对象“，”属性“和”值“。”对象“很重要的，它制定了对哪些网页元素
和进行设置 ，因此，他有一个专门的名称———选择器(selector)。

语法

选择器{
	属性1：属性值；
	属性2：属性值；
}
注：属性包含在{}中
	属性和属性值之间用"："进行分割；
	当有多个属性时用";"进行分割

样式表分类

行内样式表

    在html标记内，使用style属性定义css样式。
如：<p style="属性：属性值">内容</p>
		该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。其中属性和值
的书写规范与css样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用。
		特点：行内式也是通过标记的属性来控制样式的，这样并没有做到结构分离与表现的分离，所以一般
很少用。只有在样式规则较少的时候或者只在该元素上使用一次的时候又或者临时修改样式的时候使用

内联样式表

	将CSS添加到<head>标记之间，并且用<style></style>标记声明的一种样式表
语法：<style type="text/scss">
	 	p{
			属性：属性值；
		}
	 </style>
特点：内联式CSS样式表，只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内联式是个不错的选择。
	 但如果在一个网站，不建议使用这个方式，因为它不能充分发挥CSS代码的重用优势。

链接样式表

	链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标记将外部样式表文件链接到HTML文档中。
语法：<link rel="stylesheet" type="text/css" href="css文件地址"/>
		href:指定了CSS样式表所在位
		rel：指定链接到样式表，其值为stylesheet，不可省略
		type：表示样式表类型为css样式表

导入样式表

	<head>
		<style type="text/css">
			@import url(css文件地址)
		</style>
	</head>
特点：基本不使用，因为页面会先加载html，然后再去加载css，这样就会造成页面样式的延迟。
注意：导入和链接式样式表优缺点比较
	导入式会在整个网页装载完后再装载css文件，因此这就导致了一个问题，如果网页比较大的话，则会出现先显示无样式的网页闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。
	使用链接式时与导入式不同的是它会以网页文件主体装载前，装载css文件，因此显示出来的网页从一开始就是带样式的效果的它不会像导入式那样先显示无样式的网页，然后再显示由样式的网页，这是链接式的优点。