介绍CSS基础语法和选择器常见类型 - WeTab学习笔记


篇WeTab学习笔记介绍了CSS的基础语法,包括选择器和属性,并介绍了CSS的三种写入方式。此外,还详细阐述了CSS的五种选择器类型,包括元素选择器、ID选择器、类选择器、属性选择器和伪类选择器,以及伪元素选择器的用法。

什么是CSS?

CSS是用于让网页元素变得漂亮并让网页布局更加灵活的一种技术,它可以改变网页中元素的颜色、大小、位置等样式,让网页看起来更好看,更有吸引力。通过CSS,开发人员可以将样式信息从HTML文档中分离出来,提高了代码的可维护性。

CSS基础语法

CSS的基础语法主要包括两个部分:选择器属性

选择器是指用于指定要应用样式的HTML元素的标识符,可以是元素的标签名、类名、ID名等等。

属性是指要应用的样式所包含的属性名和属性值,比如颜色、字体大小、边框样式等等。

CSS语法:

选择器 {
    属性1: 属性值1;
    属性2: 属性值2;
    …
    属性n: 属性值n;
}
.example {
  background-color: red;  //背景颜色设置为红色
  color: white;  //字体颜色设置为白色
}

CSS写入方式

CSS(层叠样式表)是用于在HTML文档中添加样式的一种语言。CSS有三种写入方式:

外部样式表:

把样式写在外部的CSS文件中,然后在HTML文档中通过link标签引入。这种方式适用于需要对多个网页使用同样的样式的情况。

/* style.css */
body {
  background-color: #f1f1f1;
}

h1 {
  color: red;
  text-align: center;
}

在HTML文件中,通过link标签引入:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

内部样式表:

把样式写在HTML文档的head标签中的style标签内。这种方式适用于需要对单个网页使用的样式。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f1f1f1;
    }

    h1 {
      color: red;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

内联样式:

在元素的style属性中直接定义样式。这种方式适用于需要对某个特定的元素应用样式的情况。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1 style="color: red; text-align: center;">Hello World</h1>
</body>
</html>

选择器

CSS选择器是用于选择HTML上的元素并为其应用样式的模式或模板。

元素选择器:

使用HTML元素名作为选择器,选择所有该元素类型的元素。

   p {
     color: red;
   }

ID选择器:

使用HTML元素的id属性的值作为选择器,选择该元素。id属性的值在整个HTML文档中应该是唯一的。

   #myDiv {
     background-color: blue;
   }

类选择器:

使用HTML元素的class属性的值作为选择器,选择属于该类的元素。class属性可以应用于多个元素,并且一个元素可以同时属于多个类。

   .myClass {
     font-weight: bold;
   }

属性选择器:

使用HTML元素的属性和属性值作为选择器。

   [title="example"] {
     color: orange;
   }

伪类选择器:

使用关键字和冒号来选择元素的特定状态。

   a:hover {
     color: green;
   }

伪元素选择器:

选择HTML元素的某个特定部分,并应用样式。伪元素用于在元素的某个位置上添加特定的样式,例如添加文本到元素的起始位置(:first-letter)或元素的结尾位置(:last-child)。

   h1::before {
     content: "Chapter: ";
   }


扫描二维码,在手机上阅读

推荐阅读:

详解for循环:概念、结构、四要素和应用场景 - WeTab学习笔记

HTML常用标签总结 - WeTab学习笔记

评 论