CSS 语法

2025年3月15日 | 阅读 9 分钟

CSS 为 HTML 元素提供样式，浏览器会解析这些样式。在浏览器解析后，CSS 样式属性将应用于 HTML 的所有元素。我们可以通过三个部分来为 HTML 元素提供样式属性。这三个部分如下。

1. 选择器

它是 HTML 标签。CSS 的所有样式属性都将应用于选择器。选择器标签如 <h1> 或 <table> 等。

2. 属性

它是一种存在于 HTML 标签中的属性。HTML 的所有属性都将转换为 CSS 属性。CSS 属性如 color, border 等。

3. 值

在 HTML 中，它们被分配给属性。例如，color 属性的值可以是 red 或 #F1F1F1 等。

语法

我们必须以正确的方式为 HTML 元素提供 CSS 属性。我们必须遵循以下语法来实现 CSS 属性。

示例

让我们通过示例来实现 CSS 属性。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  /* styles.css */

body {
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 0;
 background-color: #f2f2f2;
}

#header {
 background-color: #333;
 color: white;
 text-align: center;
 padding: 20px;
}

h1 {
 font-size: 36px;
 margin-bottom: 20px;
}

p {
 font-size: 18px;
 margin-bottom: 10px;
}

.button {
 background-color: #ff0000;
 color: white;
 padding: 10px 20px;
 border: none;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 border-radius: 5px;
 cursor: pointer;
}

.button:hover {
 background-color: #990000;
}

 </style>
</head>
<body>
 <div id="header">
  <h1>Hello, CSS Example!</h1>
  <p>Welcome to javaTpoint. Here is a styled button:</p>
  <button class="button">Click Me!</button>
 </div>
</body>
</html>

执行代码

输出

说明

在上面的示例中，我们提供了一些 CSS 样式。让我们解释一下我们在上面示例中所做的事情。

在上面的示例中，有一个 body 标签。在 body 标签中，我们设置了整个页面的字体、边距、内边距和背景颜色。
此外，还有一个 #header 选择器。在 #header 选择器中，我们设置了头部区域的背景颜色、文本颜色、文本对齐和内边距。
在 h1 选择器中，我们为主标题设置了字体大小和边距。
在 p 选择器中，我们为段落设置了字体大小和边距。
我们在 button 选择器中为按钮设置了红色背景、白色文本颜色、内边距、边框和其他属性。
在 .button:hover 选择器中，我们设置了鼠标悬停时背景颜色的变化，使其呈现更深的红色。

类型选择器

这种类型的选择器在上面的示例中可以看到。让我们再举一个例子，它为所有标题标签提供红色。

示例

/* Targets all <h1> to <h6> elements and makes the text red */
h1, h2, h3, h4, h5, h6 {
  color: red;
}

通用选择器

借助通用选择器，我们可以为整个网页提供样式属性。让我们通过示例来理解这一点。

示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  /* Universal Selector to apply styles to all elements */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: Arial, sans-serif;
 line-height: 1.6;
 background-color: #f0f0f0;
}

header {
 background-color: #333;
 color: #fff;
 padding: 10px;
}

header h1 {
 margin: 0;
}

nav ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

nav li {
 display: inline-block;
 margin-right: 20px;
}

nav a {
 color: #fff;
 text-decoration: none;
}

main {
 padding: 20px;
}

section {
 margin-bottom: 30px;
}

footer {
 background-color: #333;
 color: #fff;
 padding: 10px;
 text-align: center;
}

footer p {
 margin: 0;
}

 </style>
</head>
<body>
 <header>
  <h1>Welcome to javatpoint</h1>
  <nav>
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <section>
   <h2>Section 1</h2>
   <p>This is the content of Section 1.</p>
  </section>
  <section>
   <h2>Section 2</h2>
   <p>This is the content of Section 2.</p>
  </section>
 </main>
 <footer>
  <p>© All rights reserved.</p>
 </footer>
</body>
</html>

执行代码

输出

说明

在上面的代码中，我们实现了通用选择器。它用“*”表示。借助通用选择器，我们设置了边距、内边距和 box-sizing。

后代选择器

当需要为另一个标签内的元素提供样式属性时，我们必须借助后代选择器。

语法

