CSS的概念
Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
CSS的发展史
1996年CSS1.0 --> 1998年5月CSS2.0 --> 2004年CSS2.1 --> 2010年CSS3.0
CSS的优势
1.内容与表现分离
2.网页的表现统一,容易修改
3.丰富的样式,使得页面布局更加灵活
4.减少网页的代码量,增加网页的浏览速度,节省网络带宽
5.运用独立于页面的CSS,有利于网页被搜索引擎收录
CSS基本语法结构
语法
h1 (选择器){
font-size(属性):12px;(值)(声明)
color:#F00;(声明)
}
style标签
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
HTML中引入CSS样式
1.行内样式:使用style属性引入CSS样式
例:
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
2.内部样式表:CSS代码写在<head>的<style>标签中
<style>
h1{color: green; }
</style>
优点:方便在同页面中修改样式
缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底
3.外部样式表:①CSS代码保存在扩展名为.css的样式表中;
②HTML文件引用扩展名为.css的样式表,有两种方式:(Ø链接式)(Ø导入式)
链接外部样式表语法:
<head>
……
<link href(文件路径)="style.css" rel(使用外部样式表)="stylesheet" type(文件类型)="text/css" />
……
</head>
导入外部样式表语法:
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
链接式与导入式的区别
1.<link/>标签属于XHTML,@import是属于CSS2.1
2.使用<link/>链接的CSS