标签属性

实例

设置 p 元素的左内边距：

p
  {
  padding-left:2cm;
  }

亲自试一试

（在页面底部可以找到更多实例）

定义和用法

padding-left 属性设置元素左内边距（空白）。

说明

该属性设置元素左内边距的宽度。行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现.

注释：不允许使用负值。

默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.paddingLeft="10px"
 

<html>
<head>
<style type="text/css">
td {padding-left: 2cm}
</style>
</head>

<body>
<table border="1">
<tr>
<td>
这个表格单元拥有左内边距。
</td>
</tr>
</table>
</body>

</html>

　　

实例

设置 p 元素的右内边距：

p
  {
  padding-right:2cm;
  }

亲自试一试

（在页面底部可以找到更多实例）

定义和用法

padding-right 属性设置元素右内边距（空白）。

注释：不允许使用负值。

说明

该属性设置元素右内边距的宽度。行内非替换元素上设置的右内边距仅在元素所生成的第一个行内框的右边出现.

默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.paddingRight="10px"

 

<html>
<head>
<style type="text/css">
td {padding-right: 5cm}
</style>
</head>

<body>
<table border="1">
<tr>
<td>
这个表格单元拥有右内边距。
</td>
</tr>
</table>
</body>

</html>

　　

实例

设置 p 元素的上内边距：

p
  {
  padding-top:2cm;
  }

亲自试一试

（在页面底部可以找到更多实例）

定义和用法

padding-top 属性设置元素的上内边距（空间）。

说明

该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。

注释：不允许使用负值。

默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.paddingTop="10px"

 

<html>
<head>
<style type="text/css">
td {padding-top: 2cm}
</style>
</head>

<body>
<table border="1">
<tr>
<td>
这个表格单元拥有上内边距。
</td>
</tr>
</table>
</body>

</html>

　　

实例

设置 p 元素的上外边距：

p
  {
  margin-top:2cm;
  }

亲自试一试

（在页面底部可以找到更多实例）

定义和用法

margin-top 属性设置元素的上外边距。

注释：允许使用负值。

默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.marginTop="10px"

 

<html>
<head>
<style type="text/css">
p.topmargin {margin-top: 5cm}
</style>
</head>

<body>
<p>这个段落没有指定外边距。</p>
<p class="topmargin">这个段落带有指定的上外边距。</p>
</body>
</html>

　　

实例

设置段落的高度和宽度：

p
  {
  height:100px;
  width:100px;
  }

亲自试一试

定义和用法

height 属性设置元素的高度。

说明

这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。

行内非替换元素会忽略这个属性。

默认值： auto
继承性： no
版本： CSS1
JavaScript 语法： object.style.height="50px"

 

<html>
<head>
<style type="text/css">
img.normal 
{
height: auto
}

img.big 
{
height: 160px
}

img.small 
{
height: 30px
}
</style>
</head>
<body>

<img class="normal" src="/i/eg_smile.gif" />
<br />
<img class="big" src="/i/eg_smile.gif" />
<br />
<img class="small" src="/i/eg_smile.gif" />

</body>
</html>

　　

实例

裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话：

div
{
overflow-y:hidden;
}

亲自试一试

定义和用法

overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。

提示：使用 overflow-x 属性来确定对左/右边缘的裁剪。

默认值： visible
继承性： no
版本： CSS3
JavaScript 语法： object.style.overflowY="scroll" 
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:110px;
height:110px;
border:thin solid black;
overflow-x:auto;
overflow-y:auto;
}
</style>
</head>
<body>

<div><p style="width:140px">
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</p></div>

<p>Overflow-x 是否对内容的左/右边缘进行裁剪。</p>
<p>Overflow-y 是否对内容的上/下边缘进行裁剪。</p>

</body>
</html>

　　

定义和用法

font-size 属性可设置字体的尺寸。

说明

该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

各关键字对应的字体必须比一个最小关键字相应字体要高，并且要小于下一个最大关键字对应的字体。

默认值： medium
继承性： yes
版本： CSS1
JavaScript 语法： object.style.fontSize="larger"

实例

设置不同的 HTML 元素的尺寸：

h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%}

TIY

定义

text-indent 属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。

说明

用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。

默认值： not specified
继承性： yes
版本： CSS1
JavaScript 语法： object.style.textIndent="50px"

实例

将段落的第一行缩进 50 像素：

p
  {
  text-indent:50px;
  }

TIY

定义和用法

font-family 规定元素的字体系列。

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

有两种类型的字体系列名称：

  • 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
  • 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。

注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

默认值： not specified
继承性： yes
版本： CSS1
JavaScript 语法： object.style.fontFamily="arial,sans-serif"

实例

为段落设置字体：

p
  {
  font-family:"Times New Roman",Georgia,Serif;
  }

TIY

实例

定位 h2 元素：

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

亲自试一试

定义和用法

position 属性规定元素的定位类型。

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

默认值： static
继承性： no
版本： CSS2
JavaScript 语法： object.style.position="absolute"

 

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

</html>

　　

实例

防止链接打开 URL：

$("a").click(function(event){
  event.preventDefault();
});

亲自试一试

定义和用法

preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。

语法

event.preventDefault()
参数描述
event 必需。规定阻止哪个事件的默认动作。这个 event 参数来自事件绑定函数。

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
  });
});
</script>
</head>
<body>
<a href="http://w3school.com.cn/">W3School</a>
<p>preventDefault() 方法将防止上面的链接打开 URL。</p>
</body>
</html>

　　

posted @ 2019-12-18 09:17  Fmaj-7  阅读(155)  评论(0)    收藏  举报