Css 要点

CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。



class选择器 <style type="text/css"> <!-- @import url(1.css); --></style></p> <h2>第一行标题1</h2> <p>紫红色、斜体、下划线、28px的效果1</p> <h2>第二行标题2</h2> <p>紫红色、斜体、下划线、28px的效果2</p> <h3>第三行标题3</h3> <p>紫红色、斜体、下划线、28px的效果3</p> <p>
提示：您可以先修改部分代码再运行



选择器集体声明 <style type="text/css"> <!-- h1, h2, h3, h4, h5, p{ /* 集体声明 */ color:purple; /* 文字颜色 */ font-size:14px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } --></style></p> <h1>选择器集体声明h1</h1> <h2 class="special">选择器集体声明h2</h2> <h3>选择器集体声明h3</h3> <h4>选择器选择器集体声明h4</h4> <h5>集体声明h5</h5> <p>选择器集体声明p1</p> <p class="special">选择器集体声明p2</p> <p id="one">选择器集体声明p3</p> <p>
提示：您可以先修改部分代码再运行



CSS选择器的嵌套声明 <style type="text/css"> <!-- p b{ /* 嵌套声明 */ color:maroon; /* 颜色 */ text-decoration:underline; /* 下划线 */ font-size:30px; /* 文字大小 */ } --></style></p> <p>选择器嵌套<b>使用CSS标</b>记的方法</p> <p>选择器嵌套之外<b>的标</b>记并不生效
提示：您可以先修改部分代码再运行

