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>




 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS文档学习手册

  • 2015-11-26 09:17
  • 368KB
  • 下载

css2中文手册学习

  • 2015-07-08 21:15
  • 243KB
  • 下载

【连载~前端学习日志】网站首页HTML+CSS实践02~

前端技术HTML+CSS实现网站首页功能。应用定位position+div方式进行图片定位,应用li标签进行图标+文字的布局。应用图片透明和hover功能实现轮播小图的动作。

div+css 不错的学习实例

  • 2015-10-22 16:18
  • 33.04MB
  • 下载

css学习手册

  • 2016-05-12 15:05
  • 553KB
  • 下载

HTML入门学习笔记--CSS三大特性(4)

24-CSS三大特性之继承性1.什么是继承性?作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性注意点:1.并不是所有的属性都可以继承, 只有以color/font-/text...

xml与css的学习

  • 2015-06-02 10:19
  • 616KB
  • 下载

Html和css学习简易教程

  • 2014-12-08 16:00
  • 355KB
  • 下载

css学习

一 .如何将样式表加入到网页可以用以下四种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅 !important 声明...

用于学习css样式

  • 2015-05-05 19:00
  • 526KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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