How to use css-Front-end Q&A-php.cn

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 tag within the tag of the HTML document.

For example:

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

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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>

Copy after login

External stylesheet

It is generally considered to link a CSS stylesheet to an HTML document using the 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.

Copy after login

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

.blue {
  color: blue;
}

.green {
  color: green;
}

Copy after login

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