CSS三种创建和六种选择器

发表于前端技术学习版块 css,教程

CSS是一种用于网页设计的风格表语言。CSS可以使网页外观变得优美，而且还能改善网页的可访问性和交互性。CSS有三种创建方式：内部样式表、外部样式表和内联样式表。内部样式表是在<head

CSS是一种用于网页设计的风格表语言。CSS可以使网页外观变得优美，而且还能改善网页的可访问性和交互性。CSS有三种创建方式：内部样式表、外部样式表和内联样式表。内部样式表是在<head>标签内部添加<style>标签，然后编写CSS样式代码；外部样式表是把样式代码单独放在一个CSS文件中，通过<link>标签将其引入HTML文件；内联样式表是在HTML标签上直接添加样式，如<p style="color:red">。

除了创建方式，CSS还有六种选择器：元素选择器、ID选择器、类选择器、伪类选择器、属性选择器和后代选择器。元素选择器指定一个或多个HTML元素作为选择器的对象，如<p>、<div>等；ID选择器指定一个元素的ID属性作为选择器的对象，如<div id="container">；类选择器指定一个或多个元素的类名作为选择器的对象，如<div class="container">；伪类选择器指定一个元素的某个状态作为选择器的对象，如:hover、:first-child等；属性选择器指定一个元素的某个属性作为选择器的对象，如[target]、[href$=".pdf"]等；后代选择器指定一个元素的后代元素作为选择器的对象，如.container p{}。

/* 内部样式表 */
<head>
  <style>
    body {
      background-color: #f2f2f2;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: blue;
    }
  </style>
</head>

/* 外部样式表 */
<head>
  <link rel="stylesheet" href="style.css">
</head>

/* 内联样式表 */
<p style="color:red">Hello, world!</p>

/* 元素选择器 */
p {
  font-size: 14px;
}

/* ID选择器 */
#container {
  width: 960px;
  margin: 0 auto;
}

/* 类选择器 */
.intro {
  font-style: italic;
}

/* 伪类选择器 */
a:hover {
  color: red;
}

/* 属性选择器 */
input[type="text"] {
  border: 1px solid #ccc;
}

/* 后代选择器 */
.container p {
  margin-bottom: 10px;
}

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。