css属性及用法

最新推荐文章于 2024-12-18 09:30:33 发布

原创最新推荐文章于 2024-12-18 09:30:33 发布 · 527 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #html

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，

用来描述 HTML或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。

CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

	网页三要素:
	
	- HTML标签决定页面上元素的基本结构
	- CSS 用于设置HTML元素的样式
	- JavaScript 用于控制页面上的行为

CSS 属性的基本用法为:

name : value ;

注意:

比如:

width : 200px ;

某个属性取值中包含多层含义时，属性值的多个部分之间使用空格隔开，比如

border : 1px  solid  red ;

其中的 1px 表示边框粗细，solid 表示边框样式，red 表示边框颜色。

当存在多个属性时，多个属性之间使用冒号隔开:

<img src="1.jpg " style="zoom:0.5 ; float : left ; ">

在 HTML 文档中使用 CSS 有四种不同的用法，这里分别予以简单介绍。

直接通过元素的 style 属性来指定的样式被称作行内样式 (也有人称作内联样式 )。

比如:

<div style=" border : 1px solid blue ; width : 50% ; height : 100px ; " >
</div>

说的更直接些，就是在开始标签中通过标签的 style 属性(attribute)来指定元素的样式。

必须注意，这里的 style 属性(attribute)是属于当前元素的 (即当前标签的)。

所谓内部样式，就是在 HTML 文档中，通过 style 元素来嵌入CSS样式。

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

这里需要特别注意，style 是一个 HTML 标签，属于HTML范畴，不属于CSS代码。

而在 <style> 和 </style> 之间书写的内容才属于 CSS 代码。

通常建议将 style 元素添加到 head 元素内部:

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

也可以根据实际情况来确定 style 元素的位置。

通常在 HTML 文档的 head 区域通过 link 标签来链接外部样式文件:

<link rel="stylesheet" href="CSS文件名" type="text/css" charset="字符编码" >

其中:

在 head 区域除了通过 link 来链接外部样式文件外，还可以在 <style> 元素导入外部样式:

<style type="text/css">
  
	@import url(CSS文件名);
  
</style>

注意: