CSS的基础语法和常见的语法简单归纳

CSS

CSS 是层叠样式表（Cascading Style Sheets）的缩写。它是一种用来控制网页样式和布局的标记语言。通过 CSS，可以定义网页中的元素（如文字、图像、链接等）的外观和排版方式，包括字体、颜色、大小、间距、边框等。CSS 的设计目标是将内容和样式分离，使得网页的结构和表现分离开来，使得修改样式不需要修改 HTML 结构，这样可以提高网页的灵活性和可维护性。

CSS的常见语法

选择器，属性和值

/* 选择器 */
h1 {/* 属性: 值 */color: blue;font-size: 24px;font-family: Arial, sans-serif;
}p {color: green;font-size: 16px;line-height: 1.5;
}

h1 和 p 是选择器，它们指定了要应用样式的 HTML 元素类型。
在大括号 {} 内部，列出了一系列的属性-值对，每个属性定义了要应用的样式特性，值则指定了该特性的具体取值。
在这个例子中，color 属性指定了文本颜色，font-size 指定了字体大小，font-family 指定了字体系列，line-height 指定了行高。
CSS 的规则是通过选择器选择 HTML 元素，并应用这些元素的样式。这种选择器可以基于元素类型、类名、ID 等来进行。

类选择器（Class Selector）通过类名选择元素。

/* CSS */
.button {background-color: blue;color: white;padding: 10px 20px;
}/* HTML */
<button class="button">Click Me</button>

ID 选择器（ID Selector）：通过元素的 ID 来选择元素。

/* CSS */
#header {font-size: 24px;color: red;
}/* HTML */
<div id="header">Welcome!</div>

子元素选择器（Child Selector）：选择某个元素的直接子元素。

/* CSS */
ul > li {color: green;
}/* HTML */
<ul><li>Item 1</li><li>Item 2</li>
</ul>

伪类（Pseudo-class）：为元素的特定状态（如鼠标悬停、被点击等）设置样式。

/* CSS */
a:hover {color: red;
}/* HTML */
<a href="#">Hover over me</a>

组合选择器（Combination Selector）：将多个选择器组合在一起，以便选择同时满足多个条件的元素。

/* CSS */
h1.special {color: blue;
}/* HTML */
<h1 class="special">Special Heading</h1>

属性选择器（Attribute Selector）：选择具有特定属性值的元素。

/* CSS */
input[type="text"] {border: 1px solid black;
}/* HTML */
<input type="text" placeholder="Enter your name">

伪元素（Pseudo-element）：为元素的特定部分（如首行、首字母、内容前后等）设置样式。

/* CSS */
p::first-line {font-weight: bold;
}/* HTML */
<p>This is a paragraph.</p>

相邻兄弟选择器（Adjacent Sibling Selector）：选择紧接在另一个元素后的元素。

/* CSS */
h2 + p {color: blue;
}/* HTML */
<h2>Title</h2>
<p>This paragraph will be styled because it comes immediately after an h2 element.</p>

通用选择器（Universal Selector）：选择所有元素。

/* CSS */
* {margin: 0;padding: 0;
}/* This will apply to all elements in the document */

后代选择器（Descendant Selector）：选择元素的后代元素。

/* CSS */
ul li {color: red;
}/* HTML */
<ul><li>Item 1</li><li>Item 2</li>
</ul>

组合子元素选择器（Adjacent Sibling Selector）：选择元素的直接子元素。

/* CSS */
div > p {font-weight: bold;
}/* HTML */
<div><p>This paragraph will be styled.</p><span>This span will not be styled.</span>
</div>

交集选择器（Intersection Selector）：同时匹配多个条件。

/* CSS */
button.primary {background-color: blue;
}/* HTML */
<button class="primary">Submit</button>

选择器组合（Selector Grouping）：选择器之间使用逗号分隔，以便一次性为多个选择器设置相同的样式。

/* CSS */
h1, h2, h3 {color: red;
}/* HTML */
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

举个例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS选择器示例</title><style>/* 后代选择器 */div p {color: blue;}/* 组合子元素选择器 */div > span {font-weight: bold;}/* 交集选择器 */button.primary {background-color: green;color: white;padding: 10px 20px;border: none;border-radius: 5px;}/* 选择器组合 */h1, h2, h3 {font-family: Arial, sans-serif;}</style>
</head>
<body><div><p>This paragraph will be styled with blue color.</p><span>This span will have bold font weight.</span></div><button class="primary">Submit</button><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3>
</body>
</html>

在这里插入图片描述

将 CSS 样式规则分开成一个单独的 .css 文件

/* style.css *//* 后代选择器 */
div p {color: blue;
}/* 组合子元素选择器 */
div > span {font-weight: bold;
}/* 交集选择器 */
button.primary {background-color: green;color: white;padding: 10px 20px;border: none;border-radius: 5px;
}/* 选择器组合 */
h1, h2, h3 {font-family: Arial, sans-serif;
}

假设上述css文件为style.css文件，编写html文件

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS选择器示例</title><!-- 引入外部 CSS 文件 --><link rel="stylesheet" href="style.css">
</head>
<body><div><p>This paragraph will be styled with blue color.</p><span>This span will have bold font weight.</span></div><button class="primary">Submit</button><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3>
</body>
</html>