码迷,mamicode.com
首页 > Web开发 > 详细

css常用标签及属性

时间:2016-05-21 19:00:43      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:

css样式表常用的形式有三种,一、行内样式表。二、内部样式表。三、外部样式表

一、
<p style="color:red;">nice to meet you</p>

二、
在head中写入
<style type="text/css">
 p{
   color:red;
}
 .myclass{
 color:blue;
 font-size:2em;
 }
 #idname{
 color:red;
 }
</style>

三、外部样式表
在head中或者body最下面写入
<link rel="stylesheet" type="text/css" href="css/mycss.css"/>

 

css样式表的设置,设置方式如下。

<style type="text/css">
 选择器{
      属性:值;
   }

</style>

常见的选择器有

  1. 标签:直接使用标签即可。例如:p{color:red;}
  2. 类:.classname{}例如:.myclass{color:red;}
  3. ID:#IDname{}例如:#myid{color:red;}
  4. 组合选择器:p,li{}

css中盒子模型解释图如下:

技术分享

应用盒子模型来展示一张图片

html
<div id="divimg">
   <img src="../img/beautifulgirl/7.jpg" width="300px" height="300px"/>
  </div>


css
#divimg{
 border:10px solid;
 border-color:#be0599;
 padding-top:10px;
 padding-left:30px;
 padding-bottom:10px;
 background:#eb61c5;
 width:330px;
 margin-top:20px;
 margin-left:20px;

}

展示效果如下:

技术分享

 

css常用标签及属性

标签:

原文地址:http://www.cnblogs.com/zhaopengcheng/p/5515155.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!