Table of contents
(1) Introduce external CSS in HTML
(2) Introduce external JavaScript in HTML
1. Introduction to HTML
HTML refers to Hyper Text Markup Language ( H yper Text Markup Language), markup language (markup language) is not a programming language, but a set of markup tags (markup tags) , markup tags to describe web pages
HTML -> Some tags that define web page elements, the tag manual click here: W3C_HTML5 .
Some commonly used HTML examples, click here: W3C_HTML examples .
// Page layout, form submission and other label content
//The composition of a front-end page: html (label) + css (style) + js (dynamic page) + pictures, etc.
(1) Introduce external CSS in HTML
When styles need to be applied to many pages, external style sheets can be used to change the appearance of the entire site by changing one file.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>(2) Introduce external JavaScript in HTML
JavaScript makes HTML pages more dynamic and interactive.
The HTML <script> tag is used to define client-side script (JavaScript). The <script> element can contain script statements, and can also point to an external script file through the src attribute .
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>2. Introduction to CSS
CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed .
CSS refers to Cascading Style Sheets ( C ascading Style Sheets ), which describes how to display HTML elements on screen, paper or other media, and external style sheets are stored in CSS files. // style for page rendering
CSS is used to define the style of web pages, including design and layout for different devices and screen sizes. Below is a sample CSS usage example:
<!DOCTYPE html>
<html>
<head>
<style> <!--CSS样式，也可以单独保存在一个文件中-->
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>我的第一个 CSS 实例</h1>
<p>这是一个段落。</p>
</body>
</html>For a reference manual on CSS styling, click here: W3C_CSS .
(1) Basic syntax of CSS
A CSS rule-set consists of selectors and declaration blocks:
- A selector points to an HTML element that needs to be styled.
- A declaration block contains one or more declarations separated by semicolons.
- Each declaration consists of a CSS property name and a value, separated by colons.
- Multiple CSS declarations are separated by semicolons, and blocks of declarations are enclosed in curly braces.
For example, all <p> elements will be center-aligned with a red text color:
p {
color: red;
text-align: center;
}
解释：
// p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：<p>）。
// color 是属性，red 是属性值
// text-align 是属性，center 是属性值(2) Three ways to use CSS
2.1 - Use of external CSS
By using an external style sheet, only one file can be modified to change the appearance of the entire website, and each HTML page must contain a reference to the external style sheet file in the <link> element of the head section .
For example, external styles are defined in <link> elements within the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head> <!--使用link标签进行引入*.css文件-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>External style sheets can be written in any text editor and must be saved with a .css extension. External .css files should not contain any HTML tags . " mystyle.css " looks like this:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}2.2 - Use of internal CSS
If an HTML page has a unique style, an internal style sheet can be used. Internal styles are defined in the <style> element in the head section .
For example, internal styles are defined in <style> elements within the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style> <!--内部css样式-->
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>2.3 - Inline CSS usage
Inline styles (also known as inline styles) can be used to apply unique styles to individual elements . To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS properties.
For example, inline styles are defined in the "style" attribute of the relevant element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>The front-end basic HTML and CSS styles are introduced here. The knowledge involved is some web page label elements and style design. It has little to do with programming. The focus is on familiarity with some common labels and the use of labels. The manual will do.
So far, the full text is over.