700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > CSS3(Cascading Style Sheet) 层叠样式表

CSS3(Cascading Style Sheet) 层叠样式表

时间:2019-10-10 12:40:58

相关推荐

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。