前端（CSS）

Lucky-Hua / 2023-07-18 / 原文

css

css: 层叠样式表

就是给html增加样式的，让其变得更加好看。

先学习选择器：作用就是如何找标签

找到标签之后：给标签增加样式

选择器的语法结构

选择器 {
　　属性名1：属性值1
　　属性名2：属性值2
　　属性名3：属性值3
　　属性名4：属性值4
}

CSS的注释语法：
　　/* 内容 */ （快捷键：ctrl + ？）

CSS的引入方式：

1. 在html文档中直接写在style标签中

2.单独写一个CSS文件，然后通过link标签引入外部的css文件

3. 直接写在标签上，行内式

基本选择器

ID选择器

 #p1 {
            color: red;
            font-size: 30px;
        }

类选择器

 .c1 {
            color: yellow;
            font-size: 25px;
        }

元素选择器

p {
            color: green;
        }

通用选择器

 * {
            color: orange;
        }

div下类选择器

div.c1 {
            color: red;
        }

以上的选择器都是用来装饰下面的内容

组合选择器

后代选择器：

 <style>
      ul li .c1 {
        color: red;
      }

      div>p {
        color: red;
      }
  </style>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      ul li .c1 {
        color: red;
      }

      div>p {
        color: red;
      }
  </style>
</head>
<body>
<ul>
  <li><a href="" class="c1">1</a></li>
  <li><a href="" class="c1">2</a></li>
  <li><a href="" class="c1">3</a></li>
  <li><a href="" class="c1">4</a></li>
  <li><a href="" class="c1">5</a></li>

</ul>
<a href="">哈哈哈</a>

<div>div
  <p>pppp</p>
</div>
<p>pppppppppppppppppp</p>
</body>
</html>

结果：

属性选择器

<style>
        [username] {
            color: red;
        }
        [username=kevin] {
            color: red;
        }
        input[username=kevin] {
            color: red;
        }
</style>

结果：

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         div, p, span {
            color: red;
        }
    </style>
</head>
<body>
<div>div</div>
<p>pppp</p>
<span>span</span>
</body>
</html>