html style settings

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.

1. 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 "c9ccee2e6ea535a969eb3f532ad9fe89" tag and the "/style>" tag.
• Add CSS style sheet code between tags, which can be selectors such as classes, IDs, and tags, and other CSS style attributes.
• In the CSS file, there should be a curly bracket between each selector and its corresponding style attribute to indicate the relationship.
• After completing the definition of CSS styles, we should save the CSS file as a .css file and link it to the HTML document.

2. CSS style sheet comments

The role of CSS style sheet comments is to facilitate developers to explain and describe when maintaining code. CSS style sheet comments start with / and end with /. The following example:

/*This is a line of comments
This is the second line of comments*/

3. Basic operations of CSS style sheets

CSS The writing of style sheets is based on the basic operations of selectors and attributes, such as:

• Selectors: CSS style sheets use specific symbols to select HTML elements to be modified, such as class selectors ("." ) and ID selector ("#"), etc.
• Attributes: CSS style sheets use attributes to define the style of HTML elements, such as "font-size", "color" and "background" attributes.

The following code demonstrates a basic HTML element style adjustment, which is the title:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
< ;head>

<title>CSS样式表调整标题样式的例子</title>
<style>
    h1 {
        color: red;
        font-size: 36px;
        background: yellow;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>这是一级标题</h1>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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.

2. CSS style sheet applied to HTML elements

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.

1. Inline styling (inline styling)

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:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>内嵌样式CSS设置</title>

9c3bca370b5104690d9ef395f2c5f8d1
75b561857b53372bf8fa3e38343e4252

<h1 style="color: MediumBlue; font-size: 50px;">大标题</h1>
<p style="color: Black; font-size: 30px;">小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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;).

2. Internal style sheet (internal styling)

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:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>内部样式表CSS设置</title>
<style>
    body {
        background-color: LightGray;
    }
    h1 {
        color: MediumBlue;
        font-size: 50px;
    }
    p {
        color: black;
        font-size: 30px;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>大标题</h1>
<p>小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

在上述代码中，我们将背景颜色设置为浅灰（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;}）。

3. 外部样式表（external styling）

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

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>外部样式表CSS设置</title>
<link rel="stylesheet" type="text/css" href="style.css">

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>大标题</h1>
<p>小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

在上述代码中，我们通过c29ea0143d4a2d5dc6725f7851494a02属性将外部样式表链接到HTML文档，这包含了全部HTML文档所用到的样式定义。样式表文件的代码如下：

body {

background-color: LightGray;

}
h1 {

color: MediumBlue;
font-size: 50px;

}
p {

color: black;
font-size: 30px;

}

以上就是HTML样式设置的基础知识，包括创建和使用CSS样式表的不同方法。通过这些基本操作，我们可以对网页的排版、字体、颜色和特效等方面进行控制，创造出各种个性化的网页设计。

The above is the detailed content of html style settings. For more information, please follow other related articles on the PHP Chinese website!