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 " " 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. 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*/

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:

&lt ;head>

CSS样式表调整标题样式的例子 h1 { color: red; font-size: 36px; background: yellow; } Copy after login

这是一级标题 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.

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.

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:

内嵌样式CSS设置 Copy after login

大标题 小标题

Copy after login

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

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:

内部样式表CSS设置 body { background-color: LightGray; } h1 { color: MediumBlue; font-size: 50px; } p { color: black; font-size: 30px; } Copy after login

大标题 小标题

Copy after login Copy after login

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

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

外部样式表CSS设置 Copy after login

大标题 小标题

Copy after login Copy after login

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

body {

background-color: LightGray; Copy after login } h1 {

color: MediumBlue; font-size: 50px; Copy after login } p {

color: black; font-size: 30px; Copy after login }

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