Home > Article > Web Front-end > How to use css

How to use css

WBOYOriginal: 2023-05-29 09:42:37714browse

CSS (Cascading Style Sheets, Cascading Style Sheets) is a style sheet language used for HTML (Hypertext Markup Language, Hypertext Markup Language) documents. CSS can make the appearance of web pages more beautiful and clear, and improve the readability and maintainability of web pages.

CSS style sheets usually include three parts: selectors, attributes and values. The selector specifies the HTML element to which the style is to be applied, the attribute defines the style to be applied to the element, and the value specifies the specific value of the attribute.

Let’s learn more about how to use CSS.

Create a CSS style sheet

First, we need to create a CSS style sheet for the HTML document. Usually, we store the CSS style sheet in a separate .css file and introduce it through the 2cdf5bf648cf2f33323966d7f58a7f3f tag within the 93f0f5c25f18dab9d176bd4f6de5d30e tag of the HTML document.

For example:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Selector

A selector is an identifier that specifies the HTML element to which the CSS rule applies. Common selectors include:

Tag name selector: Use the tag name of the HTML element to specify the element. For example: p, h1, div, etc.
Class selector: Start with ".", followed by the class name. For example: .class1, .class2.
ID selector: starts with "#", followed by the ID name. For example: #id1, #id2.
Attribute selector: Specify elements based on the attributes of HTML elements. For example: [attribute], [attribute=value], etc.
Pseudo-class selector: used to specify certain special element states. For example: :hover, :focus, etc.

Example:

/* 标签名选择器 */
p {
  color: blue;
}

/* 类选择器 */
.red {
  color: red;
}

/* ID选择器 */
#green {
  color: green;
}

/* 属性选择器 */
[class="yellow"] {
  color: yellow;
}

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

Attributes

The attribute specifies the style of the HTML element to which the CSS rule applies. Common attributes include:

color: text color.
background-color: background color.
font-size: font size.
font-family: Font type.
font-weight: Font weight.
text-align: Text alignment.
margin: Margin.
padding: padding.
border: border.

Example:

/* 文本颜色 */
p {
  color: blue;
}

/* 背景颜色 */
body {
  background-color: #eee;
}

/* 字体大小、字体类型、字体粗细 */
h1 {
  font-size: 32px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* 文本对齐方式 */
div {
  text-align: center;
}

/* 外边距、内边距 */
.box {
  margin: 10px;
  padding: 20px;
}

/* 边框 */
.img {
  border: 1px solid black;
}

Value

The value is the specific value of the attribute. The range of possible values for a property depends on the property's type. For example, colors can use predefined color names (like "red", "blue", etc.) or use hexadecimal or RGB values (like "#ff0000", "rgb(255,0,0)", etc.).

Example:

/* 颜色 */
p {
  color: blue;
}

/* 背景颜色 */
body {
  background-color: #eee;
}

/* 字体大小、字体类型、字体粗细 */
h1 {
  font-size: 32px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* 文本对齐方式 */
div {
  text-align: center;
}

/* 外边距、内边距 */
.box {
  margin: 10px;
  padding: 20px;
}

/* 边框 */
.img {
  border: 1px solid black;
}

Inheritance

Styles in CSS can be inherited. For example, we can set a font attribute for all paragraphs in an HTML document, and the values of these attributes can be automatically inherited by the text contained in each paragraph.

Example:

/* 字体 */
body {
  font-family: Arial, sans-serif;
}

Cascading

When multiple CSS rules are applied to the same HTML element, they cascade. This means that some rules have a higher priority and take precedence over other rules. The cascading principle used in CSS is:

Style specificity: Simply put, it is the complexity of the selector.
File order: later rules override earlier rules.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 优先级为1，文件顺序为1 */
    p {
      color: red;
    }
  </style>
  <style>
    /* 优先级为10，文件顺序为2 */
    .green {
      color: green;
    }
  </style>
  <style>
    /* 优先级为100，文件顺序为3 */
    #blue {
      color: blue;
    }
  </style>
</head>
<body>
  <p class="green" id="blue">This text is blue.</p>
</body>
</html>

External stylesheet

It is generally considered to link a CSS stylesheet to an HTML document using the 2cdf5bf648cf2f33323966d7f58a7f3f tag is best practice. This has the following benefits:

Cacheable: The browser can cache the CSS style sheet for loading next time.
Maintainability: Styles can be edited and maintained in separate files.
Cross-browser support: By using external style sheets, you can ensure style consistency across different browsers.
Applicability: The same style can be applied to multiple pages to ensure consistency.

Example:



<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

  This text is red.
  This text is blue.
  This text is green.

/* style.css */
.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

Internal stylesheet

Sometimes, saving a CSS stylesheet into an HTML document can improve page load speed. If the style sheet applies only to the current page, you can place the style sheet in a c9ccee2e6ea535a969eb3f532ad9fe89 tag within the 93f0f5c25f18dab9d176bd4f6de5d30e tag.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 内部样式表 */
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This text is red.</p>
</body>
</html>

Inline Styles

Inline styles are a way to apply CSS rules directly to HTML elements. Use the "style" attribute in HTML tags as a place to enter CSS.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Inline Style Example</title>
</head>
<body>
  <p style="color: red; font-size: 20px;">This text is red and 20px font size.</p>
</body>
</html>

CSS Box Model

The CSS box model is a method of creating and laying out boxes in an HTML document. A box is a rectangular area of an HTML element that can contain other HTML elements.

The CSS box model consists of the following parts:

Content
Padding
Border
Margin

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      padding: 20px;
      border: 10px solid black;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="box">This is a box.</div>
</body>
</html>

Summary

CSS is an important part of making web pages. By using CSS, we can easily control the style and layout of HTML elements. . We can define CSS rules using selectors, properties, values, inheritance, cascading, external style sheets, internal style sheets, and inline styles, and create and layout boxes using the CSS box model. Being proficient in the use of CSS can not only improve the efficiency of web development, but also create better-looking, easier-to-read, and easier-to-maintain web pages.

The above is the detailed content of How to use css. For more information, please follow other related articles on the PHP Chinese website!

css html 标识符继承 Attribute 选择器样式表外边距内边距 margin padding border 伪类 background

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：what is cssNext article：what is css

See more

How to use css

Related articles