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
<!-- v:3.1-->
相关推荐
1. **定义基础CSS样式**： - 使用`.b1, .b2, .b3, .b4, .b1b, .b2b, .b3b, .b4b, .b`等类名来标识各个部分。 - 设置这些类的基础样式，比如高度、边距、边框宽度等。 2. **构建HTML结构**： - 使用`<div>`和`...
but still haven’t quite “got it.” If you already know some CSS, I strongly urge you not to skip the early chapters, because I try to steer you away from overreliance on CSS classes and other bad ...
var body: some View { VStack { Text("Hello, World!") .withCss(style) } } } ``` 在UIKit中，可以这样应用： ```swift let label = UILabel() label.setText("Hello, World!") style.apply(to: label) ``...
the language that in the hands of a skilled designer turns the ugly duckling of unadorned HTML into the gracious swan of a sophisticated web page. Some web designers will tell you dismissively that ...
#some-element { color: red !important; } ``` ##### 2.4 使用CSS预处理器 如Sass、Less等，它们提供了更高级的CSS编写方式，可以在一定程度上减少样式冲突，同时提高代码可维护性。 ```scss // 使用Sass $...
Some of the topics could warrant entire books on their own: animation, typogra- phy, even flexbox and grid layout. My goal is to flesh out your knowledge, help you bolster your weak spots, and give ...
`transform: translateX(-some-value)`会让元素沿X轴移动一定的距离，从而产生滑动效果。 与此同时，描述文字层的滑出效果可能使用了CSS3的`transition`属性。`transition`可以平滑地过渡两个样式状态之间的变化，...
You will then quickly progress to intermediate concepts such as form elements and some exciting features with JavaScript APIs. The code samples provided in this book will give you a solid base by ...
It was somewhere around that time I discovered the wonderful View Source but- ton and realized all the secrets of a web page were there for me to decipher in plain text. I taught myself HTML and CSS ...
border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clear { clear: both; } ``` #### 总结 - **相对定位**适用于微调元素位置而不影响文档流。 - **绝对定位**适用...
This second edition of the book covers CSS2 and CSS2 1 the latter of which is in many ways a clarification of the first While some CSS3 modules have reached Candidate Recommendation status as of this ...
Desktop-only websites just aren’t ...Learn how to use the latest features of CSS including custom fonts, nth-child selectors (and some CSS4 selectors), CSS custom properties (variables), and CSS calc
##### 1. 基本选择器 - **类选择器**：`.class` 示例：`.intro` 描述：选择所有class属性为"intro"的元素。 - **ID选择器**：`#id` 示例：`#firstname` 描述：选择所有id属性为"firstname"的元素。 - **通用...
### CSS常用优化技巧详解 #### 一、使用CSS缩写 使用CSS缩写不仅可以帮助减少CSS文件的大小，还能让代码更容易阅读。虽然具体的CSS缩写规则不在本文详细阐述范围内，但简要介绍一些常见的CSS缩写方法是有益的。 1...
CSSTidy CSSTidy是CSS缩小器 css_optimiser.php是Web界面 class.csstidy.php是解析器 ...// Set some options : $csstidy->set_cfg('optimise_shorthands', 2); $csstidy->set_cfg('template', 'high'); // Parse the