CSS3(Cascading Style Sheet) 层叠样式表

CSSCascading Style Sheet 层叠样式表级联样式表,简称“样式表”。利用样式可以定义页面的样式,大大减少网页的设计工作量。也可以美化页面,精准定制页面的布局。
CSS3样式的优势:
       1.丰富的修饰样式
       2.内容与修饰分离,利于项目开发
       3.实现样式复用,提高开发效率
       4.实现页面的精确控制。

一、CSS基础

一个样式的基本语法由选择器、属性、属性值3部分组成层叠样式表通常用<style></style>来声明样式规则,即告诉浏览器如何正确的页面中的各类元素
语法:

<style type="text/css">
	选择器{
		属性1:属性值1;
		属性2:属性值2;
		......
	}
</style>

示例:

<style type="text/css">
	p{
		font-size: 100px;
	}
</style>

CSS样式的代码有以下规范:
       1.虽然css代码不区分大小写,但推荐全用小写。
       2.每条样式规则用分号“;”隔开,通常写为多行,简单的规则也可以合并为一行。
       3.当css代码较多时,可以使用“/*....*/”添加必要的注释,增加代码的可读性。

CSS样式根据书写位置不同,可以分为:外部样式、内嵌样式、行内样式3种:
1.外部样式
1.1 链接外部样式:
通过HTML的link标签,建立样式文件和网页的关联。样式文件的后缀名为 .css

<head>
 	<link rel="stylesheet" type="text/css" href="style.css"/>
 </head>

1.2 导入样式表:
在网页中可以通过@import的方式导入样式表

<head>
	<style type="text/css">
		@import "css/style.css";
	</style>
</head>

2.内嵌样式:
将样式表的内容直接放置于HTML5的<head></head>的区域内,通过<style></style>标签定义。在实际开发中建议使用外链样式。

语法:

<head>
	<style type="text/css">
		选择器{
			属性1:属性值1;
			属性2:属性值2;
			......
		}
	</style>
</head>	

示例:

<!--内嵌样式-->
<style type="text/css">
	p{
		font-size: 100px;
	}
</style>

3.行内样式:
是混合在HTML5标签中定义的,用这种方法可以直接对某个元素定义样式。行内样式在直接在H5的标签中加入style属性,其内容式CSS3的属性和属性值。
语法:
<标签名 style="样式属性:属性值;"></标签名>

示例:

 <p style="color: red;">天凉好个秋!</p>
  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云破丶日出

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值