上午代码网页设计层叠表.pptxVIP

CSS层叠样式表;

掌握CSS的基本概念

掌握CSS样式表

掌握CSS选择器

掌握文字属性

掌握段落属性

掌握背景属性

掌握列表属性;Css理解与选择器概念

各种样式属性的应用;css样式理解及应用

;下边案例使用到了文字、颜色、背景;背景应用;段落效果;列表效果;;CSS（cascadingstylesheet，层叠样式表)是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一。

;使网页代码更少，网页下载更快

实现了内容与样式的分离，使网站维护更快捷

使网页与浏览器的兼容性更好

;就是首先指定对什么“对象”进行设置，

最后给出该设置的“值”。

因此，概括来说，CSS就是由三个基本部分组成的

“对象”、“属性”和“值”。

; 每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和

属性值。每个声明之后用分号结束

在css的三个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）

;如何在HTML中使用css

1.行内样式

它是所有样式方法中最为直接的一种，它直接对HTML的标签使用style属性，然后将css代码直接写在其中

;如何在HTML中使用css

2.内部样式

内部样式就是将css写在head与/head之间，并且用style和/style标签进行声明。

;如何在HTML中使用css

3.外部样式

;如何在HTML中使用css

4.样式嵌套样式

a.cssb.cssc.css

如果希望在a.css中使用到b.cssc.css的选择器，

可以通过@import指令来完成

@importurl(“被引用的css文件”);

如果希望在html或者php文件中引用某个xxx.css也可以再style标签中

style

@importurl(“某个css文件”);

/style;选择器分类

标签选择器

style

H1{

color:red;

font-size:25px;

}

/style

;选择器分类

ID(identify)选择器

;选择器分类

类别选择器

;选择器分类

伪类选择器

:link定义超链接默认样式

:visited定义访问过的样式

:hover定义鼠标经过的样式

:active定义鼠标按下的样式

a:link{color:#ff0000;}/*默认样式，超链接文字为红色*/

a:visited{color:#00ff00;}/*访问过后，超链接文字为绿色*/

a:hover{color:#0000ff;}/*鼠标经过，超链接文字为蓝色*/

a:active{color:#ffff00;}/*鼠标按下时，超链接文字为黄色*/

;选择器分类

通用选择器

*{margin:0;padding:0;}

包含(派生)选择器

divp{background:red;}

分组选择器

div,span,h1{color:blue;}

;选择器优先级

行内样式id选择器类选择器标签选择器通用选择器;

如上效果图用到了文字属性和段落属性。

;文字修饰：text-decoration

none：表示不修饰，是默认值；

underline：表示对文字添加下划线；

overline：表示对文字添加上划线；

line-through：表示对文字添加删除线；

blink：表示文字闪烁效果。

;文本缩进：text-indent

像素值

Text-indent:10px;

文本行高：line-height

语法：line-height：行高值(像素)

;水平对齐text-align

left：左对齐；

right：右对齐

center：居中对齐；

;字号：font-size

语法：font-size：大小的取值(像素值)

文字颜色：color

语法：Color：颜色取值

color:#292378; //6个十六进制数获得颜色

color:#A64; //#AA6644的缩写

color:red; //颜色关键字定义颜色

color:rgb(100,159,170);//rgb定义颜色

CSS中文完全参考手册.chm----附录-----html颜色表

颜色名称全集

;文字加粗：font-weight

Normal：正常

Bold：加粗

文字倾斜：font-style

Normal：正常字体

Italic：以斜体显示字体；

Oblique：属于中间状态，以偏斜体显示。

Note

可以参考手册CSS中文完全参考手册.chm