CSS的子选择器 <style type="text/css"> ul.myList > li > a{ /* 子选择器 */ text-decoration:none; /* 没有下划线 */ color:#336600; }</style></p> <ul class="myList"> <li><a href="http://picasaweb.google.com/isaacshun">isaac's Picasa</a> <ul> <li><a href="#">CSS1</a></li> <li><a href="#">CSS2</a></li> <li><a href="#">CSS3</a></li> </ul> </li> </ul> <p>
提示：您可以先修改部分代码再运行



CSS的属性选择(通过标题) <style type="text/css"> a[title=CSS1]{ text-decoration:none; /* 没有下划线 */ color:#336600; }</style></p> <ul class="myList"> <li><a href="http://picasaweb.google.com/isaacshun">isaac's Picasa</a> <ul> <li><a title="CSS1" href="#">CSS1</a></li> <li><a title="CSS2" href="#">CSS2</a></li> <li><a title="CSS3" href="#">CSS3</a></li> </ul> </li> </ul> <p>
提示：您可以先修改部分代码再运行



标记类形式 <style type="text/css"> <!-- p.one{ font-size:10pt; line-height:8pt; /* 行间距，绝对数值，行间距小于字体大小 */ } p.second{ font-size:18px; } p.third{ font-size:10px; } p.second, p.third{ line-height: 1.5em; /* 行间距，相对数值，1.5倍行距 */ } --></style></p> <p class="one">冬至，是我国农历中一个非常重要的节气，也是一个传统节日，至今仍有不少地方有过冬至节的习俗。冬至俗称“冬节”、“长至节”、“亚岁”等。早在二千五百多年前的春秋时代，我国已经用土圭观测太阳测定出冬至来了，它是二十四节气中最早制订出的一个。时间在每年的阳历12月22日或者23日之间。</p> <p class="second">冬至是北半球全年中白天最短、黑夜最长的一天，过了冬至，白天就会一天天变长。古人对冬至的说法是：阴极之至，阳气始生，日南至，日短之至，日影长之至，故曰“冬至”。冬至过后，各地气候都进入一个最寒冷的阶段，也就是人们常说的“进九”，我国民间有“冷在三九，热在三伏”的说法。</p> <p class="third">在我国古代对冬至很重视，冬至被当作一个较大节日，曾有“冬至大如年”的说法，而且有庆贺冬至的习俗。《汉书》中说：“冬至阳气起，君道长，故贺。”人们认为：过了冬至，白昼一天比一天长，阳气回升，是一个节气循环的开始，也是一个吉日，应该庆贺。《晋书》上记载有“魏晋冬至日受万国及百僚称贺……其仪亚于正旦。”说明古代对冬至日的重视。</p> <p>
提示：您可以先修改部分代码再运行



css首字放大 <style type="text/css"> <!-- body{ background-color:#564700; /* 背景色 */ } p{ font-size:15px; /* 文字大小 */ color:#FFFFFF; /* 文字颜色 */ } p span{ font-size:60px; /* 首字大小 */ float:left; /* 首字下沉 */ padding-right:5px; /* 与右边的间隔 */ font-weight:bold; /* 粗体字 */ font-family:黑体; /* 黑体字 */ color:yellow; /* 字体颜色 */ } --></style></p> <p><span>端</span>午节是古老的传统节日，始于中国的春秋战国时期，至今已有2000多年历史。据《史记》“屈原贾生列传”记载，屈原，是春秋时期楚怀王的大臣。他倡导举贤授能，富国强兵，力主联齐抗秦，遭到贵族子兰等人的强烈反对，屈原遭馋去职，被赶出都城，流放到沅、湘流域。他在流放中，写下了忧国忧民的《离骚》、《天问》、《九歌》等不朽诗篇，独具风貌，影响深远（因而，端午节也称诗人节）。公元前278年，秦军攻破楚国京都。屈原眼看自己的祖国被侵略，心如刀割，但是始终不忍舍弃自己的祖国，于五月五日，在写下了绝笔作《怀沙》之后，抱石投汨罗江身死，以自己的生命谱写了一曲壮丽的爱国主义乐章。</p> <p>传说屈原死后，楚国百姓哀痛异常，纷纷涌到汨罗江边去凭吊屈原。渔夫们划起船只，在江上来回打捞他的真身。有位渔夫拿出为屈原准备的饭团、鸡蛋等食物，“扑通、扑通”地丢进江里，说是让鱼龙虾蟹吃饱了，就不会去咬屈大夫的身体了。人们见后纷纷仿效。一位老医师则拿来一坛雄黄酒倒进江里，说是要药晕蛟龙水兽，以免伤害屈大夫。后来为怕饭团为蛟龙所食，人们想出用楝树叶包饭，外缠彩丝，发展成棕子。</p> <p>
提示：您可以先修改部分代码再运行



Css无需表格的菜单 <style type="text/css"> <!-- body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation ul { list-style-type:none; /* 不显示项目符号 */ margin:0px; padding:0px; } #navigation li { border-bottom:1px solid #ED9F9F; /* 添加下划线 */ } #navigation li a{ display:block; /* 区块显示 */ padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #711515; /* 左边的粗红边 */ border-right:1px solid #711515; /* 右侧阴影 */ } #navigation li a:link, #navigation li a:visited{ background-color:#c11136; color:#FFFFFF; } #navigation li a:hover{ /* 鼠标经过时 */ background-color:#990020; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ } --></style></p> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Weather</a></li> <li><a href="#">Contact Me</a></li> </ul> </div> <p>
提示：您可以先修改部分代码再运行

 

z-index属性 <style type="text/css"> <!-- body{ margin:10px; font-family:Arial; font-size:13px; } #block1{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; position:absolute; left:20px; top:30px; z-index:1; /* 高低值1 */ } #block2{ background-color:#ffc24c; border:1px dashed #000000; padding:10px; position:absolute; left:40px; top:50px; z-index:0; /* 高低值0 */ } #block3{ background-color:#c7ff9d; border:1px dashed #000000; padding:10px; position:absolute; left:60px; top:70px; z-index:-1; /* 高低值-1 */ } --></style></p> <div id="block1">AAAAAAAA</div> <div id="block2">BBBBBBBB</div> <div id="block3">CCCCCCCC</div> <p>
提示：您可以先修改部分代码再运行



文字跟随鼠标 <html> <head> <title>跟随鼠标的文字带滚动效果</title> </head><body> <!--将以下代码加入HTML的<Body></Body>之间--> <script language="JavaScript1.2"> var scroller_msg='欢迎进入我的站点' var dismissafter=0 var initialvisible=0 if (document.all) document.write('<marquee id="curscroll" style="position:absolute;width:150px;border:1px solid black;font-size:14px;background-color:white;visibility:hidden">'+scroller_msg+'</marquee>') function followcursor(){ //move cursor function for IE if (initialvisible==0){ curscroll.style.visibility="visible" initialvisible=1 } curscroll.style.left=document.body.scrollLeft+event.clientX+10 curscroll.style.top=document.body.scrollTop+event.clientY+10 } function dismissmessage(){ curscroll.style.visibility="hidden" } if (document.all){ document.onmousemove=followcursor document.ondblclick=dismissmessage if (dismissafter!=0) setTimeout("dismissmessage()",dismissafter*1000) } //--> </script> </body></html>
提示：您可以先修改部分代码再运行