实训课程——CSS基础知识

最新推荐文章于 2021-08-03 18:52:42 发布

mushroom_er

最新推荐文章于 2021-08-03 18:52:42 发布

阅读量204

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/weixin_48642958/article/details/117523338

版权

一、CSS 选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

1、CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

实例：页面上所有<p>标签都居中对齐：

p {
  text-align: center;
}

2、CSS id选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

注意：id 名称不能以数字开头。

实例：应用于id="example"的HTML元素

#example {
  text-align: center;
  color: white;
}

3、CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

实例：对有class="center" 的 <p> 的元素进行配置

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: green;
}
</style>
</head>
<body>

<h1 class="center">它不受影响呦！这里可以引用多个类</h1>
<p class="center">这个段落将是红色并居中对齐的。</p> 

</body>
</html>

4、CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

实例：影响页面上的每个 HTML 元素。

* {
  text-align: center;
  color: blue;
}

5、CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

最好对选择器进行分组，以最大程度地缩减代码，用逗号来分隔每个选择器。

二、CSS 伪类

1、语法：

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 之后才能生效！伪类名称对大小写不敏感。

2、:first-child 伪类

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

3、练习——五彩导航栏

这是一个什么尚有缺陷且不完美的小小五彩导航栏？的练习（莫名自己都想吐槽一下）。本蒟蒻经多次尝试，最终还是暴力出奇迹。如有好方法请多多指教。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航栏</title>
    <style>
        .image-m:hover{
            content: url(image/bg6.png);
        }
    </style>
</head>
<body>
    <span><img src="image/bg1.png"  class="image-m "><label  style="position: fixed;left: 30px;top: 20px; color: white;">五彩导航</label></span>
    <span><img src="image/bg2.png"  class="image-m "><label style="position: fixed;left: 160px;top: 20px; color: white;">五彩导航</label></span>
    <span><img src="image/bg3.png"  class="image-m "><label style="position: fixed;left: 285px;top: 20px; color: white;">五彩导航</label></span>
    <span><img src="image/bg4.png"  class="image-m "><label style="position: fixed;left: 410px;top: 20px; color: white;">五彩导航</label></span>
</body>
</html>

mushroom_er

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实训课程——CSS基础知识

一、CSS 选择器CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。 1、CSS 元素选择器元素选择器根据元素名称来选择 HTML 元素。实例：页面上所有<p>标签都居中对齐：p { text-align: center;} 2、CSS id选择器 id 选择器使用 HTML 元素的 id 属...
复制链接

扫一扫