CSS课程初学者指南

Imagine you're designing a web page. You want a group of headings to have a large red text, a group of buttons to have a medium white text, and a group of paragraphs to have a small blue text.

Bold choices. But, thanks to CSS classes, you can do exactly that. CSS classes enable you to apply unique style properties to groups of HTML elements to achieve your desired web page appearance.

在这篇文章中，我们将介绍您需要知道的基本术语，例如CSS类，类选择器和CSS特异性。我们还将介绍如何在CSS中创建类并使用它来设计您的网页。

什么是CSS课程？

A CSS class is an attribute used to define a group of HTML elements in order to apply unique styling and formatting to those elements with CSS.

让我们看看CSS课程如何工作的示例。下面，我们有一个简单的HTML页面，带有三个标题（H2元素s) and three paragraphs (p元素）。

请注意，第二个标题，第三标题和最终段落的样式与其他段落的样式不同 - 这是因为这些元素已分配了类bright。Looking at the CSS, we see the。brightselector, which applies its style rules to all elements with the attributeclass =“明亮”。

看到笔css class: heading example克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot) onCodepen。

You can use CSS classes to group HTML elements and then apply custom styles to them. You can make classes and apply them to text, buttons,spans and divs, tables, images, or just about any other page element you can think of. Let’s now take a closer look at how we can use CSS classes to style page elements.

How to Create a Class in CSS

Let’s try making a CSS class from scratch. Say you want to make a paragraph of text and style certain words for more emphasis. You can do this by creating a CSS class for these special words, then assigning this class to individual words withspantags.

Start by writing out the HTML elements you want to style. In this case, it’s a paragraph of text:


Our marketing software and service platform provide you with the tools you need to engage visitors, convert them to leads, and win them over as customers.

我也放了围绕我们很快使用CSS课程样式的单词标记。

Next, let's add class attributes to thesetags. To do so, add the attributeclass =“名称”到目标元素的开头标签，然后替换姓名with a unique identifier for the class.

图表显示如何创建CSS类

图像源

In our example, the HTML looks like this:


Our marketing software and service platform provide you with the tools you need to engage visitors, convert them to leads, and win them over as customers.

Here we’ve added two CSS classes to ourspantags:orange-textandblue-text。

Lastly, you need to create rule sets for these classes in CSS. We do this using CSS class selectors and declaration blocks.

CSS中的类选择器是什么？

In CSS, a class selector is formatted as a period (.) character followed by the name of the class. It selects all elements with that class attribute so that unique CSS declarations can be applied to those specific elements without affecting other elements on the page.

In our example, we’ll create declaration blocks for both of our CSS classes with the selectors.Orange-Textand。blue-text：


/* declaration for our first CSS class */
.Orange-Text{
颜色为橙色;
font-weight: bold;
}

/* declaration for our second CSS class */
。blue-text {
color: blue;
font-weight: bold;
}

当我们对HTML和CSS,我们看看our CSS classes target certain elements with our custom styling:

看到笔css class: span example克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot) onCodepen。

Note that the class attribute doesn't change the content or style of the HTML document by itself. Meaning, simply adding a class attribute to an element without any CSS will not change the appearance or formatting of the element on the front end. You need to assign CSS rules to the class to see any change.

It also helps to create class names that describe the element in the class. In the above example, we used the names.Orange-Textand。blue-text因为我们是creating colorful text。These names are descriptive enough that someone just reading the CSS would understand the purpose of the class.

Class names can be one or multiple words. If your class name is multiple words, use hyphens where you would put spaces. Also, it’s common practice to write class names in lowercase. Some examples of class names include。bright-blueand。fancy-text。