CSS学习笔记之蓝色理想：www.blueidea.com

2008年12月3日15:06:48

设置背景颜色
<html>
<head>
<style type="text/css">
body {background-color: purple}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)} //用的都是标签选择符。
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>

怎样放置背景图片（位置摆放）

<html>
<head>
<style type="text/css">
body
{
background-image:
url('/articleimg/2006/07/3744/smiley.gif');
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>

文字的缩进

<html>
<head>
<style type="text/css">
p {text-indent: 1cm}
</style>
</head>

<body>
<p>
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
</p>
</body>

</html>

设置四边框的颜色

</head>

<body>

<p class="one">One-colored border!</p>

<p class="two">Two-colored border!</p>

<p class="three">Three-colored border!</p>

<p class="four">Four-colored border!</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>
</html>

怎样显示一个元素？

<html>
<head>
<style type="text/css">
p {display: block}
div {display: none}
</style>
</head>

<body>
<p>A display property with a value of "inline" results in</p>

<p>no distance between two elements.</p>

<div>And this div section is not displayed!</div>
</body>
</html>

一个简单的浮动属性使用

<html>
<head>
<style type="text/css">
img
{
float:left;
}
</style>
</head>

<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to

the right in the paragraph.</p>
<p>
<img src="http://www.cnblogs.com/Images/adminlogo.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

一个有着边框的图象浮动到一个段落的右边

<html>
<head>
<style type="text/css">
img
{
float:right;
border:2px dotted brown;
margin:1px 10px 15px 0px;
}
</style>
</head>

<body>
<p>
In the paragraph below, the image will float to the right. A dotted black border is added to the image.
We have also added margins to the image to push the text away from the image:
0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left side of the image.
</p>
<p>
<img src="http://www.cnblogs.com/Images/adminlogo.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

让一个段落中首个字母浮动到左边

<html>
<head>
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:300%;
font-family:algerian,courier;
line-height:70%;
}
</style>
</head>

<p>
<span>I</span>
n the paragraph above, the first letter of the text is embedded in a span element.
The span element has a width that is 0.7 times the size of the current font.
The font-size of the span element is 400% (quite large) and the line-height is 80%.
The font of the letter in the span will be in "Algerian".
</p>

</body>
</html>

建立水平菜单

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:10em;
text-decoration:none;
text-align:center;
color:orange;
background-color:purple;
padding:0.3em 0.8em;
border-right:1px solid blue;
}
a.LastOne
{border-right:1px solid white;}
a:hover {background-color:#ff3300}
a:visited {color:blue;}
li {display:inline;}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a class="LastOne" href="#">Link four</a></li>
</ul>

<p>
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be

on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>

</body>
</html>

怎样让一个元素不可见

<html>
<head>
<style type="text/css">
h1.visible {visibility:visible}
h1.invisible {visibility:hidden}

a.visible {visibility:visible}
a.invisible {visibility:hidden}
</style>
</head>

<body>
<h1 class="visible">This is a visible heading</h1>
<h1 class="invisible">This is an invisible heading</h1>

<a class="visible" href="#">This is a visible heading</a>
<a class="invisible" href="#">This is an invisible heading</a>

</body>

</html>

设置元素（如图片）的大小

<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 120px 151px 0px);//剪切一个图片，即上下左右各个方向上各剪切多少像素。此例为上下各剪0，右边剪120,下面剪150。
}
</style>
</head>

<body>
<p>The clip property is here cutting an image:</p>
<p><img border="0" src="http://www.cnblogs.com/Images/adminlogo.gif" width="120" height="151"></p>
</body>

</html>

关于DIV的滚动条设置：

<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:200px;
height:150px;
/*overflow:auto;*/ 自动出现
overflow-y:scroll; 只有垂直方向有
/*overflow-y:hidden;*/垂直方向没有，水平也没有
/*overflow-x:scroll;*/只有水平方向有
/*overflow-x:hidden;*/水平方向没有，垂直也没有
/*overflow: scroll;*/水平方向和垂直方向都有
/*overflow: hidden;*/水平方向和垂直方向都没有

}
</style>
</head>

<body>
<p>The overflow property decides what to do if the content inside an element exceeds the given width and height

properties.</p>

<div>
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to:

visible, hidden, auto, or inherit and see what happens. The default value is visible.
</div>
</body>

</html>

图片与周围文字的对齐方式：

<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>

<body>
<p>
This is an
<img class="top" border="0"
src="http://www.cnblogs.com/Images/adminlogo.gif" width="95" height="84" />
image inside a paragraph.
</p>

