CSS基础知识温习

最新推荐文章于 2022-07-11 22:57:51 发布

lowers_sunshine

最新推荐文章于 2022-07-11 22:57:51 发布

阅读量257

点赞数 1

分类专栏： css 文章标签： CSS

本文链接：https://blog.csdn.net/lowers_sunshine/article/details/78719335

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、伪元素

伪元素

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 	        用于电视机类型的设备。

lowers_sunshine

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识温习

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

扫一扫