1.
<html> <head> <style type="text/css"> h1.visible {visibility:visible} h1.invisible {visibility:hidden} </style> </head> <body> <h1 class="visible">这是可见的标题</h1> <h1 WORD-SPACING: 0px; FONT: 12px 'Courier New'; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); TEXT-INDENT: 0px; LETTER-SPACING: normal; BORDER-COLLAPSE: separate; orphans: 2; widows: 2; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0">e">这是不可见的标题 </h1> </body> </html> 2. <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p> <span style="cursor:link"> Auto</span><br/> 3.<style type="text/css"> div { background-color:#00FFFF; width:150px; height:150px; overflow: scroll 滚动条//overflow: hidden 隐藏。 } </style> 4. <html> <head> <style type="text/css"> a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00} a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%} a.three:link {color: #ff0000} a.three:visited {color: #0000ff} a.three:hover {background: #66ff66} a.four:link {color: #ff0000} a.four:visited {color: #0000ff} a.four:hover {font-family: monospace} a.five:link {color: #ff0000; text-decoration: none} a.five:visited {color: #0000ff; text-decoration: none} a.five:hover {text-decoration: underline} </style> </head> <body> <p>请把鼠标移动到这些链接上，以查看效果：</p> <p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p> <p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体大小</a></b></p> <p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景颜色</a></b></p> <p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体系列</a></b></p> <p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本装饰</a></b></p> </body> </html> 5, <html> <head> <style type="text/css"> a:first-child { text-decoration:none } </style> </head> <body> <p>:first-child 伪类向属于其他元素的第一个子元素的一个元素添加特殊样式。</p> <p>访问 <a href="W3Schoolhttp://www.w3school.com.cn">W3School</a> 来学习 CSS！ 访问 <a href="W3Schoolhttp://www.w3school.com.cn">W3School</a> 来学习 HTML！</p> </body> </html> 6.<html> <head> <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style> </head> <body> <p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p> <p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p> <p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p> </body> </html> 7.<html> <head> <style type="text/css"> p:first-letter { color: #ff0000; 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> http://www.w3school.com.cn/tiy/t.asp?f=csse_firstletter 8.<html> <head> <style type="text/css"> p:first-line { color: #ff0000; font-variant: small-caps } </style> </head> <body> <p> You can use the :first-line pseudo-element to add a special effect to the first line of a text! </p> </body> </html> http://www.w3school.com.cn/tiy/t.asp?f=csse_firstline |
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
