CSS 属性

margin

  • 属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <style>
    p.ex1 {margin:2cm 4cm 3cm 4cm}
    </style>
    </head>
    
    <body>
    <p>一个没有指定边距大小的段落。</p>
    <p class="ex1">一个指定边距大小的段落。</p>
    <p>一个没有指定边距大小的段落。</p>
    </body>
    

    121

margin-top margin-bottom margin-left margin-right

  • 分别设置上下左右边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.ex1 {margin-bottom:2cm}
</style>
</head>

<body>

<p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个底边距为2厘米的段落。</p>
<p>一个没有指定边距大小的段落。</p>

</body>
</html>

122

position

  • position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。
<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

123

padding padding-bottom padding-left padding-right padding-top

  • 填充属性
<style>
p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}
</style>
</head>

<body>
<p class="ex1">这个文本两边的填充边距一样。每边的填充边距为2厘米。</p>
<p class="ex2">这个文本的顶部和底部填充边距都为0.5厘米,左右的填充边距为3厘米。</p>
</body>

124

font-family

  • 指定一个元素的字体。
<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>

<body>
<h1>CSS font-family</h1>
<p class="serif">这一段的字体是 Times New Roman </p>
<p class="sansserif">这一段的字体是 Arial.</p>

125

background

  • 设置背景
<style>
body
{ 
background: #00ff00 url('smiley.gif') no-repeat fixed center; 
}
</style>
</head>

<body>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</body>

126

display

display 属性规定元素应该生成的框的类型。

text-decoration

规定添加到文本的修饰,下划线、上划线、删除线等。

<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>

127

color

<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>

128

outline

设置元素周围的轮廓

<style>
p 
{
	border:1px solid red;
	outline:green dotted thick;
}
</style>
</head>

<body>
<p><b>注意:</b> 如果只有一个 !DOCTYP E指定 IE8 支持 outline 属性。</p>
</body>

129

box-sizing

box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。

<style> 
div.container
{
	width:30em;
	border:1em solid;
}
div.box
{
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	width:50%;
	border:1em solid red;
	float:left;
}
</style>
</head>
<body>

<div class="container">
<div class="box">这个 div 占据了左边的一半。</div>
<div class="box">这个 div 占据了右边的一半。</div>
</div>

</body>

130

list-style

设置所有的列表属性。

<style>
ul 
{
	list-style:square url("sqpurple.gif");
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

131

width height

设置元素的宽度,高度。

min-height min-width

设置最低高度,最低宽度

line-height

百分比设置行高

<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
大多数浏览器的默认行高约为110%至120%。<br>
</p>

<p class="small">
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
</p>

<p class="big">
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
</p>

</body>

132

top bottom left right

  • top,bottom, left,right 属性规定元素的顶部,底部,左部,右部边缘。

border

设置边框属性

box-shadow

设置一个或多个下拉阴影的框。

<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>

overflow

133

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×