css属性及用法
层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,
用来描述 HTML或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。
CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
网页三要素:
- HTML标签决定页面上元素的基本结构
- CSS 用于设置HTML元素的样式
- JavaScript 用于控制页面上的行为
1.css属性( property)
CSS 属性的基本用法为:
name : value ;
注意:
name
表示 CSS 属性(property)名称,不是 HTML 元素的属性(attribute)- 属性名称 和 属性值 之间 使用 冒号 隔开
- 每个样式描述结束后,建议以分号结束 ( 分号也是两个不同的样式之间的分隔符 )
比如:
width : 200px ;
某个属性取值中包含多层含义时,属性值的多个部分之间使用空格隔开,比如
border : 1px solid red ;
其中的 1px
表示边框粗细,solid
表示边框样式,red
表示边框颜色。
当存在多个属性时,多个属性之间使用冒号隔开:
<img src="1.jpg " style="zoom:0.5 ; float : left ; ">
2、四种用法
在 HTML 文档中使用 CSS 有四种不同的用法,这里分别予以简单介绍。
2.1、内联样式
直接通过元素的 style
属性来指定的样式被称作行内样式 (也有人称作内联样式 )。
比如:
<div style=" border : 1px solid blue ; width : 50% ; height : 100px ; " >
</div>
说的更直接些,就是在开始标签
中通过标签的 style
属性(attribute)来指定元素的样式。
必须注意,这里的 style
属性(attribute)是属于 当前元素 的 (即当前标签的)。
2.2、内部样式
所谓内部样式,就是在 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
元素的位置。
2.3、链接外部样式
通常在 HTML 文档的 head
区域通过 link
标签来链接外部样式文件:
<link rel="stylesheet" href="CSS文件名" type="text/css" charset="字符编码" >
其中:
rel
属性必须显式书写,且其属性值必须为stylesheet
,否则链接无效href
属性用于指定CSS样式文件名type
属性是可选的,用于指定被链接文件的 MIME 类型charset
属性也是可选的,用于指定被链接文件的字符编码
2.4、导入外部样式
在 head
区域除了通过 link
来链接外部样式文件外,还可以在 <style>
元素导入外部样式:
<style type="text/css">
@import url(CSS文件名);
</style>
注意:
@import
和url( )
中间至少有一个空格- 通过
url( )
来指定 CSS文件名