<p>
This is an
<img class="bottom" border="0"
src="http://www.cnblogs.com/Images/adminlogo.gif" width="95" height="84" />
image inside a paragraph.
</p>
</body>

</html>

让一段文字在图征后面显示：

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:10px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a Heading</h1>
<img class="x" src="http://www.cnblogs.com/Images/adminlogo.gif" width="100" height="100">
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
</body>

</html>

给超级链接加上不同的颜色

</head>

<body>

<p><b><a href="#" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective!!</p>

</body>
</html>

给超级链接增加其他样式

a.two:link {color: green}
a.two:visited {color: gray}
a.two:hover {font-size: 150%}

a.three:link {color: brown}
a.three:visited {color: gray}
a.three:hover {background: purple;color:blue;}

a.four:link {color: purple}
a.four:visited {color: gray}
a.four:hover {font-family: 黑体;}

a.five:link {color: orange; text-decoration: none}
a.five:visited {color: gray; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>
<body>
<p>Mouse over the links to see them change layout.</p>
<p><b><a class="two" href="#" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="#" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="#" target="_blank">看我的字体！</a></b></p>
<p><b><a class="five" href="#" target="_blank">放在上面出现下划线</a></b></p>
</body>

</html>

让文字的第一个字母特殊化

<html>
<head>
<style type="text/css">
p:first-letter
{
color: brown;

text-decoration: underline;
font-size:xx-large;
}

</style>
</head>

<body>
<p>
You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
</p>
</body>

</html>

让文字的第一行特殊化

<html>
<head>
<style type="text/css">
p:first-line
{
color: brown;
text-transform:uppercase;
}
</style>
</head>

<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
You can use the :first-line pseudo-element to add a special effect to the first line of a text!You can use the :first-line

pseudo-element to add a special effect to the first line of a text!You can use the :first-line pseudo-element to add a

special effect to the first line of a text!
</p>
</body>

</html>

一个综合的web标准布局实例：

<HTML>
<HEAD>
<TITLE>model</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<style>
html,body{
    margin:0;
    padding:0;
    background:#A1A9B6 url(images/allbg.jpg);
    text-align:center;
    }
#main{
    margin:0 auto;
    position:relative; /*我是相对定位*/
    width:780px;
    height:659px;
    background:url(images/model.jpg) no-repeat;
    }
#main #menu{
    position:absolute;
    right:12px;
    width:354px;
    height:115px;
    background:url(images/menu.gif) no-repeat;
    }
#main #menu a#page,#main #menu a#about,#main #menu a#services,#main #menu a#contacts{
    float:left;
    width:112px;
    height:30px;
    }
#main #menu a#about{
    width:80px;
    height:55px;
    }
#main #menu a#services{
    width:70px;
    height:80px;
    }
#main #menu a#contacts{
    width:80px;
    height:115px;
    }
#main #menu a:hover{
    background: url(images/menu.gif) no-repeat;
    }
#main #menu a#page:hover{
    background-position: 0px -115px;
    }
#main #menu a#about:hover{
    background-position: -112px -115px;
    }
#main #menu a#services:hover{
    background-position: -192px -115px;
    }
#main #menu a#contacts:hover{
    background-position: -262px -115px;
    }
#main h1{
    position:absolute;/*我是绝对定位，我相对与我的上一级#main来进行定位，因为他设置了position:relative;如果在我的父一级中没有找到position:relative;那我就相对与body来定位了...*/

    top:0;left:1px;
    width:151px;
    height:56px;
    background:url(images/logo.jpg) no-repeat;
    }
#main h2{
    position:absolute;/*我也是绝对定位我和上面提到的用法一样*/
    top:133px;
    right:7px;
    width:404px;
    height:190px;
    background:url(images/about.gif) no-repeat;
    }
#main h6{
    position:absolute;/*我也是绝对定位我和上面提到的用法一样*/
    bottom:75px;
    right:10px;
    width:265px;
    height:44px;
    background:url(images/cars-logo.gif) no-repeat;
    }
</style>
</HEAD>
<BODY>
<div id="main">
<div id="menu">

/*这个菜单是怎么工作的呢？
一张图是怎么能实现背景切换呢？
呵呵，其实也很简单?大家知道背景图象中有：图像横纵坐标位置设置,此例子也正是运用这个特性，将拥有不同ID的链接A的背景进行偏移，以达到背景切换的目的。*/

posted on 2008-12-03 15:37 念时阅读(324) 评论(0) 收藏举报