CSS学习

原创 2007年09月27日 14:56:00
http://tool.cndw.com/CssDesigner/  css在线编辑器

1.在定义CSS时(Embed)
要加上:<style type="text/css">
<!--
<style type="text/css">
<!--
h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color:

#FFCCCC}
h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}
.table_list {
    border: 0px solid #738Fe6;
    margin: 0px;
    background-color: #738fe6;
}
.table_list  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;
}
-->
</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">
<!--
a:link { text-decoration: none}
a:active { text-decoration: none }
a:visited { text-decoration: none }
-->
</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>




 

程序员学习资料(2)—硅谷之火,Html Css,python,mysql 等

本次推荐学习资料如下,记得分享给同行哟~ (一),程序员必读之书 《从0到1》.高清版.pdf 硅谷 pay pal 创始人,彼得·蒂尔倾力之作 链接:http://pan.baidu.com/s...

CSS基础学习胶片

  • 2015年10月27日 00:45
  • 6.99MB
  • 下载

CSS3学习心得

  • 2015年12月01日 23:44
  • 3KB
  • 下载

学习@media实现网页自适应、弄清CSS3 Media Queries真面目

随着显示屏幕的多样性!各种各样的屏幕,pad,pc,phone,不同尺寸,不同大小!这给开发人员带来很大的挑战,为了一个页面,要写n套代码!可谓很难受!不过咧不用怕。技术也在发展哈。css3带来了福音...
  • xiqim
  • xiqim
  • 2015年05月09日 09:39
  • 1042

DIV+CSS有利学习资源

  • 2017年08月11日 22:48
  • 4.86MB
  • 下载

css介绍快速学习

  • 2015年04月28日 09:38
  • 29KB
  • 下载

html和css实现一级菜单和二级菜单学习笔记

实现一级菜单二级菜单:

CSS页面制作学习

  • 2015年06月20日 16:05
  • 610KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS学习
举报原因:
原因补充:

(最多只允许输入30个字)