CSS学习

pengchua

浏览: 153734 次
性别:
来自: 上海

最近访客更多访客>>

songhait

leimingchao

king114963349

2560445422

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (73)

社区版块

存档分类

CSS 浏览器 JavaScript XHTML HTML

http://tool.cndw.com/CssDesigner/ css在线编辑器

1.在定义CSS时(Embed)
要加上：<style type="text/css">

</style>

-->
</style>

如果是html中的标签如<h2></h2>定义时前就不用加点（.）表示只要在页面遇到这样的标签就用那CSS
如果是“.”+名称,表示自定义css，引用时要，加上class=" "
.table_list a表示这个定义了的css下的<a></a>的样式。
注意：有的比较老的浏览器并不支持式样单语法，会将<style type="text/css">...</style>间的文本显示出来，

若要避免这种情况的发生，最好加入。

2.如果使用外面css(Linked)
在<HEAD>区内使用<LINK>标签（注意：不再是<style>标签了）：
<LINK REL=stylesheet HREF="http://yoursute.com/my.css" TYPE="text/css">

3.如果混合使用三种式样单，优先级：inline > embed > link 式样单。
也就是直接在标签上写CSS>在head中直接现写CSS>从外面引用CSS

4.常用的链接是否显示下划线问题：
<style type="text/css">

</style>

这样浏览器在执行时，就明白：

a:link 指正常的未被访问过的链接
a:active 指正在点击的链接
a:visited 指已经访问过的链接
其中，text-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线，换成overline则给超连文字加上划线，换成 line-through给超连文字加上删除线，blink则使文字在闪烁。

5.样式表的规则可从母体延续到子体。下面是一个例子：
B { color: blue }
这项规则告诉浏览器将所有<B>之内的文字用蓝色显示。但是在下列情况下，浏览器该如何处理呢？
<B>All my Web pages will use cascading stylesheets within <I>four</I> weeks.</B>
对于<I>标签并没有设定样式，但因为<I>位于<B>之中，所以它将继承母体<B>设定的样式，也以蓝色显示。
6.一个页标签的例子：
<html>
<head>
<style type="text/css">

/*用来定义tabs css*/
.tabs{
width: 100%;
margin: 0;
padding: 4px 0 0 4px ;
list-style: none;
font-size: 12px;
border-bottom: none;
}
/*用来定义tabs下面有li标签的css*/
.tabs li{
float: left;
margin: 0;
padding: 0;
font-family: "宋体", sans-serif;
}
/*用来定义tabs 下面有<a></a>标签的css*/
.tabs a{
float: left;
display: block;
margin: 0 1px 0 0;
padding: 4px 8px;
color: #333;
text-decoration: none;
border: 1px solid #d2d2d2;
border-bottom: none;
background: #fff;
}
/*定义tabs下的<a></a>标签被访问后仍然无链接,visited为伪标签*/
.tabs a:visited
{
    TEXT-DECORATION: none
}

</style>

<script type="text/javascript">
function showtab(n,count){
for(var i=1;i<=count;i++){
if (i==n){ //进行变换显示
getObject('tab'+i).style.display='block';
getObject('a'+i).style.color='#ff0077';
}
else {
getObject('tab'+i).style.display='none';
getObject('a'+i).style.color = '#3652A8';
}
}
}
//取得某一对象的方法
function getObject(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
}
</script>
</head>
<body onLoad=showtab(1,2)>
<ul class="tabs">
<li class="tab1"><a href="#" rel="external" onClick="showtab(1,2);" id="a1"> XHTML学习</a></li>
<li><a href="#" rel="external" onClick="showtab(2,2);" id="a2">网站设计</a></li>
</ul>
<div id="tab1" class="tab">
<ul>
<li>1.dkjldfld</li>
<li>2.dkfdlsld</li>
<li>3.dkfdlsld</li>
<li>4.dkfdlsld</li>
<li>5.dkflskdvs</li>
</ul>
</div>
<div id="tab2" class="tab2">
<ul>
<li>5.dkflskdvs</li>
<li>4.dkjldfld</li>
<li>3.dkfdlsld</li>
<li>2.dkfdlsld</li>
<li>1.dkfdlsld</li>
</ul>
</div>
</body>
</html>

分享到：