HTML样式CSS的三种写法

CSS是样式层叠表，有三种引入方式。下面，我们来看看HTML样式CSS的三种写法吧。

行内样式

CSS可以直接放到行内样式中引入即可，比如代码如下图：

<p style="color: bluebackground: red">

hello world！

</p>

嵌入式

还可以采用潜入方式引入CSS，就是把CSS写到<style>标签中，这种方式比较实用，如下图所示：

<style type="text/css">

h1 {color: red}

</style>

<h1>helloworld</h1>

外部样式表

还有一种叫做外部样式，也就是把CSS写在另外一张页面上，然后再引用到指定页面就可以了，这种也很常见。

@import url(main.css)

一般是这样的

body{

font:12color:Black

}

这样的是控制整个页面的标签的样式

.Content{

font:14pxcolor:Gray

}

前面加个.后面跟上样式名称的，就是控制引用这个样式的标签的样式

当然，里面的样式属性有很多，这个你得去了解学习一下！

样式文件放哪里不要紧，一般就放在跟目录，你在页面的时候这样引用一下就好了

比如

<link href="/Styles/Site.css" rel="stylesheet" type="text/css" />

就代表引用跟目录下Styles文件夹里面的Site.css这个样式文件

自学自强，不懂就问，但不能太依赖对方哦，有时自己解决问题才是真正学到东西的，^.^

不废话，css代码：

<style>

.Gavin_Design ,.gd div{margin:0 auto overflow:hidden height:auto background-color:transparent color:#333}

.gd{width:1000px}

.gd input ,.gd textarea{margin:0 padding:0 background:none border:none font-size:14px resize:none outline:0}

.gd .part{padding:15px 0}

.gd .textarea{height:90px border:1px solid #ddd -webkit-box-shadow:inset 0 3px 2px rgba(0,0,0,.05) -moz-box-shadow:inset 0 3px 2px rgba(0,0,0,.05) box-shadow:inset 0 3px 2px rgba(0,0,0,.05) background:#fff padding:10px}

.gd .textarea textarea{width:100% height:90px overflow:hidden overflow-y:auto}

.gd .bottom_contorl{margin-top:15px}

.gd .bottom_contorl .express{float:left height:32px line-height:32px padding-left:10px}

.gd .bottom_contorl .button{float:right width:320px height:32px text-align:center font-size:0}

.bottom_contorl .button input{height:32px width:150px margin-left:10px color:#fff cursor:pointer}

.bottom_contorl .button input.submit{background:#4779be}

.bottom_contorl .button input.submit:active{background:#3c6eb4}

.bottom_contorl .button input.cancel{background:#b5b5b5}

.bottom_contorl .button input.cancel:active{background:#a9a9a9}

.gd .part .init{width:100% border-collapse:collapse color:#333}

.gd .part td{border-bottom:1px solid #e5e5e5 height:60px padding:2% vertical-align:middle}

.gd .part .user{overflow:hidden white-space:nowrap text-overflow:ellipsis font-size:12px width:60px}

.gd .part .me{color:#666}

.gd .part .reply{color:#22627d}

.gd .part .comments{font-size:14px}

</style>

html结构代码（div+css）：

<div class="Gavin_Design gd">

 <div class="part">

  <div class="textarea">

   <textarea placeholder="你有什么好的建议请留言"></textarea>

  </div>

  <div class="bottom_contorl">

   <div class="express">表情</div>

   <div class="button">

    <input type="button" class="submit" value="提交">

    <input type="button" class="cancel" value="取消">

   </div>

  </div>

 </div>

 <div class="part">

  <table cellpadding="0" cellspacing="0" class="init">

   <tr>

    <td width="10%"><div class="user me">我</div></td>

    <td width="90%" class="comments">老师你好，周末快乐！</td>

   </tr>

   <tr>

    <td><div class="user reply">秋叶，很长的名字</div></td>

    <td class="comments">下午好，秋荷！</td>

   </tr>

   <tr>

    <td width="10%"><div class="user me">我</div></td>

    <td width="90%" class="comments">好长不想打字，好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字。</td>

   </tr>

   <tr>

    <td><div class="user reply">秋叶，很长的名字</div></td>

    <td class="comments"><b>亲爱的。。。好长不想打字，好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字</b></td>

   </tr>

  </table>

 </div>

</div>

希望能帮助到你^.^

---