Css 简明教程

CSS Tutorial

CSS 是用来设计网页或指定用 HTML 等标记语言编写的文档的外观的语言。CSS 帮助网络开发者控制网页的布局和其他视觉方面。

CSS is the language used to design the web pages or specifying the presentation of a document written in a markup language like HTML. CSS helps web developers to control the layout and other visual aspects of the web pages.

What is CSS?

CSS 表示 Cascading Style Sheets ,它是一种简单的设计语言,旨在使用 CSS 属性简化制作美观网页的过程。CSS 指定了如何将 HTML 元素显示在网页上。如果您将人体想象成一个网页,那么 CSS 就是给身体做造型的部分。比如眼睛的颜色,鼻子的尺寸,肤色等。

CSS stands for Cascading Style Sheets, it is a simple design language intended to simplify the process of making web pages presentable using CSS properties. CSS specify how an HTML element should be displayed on the web page. If you think of the human body as a web page then CSS is styling part of the body. Like color of the eyes, size of the nose, skin tone, etc.

Who should learn CSS?

本 CSS 教程专为渴望从初级到高级成为 Web 设计师和开发人员而设计。无论谁想成为 Web 开发人员,都必须具备 CSS 知识,有很多 CSS 框架,如 Bootstrap、Tailwind CSS 等。但作为 Web 开发人员必须具备 CSS 知识。

This CSS tutorial is designed for aspiring Web Designers and Developers from basics to advance. CSS knowledge is must whoever wants to be a web developer, there are a lot of CSS frameworks like Bootstrap, Tailwind CSS, etc. But having CSS knowledge is must as a web developer.

Types of CSS

CSS 中没有类型,它实际上指 -“我们可以用多少种方式使用 CSS?”因此,有三种方法可以在 HTML 文档中使用 CSS。

There is no types in CSS, it actually refer - "In how many ways we can use CSS?" So there are three ways to use CSS on HTML document.

  1. Inline CSS: Inline CSS are directly applied on the HTML elements and it is the most prioritize CSS amonth these three. This will override any external or internal CSS.

  2. Internal CSS: Internal CSS are defined in the HTML head section inside of <style> tag to let the browser know where to look for the CSS.

  3. External CSS: External CSS are defined in a separate file that contains only CSS properties, this is the recomended way to use CSS when you are working on projects. It is easy to maintain and multiple CSS files can be created and you can use them by improting it into your HTML document using HTML <link> tag.

CSS Code Example

在此示例中,我们将向您展示上述在 HTML 文档中使用 CSS 的方法。

Here in this example we will show you above mentioned ways to use CSS on an HTML document.

<!DOCTYPE html>
<html>

<head>
   <title>CSS Tutorial</title>
   <!-- Internal CSS -->
   <style>
       span{
           color: green;
       }
   </style>
   <!-- External CSS -->
   <link rel="stylesheet" href="/css/style.css">

</head>

<body>
   <h1><span>Tutorials</span>point</h1>

   <!-- Inline CSS -->
   <p style="font-weight: bold;
             margin-top: -15px;
             padding-left: 5px">
       Simple & Easy <span>Learning</span>
   </p>
</body>

</html>

External CSS File: 我们通过 <link> 标签将此文件导入到上面的代码中。并且文件名是 style.css 。上面的代码将在门户网站上遵循此文件的样式,您必须在本地创建文件并在您的系统上试用。

External CSS File: We are importing this file into the above code through <link> tag. And the file name is style.css. Above code will follow the style of this file on the portal you have to create files locally and try it on your system.

body {
     margin-left: 40%;
     margin-top: 40%;
}

Reason to use CSS

  1. Responsive Design: CSS offers features like media queries that enable developers to create responsive layouts that adapt to different screen sizes and devices, ensuring a consistent user experience.

  2. Flexibility and Control: CSS provides precise control over the presentation of HTML elements, allowing developers to customize layout, typography, colors, and other visual properties.

  3. Consistency and Reusability: Developers can ensure consistency across the entire website, by defining styles in a central CSS file. Styles can be reused across multiple pages, reducing redundancy and making updates easier.

  4. Search Engine Optimization (SEO): CSS can be used to structure content in a way that improves search engine visibility.

  5. Ease of Maintenance: Centralized CSS files make it easier to maintain and update styles across a website. Changes can be applied globally, ensuring uniformity and reducing the risk of inconsistencies.

  6. Faster Page Loading: External CSS files can be cached by browsers, resulting in faster page loading times for subsequent visits to a website. This caching mechanism reduces server load and bandwidth consumption.

Prerequisites to Learn CSS

在开始学习CSS之前,必须基本了解HTML或任何标记语言,熟悉计算机并具备文件或目录的基本操作知识。

Before start learning CSS, it is essential to have a basic understanding of HTML or any markup language and familiar with computer, and basic working knowledge with files or directory.

如果您不熟悉HTML和XHTML,我们建议您先学习我们的 * HTML* 或 * XHTML* 教程。

If you are new to HTML and XHTML, then we would suggest you to go through our HTML or XHTML Tutorial first.

Getting Started with CSS Tutorial

列出的以下主题是从基础到高级学习CSS时最重要的,完成这些主题后,您将能够根据您的需要修饰您的HTML文档。我们强烈建议您通过修改本教程中提供的代码来练习CSS。

Below listed topics are most improtant to learn in CSS from basics to advance, after completing these topics you will able to style your HTML document as you want. We highly recomend you to do practice with CSS by modifying the provided code in this tutorial.

CSS Basics

无论何时学习一项新事物,理解基础知识都很重要。因此,在深入学习CSS之前,请了解CSS的基本原理。

Understanding the basics is improtant whenever you are learning something new. So before diving deep into CSS please know fundamentals of CSS.

CSS Properties

CSS属性和选择器是CSS中的主要内容,如果没有这些属性,就无法定义任何HTML元素的样式。了解最常用的属性有助于您使用CSS。

CSS properties and selectors are the main thing in CSS, without the properties there is no ways to define the styling of any HTML element. So better to know most frequently used properties in one go will help you to work with CSS.

您可从随附的链接获取 * CSS Properties* 的完整列表。

You can get complete list of CSS Properties on the attached link.

CSS Advance

在完成上述两部分后,您可以继续本教程的高级部分,这些主题将帮助您制作实际网站布局。

After completing the above two section you can proceed with the advance part of this tutorial, these topics will helps you to make an actual website layout.

Frequently Asked Questions about CSS

关于CSS有一些常见问题(FAQ),此部分尝试对这些问题进行简要解答。

There are some very Frequently Asked Questions(FAQ) about CSS, this section tries to answer them briefly.