CSS简单整理

CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

样式分为行内样式、内嵌样式、外部样式
样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类。

<DIV>和<SPAN>都是容器标签，<DIV>是块级标签，可包含段落、标题等，<SPAN>是行级标签，不能包含段落、标题等，只能包含部分文字

=============================================================
=============================================================

样式的分类

根据样式代码的位置，分为三类：
行内样式\内嵌样式\外部样式

=============================================================
1.行内样式
/*--关键代码--*/

新旧程度：全新 <BR>

所在地：北京 <BR>

宝贝数量：5 件 <BR>

浏览量：220 次</p>

另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以

</p>

=============================================================
2.内嵌样式
/*--关键代码--*/

<HTML>

<HEAD>

{

font-size:20px;

color:blue;

text-align:center

}

</STYLE>

</HEAD>

<BODY>

<P>我们的样式绝对统一</P>

</BODY>

</HTML>

根据选择器的不同，内嵌样式又分为：
HTML 选择器\CLASS 类选择器\ID 选择器

--------------------------------------------
HTML 选择器
/*--关键代码--*/

<HEAD>

{ /*设置样式：字体和背景色*/

font-family: System;

font-size: 18px;

color: #3333CC;

}

{

background-color: #CCFF33;

text-align: center;

}

</STYLE>

</HEAD>

<BODY>

<H2>品种特征方面：</H2> //应用H2的样式

<P>　　 1、蛋鱼：蛋鱼…….。</P> //应用P的样式

</BODY>

--------------------------------------------
CLASS 类选择器

定义格式为：
.类名
{
…样式规则;
}
应用类选择器：class＝"类名"
/*--关键代码--*/

<HEAD>

.myinput

{

border: 1px solid;

border-color:#D4BFFF;

color:#2A00FF

}

</STYLE>

</HEAD>

<BODY>

<FORM >

<P>用户名

<P>密  码

</P>

<P>

</P>

--------------------------------------------
ID选择器

定义格式为：
＃ID名
{
…样式规则;
}
应用ID选择器：ID＝"ID名"

/*--关键代码--*/

<HEAD>

#fire

{

color:red;

font-size: 24px;

}

</STYLE>

</HEAD>

<BODY>

<H2 ID="fire">我是二级标题，火是这样的</H2>

<P ID ="fire">我是段落，火是这样的</P>

</BODY>

--------------------------------------------
*********特殊的选择器*********

<HEAD>

{ /*设置超链接不带下划线*/

color: blue;

text-decoration: none; /*文本修饰：无*/

}

A:hover

{/*鼠标在超链接上方停留时，带下划线 */

color: red;

text-decoration:underline; /*文本修饰：下划线*/

}

</STYLE>

<HEAD>

<BODY>

<A href=“a.htm" >俺是超链接，移过来我就显示下划线</A>

</BODY>

</HTML>

=============================================================
3.外部样式

根据样式文件与网页的关联方式又分为：
链接（LINK ）外部样式表\导入（import）外部样式表
--------------------------------------------
链接（LINK ）外部样式表
使用LINK（链接）标签，语法：

<HEAD>

</HEAD>

--------------------------------------------
导入（import）外部样式表
使用@import导入，语法：

<HEAD>

@import 样式表文件.css;

</STYLE>

</HEAD>

=============================================================
行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：
·有关整个网站统一风格的样式代码，放置在独立的样式文件*.css
·某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式
·某张网页内，部分内容”与众不同“，采用行内样式

对于某个HTML标签：
1.如果有多种样式，如果规定的样式没有冲突，则叠加；
2.如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；

=============================================================
=============================================================
<DIV> 层标签

/*--关键代码--*/

<P>Z-index=1，我是第一层，我是容器，包含图片段落</P>

</DIV>

<P>Z-index=2，我是第二层，包含图片和段落 </P>

</DIV>…

使用 Z-index 指定是哪一层
<DIV>是块级容器标签，可以包含图片、标题、段落、文字等

--------------------------------------------
<SPAN> 标签

/*--关键代码--*/

<HTML>

<BODY>

<H2>

所有韩款童装<SPAN style="color:#FF66FF; font-size:50px;">10</SPAN>元/件起拍喽

</H2>

</BODY>

</HTML>

<SPAN>是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容

posted on 2007-02-02 16:28 Taisin 阅读(713) 评论(1) 收藏举报

刷新页面返回顶部

CSS简单整理

导航

公告