parentElement childElement {
  /* Styles applied to child elements */
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  /* Style the main menu items */
.menu > li {
 display: inline-block;
 margin-right: 20px;
}

.menu > li > a {
 text-decoration: none;
 color: #333;
 font-size: 18px;
}

.menu > li > a:hover {
 color: #f3727b; /* Beautiful pinkish color on hover */
}

/* Style the sub-menu items */
.sub-menu {
 display: none;
 position: absolute;
 background-color: #f7f7f7; /* Light gray background */
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.menu > li:hover .sub-menu {
 display: block;
}

.sub-menu li {
 padding: 10px;
}

.sub-menu li a {
 color: #666;
 text-decoration: none;
 display: block;
}

.sub-menu li a:hover {
 color: #f3727b; /* Beautiful pinkish color on hover */
}

 </style>
</head>
<body>
 <nav>
  <ul class="menu">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a>
    <ul class="sub-menu">
     <li><a href="#">Mission</a></li>
     <li><a href="#">Vision</a></li>
     <li><a href="#">Values</a></li>
    </ul>
   </li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Contact</a></li>
  </ul>
 </nav>
 
</body>
</html>

执行代码

输出

说明

在上面的代码中，我们创建了一个包含嵌套菜单的水平导航栏。当鼠标悬停在任何菜单上时，颜色都会改变。

类选择器

在此选择器中，我们必须根据类名提供样式属性。所有具有相同类名的元素都将根据 CSS 样式属性进行格式化。

语法

.className {
  /* Styles applied to elements with the class "className" */
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .card {
 border: 1px solid #ccc;
 border-radius: 10px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 max-width: 300px;
 margin: 20px;
 overflow: hidden;
}

.card img {
 width: 100%;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
}

.card-content {
 padding: 20px;
}

.card-title {
 font-size: 24px;
 color: #333;
 margin: 0;
}

.card-text {
 color: #666;
}

.card-link {
 display: inline-block;
 background-color: #f3727b;
 color: #fff;
 padding: 10px 20px;
 border-radius: 5px;
 text-decoration: none;
 margin-top: 10px;
}

.card-link:hover {
 background-color: #ff8f9c; /* Slightly lighter shade on hover */
}

 </style>
</head>
<body>
 <div class="card">
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/1024px-Flag_of_India.svg.png" alt="Indian flag">
  <div class="card-content">
   <h3 class="card-title">Flag_of_India</h3>
   <p class="card-text">Indian flag</p>
   <a href="#" class="card-link">Read More</a>
  </div>
 </div>
 
</body>
</html>

执行代码

输出

说明

在上面的代码中，我们创建了一个精美的卡片，其中包含有关印度国旗的信息。`.card` 类样式化了整个卡片容器，而 `.card img` 对卡片内的图像应用样式。`.card-content` 目标是卡片内容的容器，而 `.card-title`、`.card-text` 和 `.card-link` 则样式化了卡片内容中的各个元素。

ID 选择器

借助 ID 选择器，我们可以根据 ID 属性提供 CSS 样式。所有具有相同 ID 名称的元素都将根据 CSS 样式属性进行格式化。

语法

#your-id-value {
  /* CSS properties and values go here */
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  /* Style for the button container */
#button-container {
 text-align: center;
 margin-top: 50px;
}

/* Style for the beautiful button */
#my-beautiful-button {
 background-color: #ff69b4;
 color: #fff;
 padding: 10px 20px;
 font-size: 18px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Hover effect */
#my-beautiful-button:hover {
 background-color: #e35a9f;
}

/* Click effect */
#my-beautiful-button:active {
 background-color: #c23d85;
}

 </style>
</head>
<body>
 <div id="button-container">
  <button id="my-beautiful-button">Click me!</button>
 </div>
</body>
</html>

执行代码

输出

说明

我们在上面的代码中创建了一个带有点击和悬停效果的粉色按钮。该按钮位于 center 标签内。当我们将鼠标悬停在按钮上时，div 标签的背景颜色会略微变为更深的粉色。

子选择器

之前我们已经看到了后代选择器。CSS 中还有另一种类型的选择器，即子选择器。它与后代选择器相比具有不同的功能。子选择器使用“>”符号来定位作为另一个元素直接后代的元素。

语法

