html style settings-Front-end Q&A-php.cn

HTML styling is an important part of creating a web design. HTML styles can adjust various aspects such as layout, color, font size and style, as well as achieve interactive special effects. This article will introduce the basic knowledge of HTML styling, from writing CSS style sheets to applying CSS styles in HTML elements, helping readers achieve their web design goals.

1. CSS Style Sheets

CSS refers to Cascading Style Sheets, which was proposed to solve the problem of confusion in HTML documents due to the lack of separation of presentation and content. of. CSS style sheets can be used to control the appearance of HTML elements by defining class, ID and tag selectors and other selectors to change the color, background, font size, line height, width, height and margins of HTML elements. Several common CSS style sheet operations will be introduced below.

How to create CSS files

We usually save the style sheet file as a CSS file, and the suffix of the file is .css. Here are the steps to create a style sheet file:

Create a text file by opening Notepad or other software that supports text editing.
Add the code of the style sheet on the first line of the file, namely the "
Copy after login

The above code Change the title text size to 36 pixels (font-size: 36px;), set the background color to yellow (background: yellow;), and set the text color to red (color: red;). These properties can be modified or removed to suit style, color, font, etc. needs.

Now, we have created a simple CSS style sheet file and defined values for CSS style properties. Next, we need to associate these style attributes with HTML elements to achieve style control of HTML elements.

Inline styling refers to applying style attributes to the "style" attribute inside the HTML element. This method is mainly used in Write CSS style code directly in the HTML document. This method is helpful for quickly adjusting the style of HTML elements. The following code is an example of an inline style:

In the above code, we will Set the background color to light gray (background-color: LightGray;), the large title color to dark blue (color: MediumBlue;), the title font size to 50 pixels (font-size: 50px;), and the subtitle Set the color to black (color: Black;) and the title font-size to 30 pixels (font-size: 30px;).

The internal style sheet method is to place the style sheet code in the "style" tag in the "head" tag of the HTML document , to modify the styles used by all HTML documents. This method is more flexible than inline styles and maintains the separation of HTML files and style sheets. The following code is an example of an internal style sheet:

内部样式表CSS设置

在上述代码中，我们将背景颜色设置为浅灰（body {background-color: LightGray;}），将大标题颜色设置为深蓝（h1 {color: MediumBlue;font-size: 50px;}），将标题字体大小设置为50像素（h1 {color: MediumBlue;font-size: 50px;}），并将小标题颜色设置为黑色（p {color: black;font-size: 30px;}），将标题字体大小设置为30像素（p {color: black;font-size: 30px;}）。

外部样式表是指在HTML文件中以CSS文件的形式链接到HTML文档的样式表，这种方式最好适用于大型网站或多个页面，对于一些共享设计风格的网站更为便捷。下面是示例代码：