css属性及用法

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>

注意:

  • @importurl( ) 中间至少有一个空格
  • 通过 url( ) 来指定 CSS文件名
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值