前端学习笔记3-CSS入门一

前言：虽然做了几个前端项目，但是属于项目组的赶鸭上架。我的前端基础还是非常薄弱，在网上找了一些网站，用于空闲时间学习。在此做下学习笔记，以做复习使用。

网站的课程讲的很好，很适合像我这样零基础的人学习，非常感谢网站的维护者，推荐下：绿叶学习网

1.CSS的3种引用方式：

---外部样式表，CSS代码和HTML代码分开存放，在HTML中通过link标签引入CSS。

CSS代码：

div{
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--外部样式表-->
  <link href="demo1.css" type="text/css" rel="stylesheet">
</head>
<body>
  <div>快看我，我是外部</div>
</body>
</html>

效果展示：

---内部样式表， CSS代码写在HTML的head标签的style标签中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--内部样式表-->
  <style type="text/css">
    div{
      width: 300px;
      height: 200px;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div>没错，我是内部</div>
</body>
</html>

效果展示：

---内联样式表，CSS代码直接写在标签上：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <!--内联样式表-->
  <div style="width: 300px;height: 150px;border: 1px solid black;">你猜对了，我是内联</div>
</body>
</html>

效果展示：

2.CSS选择器，用于选中标签：

---元素选择器、id选择器、类选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    /*元素选择器*/
    div{
      color: red;
    }
    /*id选择器，以#开头，id唯一*/
    #demo1{
      color: blue;
    }
    /*类选择器，以 . 开头*/
    .demo2{
      color: #ebb563;
    }
  </style>
</head>
<body>
  <div>元素选择器</div>
  <p id="demo1">id选择器，id唯一</p>
  <p class="demo2">类选择器</p>
  <p class="demo2">类选择器</p>
</body>
</html>

效果展示：

---子元素选择器、相邻选择器、群组选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    /*子元素选择器，用于选中某元素下的子元素，父子间有空格*/
    #father #son{
      color: red;
    }
    /*相邻选择器，用于选中相邻的、同级的、下一个元素*/
    #son+div{
      color: blue;
    }
    /*群组选择器，用于一组元素,元素之间逗号隔开，减少代码*/
    h3,span{
      color: #f54141;
    }
  </style>
</head>
<body>
  <div id="father">
    <p id="son">我是子元素，选我</p>
    <div>我是上个元素的兄弟</div>
  </div>
  <div>我是上个元素的叔叔</div>
  <h3>我们是一组的</h3>
  <span>我们是一组的</span>
</body>
</html>

效果展示：

来源：CSDN

作者：JustDI-CM

链接：https://blog.csdn.net/JustDI0209/article/details/104015131

标签

css选择器

前端入门

html代码

前端

charset

css