CSS是Cascading 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>