学习导航:
1.认识 CSS
2.传统 HTML 设计网页版面的缺点
3.CSS 的特点
4.CSS 的排版样式
1、认识CSS
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
2、传统 HTML 设计网页版面的缺点
使
用传统 HTML 控制标记来设计网页, 在先天上就无法与排版样本来做比较,因为 HTML并非完全着眼在网页排版的功能上, 而这对 XHTML
而言更是如此,因为 XHTML 有意将原先HTML 中有关网页版面的标记或属性遗弃不用,
如<font>,<center>,color,background,bgcolor 等等, 所以对 XHTML
文件而言, 其排版与显示的功能比 HTML 文件更弱, 所以使用 XHTML 来设计网页更需要搭配 CSS 排版样本.
3、CSS的特点
HTML 排版时的缺点:
设置麻烦, 修改麻烦, 功能严重不足.
CSS 样式排版的优点:
排版属性功能完整, 排版文件可以独立存在, 可以共用排版文件
CSS 样式排版的分类:
内行排版样式,, 内嵌式排版样式,, 链接式排版
4、CSS 的排版样式
4.1、行内排版样式:
格式:< 标记名称 style= ”属性 1:属性值 1;属性 2:属性值 2”>…</标记名称>
例 :<p style= ”font-size:20pt;color:red;text-align:center ”>排版样式</p>
4.2、内嵌式排版样本:
内嵌式排版中所有的样式定义都必须在 <style>..</style> 之间, 而<style>..</style> 又
必须在<head>..</head>之间.
与其功能, 又可以分为三种,
1. 标记定义型
2. class 定义型
3. id 定义型
4.2.1、标记定义型格式:
<head>
<style type=”text/css ”>
标记名称{属性 1:属性值 1;属性 2:属性值 2;}
标记名称{属性 1:属性值 2;属性 2:属性值 2;}
</style>
</head>
<body>
<标记名称>…</标记名称>
</body>
4.2.2、class 定义型格式:
<head>
<style type=”text/css ”>
. 定义名称{ 属性 1:属性值 1;属性 2: 属性值 2;}
. 定义名称 1,.定义名称 2{ 属性 1:属性值 1;属性 2: 属性值 2;}
</style>
</head>
<body>
<标记名称 class=”定义名称”>…</标记名称>
</body>
4.2.3、id 定义型格式:
<head>
<style>
#定义名称{属性 1:属性值 1;属性 2:属性值 2;}
#定义名称 1,#定义名称 2{ 属性 1:属性值 1;属性 2: 属性值 2;}
</style>
</head>
<body>
<标记名称 id= ”定义名称”>…</标记名称>
</body>
“行内”和” 内嵌式”排版定义的优先级:
CSS 规定, 范围越小,优先级越高.
由小到大排列:
1. 行内
2. class 和 id 定义型
3. 标记定义行
id 的优先级高于 class 级.
4.3、外部排版样式定义:
独立的样式排版:
标记名称{属性 1:属性值 1;属性 2:属性值 2;}
. 定义名称{ 属性 1:属性值 1;属性 2: 属性值 2;}
在<head>…</head>之间使用<link>
格式:
<head>
<link rel= ”stylesheet ” type=”text/css ” href=URL />
</head>
在<head>…</head>之间使用 import
格式：
<head>
<style type="text/css">
@import "style.css"
</style>
</head>
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="CSS入门基础"/> <meta name="description" content="CSS入门基础"/> <meta name="author" content="xiaobei QQ:2801616735"/> <title>CSS入门基础</title> <style> #p{color:blue;} .p{color:green;} p{color:red; border:1px red dashed;} </style> </head> <body> <ul> <li>1、行内排版样式</li> <li>2、内嵌式排版样本 <ul> <li>标记定义型格式</li> <li>class 定义型格式</li> <li>id 定义型格式</li> </ul> </li> </ul> <hr/> <h2>行内排版样式</h2> <p style="color:red; font-family:'Courier New', Courier, monospace; font-size:18px;">格式:<标记名称 style="属性1:属性值1;属性2:属性值2">…</标记名称></p> <hr/> <h2>内嵌式排版样本<br/> <style type=”text/css”><br/> 标记名称{属性1:属性值1;属性2:属性值2;}<br/> .定义名称{属性1:属性值1;属性2:属性值2;}<br/> #定义名称{属性1:属性值1;属性2:属性值2;}<br/> </style> </h2> <p>标记定义型格式.</p> <p class="p">class 定义型格式.<br/><标记名称 class=”定义名称”>…</标记名称></p> <p id="p">id 定义型格式.<br/><标记名称 id=”定义名称”>…</标记名称></p> </body> </html>