CSS样式

来源：互联网发布：软件试用情况总结报告编辑：程序博客网时间：2024/04/29 13:05

CSS的三种类型

　　1、自定义CSS样式（类样式）：使你可以将样式属性设置为任何文本范围或文本块。如：

.self{color:#66ff00}

　　强调的一点是在样式名称前必须加“."，并且包含任何字母和数字的组合。

　　2、HTML标签样式：重定义标签的格式。创建或更改标签的CSS样式时，所有用标签设置了格式的文本都立即更新。如：

h1{font-family:Arial}

　　3、CSS链接样式：重定义链接有关的格式。有四种如下

　　　　A:link 设置正常状态下链接文字的样式
　　　　A:active 设置鼠标单击时的链接文字的外观
　　　　A:visited 设置访问过的链接外观
　　　　A:hover 设置鼠标放置链接文字上文字的效果

添加CSS样式表的三种方法

　　1、直接在标签内定义，主要是在body内实现。例如：<p style="color:blue;font-size:10pt">css实例</p>。不过呢，这种方法使用比较简单、显示直观，无法发挥样式表的优势，因此呢我们是不推荐使用的。

　　2、在head里实现的css样式。这种的css一般位于html文件的头部，即<head>与</head>标签内，而且必须放在<head>与</head>之间，并且以<style>开始，以</style>结束。例如如下代码：

<style Type="text/css"><!--  H1{font-size:x-large；color:red}  H2{font-size:large;color:blue}

  .spanstyle{font: 12pt verdana; font-weight:700; color:red;}--></style>

引用<span class="spanstyle">我是杨剑</span>

　　其中<style>与</style>直接是样式的内容，在{ }前面可以写样式的类型和名称。{ }中是样式的属性。这种方法是经常被使用的添加样式表的方法。

　　3、在文件外使用（也就是使用链接样式表），就是我们在网页中可以调用我们已经定义好的样式表来实现样式表的应用，它可以定义在html文件内部，也可以单独成为文件。这种方法最适合大型网站的css样式定义。下面这段语句必须放在<head>与</head>之间

<link rel＝"stylesheet" href="style.css" type="text/css">

style.css文件里直接写控制元素的标志如下：

body
{
   background-color:orange;
}
.spanstyle   
{ 
   font: 12pt verdana; 
   font-weight:700; 
   color:red;
}

这里需要说明的一点：如果不是自定义的CSS样式就不需要在标志里引用了。什么意思呢？用例子说明

比如你声明了

body
{
   background-color:orange;
}

哪么你就不用在<body>标志里再加上class="body"了,但是自定义的就需要，比如你声明了

.spanstyle   
{ 
   font: 12pt verdana; 
   font-weight:700; 
   color:red;
}

哪么你就需要在<span class="spanstyle">如果不是就应用不上这个自定义样式了，注意这里把点给去掉了