signed

QiShunwang

“诚信为本、客户至上”

实训课程——CSS基础知识

2021/6/3 16:11:33   来源:

一、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>