在html中怎样使用css样式

在html网页中引入引入css主要有以下四种方式：

（1）行内式

<p style=”color:red”>网页中css的导入方式</p>

（2）嵌入式

<style type=”text/css”>

P{ color:red }

</style>

嵌入式一般写在head中，对于单个页面来说，这种方式很方便。

（3）导入式

<!-- 导入外部样式：在内部样式表的<style></style>标记之间导入一个外部样式表，导入时用@import。 -->

<style type="text/css">

@import "jisuan.css"

</style>

（4）链接式

<link href="jisuan.css" rel=”stylesheet” type=”text/css” />

导入式和链接式差不多，都是从外部引入css文件。但是链接式对于客户端用户浏览网站时，效果会好些。

1，直接在html标签元素内嵌入css样式，如<div style="font-size:14pxcolor:#FF0000">

2，在html头部head部分内style声明插入代码如下：

<style type="text/css">

<!-- 这里是设置CSS的样式内容*/ -->

</style>

3,使用@import引用外部CSS文件方法

<style type="text/css">

<!-- @import url(wacss.css)/*这里是通过@import引用CSS的样式内容,必须要有wacss.css这个文件*/ -->

</style>

4、使用link来调用外部的css文件

在head放置<link rel="stylesheet" href="wacss.css" type="text/css" />来调用外部的wacss.css文件来实现html引用css文件

第三种很少用到，实际的开发中常用的是1跟4，具体用哪种看你自己的需要

1、直接使用行内样式，即在html标签上使用style

<div style="width:100pxheight:100pxbackground:red">div内容</div>

2、先定义css样式，再给html的class属性赋值

<style>

.content{

    width:100px

    height:100px

    background:red

}

</style>

<div class="content">

    div测试内容

</div>

总结：两种方式效果是一致的，只是第二种方式可进行重用，只要html元素class属性相同即可

---