记录学习CSS day8（1.18）

归途归何处111

已于 2023-01-19 10:41:10 修改

阅读量140

点赞数

文章标签： css 学习前端

于 2023-01-18 16:10:06 首次发布

本文链接：https://blog.csdn.net/m0_74191756/article/details/128702715

版权

关于同时设置伪类样式：a:link和a:visited标签，a:link会被覆盖的问题

关于1.16 1.17代码的综合案例

<!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>Document</title>
  <style>
    body
    {
      background-color: #f5f5f5;
    }
    .wenben{
      margin:0 auto;
      width: 800px;
      height: auto;
    }
    /* 使整个文本盒子居中放置 */
    .tupian{
      margin:0 auto;
      width: 234px;
      height: 300px;
      background-color: #fff;
      text-align: center;
      /* 盒子中的内容居中放置 */
    }
    /* 使整个图片盒子居中放置 */
    .blue{
      color: #33fff3;
    }
    .grey{
      color:#cccccc
    }
    .docoration{
      text-decoration: none;
    }
    /* 去除下划线 */
    .center{
      text-align: center;
    }
    /* 满足部分文本居中放置 */
    .indent{
      text-indent: 2em;
    }
    /* 缩进 */
    img{
      width:160px ;
      margin: 0 auto;
    }
    .size1{
      font-size: 14px;
      line-height: 25px;
    }
    .size2{
      font: 12px/30px 微软雅黑;
      color: #cccccc;
    }
    .size3{
      font-size: 14px;
      color: #ffa500;
    }
  </style>
</head>
<body>
  <div class="wenben">
    <h1 class="center">CSS 基础</h1>
    <hr>
    <p class="center">
    <span class="grey">
      转载自MDN
    </span>
      <a href="#" class="docoration">
      收藏本文
      </a>
    </span>
    <p class="indent">层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。本节将介绍 CSS 的基础知识，并解答类似问题：怎样将文本设置为黑色或红色？怎样将内容显示在屏幕的特定位置？怎样用背景图片或颜色来装饰网页？</p>
    <p class="indent">和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式</p>
  </div>
  <div class="tupian">
    <img src="./实验案例.png" title="Redmi 12C 案例来自小米商城">
    <div class="size1">Redmi 12C</div>
    <div class="size2">高性能长续航，5000万像素超清双摄</div>
    <div class="size3">699元起</div>
  </div>
</body>

</html>

（图片是按照小米官网做的）

选择器

后代选择器

用来选择元素或元素组的后代，把外层标签写在前面，内层标签写在后面，中间用空格分隔

格式：标签1 标签2{属性1:值1 属性值2:值2}

<html>

<head>
  <style>
    div a {
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <a href="#">这个链接是红色的</a>
    <p>
      <a href="#">这个链接也是红色的，这就是子代选择器的作用</a>
    </p>
  </div>
</body>

</html>

子代选择器

用来选择作为某元素子元素的元素，将父级标签写在前面，子级标签写在后面，用大于号连接

格式：父标签>子标签{属性1:值1 属性值2:值2}

<html>

<head>
  <style>
    div>a {
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <a href="#">这个链接是红色的</a>
    <p>
      <a href="#">这个链接不是红色的，这就是子代选择器与后代选择器的区别</a>
    </p>
  </div>
</body>

</html>

并集选择器

用来同时设置多种标签，设置相同样式，将选择器之间用,隔开，为了美观，我们经历在每一个并集选择器中的选择器之间换行书写。

格式：选择器1,选择器2{属性1:值1 属性值2:值2}

<html>

<head>
  <style>
    span,
    h1,
    h2,
    h3,
    .red {
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <span>均为红色标签</span>
    <h1>均为红色标签</h1>
    <h2>均为红色标签</h2>
    <h3>均为红色标签</h3>
    <a href="#" class="red">此为红色链接</a>
    <br><br>
    这就是并集选择器作用
  </div>
</body>

</html>

交集选择器

用设置页面中同时免租多个选择器的标签

格式：选择器1选择器2{属性1:值1 属性值2:值2}

注：

交集选择器中的选择器没有间隔

如果交集选择器中含有标签选择器，标签选择器必须写在最前面

<html>

<head>
  <style>
    p.red{
      color: #ff0000;
    }
  </style>
</head>

<body>
  <div>
    <p>这段不是红色文字</p>
    <h1 class="red">这段也不是红色文字</h1>
    <p class="red">这段才是红色文字</p>
  </div>
</body>

</html>

伪类选择器

用于向某些选择器添加特殊的效果，在选择器后面加上:，配合其他标签使用

:link ：未访问的链接，可以为普通或未访问的链接设置样式
:visited ：已访问的链接，可以为已经访问过的链接设置样式
:hover ：鼠标移动到链接上，可以定义当鼠标经过或悬停在链接上时的样式
:active ：选定的链接，可以定义点击链接时的样式

浏览器默认情况：

普通链接：带有下划线的蓝色文本；
已访问的链接：带有下划线的紫色文本；
点击链接时：带有下划线的红色文本；
经过或悬停在链接上时：链接的外观并没有变化，它将保持先前状态的颜色。

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            color: black;
        }
        a:active {
            background: #000;
            color: white;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/" target="_blank">跳转至百度</a>
    <br><br>
    <a href="https://www.baidu.com/" target="_blank">跳转至百度</a>
    <br><br>
    <a href="">这是一个链接</a>
    <br><br>
    <a href="">这也是一个链接</a>
    <br><br>
</body>
</html>