CSS基础知识温习

来源：互联网发布：水表读卡器软件编辑：程序博客网时间：2024/06/06 12:34

一、伪元素

伪元素W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。属性 描述 CSS:first-letter 向文本的第一个字母添加特殊样式。 1:first-line 向文本的首行添加特殊样式。 1:before 在元素之前添加内容。 2:after 在元素之后添加内容。 2

1、:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

实例

p:first-line  {  color:#ff0000;  font-variant:small-caps;  }

注释："first-line" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-line" 伪元素：

    font    color    background    word-spacing    letter-spacing    text-decoration    vertical-align    text-transform    line-height    clear

2、:first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式：

p:first-letter  {  color:#ff0000;  font-size:xx-large;  }

注释："first-letter" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-letter" 伪元素：

        font        color        background        margin        padding        border        text-decoration        vertical-align (仅当 float 为 none 时)        text-transform        line-height        float        clear

多个伪元素可以结合使用

p:first-letter  {  color:#ff0000;  font-size:xx-large;  }p:first-line  {  color:#0000ff;  font-variant:small-caps;  }

3、CSS2 - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 <h1> 元素前面插入一幅图片：

h1:before  {  content:url(logo.gif);  }

4、CSS2 - :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1> 元素后面插入一幅图片：

h1:after  {  content:url(logo.gif);  }

二、

<html><head><style type="text/css">h1.visible {visibility:visible}h1.invisible {visibility:hidden}</style></head><body><h1 class="visible">这是可见的标题</h1><h1 class="invisible">这是不可见的标题</h1></body></html>

2、改变光标

<html><body><p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p><span style="cursor:auto">Auto</span><br /><span style="cursor:crosshair">Crosshair</span><br /><span style="cursor:default">Default</span><br /><span style="cursor:pointer">Pointer</span><br /><span style="cursor:move">Move</span><br /><span style="cursor:e-resize">e-resize</span><br /><span style="cursor:ne-resize">ne-resize</span><br /><span style="cursor:nw-resize">nw-resize</span><br /><span style="cursor:n-resize">n-resize</span><br /><span style="cursor:se-resize">se-resize</span><br /><span style="cursor:sw-resize">sw-resize</span><br /><span style="cursor:s-resize">s-resize</span><br /><span style="cursor:w-resize">w-resize</span><br /><span style="cursor:text">text</span><br /><span style="cursor:wait">wait</span><br /><span style="cursor:help">help</span></body></html>

三、

CSS2 媒介类型

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

不同的媒介类型注释：媒介类型名称对大小写不敏感。媒介类型 描述all         用于所有的媒介设备。aural         用于语音和音频合成器。braille 用于盲人用点字法触觉回馈设备。embossed 用于分页的盲人用点字法打印机。handheld 用于小的手持的设备。print         用于打印机。projection 用于方案展示，比如幻灯片。screen         用于电脑显示器。tty         用于使用固定密度字母栅格的媒介，比如电传打字机和终端。tv         用于电视机类型的设备。

阅读全文

0 0