CSS中级教程11~15

最新推荐文章于 2024-07-24 21:03:00 发布

删除没备份的痛

最新推荐文章于 2024-07-24 21:03:00 发布

阅读量112

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_41995845/article/details/120307716

版权

11、CSS 伪类
CSS 组合器
CSS 伪元素
什么是伪类？
伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
语法
伪类的语法：

selector:pseudo-class {
property: value;
}
锚伪类
链接能够以不同的方式显示：

实例

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

亲自试一试
注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

伪类和 CSS 类
伪类可以与 CSS 类结合使用：

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

实例

a.highlight:hover {
  color: #ff0000;
}

亲自试一试
悬停在 <div> 上
在 <div> 元素上使用 :hover 伪类的实例：

实例

div:hover {
  background-color: blue;
}

亲自试一试
简单的工具提示悬停
把鼠标悬停到 <div> 元素以显示 <p> 元素（类似工具提示的效果）：

悬停到我上面来显示 <p> 元素。
实例

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

亲自试一试
CSS - :first-child 伪类
:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

匹配首个 <p> 元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何 <p> 元素：

实例

p:first-child {
  color: blue;
}

亲自试一试
匹配所有 <p> 元素中的首个元素
在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：

实例

p i:first-child {
  color: blue;
}

亲自试一试
匹配所有首个

元素中的所有元素
在下面的例子中，选择器匹配作为另一个元素的第一个子元素的

元素中的所有 元素：

实例

p:first-child i {
  color: blue;
}

亲自试一试
CSS - :lang 伪类
:lang 伪类允许您为不同的语言定义特殊的规则。

在下面的例子中，:lang 为属性为 lang=“en” 的 <q> 元素定义引号：

实例

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

12、CSS 伪元素
什么是伪元素？
CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容
语法
伪元素的语法：

selector::pseudo-element {
property: value;
}
::first-line 伪元素
::first-line 伪元素用于向文本的首行添加特殊样式。

下面的例子为所有 <p> 元素中的首行添加样式：

实例

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

亲自试一试
注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
请注意双冒号表示法 - ::first-line 对比 :first-line

在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。

在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。

为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

::first-letter 伪元素
::first-letter 伪元素用于向文本的首字母添加特殊样式。

下面的例子设置所有 <p> 元素中文本的首字母格式：

实例

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

亲自试一试
注意：::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align（仅当 “float” 为 “none”）
text-transform
line-height
float
clear
伪元素和 CSS 类
伪元素可以与 CSS 类结合使用：

实例

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

亲自试一试
上面的例子将以红色和较大的字体显示 class=“intro” 的段落的首字母。

多个伪元素
也可以组合几个伪元素。

在下面的例子中，段落的第一个字母将是红色，字体大小为 xx-large。第一行的其余部分将变为蓝色，并使用小型大写字母。该段的其余部分将是默认的字体大小和颜色：

实例

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

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

亲自试一试
CSS - ::before 伪元素
::before 伪元素可用于在元素内容之前插入一些内容。

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

实例

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

亲自试一试
CSS - ::after 伪元素
::after 伪元素可用于在元素内容之后插入一些内容。

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

实例

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

亲自试一试
CSS - ::selection 伪元素
::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

color
background
cursor
outline
下例使所选文本在黄色背景上显示为红色：

实例

::selection {
  color: red; 
  background: yellow;
}

13、CSS 不透明度 / 透明度
opacity 属性指定元素的不透明度/透明度。
opacity 属性的取值范围为 0.0-1.0。值越低，越透明：
实例

img {
  opacity: 0.5;
}

透明悬停效果
opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：
实例

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

例子解释
第一个 CSS 块类似于实例 1 中的代码。此外，我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。这条 CSS 是 opacity:1;。

当鼠标指针离开图像时，图像将再次透明。

img:hover {
  opacity: 0.5;
}

透明盒
使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读
实例

div {
  opacity: 0.3;
}

使用 RGBA 的透明度
如果您不希望对子元素应用不透明度，如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：
您已经从我们的 CSS 颜色这一章中学到了可以将 RGB 用作颜色值。除 RGB 外，还可以将 RGB 颜色值与 alpha 通道（RGBA）一起使用 - 该通道规定颜色的不透明度。

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

提示：您将在我们的 CSS 颜色这一章中学到有关 RGBA 颜色的更多知识。

实例

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}

实例

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>这是一些位于透明框中的文本。</p>
  </div>
</div>

</body>
</html>

例子解释
首先，我们创建一个带有背景图像和边框的 <div> 元素（class=“background”）。

然后，我们在第一个 <div> 中创建另一个 <div>（class=“transbox”）。

<div class="transbox"> 有背景色和边框 - 这个 div 是透明的。

在透明的 <div> 内，我们在 <p> 元素内添加了一些文本。
14、CSS 导航栏
导航栏
易用的导航对于任何网站都很重要。

通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。

导航栏 = 链接列表
导航栏需要标准 HTML 作为基础。

在我们的实例中，将用标准的 HTML 列表构建导航栏。

导航栏基本上就是链接列表，因此使用

和
元素会很有意义：

实例

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

亲自试一试
现在，从列表中删除项目符号以及外边距和内边距（填充）：

实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

亲自试一试
例子解释：
list-style-type: none; - 删除项目符号。导航条不需要列表项标记。
设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。
15、CSS 垂直导航栏
垂直导航栏
Home
News
Contact
About
如需构建垂直导航栏，除了上一章中的代码外，还可以在列表中设置 <a> 元素的样式：

实例

li a {
  display: block;
  width: 60px;
}

亲自试一试
例子解释：
display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。
width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。
您还可以设置

的宽度，并删除的宽度，因为当显示为块元素时，它们将占据可用的全部宽度。这将导致与我们之前的例子相同的结果：

实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
} 

li a {
  display: block;
}

亲自试一试
垂直导航栏实例
创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色：

Home
News
Contact
About
实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* 鼠标悬停时改变链接颜色 */
li a:hover {
  background-color: #555;
  color: white;
}

亲自试一试
活动/当前导航链接
向当前链接添加 “active” 类，以使用户知道他/她在哪个页面上：

Home
News
Contact
About
实例

.active {
  background-color: #4CAF50;
  color: white;
}

亲自试一试
居中链接以及添加边框
把 text-align:center 添加到

或，使链接居中。

将 border 属性添加到

，在导航栏周围添加边框。如果您还希望在导航栏内添加边框，请为所有
元素添加 border-bottom，最后一个元素除外：

Home
News
Contact
About
实例

ul {
  border: 1px solid #555;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}

亲自试一试
全高固定垂直导航栏
创建全高的“粘性”侧面导航：

实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* 全高 */
  position: fixed; /* 使它产生粘性，即使在滚动时 */
  overflow: auto; /* 如果侧栏的内容太多，则启用滚动条 */
}

删除没备份的痛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中级教程11~15

11、CSS 伪类CSS 组合器CSS 伪元素什么是伪类？伪类用于定义元素的特殊状态。例如，它可以用于：设置鼠标悬停在元素上时的样式为已访问和未访问链接设置不同的样式设置元素获得焦点时的样式语法伪类的语法：selector:pseudo-class {property: value;}锚伪类链接能够以不同的方式显示：实例/* 未访问的链接 */a:link { color: #FF0000;}/* 已访问的链接 */a:visited { color: #
复制链接

扫一扫