parent-element > child-element {
  /* CSS properties and values go here */
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* Style for the main menu */
.main-menu {
 background-color: #333;
 padding: 10px;
}

.main-menu ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

.main-menu li {
 display: inline-block;
 margin-right: 20px;
}

.main-menu a {
 color: #fff;
 text-decoration: none;
 padding: 5px 10px;
 transition: background-color 0.3s ease;
}

/* Style for the direct child sub-menu items */
.main-menu .sub-menu > ul {
 background-color: #ff69b4;
 padding: 10px;
 display: none;
 position: absolute;
}

.main-menu .sub-menu:hover > ul {
 display: block;
}

.main-menu .sub-menu > ul li {
 margin-bottom: 5px;
}

.main-menu .sub-menu > ul li a {
 color: #fff;
 text-decoration: none;
 padding: 5px;
}

.main-menu .sub-menu > ul li a:hover {
 background-color: #e35a9f;
}

  </style>
</head>
<body>
  <nav class="main-menu">
    <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li class="sub-menu">
      <a href="#">Services</a>
      <ul>
       <li><a href="#">Web Design</a></li>
       <li><a href="#">Graphic Design</a></li>
       <li><a href="#">SEO</a></li>
      </ul>
     </li>
     <li><a href="#">Contact</a></li>
    </ul>
   </nav>
</body>
</html>

执行代码

输出

说明

在上面的代码中，我们创建了一个包含服务子菜单的导航菜单。借助子选择器，子菜单项的样式与主菜单项不同。当用户将鼠标悬停在“服务”菜单项上时，将显示包含“网页设计”、“平面设计”和“SEO”选项的子菜单，并带有漂亮的粉色背景。

属性选择器

借助此属性，我们可以将样式属性应用于属性。

语法

[attribute^= "value"] {
  /* Styles for elements with the specified attribute starting with the value */
}

我们在实现属性选择器时必须遵循一些规则。它们如下。

p[lang]: 它可以选择带有 lang 属性的所有段落。
p[lang= "fr"]: 它可以选择带有 lang 属性的所有段落，并且 lang 属性的值应完全为“fr”。
p[lang~= "fr"]: 它可以选择带有 lang 属性的所有段落，并且 lang 属性应包含单词“fr”。
p[lang|= "en"]: 它可以选择带有 lang 属性的所有段落，并且 lang 属性应包含“en”或以“en-”开头。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* Style for the gallery container */
.gallery {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 10px;
}

/* Style for all images in the gallery */
img {
 max-width: 100%;
 height: auto;
 border-radius: 5px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Style for images with specific "data-category" attribute */
img[data-category="nature"] {
 border: 2px solid #4caf50;
}

img[data-category="cityscape"] {
 border: 2px solid #2196f3;
}

img[data-category="beach"] {
 border: 2px solid #ff9800;
}

img[data-category="mountains"] {
 border: 2px solid #9c27b0;
}

  </style>
</head>
<body>
  <div class="gallery">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg" alt="Nature" data-category="nature">
    <img src="https://images.unsplash.com/photo-1514565131-fce0801e5785?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Y2l0eXNjYXBlfGVufDB8fDB8fHww&w=1000&q=80" alt="Cityscape" data-category="cityscape">
    <img src="data:image/jpeg;base64,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" alt="Beach" data-category="beach">
    <img src="https://cdn.cdnparenting.com/articles/2018/08/602444213-H-1024x700.webp" alt="Mountains" data-category="mountains">
   </div>
</body>
</html>

执行代码

输出

说明

在上面的代码中，我们创建了一个图像库。然后，使用属性选择器，我们根据图像的“data-category”属性为它们添加了不同颜色的边框。类别为“nature”的图像将具有绿色边框，“category =“ cityscape”将具有蓝色边框，“category =“ beach”将具有橙色边框，而“category =“ mountains”将具有紫色边框。

多个样式规则

通过此，我们必须为单个元素定义多个样式。我们必须在单个单元内定义所有相应的规则和值。在这里，我们必须用分号 (;) 分隔所有属性。

示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  /* Global style rule for all text elements */
body {
 font-family: Arial, sans-serif;
 line-height: 1.6;
 color: #333;
}

/* Specific style rule for elements with class "heading" */
.heading {
 font-size: 36px;
 font-weight: bold;
 color: #007bff;
}

/* Specific style rule for elements with class "content" */
.content {
 font-size: 18px;
 margin-bottom: 20px;
}

/* Specific style rule for elements with class "btn" */
.btn {
 background-color: #007bff;
 color: #fff;
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
}

/* Hover effect for buttons */
.btn:hover {
 background-color: #0056b3;
}

 </style>
</head>
<body>
 <body>
 <h1 class="heading">Hello, World!</h1>
 <p class="content">Welcome to javaTpoint</p>
 <button class="btn">Click Me</button>
</body>
</body>
</html>

执行代码

输出

下一主题CSS 选择器

CSS 语法

1. 选择器

2. 属性

3. 值

语法

示例

代码

类型选择器

通用选择器

示例

后代选择器

示例

类选择器

示例

ID 选择器

示例

子选择器

示例

属性选择器

示例

多个样式规则

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 语法

1. 选择器

2. 属性

3. 值

语法

示例

代码

类型选择器

通用选择器

示例

后代选择器

示例

类选择器

示例

ID 选择器

示例

子选择器

示例

属性选择器

示例

多个样式规则

示例

相关帖子

内联 CSS

如何添加 CSS

内部 CSS

CSS 水平对齐

CSS 注释

什么是 CSS

外部 CSS

CSS 选择器

CSS 教程

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器